diff --git a/.gitignore b/.gitignore index af654bf201..a8f6240c51 100644 --- a/.gitignore +++ b/.gitignore @@ -49,3 +49,5 @@ demos/src/**/*.ngfactory.ts demos/src/**/*.d.ts demos/src/**/*.metadata.json demos/src/**/*.css.shim.ts +core/css/ +angular/css/ diff --git a/.scripts/build.js b/.scripts/build.js new file mode 100644 index 0000000000..c8202cae00 --- /dev/null +++ b/.scripts/build.js @@ -0,0 +1,15 @@ +const common = require('./common'); +const Listr = require('listr'); + + +async function main() { + const tasks = []; + common.packages.forEach(package => { + common.preparePackage(tasks, package); + }); + + const listr = new Listr(tasks, { showSubtasks: true }); + await listr.run(); +} + +main(); \ No newline at end of file diff --git a/.scripts/common.js b/.scripts/common.js index 7c7e34abc8..f75075ba78 100644 --- a/.scripts/common.js +++ b/.scripts/common.js @@ -3,6 +3,7 @@ const path = require('path'); const execa = require('execa'); const Listr = require('listr'); const semver = require('semver'); +const chalk = require('chalk'); const rootDir = path.join(__dirname, '../'); @@ -62,12 +63,107 @@ function checkGit(tasks) { const isValidVersion = input => Boolean(semver.valid(input)); +function preparePackage(tasks, package, version) { + const projectRoot = projectPath(package); + const pkg = readPkg(package); + + const projectTasks = []; + if (version) { + projectTasks.push({ + title: `${pkg.name}: validate new version`, + task: () => { + if (!isVersionGreater(pkg.version, version)) { + throw new Error(`New version \`${version}\` should be higher than current version \`${pkg.version}\``); + } + } + }); + } + + + projectTasks.push({ + title: `${pkg.name}: install npm dependencies`, + task: async () => { + await fs.remove(path.join(projectRoot, 'node_modules')) + await execa('npm', ['ci'], { cwd: projectRoot }); + } + }); + + if (package !== 'core') { + projectTasks.push({ + title: `${pkg.name}: npm link @ionic/core`, + task: () => execa('npm', ['link', '@ionic/core'], { cwd: projectRoot }) + }); + if (version) { + projectTasks.push({ + title: `${pkg.name}: update ionic/core dep to ${version}`, + task: () => { + updateDependency(pkg, "@ionic/core", version); + writePkg(package, pkg); + } + }); + } + } + + if (version) { + projectTasks.push({ + title: `${pkg.name}: lint`, + task: () => execa('npm', ['run', 'lint'], { cwd: projectRoot }) + }); + } + + projectTasks.push({ + title: `${pkg.name}: build`, + task: () => execa('npm', ['run', 'build'], { cwd: projectRoot }) + }); + + if (version) { + projectTasks.push({ + title: `${pkg.name}: test`, + task: () => execa('npm', ['test'], { cwd: projectRoot }) + }); + } + + if (package === 'core') { + projectTasks.push({ + title: `${pkg.name}: npm link`, + task: () => execa('npm', ['link'], { cwd: projectRoot }) + }); + } + + // Add project tasks + tasks.push({ + title: `Prepare ${chalk.bold(pkg.name)}`, + task: () => new Listr(projectTasks) + }); +} + + +function updateDependency(pkg, dependency, version) { + if (pkg.dependencies && pkg.dependencies[dependency]) { + pkg.dependencies[dependency] = version; + } + if (pkg.devDependencies && pkg.devDependencies[dependency]) { + pkg.devDependencies[dependency] = version; + } +} + +function isVersionGreater(oldVersion, newVersion) { + if (!isValidVersion(newVersion)) { + throw new Error('Version should be a valid semver version.'); + } + + return semver.gt(newVersion, oldVersion); +} + + module.exports = { isValidVersion, + isVersionGreater, readPkg, writePkg, rootDir, projectPath, checkGit, - packages + packages, + preparePackage }; diff --git a/.scripts/prepare.js b/.scripts/prepare.js index 58a8ee5452..949ec9ad2f 100644 --- a/.scripts/prepare.js +++ b/.scripts/prepare.js @@ -69,7 +69,7 @@ async function askVersion() { validate: input => { if (!isValidVersionInput(input)) { return 'Please specify a valid semver, for example, `1.2.3`. See http://semver.org'; - } else if (!isVersionGreater(oldVersion, input)) { + } else if (!common.isVersionGreater(oldVersion, input)) { return `Version must be greater than ${oldVersion}`; } @@ -103,7 +103,7 @@ async function preparePackages(packages, version) { // add all the prepare scripts // run all these tasks before updating package.json version packages.forEach(package => { - preparePackage(tasks, package, version); + common.preparePackage(tasks, package, version); }); // add update package.json of each project @@ -155,86 +155,6 @@ function validateGit(tasks, version) { ); } - -function preparePackage(tasks, package, version) { - const projectRoot = common.projectPath(package); - const pkg = common.readPkg(package); - - const projectTasks = [ - { - title: `${pkg.name}: validate new version`, - task: () => { - if (!isVersionGreater(pkg.version, version)) { - throw new Error(`New version \`${version}\` should be higher than current version \`${pkg.version}\``); - } - } - }, - { - title: `${pkg.name}: install npm dependencies`, - task: async () => { - await fs.remove(path.join(projectRoot, 'node_modules')) - await execa('npm', ['ci'], { cwd: projectRoot }); - } - } - ]; - - if (package !== 'core') { - projectTasks.push( - { - title: `${pkg.name}: npm link @ionic/core`, - task: () => execa('npm', ['link', '@ionic/core'], { cwd: projectRoot }) - }, - { - title: `${pkg.name}: update ionic/core dep to ${version}`, - task: () => { - updateDependency(pkg, "@ionic/core", version); - common.writePkg(package, pkg); - } - } - ); - } - - projectTasks.push( - { - title: `${pkg.name}: lint`, - task: () => execa('npm', ['run', 'lint'], { cwd: projectRoot }) - }, - { - title: `${pkg.name}: build`, - task: () => execa('npm', ['run', 'build'], { cwd: projectRoot }) - }, - { - title: `${pkg.name}: test`, - task: () => execa('npm', ['test'], { cwd: projectRoot }) - } - ); - - if (package === 'core') { - projectTasks.push( - { - title: `${pkg.name}: npm link`, - task: () => execa('npm', ['link'], { cwd: projectRoot }) - } - ); - } - - // Add project tasks - tasks.push({ - title: `Prepare ${chalk.bold(pkg.name)}`, - task: () => new Listr(projectTasks) - }); -} - -function updateDependency(pkg, dependency, version) { - if (pkg.dependencies && pkg.dependencies[dependency]) { - pkg.dependencies[dependency] = version; - } - if (pkg.devDependencies && pkg.devDependencies[dependency]) { - pkg.devDependencies[dependency] = version; - } -} - - function updatePackageVersion(tasks, package, version) { const projectRoot = common.projectPath(package); const pkg = common.readPkg(package); @@ -274,8 +194,6 @@ function updateCoreReadme(tasks, version) { const SEMVER_INCREMENTS = ['patch', 'minor', 'major']; -const isValidVersion = input => Boolean(semver.valid(input)); - const isValidVersionInput = input => SEMVER_INCREMENTS.indexOf(input) !== -1 || common.isValidVersion(input); function getNewVersion(oldVersion, input) { @@ -286,14 +204,6 @@ function getNewVersion(oldVersion, input) { return SEMVER_INCREMENTS.indexOf(input) === -1 ? input : semver.inc(oldVersion, input); }; -const isVersionGreater = (oldVersion, newVersion) => { - if (!common.isValidVersion(newVersion)) { - throw new Error('Version should be a valid semver version.'); - } - - return semver.gt(newVersion, oldVersion); -}; - function prettyVersionDiff(oldVersion, inc) { const newVersion = getNewVersion(oldVersion, inc).split('.'); diff --git a/angular/package-lock.json b/angular/package-lock.json index 9aa2d84d3a..37a603e243 100644 --- a/angular/package-lock.json +++ b/angular/package-lock.json @@ -5,27 +5,27 @@ "requires": true, "dependencies": { "@angular/common": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/@angular/common/-/common-6.0.0.tgz", - "integrity": "sha512-oo/KESihAZo0FsZPHthO9PYhanN4Q+Lo7Lb2HNbWnD+xRIPa1yFC12JOWiD+SPPfFGWMI6aW3wAlcoej1+QKSw==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/@angular/common/-/common-6.0.3.tgz", + "integrity": "sha512-tqEYeEXoaw2kzSUfTrmC3ruJ87trS61SHayIf56f/jtEVn+4pbgJDTNvLSnB6QEaMTn7sX6QBroauMWmdTVSvA==", "dev": true, "requires": { "tslib": "^1.9.0" } }, "@angular/compiler": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-6.0.0.tgz", - "integrity": "sha512-UsYfsvHf4VVtkhzM7tyabh8co7gqWZTm3p79hbLDeyCEojl0AkrwbSgh0DQnKRxp4Tu3DEeeDkg1ahA7n19I8A==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-6.0.3.tgz", + "integrity": "sha512-nS65UI6f7grs2k+ggtkwXSBUQ1D/LVSFfXjWR5olxATx25QbIKABec90JphPE4FfhhVm1uonQ/vaSVCjh83Euw==", "dev": true, "requires": { "tslib": "^1.9.0" } }, "@angular/compiler-cli": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-6.0.0.tgz", - "integrity": "sha512-RV0xTSTPT3yOnbS5Gx6lMAETQeTUr72Ifu0+JZh9AV07xGVislZ+SdQGSeNgXoqxise6e65lJp3Nrb5KE4Lv6g==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-6.0.3.tgz", + "integrity": "sha512-n7L/g2leGSl1LffZ3ZuB5bY4sJoZWjkG5tg9IafXQ8nAIUtKPl+ovoiNUhAaA4CvlUlgYHMcbezKpc9285LnyQ==", "dev": true, "requires": { "chokidar": "^1.4.2", @@ -35,45 +35,45 @@ } }, "@angular/core": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/@angular/core/-/core-6.0.0.tgz", - "integrity": "sha512-52X2ZKXOoaMRYaC/ycHePTkXuwku8qJFxoEXAFBItAkk9rebLU4CD8Fx1Z9vUd8aWu1uFfLTxqkgE0mUyBANZw==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/@angular/core/-/core-6.0.3.tgz", + "integrity": "sha512-YJk0kS/V9C2JFKMHfiw6TNxmfkYWGW4HzqGOm/VoPkvj9O4Erkz/OtOOc8hYGmXFmQz1UpOAByzY2XIlEi72XQ==", "dev": true, "requires": { "tslib": "^1.9.0" } }, "@angular/forms": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-6.0.0.tgz", - "integrity": "sha512-4eVfCcSyPRhml7Xa6ia/DgDl3JhOnEdBdHo+jads1YL5AF6D08Tthngjf3KjuctGqZDACPyxNt6ciX4g8IbGCA==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-6.0.3.tgz", + "integrity": "sha512-YAjRMERggkzb3cIo8iKOz1xB89Ko4fSh4A1suqrv9o2Xu41Qxs6LwrWVW+6x+N5kBzvbKFZyADqSz1otMQP83Q==", "dev": true, "requires": { "tslib": "^1.9.0" } }, "@angular/platform-browser": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-6.0.0.tgz", - "integrity": "sha512-ExI1o40BJIbJKFz1p1ivGSgLA1+T0uUo8rjheOZhcGDwCNx54/RapCFLdcHCNiW8NzAIzx+kt4DdXnCSKitnDA==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-6.0.3.tgz", + "integrity": "sha512-OTgOE6WzytV9fnnCwvoyyXI4Avzmfu9RbBUhVRVontov6LlN9XL8BrzLidT7/lPAEQmHuoRCuNrSSY8TokPJCA==", "dev": true, "requires": { "tslib": "^1.9.0" } }, "@angular/platform-browser-dynamic": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-6.0.0.tgz", - "integrity": "sha512-yk4wZYn2bosuvDaYaEq6UuEeI966/28uCljm5iBfo3l8Vuv2IChk5664M68O6C+KwWzCCWDHvIqm0q178YUYug==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-6.0.3.tgz", + "integrity": "sha512-OSaBiog3jH52c+pJhG6qsZjVipzw3ThTcFaymetlBwdRkZ9ch7eIQFhlIXPe4oM3wJt39LTG7peRymWPbnx4uw==", "dev": true, "requires": { "tslib": "^1.9.0" } }, "@angular/router": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/@angular/router/-/router-6.0.0.tgz", - "integrity": "sha512-ONrfgfYmFGz0Ht2MvymMvBMxPI9w5037ZfJWpTu1/Xo1XmVOawzj2SvYfEzTqexznWcTAALggq/A23k8r9ArKA==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/@angular/router/-/router-6.0.3.tgz", + "integrity": "sha512-7pQYu5DnNXwZ8nZrKtTpBo3HQoirKSP2hGAoHA0rPsqZvavBfuhUzsksYVvKvFEtoPmBe69uEYydhr115MTTNQ==", "dev": true, "requires": { "tslib": "^1.9.0" @@ -87,6 +87,15 @@ "ionicons": "^4.1.1" } }, + "@samverschueren/stream-to-observable": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz", + "integrity": "sha512-MI4Xx6LHs4Webyvi6EbspgyAb4D2Q2VtnCQ1blOJcoLS6mVa8lNN2rkIy1CVxfTUpoyIbCTkXES1rLXztFD1lg==", + "dev": true, + "requires": { + "any-observable": "^0.3.0" + } + }, "ansi-escapes": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.1.0.tgz", @@ -109,9 +118,9 @@ } }, "any-observable": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/any-observable/-/any-observable-0.2.0.tgz", - "integrity": "sha1-xnhwBYADV5AJCD9UrAq6+1wz0kI=", + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/any-observable/-/any-observable-0.3.0.tgz", + "integrity": "sha512-/FQM1EDkTsf63Ub2C6O7GuYFDsSXUwsaZDurV0np41ocwq0jthUAYCmhBX9f+KwlaCgIuWyr/4WlUQUBfKfZog==", "dev": true }, "anymatch": { @@ -259,9 +268,9 @@ "dev": true }, "chalk": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.2.tgz", - "integrity": "sha512-ZM4j2/ld/YZDc3Ma8PgN7gyAk+kHMMMyzLNryCPGhWrsfAuDVeuid5bpRFTDgMH9JBK2lA4dyyAkkZYF/WcqDQ==", + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", + "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", "dev": true, "requires": { "ansi-styles": "^3.2.1", @@ -382,9 +391,9 @@ "dev": true }, "commander": { - "version": "2.15.1", - "resolved": "https://registry.npmjs.org/commander/-/commander-2.15.1.tgz", - "integrity": "sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag==", + "version": "2.16.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.16.0.tgz", + "integrity": "sha512-sVXqklSaotK9at437sFlFpyOcJonxe0yST/AG9DkQKUdIE6IqGIMv4SfAQSKaJbSdVEJYItASCrBiVQHq1HQew==", "dev": true }, "concat-map": { @@ -592,14 +601,14 @@ "dev": true }, "fsevents": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.3.tgz", - "integrity": "sha512-X+57O5YkDTiEQGiw8i7wYc2nQgweIekqkepI8Q3y4wVlurgBt2SuwxTeYUYMZIGpLZH3r/TsMjczCMXE5ZOt7Q==", + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.4.tgz", + "integrity": "sha512-z8H8/diyk76B7q5wg+Ud0+CqzcAF3mBBI/bA5ne5zrRUUIvNkJY//D3BqyH571KuAC4Nr7Rw7CjWX4r0y9DvNg==", "dev": true, "optional": true, "requires": { "nan": "^2.9.2", - "node-pre-gyp": "^0.9.0" + "node-pre-gyp": "^0.10.0" }, "dependencies": { "abbrev": { @@ -632,12 +641,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -652,17 +663,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -680,7 +694,7 @@ } }, "deep-extend": { - "version": "0.4.2", + "version": "0.5.1", "bundled": true, "dev": true, "optional": true @@ -779,7 +793,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -791,6 +806,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -805,6 +821,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -812,12 +829,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -836,6 +855,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -858,7 +878,7 @@ } }, "node-pre-gyp": { - "version": "0.9.1", + "version": "0.10.0", "bundled": true, "dev": true, "optional": true, @@ -916,7 +936,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -928,6 +949,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -967,12 +989,12 @@ "optional": true }, "rc": { - "version": "1.2.6", + "version": "1.2.7", "bundled": true, "dev": true, "optional": true, "requires": { - "deep-extend": "~0.4.0", + "deep-extend": "^0.5.1", "ini": "~1.3.0", "minimist": "^1.2.0", "strip-json-comments": "~2.0.1" @@ -1049,6 +1071,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -1332,18 +1355,18 @@ } }, "is-observable": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/is-observable/-/is-observable-0.2.0.tgz", - "integrity": "sha1-s2ExHYPG5dcmyr9eJQsCNxBvWuI=", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-observable/-/is-observable-1.1.0.tgz", + "integrity": "sha512-NqCa4Sa2d+u7BWc6CukaObG3Fh+CU9bvixbpcXYhy2VvYS7vVGIdAgnIS5Ks3A/cqk4rebLJ9s8zBstT2aKnIA==", "dev": true, "requires": { - "symbol-observable": "^0.2.2" + "symbol-observable": "^1.1.0" }, "dependencies": { "symbol-observable": { - "version": "0.2.4", - "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-0.2.4.tgz", - "integrity": "sha1-lag9smGG1q9+ehjb2XYKL4bQj0A=", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz", + "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==", "dev": true } } @@ -1400,9 +1423,9 @@ "dev": true }, "js-yaml": { - "version": "3.11.0", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.11.0.tgz", - "integrity": "sha512-saJstZWv7oNeOyBh3+Dx1qWzhW0+e6/8eDzo7p5rDFqxntSztloLtuKu+Ejhtq82jsilwOIZYsCz+lIjthg1Hw==", + "version": "3.12.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.12.0.tgz", + "integrity": "sha512-PIt2cnwmPfL4hKNwqeiuz4bKfnzHTBv6HyVgjahA6mPLwPDzjDWrplJBMjHUFxku/N3FlmrbyPclad+I+4mJ3A==", "dev": true, "requires": { "argparse": "^1.0.7", @@ -1428,16 +1451,16 @@ } }, "listr": { - "version": "0.13.0", - "resolved": "https://registry.npmjs.org/listr/-/listr-0.13.0.tgz", - "integrity": "sha1-ILsLowuuZg7oTMBQPfS+PVYjiH0=", + "version": "0.14.1", + "resolved": "https://registry.npmjs.org/listr/-/listr-0.14.1.tgz", + "integrity": "sha512-MSMUUVN1f8aRnPi4034RkOqdiUlpYW+FqwFE3aL0uYNPRavkt2S2SsSpDDofn8BDpqv2RNnsdOcCHWsChcq77A==", "dev": true, "requires": { - "chalk": "^1.1.3", + "@samverschueren/stream-to-observable": "^0.3.0", "cli-truncate": "^0.2.1", "figures": "^1.7.0", "indent-string": "^2.1.0", - "is-observable": "^0.2.0", + "is-observable": "^1.1.0", "is-promise": "^2.1.0", "is-stream": "^1.1.0", "listr-silent-renderer": "^1.1.1", @@ -1447,8 +1470,7 @@ "log-update": "^1.0.2", "ora": "^0.2.3", "p-map": "^1.1.1", - "rxjs": "^5.4.2", - "stream-to-observable": "^0.2.0", + "rxjs": "^6.1.0", "strip-ansi": "^3.0.1" }, "dependencies": { @@ -1458,25 +1480,6 @@ "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", "dev": true }, - "ansi-styles": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", - "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", - "dev": true - }, - "chalk": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", - "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", - "dev": true, - "requires": { - "ansi-styles": "^2.2.1", - "escape-string-regexp": "^1.0.2", - "has-ansi": "^2.0.0", - "strip-ansi": "^3.0.0", - "supports-color": "^2.0.0" - } - }, "figures": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/figures/-/figures-1.7.0.tgz", @@ -1487,15 +1490,6 @@ "object-assign": "^4.1.0" } }, - "rxjs": { - "version": "5.5.9", - "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.5.9.tgz", - "integrity": "sha512-DHG9AHmCmgaFWgjBcXp6NxFDmh3MvIA62GqTWmLnTzr/3oZ6h5hLD8NA+9j+GF0jEwklNIpI4KuuyLG8UWMEvQ==", - "dev": true, - "requires": { - "symbol-observable": "1.0.1" - } - }, "strip-ansi": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", @@ -1504,12 +1498,6 @@ "requires": { "ansi-regex": "^2.0.0" } - }, - "supports-color": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", - "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", - "dev": true } } }, @@ -2158,9 +2146,9 @@ } }, "resolve": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.6.0.tgz", - "integrity": "sha512-mw7JQNu5ExIkcw4LPih0owX/TZXjD/ZUF/ZQ/pDnkw3ZKhDcZZw5klmBlj6gVMwjQ3Pz5Jgu7F3d0jcDVuEWdw==", + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.8.1.tgz", + "integrity": "sha512-AicPrAC7Qu1JxPCZ9ZgCZlY35QgFnNqc+0LtbRNxnVw4TXvjQ72wnuL9JQcEBgXkI9JM8MsT9kaQoHcpCRJOYA==", "dev": true, "requires": { "path-parse": "^1.0.5" @@ -2186,9 +2174,9 @@ } }, "rxjs": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.1.0.tgz", - "integrity": "sha512-lMZdl6xbHJCSb5lmnb6nOhsoBVCyoDC5LDJQK9WWyq+tsI7KnlDIZ0r0AZAlBpRPLbwQA9kzSBAZwNIZEZ+hcw==", + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.2.0.tgz", + "integrity": "sha512-qBzf5uu6eOKiCZuAE0SgZ0/Qp+l54oeVxFfC2t+mJ2SFI6IB8gmMdJHs5DUMu5kqifqcCtsKS2XHjhZu6RKvAw==", "dev": true, "requires": { "tslib": "^1.9.0" @@ -2246,9 +2234,9 @@ "dev": true }, "source-map-support": { - "version": "0.5.5", - "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.5.tgz", - "integrity": "sha512-mR7/Nd5l1z6g99010shcXJiNEaf3fEtmLhRB/sBcQVJGodcHCULPp2y4Sfa43Kv2zq7T+Izmfp/WHCR6dYkQCA==", + "version": "0.5.6", + "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.6.tgz", + "integrity": "sha512-N4KXEz7jcKqPf2b2vZF11lQIz9W5ZMuUcIOGj243lduidkf2fjkVKJS9vNxVWn3u/uxX38AcE8U9nnH9FPcq+g==", "dev": true, "requires": { "buffer-from": "^1.0.0", @@ -2261,15 +2249,6 @@ "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=", "dev": true }, - "stream-to-observable": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/stream-to-observable/-/stream-to-observable-0.2.0.tgz", - "integrity": "sha1-WdbqOT2HwsDdrBCqDVYbxrpvDhA=", - "dev": true, - "requires": { - "any-observable": "^0.2.0" - } - }, "string-width": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", @@ -2305,9 +2284,9 @@ "dev": true }, "supports-color": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.3.0.tgz", - "integrity": "sha512-0aP01LLIskjKs3lq52EC0aGBAJhLq7B2Rd8HC/DR/PtNNpcLilNmHC12O+hu0usQpo7wtHNRqtrhBwtDb0+dNg==", + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz", + "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==", "dev": true, "requires": { "has-flag": "^3.0.0" @@ -2353,9 +2332,9 @@ "dev": true }, "tslint": { - "version": "5.9.1", - "resolved": "https://registry.npmjs.org/tslint/-/tslint-5.9.1.tgz", - "integrity": "sha1-ElX4ej/1frCw4fDmEKi0dIBGya4=", + "version": "5.10.0", + "resolved": "https://registry.npmjs.org/tslint/-/tslint-5.10.0.tgz", + "integrity": "sha1-EeJrzLiK+gLdDZlWyuPUVAtfVMM=", "dev": true, "requires": { "babel-code-frame": "^6.22.0", @@ -2401,9 +2380,9 @@ } }, "tsutils": { - "version": "2.26.1", - "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.26.1.tgz", - "integrity": "sha512-bnm9bcjOqOr1UljleL94wVCDlpa6KjfGaTkefeLch4GRafgDkROxPizbB/FxTEdI++5JqhxczRy/Qub0syNqZA==", + "version": "2.27.2", + "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.27.2.tgz", + "integrity": "sha512-qf6rmT84TFMuxAKez2pIfR8UCai49iQsfB7YWVjV1bKpy/d0PWT5rEOSM6La9PiHZ0k1RRZQiwVdVJfQ3BPHgg==", "dev": true, "requires": { "tslib": "^1.8.1" @@ -2443,9 +2422,9 @@ "dev": true }, "zone.js": { - "version": "0.8.25", - "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.8.25.tgz", - "integrity": "sha512-/4HpggPPo8aVMDhB18X0734eZftRNPR8Y9kURWzwzXMFi5rp6Igk5kFrlIIY6AueLlm1zcvi2WBOqBTvrX+0Rw==", + "version": "0.8.26", + "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.8.26.tgz", + "integrity": "sha512-W9Nj+UmBJG251wkCacIkETgra4QgBo/vgoEkb4a2uoLzpQG7qF9nzwoLXWU5xj3Fg2mxGvEDh47mg24vXccYjA==", "dev": true } } diff --git a/angular/package.json b/angular/package.json index 1c72c2f1e0..deb4ae03df 100644 --- a/angular/package.json +++ b/angular/package.json @@ -20,14 +20,14 @@ "url": "https://github.com/ionic-team/ionic.git" }, "scripts": { - "build": "npm run clean && npm run compile && npm run clean-generated && npm run build.core", - "build.dev": "npm run clean && npm run compile && npm run clean-generated && npm run build.core.dev", + "build": "npm run clean && npm run build.core && npm run build.ng && npm run clean-generated", + "build.dev": "npm run clean && npm run build.core.dev && npm run build.ng && npm run clean-generated", "build.core": "node scripts/build-core.js", "build.core.dev": "node scripts/build-core.js --dev", "build.link": "npm run build && node scripts/link-copy.js", + "build.ng": "./node_modules/.bin/ngc", "clean": "node scripts/clean.js", "clean-generated": "node ./scripts/clean-generated.js", - "compile": "./node_modules/.bin/ngc", "lint": "tslint --project .", "prerelease": "npm run validate && np prerelease --yolo --any-branch --tag next", "test": "echo 'angular no tests yet'", @@ -43,25 +43,25 @@ "@ionic/core": "4.0.0-alpha.7" }, "devDependencies": { - "@angular/common": "^6.0.0", - "@angular/compiler": "^6.0.0", - "@angular/compiler-cli": "^6.0.0", - "@angular/core": "^6.0.0", - "@angular/forms": "^6.0.0", - "@angular/platform-browser": "^6.0.0", - "@angular/platform-browser-dynamic": "^6.0.0", - "@angular/router": "^6.0.0", - "chalk": "^2.3.2", + "@angular/common": "^6.0.3", + "@angular/compiler": "^6.0.3", + "@angular/compiler-cli": "^6.0.3", + "@angular/core": "^6.0.3", + "@angular/forms": "^6.0.3", + "@angular/platform-browser": "^6.0.3", + "@angular/platform-browser-dynamic": "^6.0.3", + "@angular/router": "^6.0.3", + "chalk": "^2.4.1", "execa": "^0.10.0", "fs-extra": "^5.0.0", "glob": "7.1.2", "inquirer": "^5.2.0", - "listr": "^0.13.0", - "rxjs": "^6.0.0", + "listr": "^0.14.1", + "rxjs": "^6.2.0", "semver": "^5.5.0", - "tslint": "^5.8.0", + "tslint": "^5.10.0", "tslint-ionic-rules": "0.0.14", "typescript": "2.7.2", - "zone.js": "^0.8.20" + "zone.js": "^0.8.26" } } diff --git a/angular/scripts/build-core.js b/angular/scripts/build-core.js index 1108f9aa1f..6e7bd2d8d2 100644 --- a/angular/scripts/build-core.js +++ b/angular/scripts/build-core.js @@ -6,43 +6,25 @@ const stencilPath = path.join(__dirname, '..', '..', 'core', 'node_modules', '.b function buildIonicAngular() { - const cmd = 'stencil'; - const args = [ - 'build', - '--config', - path.join(__dirname, '..', 'stencil.config.js'), - ...process.argv.slice(2) - ]; + return new Promise((resolve, reject) => { - console.log(cmd, args.join(' ')); + const cmd = 'stencil'; + const args = [ + 'build', + '--config', + path.join(__dirname, '..', 'stencil.config.js'), + ...process.argv.slice(2) + ]; - const p = spawn('./stencil', args, { cwd: stencilPath, stdio: 'inherit' }); - p.on('close', (code) => { - if (code > 0) { - console.log(`@ionic/angular build exited with ${code}`); - } - }); -} - -function buildIonicCore() { - const cmd = 'stencil'; - const args = [ - 'build', - '--config', - path.join(__dirname, '..', '..', 'core', 'stencil.config.js'), - ...process.argv.slice(2) - ]; - - console.log(cmd, args.join(' ')); - - const p = spawn('./stencil', args, { cwd: stencilPath, stdio: 'inherit' }); - p.on('close', (code) => { - if (code > 0) { - console.log(`@ionic/core build exited with ${code}`); - } else { - copyIonicCore(); - copyIonicons(); - } + const p = spawn('./stencil', args, { cwd: stencilPath, stdio: 'inherit' }); + p.on('close', (code) => { + if (code > 0) { + console.log(`@ionic/angular build exited with ${code}`); + reject(); + } else { + resolve(); + } + }); }); } @@ -50,25 +32,18 @@ function copyIonicons() { const src = path.join(__dirname, '..', '..', 'core', 'node_modules', 'ionicons'); const dst = path.join(__dirname, '..', 'node_modules', 'ionicons'); - fs.emptyDirSync(dst); + fs.removeSync(dst); fs.copySync(src, dst); } -function copyIonicCore() { - const srcDir = path.join(__dirname, '..', '..', 'core'); - const dstDir = path.join(__dirname, '..', 'node_modules', '@ionic', 'core'); +function copyCSS() { + const src = path.join(__dirname, '..', '..', 'core', 'css'); + const dst = path.join(__dirname, '..', 'css'); - fs.emptyDirSync(dstDir); - - const srcPkg = path.join(srcDir, 'package.json'); - const dstPkg = path.join(dstDir, 'package.json'); - fs.copySync(srcPkg, dstPkg); - - const srcDist = path.join(srcDir, 'dist'); - const dstDist = path.join(dstDir, 'dist'); - fs.emptyDirSync(dstDist); - fs.copySync(srcDist, dstDist); + fs.removeSync(dst); + fs.copySync(src, dst); } -buildIonicCore(); +copyIonicons(); +copyCSS(); buildIonicAngular(); diff --git a/angular/src/directives/icon.ts b/angular/src/directives/icon.ts deleted file mode 100644 index 7890276a3c..0000000000 --- a/angular/src/directives/icon.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { Directive, ElementRef, Input } from '@angular/core'; -import { inputs } from '../util/util'; - - -@Directive({ selector: 'ion-icon' }) -export class Icon { - - /** - * The color to use from your Sass `$colors` map. - * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. - * For more information, see [Theming your App](/docs/theming/theming-your-app). - */ - @Input() color: string; - - /** - * Specifies the label to use for accessibility. Defaults to the icon name. - */ - @Input() ariaLabel = ''; - - /** - * Specifies which icon to use on `ios` mode. - */ - @Input() ios = ''; - - /** - * Specifies which icon to use on `md` mode. - */ - @Input() md = ''; - - /** - * Specifies which icon to use. The appropriate icon will be used based on the mode. - * For more information, see [Ionicons](/docs/ionicons/). - */ - @Input() name = ''; - - /** - * The size of the icon. - * Available options are: `"small"` and `"large"`. - */ - @Input() size: string; - - constructor(el: ElementRef) { - inputs(this, el, ['color', 'ariaLabel', 'ios', 'md', 'name', 'size']); - } -} diff --git a/angular/src/directives/index.ts b/angular/src/directives/index.ts index 5cf53e28ab..af13062497 100644 --- a/angular/src/directives/index.ts +++ b/angular/src/directives/index.ts @@ -14,7 +14,6 @@ export { IonRouterOutlet } from './navigation/ion-router-outlet'; export { HrefDelegate } from './navigation/href-delegate'; export { NavParams } from './navigation/nav-params'; -export { Icon } from './icon'; export { VirtualScroll } from './virtual-scroll/virtual-scroll'; export { VirtualItem } from './virtual-scroll/virtual-item'; export { VirtualHeader } from './virtual-scroll/virtual-header'; diff --git a/angular/src/directives/proxies-list.txt b/angular/src/directives/proxies-list.txt index f3fa6c33c9..081771f87e 100644 --- a/angular/src/directives/proxies-list.txt +++ b/angular/src/directives/proxies-list.txt @@ -16,6 +16,7 @@ export const DIRECTIVES = [ d.Checkbox, d.Chip, d.ChipButton, + d.ChipIcon, d.Col, d.Content, d.Datetime, @@ -26,6 +27,7 @@ export const DIRECTIVES = [ d.Grid, d.Header, d.HideWhen, + d.Icon, d.Img, d.InfiniteScroll, d.InfiniteScrollContent, diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index c5da71c216..444765e5b5 100644 --- a/angular/src/directives/proxies.ts +++ b/angular/src/directives/proxies.ts @@ -79,10 +79,10 @@ export class Card { } export declare interface CardContent extends StencilComponents.IonCardContent {} -@Directive({selector: 'ion-card-content', inputs: ['color', 'mode']}) +@Directive({selector: 'ion-card-content', inputs: ['mode']}) export class CardContent { constructor(r: ElementRef) { - proxyInputs(this, r, ['color', 'mode']); + proxyInputs(this, r, ['mode']); } } @@ -139,17 +139,28 @@ export class ChipButton { } } +export declare interface ChipIcon extends StencilComponents.IonChipIcon {} +@Directive({selector: 'ion-chip-icon', inputs: ['color', 'mode', 'name']}) +export class ChipIcon { + constructor(r: ElementRef) { + proxyInputs(this, r, ['color', 'mode', 'name']); + } +} + export declare interface Col extends StencilComponents.IonCol {} -@Directive({selector: 'ion-col'}) +@Directive({selector: 'ion-col', inputs: ['offset', 'offsetXs', 'offsetSm', 'offsetMd', 'offsetLg', 'offsetXl', 'pull', 'pullXs', 'pullSm', 'pullMd', 'pullLg', 'pullXl', 'push', 'pushXs', 'pushSm', 'pushMd', 'pushLg', 'pushXl', 'size', 'sizeXs', 'sizeSm', 'sizeMd', 'sizeLg', 'sizeXl']}) export class Col { + constructor(r: ElementRef) { + proxyInputs(this, r, ['offset', 'offsetXs', 'offsetSm', 'offsetMd', 'offsetLg', 'offsetXl', 'pull', 'pullXs', 'pullSm', 'pullMd', 'pullLg', 'pullXl', 'push', 'pushXs', 'pushSm', 'pushMd', 'pushLg', 'pushXl', 'size', 'sizeXs', 'sizeSm', 'sizeMd', 'sizeLg', 'sizeXl']); + } } export declare interface Content extends StencilComponents.IonContent {} -@Directive({selector: 'ion-content', inputs: ['fullscreen', 'forceOverscroll', 'scrollEnabled', 'scrollEvents']}) +@Directive({selector: 'ion-content', inputs: ['color', 'fullscreen', 'forceOverscroll', 'scrollEnabled', 'scrollEvents']}) export class Content { constructor(r: ElementRef) { - proxyMethods(this, r, ['scrollToTop', 'scrollToBottom', 'scrollByPoint', 'scrollToPoint']); - proxyInputs(this, r, ['fullscreen', 'forceOverscroll', 'scrollEnabled', 'scrollEvents']); + proxyMethods(this, r, ['getScrollElement']); + proxyInputs(this, r, ['color', 'fullscreen', 'forceOverscroll', 'scrollEnabled', 'scrollEvents']); } } @@ -190,31 +201,42 @@ export class FabList { } export declare interface Footer extends StencilComponents.IonFooter {} -@Directive({selector: 'ion-footer', inputs: ['translucent']}) +@Directive({selector: 'ion-footer', inputs: ['mode']}) export class Footer { constructor(r: ElementRef) { - proxyInputs(this, r, ['translucent']); + proxyInputs(this, r, ['mode']); } } export declare interface Grid extends StencilComponents.IonGrid {} -@Directive({selector: 'ion-grid'}) +@Directive({selector: 'ion-grid', inputs: ['fixed']}) export class Grid { + constructor(r: ElementRef) { + proxyInputs(this, r, ['fixed']); + } } export declare interface Header extends StencilComponents.IonHeader {} -@Directive({selector: 'ion-header', inputs: ['translucent']}) +@Directive({selector: 'ion-header', inputs: ['mode']}) export class Header { constructor(r: ElementRef) { - proxyInputs(this, r, ['translucent']); + proxyInputs(this, r, ['mode']); } } export declare interface HideWhen extends StencilComponents.IonHideWhen {} -@Directive({selector: 'ion-hide-when', inputs: ['orientation', 'mediaQuery', 'size', 'platform', 'or']}) +@Directive({selector: 'ion-hide-when', inputs: ['mode', 'orientation', 'mediaQuery', 'size', 'platform', 'or']}) export class HideWhen { constructor(r: ElementRef) { - proxyInputs(this, r, ['orientation', 'mediaQuery', 'size', 'platform', 'or']); + proxyInputs(this, r, ['mode', 'orientation', 'mediaQuery', 'size', 'platform', 'or']); + } +} + +export declare interface Icon extends StencilComponents.IonIcon {} +@Directive({selector: 'ion-icon', inputs: ['ariaLabel', 'color', 'icon', 'ios', 'md', 'mode', 'name', 'size', 'src']}) +export class Icon { + constructor(r: ElementRef) { + proxyInputs(this, r, ['ariaLabel', 'color', 'icon', 'ios', 'md', 'mode', 'name', 'size', 'src']); } } @@ -264,10 +286,10 @@ export class Input { } export declare interface Item extends StencilComponents.IonItem {} -@Directive({selector: 'ion-item', inputs: ['color', 'mode', 'button', 'detail', 'disabled', 'href', 'lines', 'routerDirection']}) +@Directive({selector: 'ion-item', inputs: ['color', 'mode', 'button', 'detail', 'detailIcon', 'disabled', 'href', 'lines', 'state', 'routerDirection']}) export class Item { constructor(r: ElementRef) { - proxyInputs(this, r, ['color', 'mode', 'button', 'detail', 'disabled', 'href', 'lines', 'routerDirection']); + proxyInputs(this, r, ['color', 'mode', 'button', 'detail', 'detailIcon', 'disabled', 'href', 'lines', 'state', 'routerDirection']); } } @@ -325,11 +347,11 @@ export class Label { } export declare interface List extends StencilComponents.IonList {} -@Directive({selector: 'ion-list', inputs: ['lines']}) +@Directive({selector: 'ion-list', inputs: ['lines', 'inset']}) export class List { constructor(r: ElementRef) { proxyMethods(this, r, ['getOpenItem', 'setOpenItem', 'closeSlidingItems']); - proxyInputs(this, r, ['lines']); + proxyInputs(this, r, ['lines', 'inset']); } } @@ -342,14 +364,14 @@ export class ListHeader { } export declare interface Menu extends StencilComponents.IonMenu {} -@Directive({selector: 'ion-menu', inputs: ['contentId', 'menuId', 'type', 'disabled', 'side', 'swipeEnabled', 'persistent', 'maxEdgeStart'], outputs: ['ionOpen', 'ionClose', 'ionMenuChange']}) +@Directive({selector: 'ion-menu', inputs: ['contentId', 'menuId', 'type', 'disabled', 'side', 'swipeEnabled', 'maxEdgeStart'], outputs: ['ionOpen', 'ionClose', 'ionMenuChange']}) export class Menu { ionOpen: EventEmitter; ionClose: EventEmitter; ionMenuChange: EventEmitter; constructor(r: ElementRef) { proxyMethods(this, r, ['isOpen', 'open', 'close', 'toggle', 'setOpen', 'isActive']); - proxyInputs(this, r, ['contentId', 'menuId', 'type', 'disabled', 'side', 'swipeEnabled', 'persistent', 'maxEdgeStart']); + proxyInputs(this, r, ['contentId', 'menuId', 'type', 'disabled', 'side', 'swipeEnabled', 'maxEdgeStart']); proxyOutputs(this, ['ionOpen', 'ionClose', 'ionMenuChange']); } } @@ -377,7 +399,7 @@ export class Nav { ionNavWillChange: EventEmitter; ionNavDidChange: EventEmitter; constructor(r: ElementRef) { - proxyMethods(this, r, ['push', 'insert', 'insertPages', 'pop', 'popTo', 'popToRoot', 'removeIndex', 'setRoot', 'setPages', 'setRouteId', 'getRouteId', 'canGoBack', 'getActive', 'getByIndex', 'getPrevious', 'length']); + proxyMethods(this, r, ['push', 'insert', 'insertPages', 'pop', 'popTo', 'popToRoot', 'removeIndex', 'setRoot', 'setPages', 'setRouteId', 'getRouteId', 'canGoBack', 'getActive', 'getByIndex', 'getPrevious', 'isAnimating', 'length']); proxyInputs(this, r, ['swipeBackEnabled', 'animated', 'delegate', 'rootParams', 'root']); proxyOutputs(this, ['ionNavWillLoad', 'ionNavWillChange', 'ionNavDidChange']); } @@ -485,11 +507,11 @@ export class ReorderGroup { } export declare interface RippleEffect extends StencilComponents.IonRippleEffect {} -@Directive({selector: 'ion-ripple-effect', inputs: ['tapClick']}) +@Directive({selector: 'ion-ripple-effect', inputs: ['parent', 'tapClick']}) export class RippleEffect { constructor(r: ElementRef) { proxyMethods(this, r, ['addRipple']); - proxyInputs(this, r, ['tapClick']); + proxyInputs(this, r, ['parent', 'tapClick']); } } @@ -512,7 +534,7 @@ export class Scroll { } export declare interface Searchbar extends StencilComponents.IonSearchbar {} -@Directive({selector: 'ion-searchbar', inputs: ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonText', 'debounce', 'placeholder', 'showCancelButton', 'spellcheck', 'type', 'value'], outputs: ['ionInput', 'ionChange', 'ionCancel', 'ionClear', 'ionBlur', 'ionFocus']}) +@Directive({selector: 'ion-searchbar', inputs: ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'debounce', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value'], outputs: ['ionInput', 'ionChange', 'ionCancel', 'ionClear', 'ionBlur', 'ionFocus']}) export class Searchbar { ionInput: EventEmitter; ionChange: EventEmitter; @@ -521,7 +543,7 @@ export class Searchbar { ionBlur: EventEmitter; ionFocus: EventEmitter; constructor(r: ElementRef) { - proxyInputs(this, r, ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonText', 'debounce', 'placeholder', 'showCancelButton', 'spellcheck', 'type', 'value']); + proxyInputs(this, r, ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'debounce', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value']); proxyOutputs(this, ['ionInput', 'ionChange', 'ionCancel', 'ionClear', 'ionBlur', 'ionFocus']); } } @@ -537,11 +559,11 @@ export class Segment { } export declare interface SegmentButton extends StencilComponents.IonSegmentButton {} -@Directive({selector: 'ion-segment-button', inputs: ['color', 'mode', 'checked', 'disabled', 'href', 'value'], outputs: ['ionSelect']}) +@Directive({selector: 'ion-segment-button', inputs: ['color', 'mode', 'checked', 'disabled', 'value'], outputs: ['ionSelect']}) export class SegmentButton { ionSelect: EventEmitter; constructor(r: ElementRef) { - proxyInputs(this, r, ['color', 'mode', 'checked', 'disabled', 'href', 'value']); + proxyInputs(this, r, ['color', 'mode', 'checked', 'disabled', 'value']); proxyOutputs(this, ['ionSelect']); } } @@ -580,10 +602,10 @@ export class SelectPopover { } export declare interface ShowWhen extends StencilComponents.IonShowWhen {} -@Directive({selector: 'ion-show-when', inputs: ['orientation', 'mediaQuery', 'size', 'platform', 'or']}) +@Directive({selector: 'ion-show-when', inputs: ['mode', 'orientation', 'mediaQuery', 'size', 'platform', 'or']}) export class ShowWhen { constructor(r: ElementRef) { - proxyInputs(this, r, ['orientation', 'mediaQuery', 'size', 'platform', 'or']); + proxyInputs(this, r, ['mode', 'orientation', 'mediaQuery', 'size', 'platform', 'or']); } } @@ -601,7 +623,7 @@ export class Slide { } export declare interface Slides extends StencilComponents.IonSlides {} -@Directive({selector: 'ion-slides', inputs: ['options', 'pager'], outputs: ['ionSlideWillChange', 'ionSlideDidChange', 'ionSlideNextStart', 'ionSlidePrevStart', 'ionSlideNextEnd', 'ionSlidePrevEnd', 'ionSlideTransitionStart', 'ionSlideTransitionEnd', 'ionSlideDrag', 'ionSlideReachStart', 'ionSlideReachEnd', 'ionSlideTouchStart', 'ionSlideTouchEnd']}) +@Directive({selector: 'ion-slides', inputs: ['options', 'pager', 'scrollbar'], outputs: ['ionSlideWillChange', 'ionSlideDidChange', 'ionSlideNextStart', 'ionSlidePrevStart', 'ionSlideNextEnd', 'ionSlidePrevEnd', 'ionSlideTransitionStart', 'ionSlideTransitionEnd', 'ionSlideDrag', 'ionSlideReachStart', 'ionSlideReachEnd', 'ionSlideTouchStart', 'ionSlideTouchEnd']}) export class Slides { ionSlideWillChange: EventEmitter; ionSlideDidChange: EventEmitter; @@ -618,7 +640,7 @@ export class Slides { ionSlideTouchEnd: EventEmitter; constructor(r: ElementRef) { proxyMethods(this, r, ['update', 'slideTo', 'slideNext', 'slidePrev', 'getActiveIndex', 'getPreviousIndex', 'length', 'isEnd', 'isBeginning', 'startAutoplay', 'stopAutoplay', 'lockSwipeToNext', 'lockSwipeToPrev', 'lockSwipes']); - proxyInputs(this, r, ['options', 'pager']); + proxyInputs(this, r, ['options', 'pager', 'scrollbar']); proxyOutputs(this, ['ionSlideWillChange', 'ionSlideDidChange', 'ionSlideNextStart', 'ionSlidePrevStart', 'ionSlideNextEnd', 'ionSlidePrevEnd', 'ionSlideTransitionStart', 'ionSlideTransitionEnd', 'ionSlideDrag', 'ionSlideReachStart', 'ionSlideReachEnd', 'ionSlideTouchStart', 'ionSlideTouchEnd']); } } diff --git a/angular/src/ionic-module.ts b/angular/src/ionic-module.ts index 70bcc896ac..f5cdb0883c 100644 --- a/angular/src/ionic-module.ts +++ b/angular/src/ionic-module.ts @@ -24,6 +24,7 @@ const DECLARATIONS = [ d.Checkbox, d.Chip, d.ChipButton, + d.ChipIcon, d.Col, d.Content, d.Datetime, @@ -34,6 +35,7 @@ const DECLARATIONS = [ d.Grid, d.Header, d.HideWhen, + d.Icon, d.Img, d.InfiniteScroll, d.InfiniteScrollContent, @@ -86,9 +88,6 @@ const DECLARATIONS = [ d.Toolbar, d.ToolbarTitle, - // custom proxy - c.Icon, - // ngModel accessors c.BooleanValueAccessor, c.NumericValueAccessor, diff --git a/angular/stencil.config.js b/angular/stencil.config.js index 87d54e0d20..7dd35821d7 100644 --- a/angular/stencil.config.js +++ b/angular/stencil.config.js @@ -40,8 +40,6 @@ exports.config.outputTargets = [ 'ion-animation-controller', 'ion-animation-controller', 'ion-gesture-controller', - 'ion-platform', - 'ion-cordova-platform', // navigation 'ion-router', @@ -54,11 +52,9 @@ exports.config.outputTargets = [ // auxiliar 'ion-gesture', - 'ion-status-tap', 'ion-tap-click', 'ion-picker-column', 'ion-range-knob', - 'ion-input-shims', 'ion-backdrop', 'ion-anchor', 'ion-virtual-scroll' diff --git a/core/.sass-lint.yml b/core/.sass-lint.yml index 1e11ad3287..536461c2b1 100644 --- a/core/.sass-lint.yml +++ b/core/.sass-lint.yml @@ -59,8 +59,9 @@ rules: allow-element-with-id: false + # TODO temporarily disabled until https://github.com/sasstools/sass-lint/pull/1207 is merged property-sort-order: - - 2 + - 0 - ignore-custom-properties: false order: diff --git a/core/.scss-lint.yml b/core/.scss-lint.yml index 7435b45d92..033c96f258 100644 --- a/core/.scss-lint.yml +++ b/core/.scss-lint.yml @@ -224,5 +224,4 @@ linters: - border-top-right-radius - border-bottom-right-radius - border-bottom-left-radius - - text-align - transform-origin \ No newline at end of file diff --git a/core/package-lock.json b/core/package-lock.json index 7ab550ee97..ccdd7c6a41 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -19,9 +19,22 @@ "integrity": "sha1-6IRK4loVlcz9QriWI7Q3bKBtIl0=", "dev": true, "requires": { - "chalk": "2.3.2", - "esutils": "2.0.2", - "js-tokens": "3.0.2" + "chalk": "^2.0.0", + "esutils": "^2.0.2", + "js-tokens": "^3.0.0" + }, + "dependencies": { + "chalk": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", + "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + } } }, "@ionic/discover": { @@ -30,26 +43,26 @@ "integrity": "sha512-xciPTCEMYHv6sT7e4NwrAGkVQ8prj1NK9xO2z7/MoB+/HhREDsYDreNjU0lZF6G4X/91HcNNPC439D2WkAGd1w==", "dev": true, "requires": { - "netmask": "1.0.6" + "netmask": "^1.0.6" } }, "@stencil/core": { - "version": "0.10.0-6", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-0.10.0-6.tgz", - "integrity": "sha512-GuMBXbzVaT/t8teWeJdQJN1hT5lROURpNCIA7ffUNxp7qX7y6LrI5JEgUaGfRuEESPcyLRFxXuNDJjR6VcMyqw==", + "version": "0.10.0-11", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-0.10.0-11.tgz", + "integrity": "sha512-eg6KCo5GJ6Jdahyk6Wqb8+N526eaDdkWbZl/DaxJaUIUiLXIzn3riGsbnTRyGhE10gWalotO1zUHM5rD5S5fww==", "dev": true, "requires": { "chokidar": "2.0.3", "jsdom": "11.5.1", - "rollup": "0.59.4", + "rollup": "^0.59.4", "rollup-plugin-commonjs": "9.1.3", "rollup-plugin-node-builtins": "2.1.2", "rollup-plugin-node-globals": "1.2.1", "rollup-plugin-node-resolve": "3.3.0", "rollup-pluginutils": "2.3.0", - "typescript": "2.9.2", + "typescript": "~2.9.1", "uglify-es": "3.3.9", - "workbox-build": "3.3.1" + "workbox-build": "^3.1.0" } }, "@stencil/dev-server": { @@ -58,11 +71,11 @@ "integrity": "sha512-3ybrK+7G6M+8j2fQ6LiLkONMtEhew0MbhfgcVF/skkqqrCEMioCKSt8uF8EzY38fkV6iH5S1KDVqyFuHv7SM7Q==", "dev": true, "requires": { - "@ionic/discover": "0.3.3", - "chokidar": "1.7.0", - "ecstatic": "2.2.1", - "opn": "5.3.0", - "tiny-lr": "1.1.1" + "@ionic/discover": "^0.3.3", + "chokidar": "^1.7.0", + "ecstatic": "^2.2.1", + "opn": "^5.1.0", + "tiny-lr": "^1.0.5" }, "dependencies": { "anymatch": { @@ -71,8 +84,8 @@ "integrity": "sha512-0XNayC8lTHQ2OI8aljNCN3sSx6hsr/1+rlcDAotXJR7C1oZZHCNsfpbKwMjRA3Uqb5tF1Rae2oloTr4xpq+WjA==", "dev": true, "requires": { - "micromatch": "2.3.11", - "normalize-path": "2.1.1" + "micromatch": "^2.1.5", + "normalize-path": "^2.0.0" } }, "arr-diff": { @@ -81,7 +94,7 @@ "integrity": "sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=", "dev": true, "requires": { - "arr-flatten": "1.1.0" + "arr-flatten": "^1.0.1" } }, "array-unique": { @@ -96,9 +109,9 @@ "integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=", "dev": true, "requires": { - "expand-range": "1.8.2", - "preserve": "0.2.0", - "repeat-element": "1.1.2" + "expand-range": "^1.8.1", + "preserve": "^0.2.0", + "repeat-element": "^1.1.2" } }, "chokidar": { @@ -107,15 +120,15 @@ "integrity": "sha1-eY5ol3gVHIB2tLNg5e3SjNortGg=", "dev": true, "requires": { - "anymatch": "1.3.2", - "async-each": "1.0.1", - "fsevents": "1.1.3", - "glob-parent": "2.0.0", - "inherits": "2.0.3", - "is-binary-path": "1.0.1", - "is-glob": "2.0.1", - "path-is-absolute": "1.0.1", - "readdirp": "2.1.0" + "anymatch": "^1.3.0", + "async-each": "^1.0.0", + "fsevents": "^1.0.0", + "glob-parent": "^2.0.0", + "inherits": "^2.0.1", + "is-binary-path": "^1.0.0", + "is-glob": "^2.0.0", + "path-is-absolute": "^1.0.0", + "readdirp": "^2.0.0" } }, "expand-brackets": { @@ -124,7 +137,7 @@ "integrity": "sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=", "dev": true, "requires": { - "is-posix-bracket": "0.1.1" + "is-posix-bracket": "^0.1.0" } }, "extglob": { @@ -133,7 +146,7 @@ "integrity": "sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=", "dev": true, "requires": { - "is-extglob": "1.0.0" + "is-extglob": "^1.0.0" } }, "glob-parent": { @@ -142,7 +155,7 @@ "integrity": "sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=", "dev": true, "requires": { - "is-glob": "2.0.1" + "is-glob": "^2.0.0" } }, "is-extglob": { @@ -157,7 +170,7 @@ "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=", "dev": true, "requires": { - "is-extglob": "1.0.0" + "is-extglob": "^1.0.0" } }, "kind-of": { @@ -166,7 +179,7 @@ "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", "dev": true, "requires": { - "is-buffer": "1.1.6" + "is-buffer": "^1.1.5" } }, "micromatch": { @@ -175,19 +188,19 @@ "integrity": "sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=", "dev": true, "requires": { - "arr-diff": "2.0.0", - "array-unique": "0.2.1", - "braces": "1.8.5", - "expand-brackets": "0.1.5", - "extglob": "0.3.2", - "filename-regex": "2.0.1", - "is-extglob": "1.0.0", - "is-glob": "2.0.1", - "kind-of": "3.2.2", - "normalize-path": "2.1.1", - "object.omit": "2.0.1", - "parse-glob": "3.0.4", - "regex-cache": "0.4.4" + "arr-diff": "^2.0.0", + "array-unique": "^0.2.1", + "braces": "^1.8.2", + "expand-brackets": "^0.1.4", + "extglob": "^0.3.1", + "filename-regex": "^2.0.0", + "is-extglob": "^1.0.0", + "is-glob": "^2.0.1", + "kind-of": "^3.0.2", + "normalize-path": "^2.0.1", + "object.omit": "^2.0.0", + "parse-glob": "^3.0.4", + "regex-cache": "^0.4.2" } } } @@ -220,9 +233,9 @@ "dev": true }, "@types/node": { - "version": "9.6.5", - "resolved": "https://registry.npmjs.org/@types/node/-/node-9.6.5.tgz", - "integrity": "sha512-NOLEgsT6UiDTjnWG5Hd2Mg25LRyz/oe8ql3wbjzgSFeRzRROhPmtlsvIrei4B46UjERF0td9SZ1ZXPLOdcrBHg==", + "version": "10.3.3", + "resolved": "https://registry.npmjs.org/@types/node/-/node-10.3.3.tgz", + "integrity": "sha512-/gwCgiI2e9RzzZTKbl+am3vgNqOt7a9fJ/uxv4SqYKxenoEDNVU3KZEadlpusWhQI0A0dOrZ0T68JYKVjzmgdQ==", "dev": true }, "abab": { @@ -243,7 +256,7 @@ "integrity": "sha1-KeGOYy5g5OIh1YECR4UqY9ey5BA=", "dev": true, "requires": { - "xtend": "3.0.0" + "xtend": "~3.0.0" }, "dependencies": { "xtend": { @@ -255,9 +268,9 @@ } }, "acorn": { - "version": "5.5.3", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.5.3.tgz", - "integrity": "sha512-jd5MkIUlbbmb07nXH0DT3y7rDVtkzDi4XZOUVWAer8ajmF/DTSSbl5oNFyDOl/OXA33Bl79+ypHhl2pN20VeOQ==", + "version": "5.6.2", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.6.2.tgz", + "integrity": "sha512-zUzo1E5dI2Ey8+82egfnttyMlMZ2y0D8xOCO3PNPPlYXpl8NZvF6Qk9L9BEtJs+43FqEmfBViDqc5d1ckRDguw==", "dev": true }, "acorn-globals": { @@ -266,7 +279,7 @@ "integrity": "sha512-KjZwU26uG3u6eZcfGbTULzFcsoz6pegNKtHPksZPOUsiKo5bUmiBPa38FuHZ/Eun+XYh/JCCkS9AS3Lu4McQOQ==", "dev": true, "requires": { - "acorn": "5.5.3" + "acorn": "^5.0.0" } }, "acorn-jsx": { @@ -275,7 +288,7 @@ "integrity": "sha1-r9+UiPsezvyDSPb7IvRk4ypYs2s=", "dev": true, "requires": { - "acorn": "3.3.0" + "acorn": "^3.0.4" }, "dependencies": { "acorn": { @@ -292,10 +305,10 @@ "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=", "dev": true, "requires": { - "co": "4.6.0", - "fast-deep-equal": "1.1.0", - "fast-json-stable-stringify": "2.0.0", - "json-schema-traverse": "0.3.1" + "co": "^4.6.0", + "fast-deep-equal": "^1.0.0", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.3.0" } }, "ajv-keywords": { @@ -310,9 +323,9 @@ "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=", "dev": true, "requires": { - "kind-of": "3.2.2", - "longest": "1.0.1", - "repeat-string": "1.6.1" + "kind-of": "^3.0.2", + "longest": "^1.0.1", + "repeat-string": "^1.5.2" }, "dependencies": { "kind-of": { @@ -321,7 +334,7 @@ "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", "dev": true, "requires": { - "is-buffer": "1.1.6" + "is-buffer": "^1.1.5" } } } @@ -338,7 +351,7 @@ "integrity": "sha1-w2rsy6VjuJzrVW82kPCx2eNUf38=", "dev": true, "requires": { - "string-width": "2.1.1" + "string-width": "^2.0.0" }, "dependencies": { "ansi-regex": { @@ -359,8 +372,8 @@ "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==", "dev": true, "requires": { - "is-fullwidth-code-point": "2.0.0", - "strip-ansi": "4.0.0" + "is-fullwidth-code-point": "^2.0.0", + "strip-ansi": "^4.0.0" } }, "strip-ansi": { @@ -369,7 +382,7 @@ "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", "dev": true, "requires": { - "ansi-regex": "3.0.0" + "ansi-regex": "^3.0.0" } } } @@ -383,8 +396,7 @@ "ansi-regex": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" }, "ansi-styles": { "version": "3.2.1", @@ -392,7 +404,7 @@ "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", "dev": true, "requires": { - "color-convert": "1.9.1" + "color-convert": "^1.9.0" } }, "any-observable": { @@ -407,8 +419,8 @@ "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==", "dev": true, "requires": { - "micromatch": "3.1.10", - "normalize-path": "2.1.1" + "micromatch": "^3.1.4", + "normalize-path": "^2.1.1" } }, "append-transform": { @@ -417,7 +429,7 @@ "integrity": "sha512-P009oYkeHyU742iSZJzZZywj4QRJdnTWffaKuJQLablCZ1uz6/cW4yaRgcDaoQ+uwOxxnt0gRUcwfsNP2ri0gw==", "dev": true, "requires": { - "default-require-extensions": "2.0.0" + "default-require-extensions": "^2.0.0" } }, "aproba": { @@ -432,8 +444,8 @@ "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==", "dev": true, "requires": { - "delegates": "1.0.0", - "readable-stream": "2.3.6" + "delegates": "^1.0.0", + "readable-stream": "^2.0.6" } }, "argparse": { @@ -442,26 +454,23 @@ "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", "dev": true, "requires": { - "sprintf-js": "1.0.3" + "sprintf-js": "~1.0.2" } }, "arr-diff": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz", - "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=", - "dev": true + "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=" }, "arr-flatten": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz", - "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==", - "dev": true + "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==" }, "arr-union": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz", - "integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=", - "dev": true + "integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=" }, "array-equal": { "version": "1.0.0", @@ -481,7 +490,7 @@ "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=", "dev": true, "requires": { - "array-uniq": "1.0.3" + "array-uniq": "^1.0.1" } }, "array-uniq": { @@ -493,14 +502,12 @@ "array-unique": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz", - "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=", - "dev": true + "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=" }, "arrify": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz", - "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=", - "dev": true + "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=" }, "asn1": { "version": "0.2.3", @@ -514,9 +521,9 @@ "integrity": "sha512-p32cOF5q0Zqs9uBiONKYLm6BClCoBCM5O9JfeUSlnQLBTxYdTK+pW+nXflm8UkKd2UYlEbYz5qEi0JuZR9ckSw==", "dev": true, "requires": { - "bn.js": "4.11.8", - "inherits": "2.0.3", - "minimalistic-assert": "1.0.1" + "bn.js": "^4.0.0", + "inherits": "^2.0.1", + "minimalistic-assert": "^1.0.0" } }, "assert-plus": { @@ -534,8 +541,7 @@ "assign-symbols": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz", - "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=", - "dev": true + "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=" }, "astral-regex": { "version": "1.0.0", @@ -549,7 +555,7 @@ "integrity": "sha512-fNEiL2+AZt6AlAw/29Cr0UDe4sRAHCpEHh54WMz+Bb7QfNcFw4h3loofyJpLeQs4Yx7yuqu/2dLgM5hKOs6HlQ==", "dev": true, "requires": { - "lodash": "4.17.10" + "lodash": "^4.17.10" }, "dependencies": { "lodash": { @@ -579,10 +585,9 @@ "dev": true }, "atob": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.0.tgz", - "integrity": "sha512-SuiKH8vbsOyCALjA/+EINmt/Kdl+TQPrtFgW7XZZcwtryFu9e5kQoX3bjCW6mIvGH1fbeAZZuvwGR5IlBRznGw==", - "dev": true + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.1.tgz", + "integrity": "sha1-ri1acpR38onWDdf5amMUoi3Wwio=" }, "aws-sign2": { "version": "0.7.0", @@ -600,37 +605,33 @@ "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz", "integrity": "sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=", - "dev": true, "requires": { - "chalk": "1.1.3", - "esutils": "2.0.2", - "js-tokens": "3.0.2" + "chalk": "^1.1.3", + "esutils": "^2.0.2", + "js-tokens": "^3.0.2" }, "dependencies": { "ansi-styles": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", - "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", - "dev": true + "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=" }, "chalk": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", - "dev": true, "requires": { - "ansi-styles": "2.2.1", - "escape-string-regexp": "1.0.5", - "has-ansi": "2.0.0", - "strip-ansi": "3.0.1", - "supports-color": "2.0.0" + "ansi-styles": "^2.2.1", + "escape-string-regexp": "^1.0.2", + "has-ansi": "^2.0.0", + "strip-ansi": "^3.0.0", + "supports-color": "^2.0.0" } }, "supports-color": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", - "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", - "dev": true + "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=" } } }, @@ -640,41 +641,40 @@ "integrity": "sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==", "dev": true, "requires": { - "babel-code-frame": "6.26.0", - "babel-generator": "6.26.1", - "babel-helpers": "6.24.1", - "babel-messages": "6.23.0", - "babel-register": "6.26.0", - "babel-runtime": "6.26.0", - "babel-template": "6.26.0", - "babel-traverse": "6.26.0", - "babel-types": "6.26.0", - "babylon": "6.18.0", - "convert-source-map": "1.5.1", - "debug": "2.6.9", - "json5": "0.5.1", - "lodash": "4.17.5", - "minimatch": "3.0.4", - "path-is-absolute": "1.0.1", - "private": "0.1.8", - "slash": "1.0.0", - "source-map": "0.5.7" + "babel-code-frame": "^6.26.0", + "babel-generator": "^6.26.0", + "babel-helpers": "^6.24.1", + "babel-messages": "^6.23.0", + "babel-register": "^6.26.0", + "babel-runtime": "^6.26.0", + "babel-template": "^6.26.0", + "babel-traverse": "^6.26.0", + "babel-types": "^6.26.0", + "babylon": "^6.18.0", + "convert-source-map": "^1.5.1", + "debug": "^2.6.9", + "json5": "^0.5.1", + "lodash": "^4.17.4", + "minimatch": "^3.0.4", + "path-is-absolute": "^1.0.1", + "private": "^0.1.8", + "slash": "^1.0.0", + "source-map": "^0.5.7" } }, "babel-generator": { "version": "6.26.1", "resolved": "https://registry.npmjs.org/babel-generator/-/babel-generator-6.26.1.tgz", "integrity": "sha512-HyfwY6ApZj7BYTcJURpM5tznulaBvyio7/0d4zFOeMPUmfxkCjHocCuoLa2SAGzBI8AREcH3eP3758F672DppA==", - "dev": true, "requires": { - "babel-messages": "6.23.0", - "babel-runtime": "6.26.0", - "babel-types": "6.26.0", - "detect-indent": "4.0.0", - "jsesc": "1.3.0", - "lodash": "4.17.5", - "source-map": "0.5.7", - "trim-right": "1.0.1" + "babel-messages": "^6.23.0", + "babel-runtime": "^6.26.0", + "babel-types": "^6.26.0", + "detect-indent": "^4.0.0", + "jsesc": "^1.3.0", + "lodash": "^4.17.4", + "source-map": "^0.5.7", + "trim-right": "^1.0.1" } }, "babel-helpers": { @@ -683,8 +683,8 @@ "integrity": "sha1-NHHenK7DiOXIUOWX5Yom3fN2ArI=", "dev": true, "requires": { - "babel-runtime": "6.26.0", - "babel-template": "6.26.0" + "babel-runtime": "^6.22.0", + "babel-template": "^6.24.1" } }, "babel-jest": { @@ -693,38 +693,35 @@ "integrity": "sha1-u6079SP7IC2gXtCmVAtIyE7tE6Y=", "dev": true, "requires": { - "babel-plugin-istanbul": "4.1.6", - "babel-preset-jest": "23.0.1" + "babel-plugin-istanbul": "^4.1.6", + "babel-preset-jest": "^23.0.1" } }, "babel-messages": { "version": "6.23.0", "resolved": "https://registry.npmjs.org/babel-messages/-/babel-messages-6.23.0.tgz", "integrity": "sha1-8830cDhYA1sqKVHG7F7fbGLyYw4=", - "dev": true, "requires": { - "babel-runtime": "6.26.0" + "babel-runtime": "^6.22.0" } }, "babel-plugin-istanbul": { "version": "4.1.6", "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz", "integrity": "sha512-PWP9FQ1AhZhS01T/4qLSKoHGY/xvkZdVBGlKM/HuxxS3+sC66HhTNR7+MpbO/so/cz/wY94MeSWJuP1hXIPfwQ==", - "dev": true, "requires": { - "babel-plugin-syntax-object-rest-spread": "6.13.0", - "find-up": "2.1.0", - "istanbul-lib-instrument": "1.10.1", - "test-exclude": "4.2.1" + "babel-plugin-syntax-object-rest-spread": "^6.13.0", + "find-up": "^2.1.0", + "istanbul-lib-instrument": "^1.10.1", + "test-exclude": "^4.2.1" }, "dependencies": { "find-up": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz", "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=", - "dev": true, "requires": { - "locate-path": "2.0.0" + "locate-path": "^2.0.0" } } } @@ -738,8 +735,7 @@ "babel-plugin-syntax-object-rest-spread": { "version": "6.13.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz", - "integrity": "sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=", - "dev": true + "integrity": "sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=" }, "babel-preset-jest": { "version": "23.0.1", @@ -747,8 +743,8 @@ "integrity": "sha1-YxzFRcbPAhlDATvK8i9F2H/mIZg=", "dev": true, "requires": { - "babel-plugin-jest-hoist": "23.0.1", - "babel-plugin-syntax-object-rest-spread": "6.13.0" + "babel-plugin-jest-hoist": "^23.0.1", + "babel-plugin-syntax-object-rest-spread": "^6.13.0" } }, "babel-register": { @@ -757,72 +753,67 @@ "integrity": "sha1-btAhFz4vy0htestFxgCahW9kcHE=", "dev": true, "requires": { - "babel-core": "6.26.3", - "babel-runtime": "6.26.0", - "core-js": "2.5.5", - "home-or-tmp": "2.0.0", - "lodash": "4.17.5", - "mkdirp": "0.5.1", - "source-map-support": "0.4.18" + "babel-core": "^6.26.0", + "babel-runtime": "^6.26.0", + "core-js": "^2.5.0", + "home-or-tmp": "^2.0.0", + "lodash": "^4.17.4", + "mkdirp": "^0.5.1", + "source-map-support": "^0.4.15" } }, "babel-runtime": { "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz", "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=", - "dev": true, "requires": { - "core-js": "2.5.5", - "regenerator-runtime": "0.11.1" + "core-js": "^2.4.0", + "regenerator-runtime": "^0.11.0" } }, "babel-template": { "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-template/-/babel-template-6.26.0.tgz", "integrity": "sha1-3gPi0WOWsGn0bdn/+FIfsaDjXgI=", - "dev": true, "requires": { - "babel-runtime": "6.26.0", - "babel-traverse": "6.26.0", - "babel-types": "6.26.0", - "babylon": "6.18.0", - "lodash": "4.17.5" + "babel-runtime": "^6.26.0", + "babel-traverse": "^6.26.0", + "babel-types": "^6.26.0", + "babylon": "^6.18.0", + "lodash": "^4.17.4" } }, "babel-traverse": { "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-traverse/-/babel-traverse-6.26.0.tgz", "integrity": "sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4=", - "dev": true, "requires": { - "babel-code-frame": "6.26.0", - "babel-messages": "6.23.0", - "babel-runtime": "6.26.0", - "babel-types": "6.26.0", - "babylon": "6.18.0", - "debug": "2.6.9", - "globals": "9.18.0", - "invariant": "2.2.4", - "lodash": "4.17.5" + "babel-code-frame": "^6.26.0", + "babel-messages": "^6.23.0", + "babel-runtime": "^6.26.0", + "babel-types": "^6.26.0", + "babylon": "^6.18.0", + "debug": "^2.6.8", + "globals": "^9.18.0", + "invariant": "^2.2.2", + "lodash": "^4.17.4" } }, "babel-types": { "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-types/-/babel-types-6.26.0.tgz", "integrity": "sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=", - "dev": true, "requires": { - "babel-runtime": "6.26.0", - "esutils": "2.0.2", - "lodash": "4.17.5", - "to-fast-properties": "1.0.3" + "babel-runtime": "^6.26.0", + "esutils": "^2.0.2", + "lodash": "^4.17.4", + "to-fast-properties": "^1.0.3" } }, "babylon": { "version": "6.18.0", "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz", - "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==", - "dev": true + "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==" }, "balanced-match": { "version": "1.0.0", @@ -834,53 +825,48 @@ "version": "0.11.2", "resolved": "https://registry.npmjs.org/base/-/base-0.11.2.tgz", "integrity": "sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==", - "dev": true, "requires": { - "cache-base": "1.0.1", - "class-utils": "0.3.6", - "component-emitter": "1.2.1", - "define-property": "1.0.0", - "isobject": "3.0.1", - "mixin-deep": "1.3.1", - "pascalcase": "0.1.1" + "cache-base": "^1.0.1", + "class-utils": "^0.3.5", + "component-emitter": "^1.2.1", + "define-property": "^1.0.0", + "isobject": "^3.0.1", + "mixin-deep": "^1.2.0", + "pascalcase": "^0.1.1" }, "dependencies": { "define-property": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz", "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=", - "dev": true, "requires": { - "is-descriptor": "1.0.2" + "is-descriptor": "^1.0.0" } }, "is-accessor-descriptor": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz", "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==", - "dev": true, "requires": { - "kind-of": "6.0.2" + "kind-of": "^6.0.0" } }, "is-data-descriptor": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz", "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==", - "dev": true, "requires": { - "kind-of": "6.0.2" + "kind-of": "^6.0.0" } }, "is-descriptor": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz", "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==", - "dev": true, "requires": { - "is-accessor-descriptor": "1.0.0", - "is-data-descriptor": "1.0.0", - "kind-of": "6.0.2" + "is-accessor-descriptor": "^1.0.0", + "is-data-descriptor": "^1.0.0", + "kind-of": "^6.0.2" } } } @@ -892,7 +878,7 @@ "dev": true, "optional": true, "requires": { - "tweetnacl": "0.14.5" + "tweetnacl": "^0.14.3" } }, "binary-extensions": { @@ -907,7 +893,7 @@ "integrity": "sha1-yba8oI0bwuoA/Ir7Txpf0eHGbk4=", "dev": true, "requires": { - "readable-stream": "1.0.34" + "readable-stream": "~1.0.26" }, "dependencies": { "isarray": { @@ -922,10 +908,10 @@ "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=", "dev": true, "requires": { - "core-util-is": "1.0.2", - "inherits": "2.0.3", + "core-util-is": "~1.0.0", + "inherits": "~2.0.1", "isarray": "0.0.1", - "string_decoder": "0.10.31" + "string_decoder": "~0.10.x" } }, "string_decoder": { @@ -942,7 +928,7 @@ "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=", "dev": true, "requires": { - "inherits": "2.0.3" + "inherits": "~2.0.0" } }, "bn.js": { @@ -957,19 +943,27 @@ "integrity": "sha1-5LoM5BCkaTYyM2dgnstOZVMSUGk=", "dev": true, "requires": { - "continuable-cache": "0.3.1", - "error": "7.0.2", - "raw-body": "1.1.7", - "safe-json-parse": "1.0.1" + "continuable-cache": "^0.3.1", + "error": "^7.0.0", + "raw-body": "~1.1.0", + "safe-json-parse": "~1.0.1" } }, "boom": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/boom/-/boom-4.3.1.tgz", - "integrity": "sha1-T4owBctKfjiJ90kDD9JbluAdLjE=", + "version": "2.10.1", + "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz", + "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=", "dev": true, "requires": { - "hoek": "4.2.1" + "hoek": "2.x.x" + }, + "dependencies": { + "hoek": { + "version": "2.16.3", + "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz", + "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=", + "dev": true + } } }, "boxen": { @@ -978,13 +972,13 @@ "integrity": "sha512-TNPjfTr432qx7yOjQyaXm3dSR0MH9vXp7eT1BFSl/C51g+EFnOR9hTg1IreahGBmDNCehscshe45f+C1TBZbLw==", "dev": true, "requires": { - "ansi-align": "2.0.0", - "camelcase": "4.1.0", - "chalk": "2.3.2", - "cli-boxes": "1.0.0", - "string-width": "2.1.1", - "term-size": "1.2.0", - "widest-line": "2.0.0" + "ansi-align": "^2.0.0", + "camelcase": "^4.0.0", + "chalk": "^2.0.1", + "cli-boxes": "^1.0.0", + "string-width": "^2.0.0", + "term-size": "^1.2.0", + "widest-line": "^2.0.0" }, "dependencies": { "ansi-regex": { @@ -993,12 +987,32 @@ "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=", "dev": true }, + "ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "requires": { + "color-convert": "^1.9.0" + } + }, "camelcase": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz", "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=", "dev": true }, + "chalk": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", + "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + }, "is-fullwidth-code-point": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", @@ -1011,8 +1025,8 @@ "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==", "dev": true, "requires": { - "is-fullwidth-code-point": "2.0.0", - "strip-ansi": "4.0.0" + "is-fullwidth-code-point": "^2.0.0", + "strip-ansi": "^4.0.0" } }, "strip-ansi": { @@ -1021,7 +1035,7 @@ "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", "dev": true, "requires": { - "ansi-regex": "3.0.0" + "ansi-regex": "^3.0.0" } } } @@ -1032,7 +1046,7 @@ "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dev": true, "requires": { - "balanced-match": "1.0.0", + "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, @@ -1040,27 +1054,25 @@ "version": "2.3.2", "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz", "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==", - "dev": true, "requires": { - "arr-flatten": "1.1.0", - "array-unique": "0.3.2", - "extend-shallow": "2.0.1", - "fill-range": "4.0.0", - "isobject": "3.0.1", - "repeat-element": "1.1.2", - "snapdragon": "0.8.2", - "snapdragon-node": "2.1.1", - "split-string": "3.1.0", - "to-regex": "3.0.2" + "arr-flatten": "^1.1.0", + "array-unique": "^0.3.2", + "extend-shallow": "^2.0.1", + "fill-range": "^4.0.0", + "isobject": "^3.0.1", + "repeat-element": "^1.1.2", + "snapdragon": "^0.8.1", + "snapdragon-node": "^2.0.1", + "split-string": "^3.0.2", + "to-regex": "^3.0.1" }, "dependencies": { "extend-shallow": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "dev": true, "requires": { - "is-extendable": "0.1.1" + "is-extendable": "^0.1.0" } } } @@ -1106,12 +1118,12 @@ "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==", "dev": true, "requires": { - "buffer-xor": "1.0.3", - "cipher-base": "1.0.4", - "create-hash": "1.2.0", - "evp_bytestokey": "1.0.3", - "inherits": "2.0.3", - "safe-buffer": "5.1.1" + "buffer-xor": "^1.0.3", + "cipher-base": "^1.0.0", + "create-hash": "^1.1.0", + "evp_bytestokey": "^1.0.3", + "inherits": "^2.0.1", + "safe-buffer": "^5.0.1" } }, "browserify-cipher": { @@ -1120,9 +1132,9 @@ "integrity": "sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==", "dev": true, "requires": { - "browserify-aes": "1.2.0", - "browserify-des": "1.0.1", - "evp_bytestokey": "1.0.3" + "browserify-aes": "^1.0.4", + "browserify-des": "^1.0.0", + "evp_bytestokey": "^1.0.0" } }, "browserify-des": { @@ -1131,9 +1143,9 @@ "integrity": "sha512-zy0Cobe3hhgpiOM32Tj7KQ3Vl91m0njwsjzZQK1L+JDf11dzP9qIvjreVinsvXrgfjhStXwUWAEpB9D7Gwmayw==", "dev": true, "requires": { - "cipher-base": "1.0.4", - "des.js": "1.0.0", - "inherits": "2.0.3" + "cipher-base": "^1.0.1", + "des.js": "^1.0.0", + "inherits": "^2.0.1" } }, "browserify-fs": { @@ -1142,9 +1154,9 @@ "integrity": "sha1-8HWqinKdTRcW0GZiDjhvzBMRqW8=", "dev": true, "requires": { - "level-filesystem": "1.2.0", - "level-js": "2.2.4", - "levelup": "0.18.6" + "level-filesystem": "^1.0.1", + "level-js": "^2.1.3", + "levelup": "^0.18.2" } }, "browserify-rsa": { @@ -1153,8 +1165,8 @@ "integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=", "dev": true, "requires": { - "bn.js": "4.11.8", - "randombytes": "2.0.6" + "bn.js": "^4.1.0", + "randombytes": "^2.0.1" } }, "browserify-sign": { @@ -1163,13 +1175,13 @@ "integrity": "sha1-qk62jl17ZYuqa/alfmMMvXqT0pg=", "dev": true, "requires": { - "bn.js": "4.11.8", - "browserify-rsa": "4.0.1", - "create-hash": "1.2.0", - "create-hmac": "1.1.7", - "elliptic": "6.4.0", - "inherits": "2.0.3", - "parse-asn1": "5.1.1" + "bn.js": "^4.1.1", + "browserify-rsa": "^4.0.0", + "create-hash": "^1.1.0", + "create-hmac": "^1.1.2", + "elliptic": "^6.0.0", + "inherits": "^2.0.1", + "parse-asn1": "^5.0.0" } }, "bser": { @@ -1178,7 +1190,7 @@ "integrity": "sha1-mseNPtXZFYBP2HrLFYvHlxR6Fxk=", "dev": true, "requires": { - "node-int64": "0.4.0" + "node-int64": "^0.4.0" } }, "buffer-es6": { @@ -1188,9 +1200,9 @@ "dev": true }, "buffer-from": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.0.0.tgz", - "integrity": "sha512-83apNb8KK0Se60UE1+4Ukbe3HbfELJ6UlI4ldtOGs7So4KD26orJM8hIY9lxdzP+UpItH1Yh/Y8GUvNFWFFRxA==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.0.tgz", + "integrity": "sha512-c5mRlguI/Pe2dSZmpER62rSCu0ryKmWddzRYsuXc50U2/g8jMOulc31VZMa4mYx31U5xsmSOpDCgH88Vl9cDGQ==", "dev": true }, "buffer-xor": { @@ -1215,17 +1227,16 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz", "integrity": "sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==", - "dev": true, "requires": { - "collection-visit": "1.0.0", - "component-emitter": "1.2.1", - "get-value": "2.0.6", - "has-value": "1.0.0", - "isobject": "3.0.1", - "set-value": "2.0.0", - "to-object-path": "0.3.0", - "union-value": "1.0.0", - "unset-value": "1.0.0" + "collection-visit": "^1.0.0", + "component-emitter": "^1.2.1", + "get-value": "^2.0.6", + "has-value": "^1.0.0", + "isobject": "^3.0.1", + "set-value": "^2.0.0", + "to-object-path": "^0.3.0", + "union-value": "^1.0.0", + "unset-value": "^1.0.0" } }, "caller-path": { @@ -1234,7 +1245,7 @@ "integrity": "sha1-lAhe9jWB7NPaqSREqP6U6CV3dR8=", "dev": true, "requires": { - "callsites": "0.2.0" + "callsites": "^0.2.0" }, "dependencies": { "callsites": { @@ -1263,8 +1274,8 @@ "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=", "dev": true, "requires": { - "camelcase": "2.1.1", - "map-obj": "1.0.1" + "camelcase": "^2.0.0", + "map-obj": "^1.0.0" } }, "capture-exit": { @@ -1273,7 +1284,7 @@ "integrity": "sha1-HF/MSJ/QqwDU8ax64QcuMXP7q28=", "dev": true, "requires": { - "rsvp": "3.6.2" + "rsvp": "^3.3.3" } }, "capture-stack-trace": { @@ -1295,8 +1306,8 @@ "dev": true, "optional": true, "requires": { - "align-text": "0.1.4", - "lazy-cache": "1.0.4" + "align-text": "^0.1.3", + "lazy-cache": "^1.0.3" } }, "chai": { @@ -1305,23 +1316,39 @@ "integrity": "sha1-D2RYS6ZC8PKs4oBiefTwbKI61zw=", "dev": true, "requires": { - "assertion-error": "1.1.0", - "check-error": "1.0.2", - "deep-eql": "3.0.1", - "get-func-name": "2.0.0", - "pathval": "1.1.0", - "type-detect": "4.0.8" + "assertion-error": "^1.0.1", + "check-error": "^1.0.1", + "deep-eql": "^3.0.0", + "get-func-name": "^2.0.0", + "pathval": "^1.0.0", + "type-detect": "^4.0.0" } }, "chalk": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.2.tgz", - "integrity": "sha512-ZM4j2/ld/YZDc3Ma8PgN7gyAk+kHMMMyzLNryCPGhWrsfAuDVeuid5bpRFTDgMH9JBK2lA4dyyAkkZYF/WcqDQ==", + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { - "ansi-styles": "3.2.1", - "escape-string-regexp": "1.0.5", - "supports-color": "5.3.0" + "ansi-styles": "^2.2.1", + "escape-string-regexp": "^1.0.2", + "has-ansi": "^2.0.0", + "strip-ansi": "^3.0.0", + "supports-color": "^2.0.0" + }, + "dependencies": { + "ansi-styles": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", + "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", + "dev": true + }, + "supports-color": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", + "dev": true + } } }, "chardet": { @@ -1342,31 +1369,70 @@ "integrity": "sha512-zW8iXYZtXMx4kux/nuZVXjkLP+CyIK5Al5FHnj1OgTKGZfp4Oy6/ymtMSKFv3GD8DviEmUPmJg9eFdJ/JzudMg==", "dev": true, "requires": { - "anymatch": "2.0.0", - "async-each": "1.0.1", - "braces": "2.3.2", - "fsevents": "1.1.3", - "glob-parent": "3.1.0", - "inherits": "2.0.3", - "is-binary-path": "1.0.1", - "is-glob": "4.0.0", - "normalize-path": "2.1.1", - "path-is-absolute": "1.0.1", - "readdirp": "2.1.0", - "upath": "1.1.0" + "anymatch": "^2.0.0", + "async-each": "^1.0.0", + "braces": "^2.3.0", + "fsevents": "^1.1.2", + "glob-parent": "^3.1.0", + "inherits": "^2.0.1", + "is-binary-path": "^1.0.0", + "is-glob": "^4.0.0", + "normalize-path": "^2.1.1", + "path-is-absolute": "^1.0.0", + "readdirp": "^2.0.0", + "upath": "^1.0.0" } }, "chromedriver": { - "version": "2.38.3", - "resolved": "https://registry.npmjs.org/chromedriver/-/chromedriver-2.38.3.tgz", - "integrity": "sha512-tczy6RHl0LOVA4p+xezcu3NRjr9A1iLyyfjP9yPIUynvV28YSKH/Ll1iw0jMCjN9jwtaB2HB4aPjv0Uuw2VARw==", + "version": "2.40.0", + "resolved": "https://registry.npmjs.org/chromedriver/-/chromedriver-2.40.0.tgz", + "integrity": "sha512-ewvRQ1HMk0vpFSWYCk5hKDoEz5QMPplx5w3C6/Me+03y1imr67l3Hxl9U0jn3mu2N7+c7BoC7JtNW6HzbRAwDQ==", "dev": true, "requires": { - "del": "3.0.0", - "extract-zip": "1.6.6", - "kew": "0.7.0", - "mkdirp": "0.5.1", - "request": "2.85.0" + "del": "^3.0.0", + "extract-zip": "^1.6.7", + "kew": "^0.7.0", + "mkdirp": "^0.5.1", + "request": "^2.87.0" + }, + "dependencies": { + "request": { + "version": "2.87.0", + "resolved": "https://registry.npmjs.org/request/-/request-2.87.0.tgz", + "integrity": "sha512-fcogkm7Az5bsS6Sl0sibkbhcKsnyon/jV1kF3ajGmF0c8HrttdKTPRT9hieOaQHA5HEq6r8OyWOo/o781C1tNw==", + "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", + "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" + } + }, + "tough-cookie": { + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.4.tgz", + "integrity": "sha512-TZ6TTfI5NtZnuyy/Kecv+CnoROnyXn2DN97LontgQpCwsX2XyLYCC0ENhYkehSOwAp8rTQKc/NUIF7BkQ5rKLA==", + "dev": true, + "requires": { + "punycode": "^1.4.1" + } + } } }, "ci-info": { @@ -1381,8 +1447,8 @@ "integrity": "sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==", "dev": true, "requires": { - "inherits": "2.0.3", - "safe-buffer": "5.1.1" + "inherits": "^2.0.1", + "safe-buffer": "^5.0.1" } }, "circular-json": { @@ -1395,25 +1461,43 @@ "version": "0.3.6", "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz", "integrity": "sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==", - "dev": true, "requires": { - "arr-union": "3.1.0", - "define-property": "0.2.5", - "isobject": "3.0.1", - "static-extend": "0.1.2" + "arr-union": "^3.1.0", + "define-property": "^0.2.5", + "isobject": "^3.0.0", + "static-extend": "^0.1.1" }, "dependencies": { "define-property": { "version": "0.2.5", "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz", "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=", - "dev": true, "requires": { - "is-descriptor": "0.1.6" + "is-descriptor": "^0.1.0" } } } }, + "clean-css": { + "version": "4.1.11", + "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.11.tgz", + "integrity": "sha1-Ls3xRaujj1R0DybO/Q/z4D4SXWo=", + "dev": true, + "requires": { + "source-map": "0.5.x" + } + }, + "clean-css-cli": { + "version": "4.1.11", + "resolved": "https://registry.npmjs.org/clean-css-cli/-/clean-css-cli-4.1.11.tgz", + "integrity": "sha1-AcVonwW8USojKF8d79veALwR2Gw=", + "dev": true, + "requires": { + "clean-css": "^4.1.9", + "commander": "2.x", + "glob": "7.x" + } + }, "cli-boxes": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-1.0.0.tgz", @@ -1426,7 +1510,7 @@ "integrity": "sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=", "dev": true, "requires": { - "restore-cursor": "2.0.0" + "restore-cursor": "^2.0.0" } }, "cli-spinners": { @@ -1442,7 +1526,7 @@ "dev": true, "requires": { "slice-ansi": "0.0.4", - "string-width": "1.0.2" + "string-width": "^1.0.1" } }, "cli-width": { @@ -1457,9 +1541,9 @@ "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=", "dev": true, "requires": { - "string-width": "1.0.2", - "strip-ansi": "3.0.1", - "wrap-ansi": "2.1.0" + "string-width": "^1.0.1", + "strip-ansi": "^3.0.1", + "wrap-ansi": "^2.0.0" } }, "clone": { @@ -1484,25 +1568,24 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz", "integrity": "sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=", - "dev": true, "requires": { - "map-visit": "1.0.0", - "object-visit": "1.0.1" + "map-visit": "^1.0.0", + "object-visit": "^1.0.0" } }, "color-convert": { - "version": "1.9.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.1.tgz", - "integrity": "sha512-mjGanIiwQJskCC18rPR6OmrZ6fm2Lc7PeGFYwCmy5J34wC6F1PzdGL6xeMfmgicfYcNLGuVFA3WzXtIDCQSZxQ==", + "version": "1.9.2", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.2.tgz", + "integrity": "sha512-3NUJZdhMhcdPn8vJ9v2UQJoH0qqoGUkYTgFEPZaPjEtwmmKUfNV46zZmgB2M5M4DCEQHMaCfWHCxiBflLm04Tg==", "dev": true, "requires": { - "color-name": "1.1.3" + "color-name": "1.1.1" } }, "color-name": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.1.tgz", + "integrity": "sha1-SxQVMEz1ACjqgWQ2Q72C6gWANok=", "dev": true }, "combined-stream": { @@ -1511,13 +1594,13 @@ "integrity": "sha1-cj599ugBrFYTETp+RFqbactjKBg=", "dev": true, "requires": { - "delayed-stream": "1.0.0" + "delayed-stream": "~1.0.0" } }, "commander": { - "version": "2.13.0", - "resolved": "https://registry.npmjs.org/commander/-/commander-2.13.0.tgz", - "integrity": "sha512-MVuS359B+YzaWqjCL/c+22gfryv+mCBPHAv3zyVI2GN8EY6IRP8VwtasXn8jyyhvvq84R4ImN1OKRtcbIasjYA==", + "version": "2.15.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.15.1.tgz", + "integrity": "sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag==", "dev": true }, "common-tags": { @@ -1535,8 +1618,7 @@ "component-emitter": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz", - "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=", - "dev": true + "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=" }, "concat-map": { "version": "0.0.1", @@ -1550,10 +1632,10 @@ "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==", "dev": true, "requires": { - "buffer-from": "1.0.0", - "inherits": "2.0.3", - "readable-stream": "2.3.6", - "typedarray": "0.0.6" + "buffer-from": "^1.0.0", + "inherits": "^2.0.3", + "readable-stream": "^2.2.2", + "typedarray": "^0.0.6" } }, "configstore": { @@ -1562,12 +1644,12 @@ "integrity": "sha512-vtv5HtGjcYUgFrXc6Kx747B83MRRVS5R1VTEQoXvuP+kMI+if6uywV0nDGoiydJRy4yk7h9od5Og0kxx4zUXmw==", "dev": true, "requires": { - "dot-prop": "4.2.0", - "graceful-fs": "4.1.11", - "make-dir": "1.2.0", - "unique-string": "1.0.0", - "write-file-atomic": "2.3.0", - "xdg-basedir": "3.0.0" + "dot-prop": "^4.1.0", + "graceful-fs": "^4.1.2", + "make-dir": "^1.0.0", + "unique-string": "^1.0.0", + "write-file-atomic": "^2.0.0", + "xdg-basedir": "^3.0.0" } }, "console-control-strings": { @@ -1597,14 +1679,12 @@ "copy-descriptor": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz", - "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=", - "dev": true + "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=" }, "core-js": { - "version": "2.5.5", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.5.tgz", - "integrity": "sha1-sU3ek2xkDAV5prUMq8wTLdYSfjs=", - "dev": true + "version": "2.5.7", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.7.tgz", + "integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw==" }, "core-util-is": { "version": "1.0.2", @@ -1618,8 +1698,8 @@ "integrity": "sha512-GbEHQPMOswGpKXM9kCWVrremUcBmjteUaQ01T9rkKCPDXfUHX0IoP9LpHYo2NPFampa4e+/pFDc3jQdxrxQLaw==", "dev": true, "requires": { - "bn.js": "4.11.8", - "elliptic": "6.4.0" + "bn.js": "^4.1.0", + "elliptic": "^6.0.0" } }, "create-error-class": { @@ -1628,7 +1708,7 @@ "integrity": "sha1-Br56vvlHo/FKMP1hBnHUAbyot7Y=", "dev": true, "requires": { - "capture-stack-trace": "1.0.0" + "capture-stack-trace": "^1.0.0" } }, "create-hash": { @@ -1637,11 +1717,11 @@ "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==", "dev": true, "requires": { - "cipher-base": "1.0.4", - "inherits": "2.0.3", - "md5.js": "1.3.4", - "ripemd160": "2.0.2", - "sha.js": "2.4.11" + "cipher-base": "^1.0.1", + "inherits": "^2.0.1", + "md5.js": "^1.3.4", + "ripemd160": "^2.0.1", + "sha.js": "^2.4.0" } }, "create-hmac": { @@ -1650,12 +1730,12 @@ "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==", "dev": true, "requires": { - "cipher-base": "1.0.4", - "create-hash": "1.2.0", - "inherits": "2.0.3", - "ripemd160": "2.0.2", - "safe-buffer": "5.1.1", - "sha.js": "2.4.11" + "cipher-base": "^1.0.3", + "create-hash": "^1.1.0", + "inherits": "^2.0.1", + "ripemd160": "^2.0.0", + "safe-buffer": "^5.0.1", + "sha.js": "^2.4.8" } }, "cross-spawn": { @@ -1664,28 +1744,17 @@ "integrity": "sha1-ElYDfsufDF9549bvE14wdwGEuYI=", "dev": true, "requires": { - "lru-cache": "4.1.2", - "which": "1.3.0" + "lru-cache": "^4.0.1", + "which": "^1.2.9" } }, "cryptiles": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-3.1.2.tgz", - "integrity": "sha1-qJ+7Ig9c4l7FboxKqKT9e1sNKf4=", + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz", + "integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=", "dev": true, "requires": { - "boom": "5.2.0" - }, - "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.2.1" - } - } + "boom": "2.x.x" } }, "crypto-browserify": { @@ -1694,17 +1763,17 @@ "integrity": "sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==", "dev": true, "requires": { - "browserify-cipher": "1.0.1", - "browserify-sign": "4.0.4", - "create-ecdh": "4.0.3", - "create-hash": "1.2.0", - "create-hmac": "1.1.7", - "diffie-hellman": "5.0.3", - "inherits": "2.0.3", - "pbkdf2": "3.0.16", - "public-encrypt": "4.0.2", - "randombytes": "2.0.6", - "randomfill": "1.0.4" + "browserify-cipher": "^1.0.0", + "browserify-sign": "^4.0.0", + "create-ecdh": "^4.0.0", + "create-hash": "^1.1.0", + "create-hmac": "^1.1.0", + "diffie-hellman": "^5.0.0", + "inherits": "^2.0.1", + "pbkdf2": "^3.0.3", + "public-encrypt": "^4.0.0", + "randombytes": "^2.0.0", + "randomfill": "^1.0.3" } }, "crypto-random-string": { @@ -1725,7 +1794,7 @@ "integrity": "sha1-VBCXI0yyUTyDzu06zdwn/yeYfVQ=", "dev": true, "requires": { - "cssom": "0.3.2" + "cssom": "0.3.x" } }, "currently-unhandled": { @@ -1734,7 +1803,7 @@ "integrity": "sha1-mI3zP+qxke95mmE2nddsF635V+o=", "dev": true, "requires": { - "array-find-index": "1.0.2" + "array-find-index": "^1.0.1" } }, "d": { @@ -1743,7 +1812,7 @@ "integrity": "sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=", "dev": true, "requires": { - "es5-ext": "0.10.42" + "es5-ext": "^0.10.9" } }, "dashdash": { @@ -1752,7 +1821,7 @@ "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=", "dev": true, "requires": { - "assert-plus": "1.0.0" + "assert-plus": "^1.0.0" } }, "date-fns": { @@ -1765,7 +1834,6 @@ "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", - "dev": true, "requires": { "ms": "2.0.0" } @@ -1782,15 +1850,14 @@ "integrity": "sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk=", "dev": true, "requires": { - "decamelize": "1.2.0", - "map-obj": "1.0.1" + "decamelize": "^1.1.0", + "map-obj": "^1.0.0" } }, "decode-uri-component": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz", - "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=", - "dev": true + "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=" }, "deep-eql": { "version": "3.0.1", @@ -1798,13 +1865,13 @@ "integrity": "sha512-+QeIQyN5ZuO+3Uk5DYh6/1eKO0m0YmJFGNmFHGACpf1ClL1nmlV/p4gNgbl2pJGxgXb4faqo6UE+M5ACEMyVcw==", "dev": true, "requires": { - "type-detect": "4.0.8" + "type-detect": "^4.0.0" } }, "deep-extend": { - "version": "0.4.2", - "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.4.2.tgz", - "integrity": "sha1-SLaZwn4zS/ifEIkr5DL25MfTSn8=", + "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": { @@ -1819,7 +1886,7 @@ "integrity": "sha1-9fj7sYp9bVCyH2QfZJ67Uiz+JPc=", "dev": true, "requires": { - "strip-bom": "3.0.0" + "strip-bom": "^3.0.0" }, "dependencies": { "strip-bom": { @@ -1836,7 +1903,7 @@ "integrity": "sha1-LO8fER4cV4cNi7uK8mUOWHzS9bQ=", "dev": true, "requires": { - "abstract-leveldown": "0.12.4" + "abstract-leveldown": "~0.12.1" } }, "define-properties": { @@ -1845,8 +1912,8 @@ "integrity": "sha1-g6c/L+pWmJj7c3GTyPhzyvbUXJQ=", "dev": true, "requires": { - "foreach": "2.0.5", - "object-keys": "1.0.11" + "foreach": "^2.0.5", + "object-keys": "^1.0.8" }, "dependencies": { "object-keys": { @@ -1861,39 +1928,35 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz", "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==", - "dev": true, "requires": { - "is-descriptor": "1.0.2", - "isobject": "3.0.1" + "is-descriptor": "^1.0.2", + "isobject": "^3.0.1" }, "dependencies": { "is-accessor-descriptor": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz", "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==", - "dev": true, "requires": { - "kind-of": "6.0.2" + "kind-of": "^6.0.0" } }, "is-data-descriptor": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz", "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==", - "dev": true, "requires": { - "kind-of": "6.0.2" + "kind-of": "^6.0.0" } }, "is-descriptor": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz", "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==", - "dev": true, "requires": { - "is-accessor-descriptor": "1.0.0", - "is-data-descriptor": "1.0.0", - "kind-of": "6.0.2" + "is-accessor-descriptor": "^1.0.0", + "is-data-descriptor": "^1.0.0", + "kind-of": "^6.0.2" } } } @@ -1904,12 +1967,12 @@ "integrity": "sha1-U+z2mf/LyzljdpGrE7rxYIGXZuU=", "dev": true, "requires": { - "globby": "6.1.0", - "is-path-cwd": "1.0.0", - "is-path-in-cwd": "1.0.1", - "p-map": "1.2.0", - "pify": "3.0.0", - "rimraf": "2.6.2" + "globby": "^6.1.0", + "is-path-cwd": "^1.0.0", + "is-path-in-cwd": "^1.0.0", + "p-map": "^1.1.1", + "pify": "^3.0.0", + "rimraf": "^2.2.8" }, "dependencies": { "pify": { @@ -1938,17 +2001,16 @@ "integrity": "sha1-wHTS4qpqipoH29YfmhXCzYPsjsw=", "dev": true, "requires": { - "inherits": "2.0.3", - "minimalistic-assert": "1.0.1" + "inherits": "^2.0.1", + "minimalistic-assert": "^1.0.0" } }, "detect-indent": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-4.0.0.tgz", "integrity": "sha1-920GQ1LN9Docts5hnE7jqUdd4gg=", - "dev": true, "requires": { - "repeating": "2.0.1" + "repeating": "^2.0.0" } }, "detect-newline": { @@ -1969,9 +2031,9 @@ "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==", "dev": true, "requires": { - "bn.js": "4.11.8", - "miller-rabin": "4.0.1", - "randombytes": "2.0.6" + "bn.js": "^4.1.0", + "miller-rabin": "^4.0.0", + "randombytes": "^2.0.0" } }, "doctrine": { @@ -1980,8 +2042,8 @@ "integrity": "sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=", "dev": true, "requires": { - "esutils": "2.0.2", - "isarray": "1.0.0" + "esutils": "^2.0.2", + "isarray": "^1.0.0" } }, "domexception": { @@ -1990,7 +2052,7 @@ "integrity": "sha512-raigMkn7CJNNo6Ihro1fzG7wr3fHuYVytzquZKX5n0yizGsTcYgzdIUwj1X9pK0VvjeihV+XiclP+DjwbsSKug==", "dev": true, "requires": { - "webidl-conversions": "4.0.2" + "webidl-conversions": "^4.0.2" } }, "dot-prop": { @@ -1999,7 +2061,7 @@ "integrity": "sha512-tUMXrxlExSW6U2EXiiKGSBVdYgtV8qlHL+C10TsW4PURY/ic+eaysnSkwB4kA/mBlCyy/IKDJ+Lc3wbWeaXtuQ==", "dev": true, "requires": { - "is-obj": "1.0.1" + "is-obj": "^1.0.0" } }, "duplexer3": { @@ -2015,7 +2077,7 @@ "dev": true, "optional": true, "requires": { - "jsbn": "0.1.1" + "jsbn": "~0.1.0" } }, "ecstatic": { @@ -2024,10 +2086,10 @@ "integrity": "sha512-ztE4WqheoWLh3wv+HQwy7dACnvNY620coWpa+XqY6R2cVWgaAT2lUISU1Uf7JpdLLJCURktJOaA9av2AOzsyYQ==", "dev": true, "requires": { - "he": "1.1.1", - "mime": "1.6.0", - "minimist": "1.2.0", - "url-join": "2.0.5" + "he": "^1.1.1", + "mime": "^1.2.11", + "minimist": "^1.1.0", + "url-join": "^2.0.2" } }, "elegant-spinner": { @@ -2042,13 +2104,13 @@ "integrity": "sha1-ysmvh2LIWDYYcAPI3+GT5eLq5d8=", "dev": true, "requires": { - "bn.js": "4.11.8", - "brorand": "1.1.0", - "hash.js": "1.1.4", - "hmac-drbg": "1.0.1", - "inherits": "2.0.3", - "minimalistic-assert": "1.0.1", - "minimalistic-crypto-utils": "1.0.1" + "bn.js": "^4.4.0", + "brorand": "^1.0.1", + "hash.js": "^1.0.0", + "hmac-drbg": "^1.0.0", + "inherits": "^2.0.1", + "minimalistic-assert": "^1.0.0", + "minimalistic-crypto-utils": "^1.0.0" } }, "errno": { @@ -2057,7 +2119,7 @@ "integrity": "sha512-MfrRBDWzIWifgq6tJj60gkAwtLNb6sQPlcFrSOflcP1aFmmruKQ2wRnze/8V6kgyz7H3FF8Npzv78mZ7XLLflg==", "dev": true, "requires": { - "prr": "1.0.1" + "prr": "~1.0.1" } }, "error": { @@ -2066,8 +2128,8 @@ "integrity": "sha1-pfdf/02ZJhJt2sDqXcOOaJFTywI=", "dev": true, "requires": { - "string-template": "0.2.1", - "xtend": "4.0.1" + "string-template": "~0.2.1", + "xtend": "~4.0.0" }, "dependencies": { "xtend": { @@ -2082,9 +2144,8 @@ "version": "1.3.1", "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.1.tgz", "integrity": "sha1-+FWobOYa3E6GIcPNoh56dhLDqNw=", - "dev": true, "requires": { - "is-arrayish": "0.2.1" + "is-arrayish": "^0.2.1" } }, "es-abstract": { @@ -2093,11 +2154,11 @@ "integrity": "sha512-C8Fx/0jFmV5IPoMOFPA9P9G5NtqW+4cOPit3MIuvR2t7Ag2K15EJTpxnHAYTzL+aYQJIESYeXZmDBfOBE1HcpA==", "dev": true, "requires": { - "es-to-primitive": "1.1.1", - "function-bind": "1.1.1", - "has": "1.0.3", - "is-callable": "1.1.3", - "is-regex": "1.0.4" + "es-to-primitive": "^1.1.1", + "function-bind": "^1.1.1", + "has": "^1.0.1", + "is-callable": "^1.1.3", + "is-regex": "^1.0.4" } }, "es-to-primitive": { @@ -2106,20 +2167,20 @@ "integrity": "sha1-RTVSSKiJeQNLZ5Lhm7gfK3l13Q0=", "dev": true, "requires": { - "is-callable": "1.1.3", - "is-date-object": "1.0.1", - "is-symbol": "1.0.1" + "is-callable": "^1.1.1", + "is-date-object": "^1.0.1", + "is-symbol": "^1.0.1" } }, "es5-ext": { - "version": "0.10.42", - "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.42.tgz", - "integrity": "sha512-AJxO1rmPe1bDEfSR6TJ/FgMFYuTBhR5R57KW58iCkYACMyFbrkqVyzXSurYoScDGvgyMpk7uRF/lPUPPTmsRSA==", + "version": "0.10.45", + "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.45.tgz", + "integrity": "sha512-FkfM6Vxxfmztilbxxz5UKSD4ICMf5tSpRFtDNtkAhOxZ0EKtX6qwmXNyH/sFyIbX2P/nU5AMiA9jilWsUGJzCQ==", "dev": true, "requires": { - "es6-iterator": "2.0.3", - "es6-symbol": "3.1.1", - "next-tick": "1.0.0" + "es6-iterator": "~2.0.3", + "es6-symbol": "~3.1.1", + "next-tick": "1" } }, "es6-iterator": { @@ -2128,9 +2189,9 @@ "integrity": "sha1-p96IkUGgWpSwhUQDstCg+/qY87c=", "dev": true, "requires": { - "d": "1.0.0", - "es5-ext": "0.10.42", - "es6-symbol": "3.1.1" + "d": "1", + "es5-ext": "^0.10.35", + "es6-symbol": "^3.1.1" } }, "es6-map": { @@ -2139,12 +2200,12 @@ "integrity": "sha1-kTbgUD3MBqMBaQ8LsU/042TpSfA=", "dev": true, "requires": { - "d": "1.0.0", - "es5-ext": "0.10.42", - "es6-iterator": "2.0.3", - "es6-set": "0.1.5", - "es6-symbol": "3.1.1", - "event-emitter": "0.3.5" + "d": "1", + "es5-ext": "~0.10.14", + "es6-iterator": "~2.0.1", + "es6-set": "~0.1.5", + "es6-symbol": "~3.1.1", + "event-emitter": "~0.3.5" } }, "es6-promise": { @@ -2159,11 +2220,11 @@ "integrity": "sha1-0rPsXU2ADO2BjbU40ol02wpzzLE=", "dev": true, "requires": { - "d": "1.0.0", - "es5-ext": "0.10.42", - "es6-iterator": "2.0.3", + "d": "1", + "es5-ext": "~0.10.14", + "es6-iterator": "~2.0.1", "es6-symbol": "3.1.1", - "event-emitter": "0.3.5" + "event-emitter": "~0.3.5" } }, "es6-symbol": { @@ -2172,8 +2233,8 @@ "integrity": "sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=", "dev": true, "requires": { - "d": "1.0.0", - "es5-ext": "0.10.42" + "d": "1", + "es5-ext": "~0.10.14" } }, "es6-weak-map": { @@ -2182,17 +2243,16 @@ "integrity": "sha1-XjqzIlH/0VOKH45f+hNXdy+S2W8=", "dev": true, "requires": { - "d": "1.0.0", - "es5-ext": "0.10.42", - "es6-iterator": "2.0.3", - "es6-symbol": "3.1.1" + "d": "1", + "es5-ext": "^0.10.14", + "es6-iterator": "^2.0.1", + "es6-symbol": "^3.1.1" } }, "escape-string-regexp": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", - "dev": true + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=" }, "escodegen": { "version": "1.9.1", @@ -2200,11 +2260,11 @@ "integrity": "sha512-6hTjO1NAWkHnDk3OqQ4YrCuwwmGHL9S3nPlzBOUG/R44rda3wLNrfvQ5fkSGjyhHFKM7ALPKcKGrwvCLe0lC7Q==", "dev": true, "requires": { - "esprima": "3.1.3", - "estraverse": "4.2.0", - "esutils": "2.0.2", - "optionator": "0.8.2", - "source-map": "0.6.1" + "esprima": "^3.1.3", + "estraverse": "^4.2.0", + "esutils": "^2.0.2", + "optionator": "^0.8.1", + "source-map": "~0.6.1" }, "dependencies": { "source-map": { @@ -2222,10 +2282,10 @@ "integrity": "sha1-4Bl16BJ4GhY6ba392AOY3GTIicM=", "dev": true, "requires": { - "es6-map": "0.1.5", - "es6-weak-map": "2.0.2", - "esrecurse": "4.2.1", - "estraverse": "4.2.0" + "es6-map": "^0.1.3", + "es6-weak-map": "^2.0.1", + "esrecurse": "^4.1.0", + "estraverse": "^4.1.1" } }, "eslint": { @@ -2234,39 +2294,39 @@ "integrity": "sha1-5MyPoPAJ+4KaquI4VaKTYL4fbBE=", "dev": true, "requires": { - "chalk": "1.1.3", - "concat-stream": "1.6.2", - "debug": "2.6.9", - "doctrine": "1.5.0", - "es6-map": "0.1.5", - "escope": "3.6.0", - "espree": "3.5.4", - "estraverse": "4.2.0", - "esutils": "2.0.2", - "file-entry-cache": "1.3.1", - "glob": "7.1.2", - "globals": "9.18.0", - "ignore": "3.3.7", - "imurmurhash": "0.1.4", - "inquirer": "0.12.0", - "is-my-json-valid": "2.17.2", - "is-resolvable": "1.1.0", - "js-yaml": "3.11.0", - "json-stable-stringify": "1.0.1", - "levn": "0.3.0", - "lodash": "4.17.5", - "mkdirp": "0.5.1", - "optionator": "0.8.2", - "path-is-absolute": "1.0.1", - "path-is-inside": "1.0.2", - "pluralize": "1.2.1", - "progress": "1.1.8", - "require-uncached": "1.0.3", - "shelljs": "0.6.1", - "strip-json-comments": "1.0.4", - "table": "3.8.3", - "text-table": "0.2.0", - "user-home": "2.0.0" + "chalk": "^1.1.3", + "concat-stream": "^1.4.6", + "debug": "^2.1.1", + "doctrine": "^1.2.2", + "es6-map": "^0.1.3", + "escope": "^3.6.0", + "espree": "^3.1.6", + "estraverse": "^4.2.0", + "esutils": "^2.0.2", + "file-entry-cache": "^1.1.1", + "glob": "^7.0.3", + "globals": "^9.2.0", + "ignore": "^3.1.2", + "imurmurhash": "^0.1.4", + "inquirer": "^0.12.0", + "is-my-json-valid": "^2.10.0", + "is-resolvable": "^1.0.0", + "js-yaml": "^3.5.1", + "json-stable-stringify": "^1.0.0", + "levn": "^0.3.0", + "lodash": "^4.0.0", + "mkdirp": "^0.5.0", + "optionator": "^0.8.1", + "path-is-absolute": "^1.0.0", + "path-is-inside": "^1.0.1", + "pluralize": "^1.2.1", + "progress": "^1.1.8", + "require-uncached": "^1.0.2", + "shelljs": "^0.6.0", + "strip-json-comments": "~1.0.1", + "table": "^3.7.8", + "text-table": "~0.2.0", + "user-home": "^2.0.0" }, "dependencies": { "ansi-escapes": { @@ -2287,11 +2347,11 @@ "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { - "ansi-styles": "2.2.1", - "escape-string-regexp": "1.0.5", - "has-ansi": "2.0.0", - "strip-ansi": "3.0.1", - "supports-color": "2.0.0" + "ansi-styles": "^2.2.1", + "escape-string-regexp": "^1.0.2", + "has-ansi": "^2.0.0", + "strip-ansi": "^3.0.0", + "supports-color": "^2.0.0" } }, "cli-cursor": { @@ -2300,7 +2360,7 @@ "integrity": "sha1-ZNo/fValRBLll5S9Ytw1KV6PKYc=", "dev": true, "requires": { - "restore-cursor": "1.0.1" + "restore-cursor": "^1.0.1" } }, "figures": { @@ -2309,8 +2369,8 @@ "integrity": "sha1-y+Hjr/zxzUS4DK3+0o3Hk6lwHS4=", "dev": true, "requires": { - "escape-string-regexp": "1.0.5", - "object-assign": "4.1.1" + "escape-string-regexp": "^1.0.5", + "object-assign": "^4.1.0" } }, "inquirer": { @@ -2319,19 +2379,19 @@ "integrity": "sha1-HvK/1jUE3wvHV4X/+MLEHfEvB34=", "dev": true, "requires": { - "ansi-escapes": "1.4.0", - "ansi-regex": "2.1.1", - "chalk": "1.1.3", - "cli-cursor": "1.0.2", - "cli-width": "2.2.0", - "figures": "1.7.0", - "lodash": "4.17.5", - "readline2": "1.0.1", - "run-async": "0.1.0", - "rx-lite": "3.1.2", - "string-width": "1.0.2", - "strip-ansi": "3.0.1", - "through": "2.3.8" + "ansi-escapes": "^1.1.0", + "ansi-regex": "^2.0.0", + "chalk": "^1.0.0", + "cli-cursor": "^1.0.1", + "cli-width": "^2.0.0", + "figures": "^1.3.5", + "lodash": "^4.3.0", + "readline2": "^1.0.1", + "run-async": "^0.1.0", + "rx-lite": "^3.1.2", + "string-width": "^1.0.1", + "strip-ansi": "^3.0.0", + "through": "^2.3.6" } }, "onetime": { @@ -2346,8 +2406,8 @@ "integrity": "sha1-NGYfRohjJ/7SmRR5FSJS35LapUE=", "dev": true, "requires": { - "exit-hook": "1.1.1", - "onetime": "1.1.0" + "exit-hook": "^1.0.0", + "onetime": "^1.0.0" } }, "run-async": { @@ -2356,7 +2416,7 @@ "integrity": "sha1-yK1KXhEGYeQCp9IbUw4AnyX444k=", "dev": true, "requires": { - "once": "1.4.0" + "once": "^1.3.0" } }, "rx-lite": { @@ -2385,8 +2445,8 @@ "integrity": "sha512-yAcIQxtmMiB/jL32dzEp2enBeidsB7xWPLNiw3IIkpVds1P+h7qF9YwJq1yUNzp2OKXgAprs4F61ih66UsoD1A==", "dev": true, "requires": { - "acorn": "5.5.3", - "acorn-jsx": "3.0.1" + "acorn": "^5.5.0", + "acorn-jsx": "^3.0.0" } }, "esprima": { @@ -2401,7 +2461,7 @@ "integrity": "sha512-64RBB++fIOAXPw3P9cy89qfMlvZEXZkqqJkjqqXIvzP5ezRZjW+lPWjw35UX/3EhUPFYbg5ER4JYgDw4007/DQ==", "dev": true, "requires": { - "estraverse": "4.2.0" + "estraverse": "^4.1.0" } }, "estraverse": { @@ -2419,8 +2479,7 @@ "esutils": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz", - "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=", - "dev": true + "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=" }, "event-emitter": { "version": "0.3.5", @@ -2428,8 +2487,8 @@ "integrity": "sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=", "dev": true, "requires": { - "d": "1.0.0", - "es5-ext": "0.10.42" + "d": "1", + "es5-ext": "~0.10.14" } }, "evp_bytestokey": { @@ -2438,8 +2497,8 @@ "integrity": "sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==", "dev": true, "requires": { - "md5.js": "1.3.4", - "safe-buffer": "5.1.1" + "md5.js": "^1.3.4", + "safe-buffer": "^5.1.1" } }, "exec-sh": { @@ -2448,7 +2507,7 @@ "integrity": "sha512-aLt95pexaugVtQerpmE51+4QfWrNc304uez7jvj6fWnN8GeEHpttB8F36n8N7uVhUMbH/1enbxQ9HImZ4w/9qg==", "dev": true, "requires": { - "merge": "1.2.0" + "merge": "^1.1.3" } }, "execa": { @@ -2457,13 +2516,13 @@ "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=", "dev": true, "requires": { - "cross-spawn": "5.1.0", - "get-stream": "3.0.0", - "is-stream": "1.1.0", - "npm-run-path": "2.0.2", - "p-finally": "1.0.0", - "signal-exit": "3.0.2", - "strip-eof": "1.0.0" + "cross-spawn": "^5.0.1", + "get-stream": "^3.0.0", + "is-stream": "^1.1.0", + "npm-run-path": "^2.0.0", + "p-finally": "^1.0.0", + "signal-exit": "^3.0.0", + "strip-eof": "^1.0.0" }, "dependencies": { "cross-spawn": { @@ -2472,9 +2531,9 @@ "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=", "dev": true, "requires": { - "lru-cache": "4.1.2", - "shebang-command": "1.2.0", - "which": "1.3.0" + "lru-cache": "^4.0.1", + "shebang-command": "^1.2.0", + "which": "^1.2.9" } } } @@ -2495,33 +2554,30 @@ "version": "2.1.4", "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz", "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=", - "dev": true, "requires": { - "debug": "2.6.9", - "define-property": "0.2.5", - "extend-shallow": "2.0.1", - "posix-character-classes": "0.1.1", - "regex-not": "1.0.2", - "snapdragon": "0.8.2", - "to-regex": "3.0.2" + "debug": "^2.3.3", + "define-property": "^0.2.5", + "extend-shallow": "^2.0.1", + "posix-character-classes": "^0.1.0", + "regex-not": "^1.0.0", + "snapdragon": "^0.8.1", + "to-regex": "^3.0.1" }, "dependencies": { "define-property": { "version": "0.2.5", "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz", "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=", - "dev": true, "requires": { - "is-descriptor": "0.1.6" + "is-descriptor": "^0.1.0" } }, "extend-shallow": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "dev": true, "requires": { - "is-extendable": "0.1.1" + "is-extendable": "^0.1.0" } } } @@ -2532,20 +2588,20 @@ "integrity": "sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=", "dev": true, "requires": { - "fill-range": "2.2.3" + "fill-range": "^2.1.0" }, "dependencies": { "fill-range": { - "version": "2.2.3", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-2.2.3.tgz", - "integrity": "sha1-ULd9/X5Gm8dJJHCWNpn+eoSFpyM=", + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-2.2.4.tgz", + "integrity": "sha512-cnrcCbj01+j2gTG921VZPnHbjmdAf8oQV/iGeV2kZxGSyfYjjTyY79ErsK1WJWMpw6DaApEX72binqJE+/d+5Q==", "dev": true, "requires": { - "is-number": "2.1.0", - "isobject": "2.1.0", - "randomatic": "1.1.7", - "repeat-element": "1.1.2", - "repeat-string": "1.6.1" + "is-number": "^2.1.0", + "isobject": "^2.0.0", + "randomatic": "^3.0.0", + "repeat-element": "^1.1.2", + "repeat-string": "^1.5.2" } }, "is-number": { @@ -2554,7 +2610,7 @@ "integrity": "sha1-Afy7s5NGOlSPL0ZszhbezknbkI8=", "dev": true, "requires": { - "kind-of": "3.2.2" + "kind-of": "^3.0.2" } }, "isobject": { @@ -2572,7 +2628,7 @@ "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", "dev": true, "requires": { - "is-buffer": "1.1.6" + "is-buffer": "^1.1.5" } } } @@ -2583,12 +2639,12 @@ "integrity": "sha1-v9/VeiogFw2HWZnul4fMcfAcIF8=", "dev": true, "requires": { - "ansi-styles": "3.2.1", - "jest-diff": "23.0.1", - "jest-get-type": "22.4.3", - "jest-matcher-utils": "23.0.1", - "jest-message-util": "23.1.0", - "jest-regex-util": "23.0.0" + "ansi-styles": "^3.2.0", + "jest-diff": "^23.0.1", + "jest-get-type": "^22.1.0", + "jest-matcher-utils": "^23.0.1", + "jest-message-util": "^23.1.0", + "jest-regex-util": "^23.0.0" } }, "extend": { @@ -2601,19 +2657,17 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz", "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=", - "dev": true, "requires": { - "assign-symbols": "1.0.0", - "is-extendable": "1.0.1" + "assign-symbols": "^1.0.0", + "is-extendable": "^1.0.1" }, "dependencies": { "is-extendable": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz", "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==", - "dev": true, "requires": { - "is-plain-object": "2.0.4" + "is-plain-object": "^2.0.4" } } } @@ -2624,97 +2678,92 @@ "integrity": "sha512-bSn6gvGxKt+b7+6TKEv1ZycHleA7aHhRHyAqJyp5pbUFuYYNIzpZnQDk7AsYckyWdEnTeAnay0aCy2aV6iTk9A==", "dev": true, "requires": { - "chardet": "0.4.2", - "iconv-lite": "0.4.19", - "tmp": "0.0.33" + "chardet": "^0.4.0", + "iconv-lite": "^0.4.17", + "tmp": "^0.0.33" } }, "extglob": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz", "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==", - "dev": true, "requires": { - "array-unique": "0.3.2", - "define-property": "1.0.0", - "expand-brackets": "2.1.4", - "extend-shallow": "2.0.1", - "fragment-cache": "0.2.1", - "regex-not": "1.0.2", - "snapdragon": "0.8.2", - "to-regex": "3.0.2" + "array-unique": "^0.3.2", + "define-property": "^1.0.0", + "expand-brackets": "^2.1.4", + "extend-shallow": "^2.0.1", + "fragment-cache": "^0.2.1", + "regex-not": "^1.0.0", + "snapdragon": "^0.8.1", + "to-regex": "^3.0.1" }, "dependencies": { "define-property": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz", "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=", - "dev": true, "requires": { - "is-descriptor": "1.0.2" + "is-descriptor": "^1.0.0" } }, "extend-shallow": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "dev": true, "requires": { - "is-extendable": "0.1.1" + "is-extendable": "^0.1.0" } }, "is-accessor-descriptor": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz", "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==", - "dev": true, "requires": { - "kind-of": "6.0.2" + "kind-of": "^6.0.0" } }, "is-data-descriptor": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz", "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==", - "dev": true, "requires": { - "kind-of": "6.0.2" + "kind-of": "^6.0.0" } }, "is-descriptor": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz", "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==", - "dev": true, "requires": { - "is-accessor-descriptor": "1.0.0", - "is-data-descriptor": "1.0.0", - "kind-of": "6.0.2" + "is-accessor-descriptor": "^1.0.0", + "is-data-descriptor": "^1.0.0", + "kind-of": "^6.0.2" } } } }, "extract-zip": { - "version": "1.6.6", - "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-1.6.6.tgz", - "integrity": "sha1-EpDt6NINCHK0Kf0/NRyhKOxe+Fw=", + "version": "1.6.7", + "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-1.6.7.tgz", + "integrity": "sha1-qEC0uK9kAyZMjbV/Txp0Mz74H+k=", "dev": true, "requires": { - "concat-stream": "1.6.0", + "concat-stream": "1.6.2", "debug": "2.6.9", - "mkdirp": "0.5.0", + "mkdirp": "0.5.1", "yauzl": "2.4.1" }, "dependencies": { "concat-stream": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.0.tgz", - "integrity": "sha1-CqxmL9Ur54lk1VMvaUeE5wEQrPc=", + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz", + "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==", "dev": true, "requires": { - "inherits": "2.0.3", - "readable-stream": "2.3.6", - "typedarray": "0.0.6" + "buffer-from": "^1.0.0", + "inherits": "^2.0.3", + "readable-stream": "^2.2.2", + "typedarray": "^0.0.6" } }, "minimist": { @@ -2724,9 +2773,9 @@ "dev": true }, "mkdirp": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.0.tgz", - "integrity": "sha1-HXMHam35hs2TROFecfzAWkyavxI=", + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", + "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, "requires": { "minimist": "0.0.8" @@ -2764,7 +2813,7 @@ "integrity": "sha1-TkkvjQTftviQA1B/btvy1QHnxvQ=", "dev": true, "requires": { - "websocket-driver": "0.7.0" + "websocket-driver": ">=0.5.1" } }, "fb-watchman": { @@ -2773,7 +2822,7 @@ "integrity": "sha1-VOmr99+i8mzZsWNsWIwa/AXeXVg=", "dev": true, "requires": { - "bser": "2.0.0" + "bser": "^2.0.0" } }, "fd-slicer": { @@ -2782,7 +2831,7 @@ "integrity": "sha1-i1vL2ewyfFBBv5qwI/1nUPEXfmU=", "dev": true, "requires": { - "pend": "1.2.0" + "pend": "~1.2.0" } }, "figures": { @@ -2791,7 +2840,7 @@ "integrity": "sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=", "dev": true, "requires": { - "escape-string-regexp": "1.0.5" + "escape-string-regexp": "^1.0.5" } }, "file-entry-cache": { @@ -2800,8 +2849,8 @@ "integrity": "sha1-RMYepgeuS+nBQC9B9EJwy/4zT/g=", "dev": true, "requires": { - "flat-cache": "1.3.0", - "object-assign": "4.1.1" + "flat-cache": "^1.2.1", + "object-assign": "^4.0.1" } }, "filename-regex": { @@ -2816,29 +2865,27 @@ "integrity": "sha1-jnVIqW08wjJ+5eZ0FocjozO7oqA=", "dev": true, "requires": { - "glob": "7.1.2", - "minimatch": "3.0.4" + "glob": "^7.0.3", + "minimatch": "^3.0.3" } }, "fill-range": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz", "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=", - "dev": true, "requires": { - "extend-shallow": "2.0.1", - "is-number": "3.0.0", - "repeat-string": "1.6.1", - "to-regex-range": "2.1.1" + "extend-shallow": "^2.0.1", + "is-number": "^3.0.0", + "repeat-string": "^1.6.1", + "to-regex-range": "^2.1.0" }, "dependencies": { "extend-shallow": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "dev": true, "requires": { - "is-extendable": "0.1.1" + "is-extendable": "^0.1.0" } } } @@ -2847,10 +2894,9 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz", "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=", - "dev": true, "requires": { - "path-exists": "2.1.0", - "pinkie-promise": "2.0.1" + "path-exists": "^2.0.0", + "pinkie-promise": "^2.0.0" } }, "flat-cache": { @@ -2859,10 +2905,10 @@ "integrity": "sha1-0wMLMrOBVPTjt+nHCfSQ9++XxIE=", "dev": true, "requires": { - "circular-json": "0.3.3", - "del": "2.2.2", - "graceful-fs": "4.1.11", - "write": "0.2.1" + "circular-json": "^0.3.1", + "del": "^2.0.2", + "graceful-fs": "^4.1.2", + "write": "^0.2.1" }, "dependencies": { "del": { @@ -2871,13 +2917,13 @@ "integrity": "sha1-wSyYHQZ4RshLyvhiz/kw2Qf/0ag=", "dev": true, "requires": { - "globby": "5.0.0", - "is-path-cwd": "1.0.0", - "is-path-in-cwd": "1.0.1", - "object-assign": "4.1.1", - "pify": "2.3.0", - "pinkie-promise": "2.0.1", - "rimraf": "2.6.2" + "globby": "^5.0.0", + "is-path-cwd": "^1.0.0", + "is-path-in-cwd": "^1.0.0", + "object-assign": "^4.0.1", + "pify": "^2.0.0", + "pinkie-promise": "^2.0.0", + "rimraf": "^2.2.8" } }, "globby": { @@ -2886,12 +2932,12 @@ "integrity": "sha1-69hGZ8oNuzMLmbz8aOrCvFQ3Dg0=", "dev": true, "requires": { - "array-union": "1.0.2", - "arrify": "1.0.1", - "glob": "7.1.2", - "object-assign": "4.1.1", - "pify": "2.3.0", - "pinkie-promise": "2.0.1" + "array-union": "^1.0.1", + "arrify": "^1.0.0", + "glob": "^7.0.3", + "object-assign": "^4.0.1", + "pify": "^2.0.0", + "pinkie-promise": "^2.0.0" } } } @@ -2899,8 +2945,7 @@ "for-in": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", - "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=", - "dev": true + "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=" }, "for-own": { "version": "0.1.5", @@ -2908,7 +2953,7 @@ "integrity": "sha1-UmXGgaTylNq78XyVCbZ2OqhFEM4=", "dev": true, "requires": { - "for-in": "1.0.2" + "for-in": "^1.0.1" } }, "foreach": { @@ -2929,18 +2974,17 @@ "integrity": "sha1-SXBJi+YEwgwAXU9cI67NIda0kJk=", "dev": true, "requires": { - "asynckit": "0.4.0", + "asynckit": "^0.4.0", "combined-stream": "1.0.6", - "mime-types": "2.1.18" + "mime-types": "^2.1.12" } }, "fragment-cache": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz", "integrity": "sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=", - "dev": true, "requires": { - "map-cache": "0.2.2" + "map-cache": "^0.2.2" } }, "front-matter": { @@ -2949,7 +2993,7 @@ "integrity": "sha1-91mDufL0E75ljJPf172M5AePXNs=", "dev": true, "requires": { - "js-yaml": "3.11.0" + "js-yaml": "^3.4.6" } }, "fs-extra": { @@ -2958,9 +3002,9 @@ "integrity": "sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==", "dev": true, "requires": { - "graceful-fs": "4.1.11", - "jsonfile": "4.0.0", - "universalify": "0.1.1" + "graceful-fs": "^4.1.2", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" } }, "fs.realpath": { @@ -2970,222 +3014,87 @@ "dev": true }, "fsevents": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.1.3.tgz", - "integrity": "sha512-WIr7iDkdmdbxu/Gh6eKEZJL6KPE74/5MEsf2whTOFNxbIoIixogroLdKYqB6FDav4Wavh/lZdzzd3b2KxIXC5Q==", + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.4.tgz", + "integrity": "sha512-z8H8/diyk76B7q5wg+Ud0+CqzcAF3mBBI/bA5ne5zrRUUIvNkJY//D3BqyH571KuAC4Nr7Rw7CjWX4r0y9DvNg==", "dev": true, "optional": true, "requires": { - "nan": "2.10.0", - "node-pre-gyp": "0.6.39" + "nan": "^2.9.2", + "node-pre-gyp": "^0.10.0" }, "dependencies": { "abbrev": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.0.tgz", - "integrity": "sha1-0FVMIlZjbi9W58LlrRg/hZQo2B8=", + "version": "1.1.1", + "bundled": true, "dev": true, "optional": true }, - "ajv": { - "version": "4.11.8", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-4.11.8.tgz", - "integrity": "sha1-gv+wKynmYq5TvcIK8VlHcGc5xTY=", - "dev": true, - "optional": true, - "requires": { - "co": "4.6.0", - "json-stable-stringify": "1.0.1" - } - }, "ansi-regex": { "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", + "bundled": true, "dev": true }, "aproba": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.1.1.tgz", - "integrity": "sha1-ldNgDwdxCqDpKYxyatXs8urLq6s=", + "version": "1.2.0", + "bundled": true, "dev": true, "optional": true }, "are-we-there-yet": { "version": "1.1.4", - "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz", - "integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=", + "bundled": true, "dev": true, "optional": true, "requires": { - "delegates": "1.0.0", - "readable-stream": "2.2.9" + "delegates": "^1.0.0", + "readable-stream": "^2.0.6" } }, - "asn1": { - "version": "0.2.3", - "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.3.tgz", - "integrity": "sha1-2sh4dxPJlmhJ/IGAd36+nB3fO4Y=", - "dev": true, - "optional": true - }, - "assert-plus": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz", - "integrity": "sha1-104bh+ev/A24qttwIfP+SBAasjQ=", - "dev": true, - "optional": true - }, - "asynckit": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", - "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=", - "dev": true, - "optional": true - }, - "aws-sign2": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz", - "integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8=", - "dev": true, - "optional": true - }, - "aws4": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.6.0.tgz", - "integrity": "sha1-g+9cqGCysy5KDe7e6MdxudtXRx4=", - "dev": true, - "optional": true - }, "balanced-match": { - "version": "0.4.2", - "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz", - "integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg=", + "version": "1.0.0", + "bundled": true, "dev": true }, - "bcrypt-pbkdf": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz", - "integrity": "sha1-Y7xdy2EzG5K8Bf1SiVPDNGKgb40=", - "dev": true, - "optional": true, - "requires": { - "tweetnacl": "0.14.5" - } - }, - "block-stream": { - "version": "0.0.9", - "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz", - "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=", - "dev": true, - "requires": { - "inherits": "2.0.3" - } - }, - "boom": { - "version": "2.10.1", - "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz", - "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=", - "dev": true, - "requires": { - "hoek": "2.16.3" - } - }, "brace-expansion": { - "version": "1.1.7", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.7.tgz", - "integrity": "sha1-Pv/DxQ4ABTH7cg6v+A8K6O8jz1k=", + "version": "1.1.11", + "bundled": true, "dev": true, "requires": { - "balanced-match": "0.4.2", + "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, - "buffer-shims": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/buffer-shims/-/buffer-shims-1.0.0.tgz", - "integrity": "sha1-mXjOMXOIxkmth5MCjDR37wRKi1E=", - "dev": true - }, - "caseless": { - "version": "0.12.0", - "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz", - "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=", - "dev": true, - "optional": true - }, - "co": { - "version": "4.6.0", - "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", - "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=", + "chownr": { + "version": "1.0.1", + "bundled": true, "dev": true, "optional": true }, "code-point-at": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", - "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", + "bundled": true, "dev": true }, - "combined-stream": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz", - "integrity": "sha1-k4NwpXtKUd6ix3wV1cX9+JUWQAk=", - "dev": true, - "requires": { - "delayed-stream": "1.0.0" - } - }, "concat-map": { "version": "0.0.1", - "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", + "bundled": true, "dev": true }, "console-control-strings": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", - "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", + "bundled": true, "dev": true }, "core-util-is": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", - "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", - "dev": true - }, - "cryptiles": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz", - "integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=", + "bundled": true, "dev": true, - "requires": { - "boom": "2.10.1" - } - }, - "dashdash": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz", - "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=", - "dev": true, - "optional": true, - "requires": { - "assert-plus": "1.0.0" - }, - "dependencies": { - "assert-plus": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz", - "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=", - "dev": true, - "optional": true - } - } + "optional": true }, "debug": { - "version": "2.6.8", - "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.8.tgz", - "integrity": "sha1-5zFTHKLt4n0YgiJCfaF4IdaP9Pw=", + "version": "2.6.9", + "bundled": true, "dev": true, "optional": true, "requires": { @@ -3193,371 +3102,157 @@ } }, "deep-extend": { - "version": "0.4.2", - "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.4.2.tgz", - "integrity": "sha1-SLaZwn4zS/ifEIkr5DL25MfTSn8=", + "version": "0.5.1", + "bundled": true, "dev": true, "optional": true }, - "delayed-stream": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", - "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", - "dev": true - }, "delegates": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", - "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", + "bundled": true, "dev": true, "optional": true }, "detect-libc": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.2.tgz", - "integrity": "sha1-ca1dIEvxempsqPRQxhRUBm70YeE=", + "version": "1.0.3", + "bundled": true, "dev": true, "optional": true }, - "ecc-jsbn": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz", - "integrity": "sha1-D8c6ntXw1Tw4GTOYUj735UN3dQU=", + "fs-minipass": { + "version": "1.2.5", + "bundled": true, "dev": true, "optional": true, "requires": { - "jsbn": "0.1.1" - } - }, - "extend": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.1.tgz", - "integrity": "sha1-p1Xqe8Gt/MWjHOfnYtuq3F5jZEQ=", - "dev": true, - "optional": true - }, - "extsprintf": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.0.2.tgz", - "integrity": "sha1-4QgOBljjALBilJkMxw4VAiNf1VA=", - "dev": true - }, - "forever-agent": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz", - "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=", - "dev": true, - "optional": true - }, - "form-data": { - "version": "2.1.4", - "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz", - "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=", - "dev": true, - "optional": true, - "requires": { - "asynckit": "0.4.0", - "combined-stream": "1.0.5", - "mime-types": "2.1.15" + "minipass": "^2.2.1" } }, "fs.realpath": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", - "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", - "dev": true - }, - "fstream": { - "version": "1.0.11", - "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz", - "integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=", + "bundled": true, "dev": true, - "requires": { - "graceful-fs": "4.1.11", - "inherits": "2.0.3", - "mkdirp": "0.5.1", - "rimraf": "2.6.1" - } - }, - "fstream-ignore": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/fstream-ignore/-/fstream-ignore-1.0.5.tgz", - "integrity": "sha1-nDHa40dnAY/h0kmyTa2mfQktoQU=", - "dev": true, - "optional": true, - "requires": { - "fstream": "1.0.11", - "inherits": "2.0.3", - "minimatch": "3.0.4" - } + "optional": true }, "gauge": { "version": "2.7.4", - "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz", - "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", + "bundled": true, "dev": true, - "optional": true, "requires": { - "aproba": "1.1.1", - "console-control-strings": "1.1.0", - "has-unicode": "2.0.1", - "object-assign": "4.1.1", - "signal-exit": "3.0.2", - "string-width": "1.0.2", - "strip-ansi": "3.0.1", - "wide-align": "1.1.2" - } - }, - "getpass": { - "version": "0.1.7", - "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz", - "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=", - "dev": true, - "optional": true, - "requires": { - "assert-plus": "1.0.0" - }, - "dependencies": { - "assert-plus": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz", - "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=", - "dev": true, - "optional": true - } + "aproba": "^1.0.3", + "console-control-strings": "^1.0.0", + "has-unicode": "^2.0.0", + "object-assign": "^4.1.0", + "signal-exit": "^3.0.0", + "string-width": "^1.0.1", + "strip-ansi": "^3.0.1", + "wide-align": "^1.1.0" } }, "glob": { "version": "7.1.2", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz", - "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", + "bundled": true, "dev": true, "requires": { - "fs.realpath": "1.0.0", - "inflight": "1.0.6", - "inherits": "2.0.3", - "minimatch": "3.0.4", - "once": "1.4.0", - "path-is-absolute": "1.0.1" - } - }, - "graceful-fs": { - "version": "4.1.11", - "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz", - "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=", - "dev": true - }, - "har-schema": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-1.0.5.tgz", - "integrity": "sha1-0mMTX0MwfALGAq/I/pWXDAFRNp4=", - "dev": true, - "optional": true - }, - "har-validator": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-4.2.1.tgz", - "integrity": "sha1-M0gdDxu/9gDdID11gSpqX7oALio=", - "dev": true, - "optional": true, - "requires": { - "ajv": "4.11.8", - "har-schema": "1.0.5" + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.4", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" } }, "has-unicode": { "version": "2.0.1", - "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", - "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", + "bundled": true, "dev": true, "optional": true }, - "hawk": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz", - "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=", + "iconv-lite": { + "version": "0.4.21", + "bundled": true, "dev": true, "requires": { - "boom": "2.10.1", - "cryptiles": "2.0.5", - "hoek": "2.16.3", - "sntp": "1.0.9" + "safer-buffer": "^2.1.0" } }, - "hoek": { - "version": "2.16.3", - "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz", - "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=", - "dev": true - }, - "http-signature": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz", - "integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=", + "ignore-walk": { + "version": "3.0.1", + "bundled": true, "dev": true, "optional": true, "requires": { - "assert-plus": "0.2.0", - "jsprim": "1.4.0", - "sshpk": "1.13.0" + "minimatch": "^3.0.4" } }, "inflight": { "version": "1.0.6", - "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", - "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", + "bundled": true, "dev": true, "requires": { - "once": "1.4.0", - "wrappy": "1.0.2" + "once": "^1.3.0", + "wrappy": "1" } }, "inherits": { "version": "2.0.3", - "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", - "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", + "bundled": true, "dev": true }, "ini": { - "version": "1.3.4", - "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.4.tgz", - "integrity": "sha1-BTfLedr1m1mhpRff9wbIbsA5Fi4=", + "version": "1.3.5", + "bundled": true, "dev": true, "optional": true }, "is-fullwidth-code-point": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", - "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", + "bundled": true, "dev": true, "requires": { - "number-is-nan": "1.0.1" + "number-is-nan": "^1.0.0" } }, - "is-typedarray": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz", - "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=", - "dev": true, - "optional": true - }, "isarray": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", - "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", - "dev": true - }, - "isstream": { - "version": "0.1.2", - "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz", - "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=", + "bundled": true, "dev": true, "optional": true }, - "jodid25519": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/jodid25519/-/jodid25519-1.0.2.tgz", - "integrity": "sha1-BtSRIlUJNBlHfUJWM2BuDpB4KWc=", - "dev": true, - "optional": true, - "requires": { - "jsbn": "0.1.1" - } - }, - "jsbn": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz", - "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=", - "dev": true, - "optional": true - }, - "json-schema": { - "version": "0.2.3", - "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz", - "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=", - "dev": true, - "optional": true - }, - "json-stable-stringify": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz", - "integrity": "sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=", - "dev": true, - "optional": true, - "requires": { - "jsonify": "0.0.0" - } - }, - "json-stringify-safe": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz", - "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=", - "dev": true, - "optional": true - }, - "jsonify": { - "version": "0.0.0", - "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz", - "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=", - "dev": true, - "optional": true - }, - "jsprim": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.0.tgz", - "integrity": "sha1-o7h+QCmNjDgFUtjMdiigu5WiKRg=", - "dev": true, - "optional": true, - "requires": { - "assert-plus": "1.0.0", - "extsprintf": "1.0.2", - "json-schema": "0.2.3", - "verror": "1.3.6" - }, - "dependencies": { - "assert-plus": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz", - "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=", - "dev": true, - "optional": true - } - } - }, - "mime-db": { - "version": "1.27.0", - "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.27.0.tgz", - "integrity": "sha1-gg9XIpa70g7CXtVeW13oaeVDbrE=", - "dev": true - }, - "mime-types": { - "version": "2.1.15", - "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.15.tgz", - "integrity": "sha1-pOv1BkCUVpI3uM9wBGd20J/JKu0=", - "dev": true, - "requires": { - "mime-db": "1.27.0" - } - }, "minimatch": { "version": "3.0.4", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", - "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", + "bundled": true, "dev": true, "requires": { - "brace-expansion": "1.1.7" + "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", - "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", + "bundled": true, "dev": true }, + "minipass": { + "version": "2.2.4", + "bundled": true, + "dev": true, + "requires": { + "safe-buffer": "^5.1.1", + "yallist": "^3.0.0" + } + }, + "minizlib": { + "version": "1.1.0", + "bundled": true, + "dev": true, + "optional": true, + "requires": { + "minipass": "^2.2.1" + } + }, "mkdirp": { "version": "0.5.1", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", - "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", + "bundled": true, "dev": true, "requires": { "minimist": "0.0.8" @@ -3565,424 +3260,275 @@ }, "ms": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", + "bundled": true, "dev": true, "optional": true }, - "node-pre-gyp": { - "version": "0.6.39", - "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.6.39.tgz", - "integrity": "sha512-OsJV74qxnvz/AMGgcfZoDaeDXKD3oY3QVIbBmwszTFkRisTSXbMQyn4UWzUMOtA5SVhrBZOTp0wcoSBgfMfMmQ==", + "needle": { + "version": "2.2.0", + "bundled": true, "dev": true, - "optional": true, "requires": { - "detect-libc": "1.0.2", - "hawk": "3.1.3", - "mkdirp": "0.5.1", - "nopt": "4.0.1", - "npmlog": "4.1.0", - "rc": "1.2.1", - "request": "2.81.0", - "rimraf": "2.6.1", - "semver": "5.3.0", - "tar": "2.2.1", - "tar-pack": "3.4.0" + "debug": "^2.1.2", + "iconv-lite": "^0.4.4", + "sax": "^1.2.4" + } + }, + "node-pre-gyp": { + "version": "0.10.0", + "bundled": true, + "dev": true, + "requires": { + "detect-libc": "^1.0.2", + "mkdirp": "^0.5.1", + "needle": "^2.2.0", + "nopt": "^4.0.1", + "npm-packlist": "^1.1.6", + "npmlog": "^4.0.2", + "rc": "^1.1.7", + "rimraf": "^2.6.1", + "semver": "^5.3.0", + "tar": "^4" } }, "nopt": { "version": "4.0.1", - "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz", - "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=", + "bundled": true, + "dev": true, + "requires": { + "abbrev": "1", + "osenv": "^0.1.4" + } + }, + "npm-bundled": { + "version": "1.0.3", + "bundled": true, + "dev": true, + "optional": true + }, + "npm-packlist": { + "version": "1.1.10", + "bundled": true, "dev": true, "optional": true, "requires": { - "abbrev": "1.1.0", - "osenv": "0.1.4" + "ignore-walk": "^3.0.1", + "npm-bundled": "^1.0.1" } }, "npmlog": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.0.tgz", - "integrity": "sha512-ocolIkZYZt8UveuiDS0yAkkIjid1o7lPG8cYm05yNYzBn8ykQtaiPMEGp8fY9tKdDgm8okpdKzkvu1y9hUYugA==", + "version": "4.1.2", + "bundled": true, "dev": true, "optional": true, "requires": { - "are-we-there-yet": "1.1.4", - "console-control-strings": "1.1.0", - "gauge": "2.7.4", - "set-blocking": "2.0.0" + "are-we-there-yet": "~1.1.2", + "console-control-strings": "~1.1.0", + "gauge": "~2.7.3", + "set-blocking": "~2.0.0" } }, "number-is-nan": { "version": "1.0.1", - "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", - "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", + "bundled": true, "dev": true }, - "oauth-sign": { - "version": "0.8.2", - "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz", - "integrity": "sha1-Rqarfwrq2N6unsBWV4C31O/rnUM=", - "dev": true, - "optional": true - }, "object-assign": { "version": "4.1.1", - "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", + "bundled": true, "dev": true, "optional": true }, "once": { "version": "1.4.0", - "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", - "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", + "bundled": true, "dev": true, "requires": { - "wrappy": "1.0.2" + "wrappy": "1" } }, "os-homedir": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz", - "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=", + "bundled": true, "dev": true, "optional": true }, "os-tmpdir": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", - "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", + "bundled": true, "dev": true, "optional": true }, "osenv": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.4.tgz", - "integrity": "sha1-Qv5tWVPfBsgGS+bxdsPQWqqjRkQ=", + "version": "0.1.5", + "bundled": true, "dev": true, "optional": true, "requires": { - "os-homedir": "1.0.2", - "os-tmpdir": "1.0.2" + "os-homedir": "^1.0.0", + "os-tmpdir": "^1.0.0" } }, "path-is-absolute": { "version": "1.0.1", - "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", - "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", - "dev": true - }, - "performance-now": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz", - "integrity": "sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU=", + "bundled": true, "dev": true, "optional": true }, "process-nextick-args": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz", - "integrity": "sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M=", - "dev": true - }, - "punycode": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz", - "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=", - "dev": true, - "optional": true - }, - "qs": { - "version": "6.4.0", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.4.0.tgz", - "integrity": "sha1-E+JtKK1rD/qpExLNO/cI7TUecjM=", + "version": "2.0.0", + "bundled": true, "dev": true, "optional": true }, "rc": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.1.tgz", - "integrity": "sha1-LgPo5C7kULjLPc5lvhv4l04d/ZU=", + "version": "1.2.7", + "bundled": true, "dev": true, "optional": true, "requires": { - "deep-extend": "0.4.2", - "ini": "1.3.4", - "minimist": "1.2.0", - "strip-json-comments": "2.0.1" + "deep-extend": "^0.5.1", + "ini": "~1.3.0", + "minimist": "^1.2.0", + "strip-json-comments": "~2.0.1" }, "dependencies": { "minimist": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", - "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", + "bundled": true, "dev": true, "optional": true } } }, "readable-stream": { - "version": "2.2.9", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.9.tgz", - "integrity": "sha1-z3jsb0ptHrQ9JkiMrJfwQudLf8g=", - "dev": true, - "requires": { - "buffer-shims": "1.0.0", - "core-util-is": "1.0.2", - "inherits": "2.0.3", - "isarray": "1.0.0", - "process-nextick-args": "1.0.7", - "string_decoder": "1.0.1", - "util-deprecate": "1.0.2" - } - }, - "request": { - "version": "2.81.0", - "resolved": "https://registry.npmjs.org/request/-/request-2.81.0.tgz", - "integrity": "sha1-xpKJRqDgbF+Nb4qTM0af/aRimKA=", + "version": "2.3.6", + "bundled": true, "dev": true, "optional": true, "requires": { - "aws-sign2": "0.6.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.1.4", - "har-validator": "4.2.1", - "hawk": "3.1.3", - "http-signature": "1.1.1", - "is-typedarray": "1.0.0", - "isstream": "0.1.2", - "json-stringify-safe": "5.0.1", - "mime-types": "2.1.15", - "oauth-sign": "0.8.2", - "performance-now": "0.2.0", - "qs": "6.4.0", - "safe-buffer": "5.0.1", - "stringstream": "0.0.5", - "tough-cookie": "2.3.2", - "tunnel-agent": "0.6.0", - "uuid": "3.0.1" + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" } }, "rimraf": { - "version": "2.6.1", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.1.tgz", - "integrity": "sha1-wjOOxkPfeht/5cVPqG9XQopV8z0=", + "version": "2.6.2", + "bundled": true, "dev": true, "requires": { - "glob": "7.1.2" + "glob": "^7.0.5" } }, "safe-buffer": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.0.1.tgz", - "integrity": "sha1-0mPKVGls2KMGtcplUekt5XkY++c=", + "version": "5.1.1", + "bundled": true, "dev": true }, + "safer-buffer": { + "version": "2.1.2", + "bundled": true, + "dev": true, + "optional": true + }, + "sax": { + "version": "1.2.4", + "bundled": true, + "dev": true, + "optional": true + }, "semver": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz", - "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=", + "version": "5.5.0", + "bundled": true, "dev": true, "optional": true }, "set-blocking": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", - "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=", + "bundled": true, "dev": true, "optional": true }, "signal-exit": { "version": "3.0.2", - "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz", - "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=", + "bundled": true, "dev": true, "optional": true }, - "sntp": { - "version": "1.0.9", - "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz", - "integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=", - "dev": true, - "requires": { - "hoek": "2.16.3" - } - }, - "sshpk": { - "version": "1.13.0", - "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.13.0.tgz", - "integrity": "sha1-/yo+T9BEl1Vf7Zezmg/YL6+zozw=", - "dev": true, - "optional": true, - "requires": { - "asn1": "0.2.3", - "assert-plus": "1.0.0", - "bcrypt-pbkdf": "1.0.1", - "dashdash": "1.14.1", - "ecc-jsbn": "0.1.1", - "getpass": "0.1.7", - "jodid25519": "1.0.2", - "jsbn": "0.1.1", - "tweetnacl": "0.14.5" - }, - "dependencies": { - "assert-plus": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz", - "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=", - "dev": true, - "optional": true - } - } - }, "string-width": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", - "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", + "bundled": true, "dev": true, "requires": { - "code-point-at": "1.1.0", - "is-fullwidth-code-point": "1.0.0", - "strip-ansi": "3.0.1" + "code-point-at": "^1.0.0", + "is-fullwidth-code-point": "^1.0.0", + "strip-ansi": "^3.0.0" } }, "string_decoder": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.1.tgz", - "integrity": "sha1-YuIA8DmVWmgQ2N8KM//A8BNmLZg=", + "version": "1.1.1", + "bundled": true, "dev": true, "requires": { - "safe-buffer": "5.0.1" + "safe-buffer": "~5.1.0" } }, - "stringstream": { - "version": "0.0.5", - "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz", - "integrity": "sha1-TkhM1N5aC7vuGORjB3EKioFiGHg=", - "dev": true, - "optional": true - }, "strip-ansi": { "version": "3.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", - "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", + "bundled": true, "dev": true, "requires": { - "ansi-regex": "2.1.1" + "ansi-regex": "^2.0.0" } }, "strip-json-comments": { "version": "2.0.1", - "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", - "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=", + "bundled": true, "dev": true, "optional": true }, "tar": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz", - "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=", - "dev": true, - "requires": { - "block-stream": "0.0.9", - "fstream": "1.0.11", - "inherits": "2.0.3" - } - }, - "tar-pack": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/tar-pack/-/tar-pack-3.4.0.tgz", - "integrity": "sha1-I74tf2cagzk3bL2wuP4/3r8xeYQ=", + "version": "4.4.1", + "bundled": true, "dev": true, "optional": true, "requires": { - "debug": "2.6.8", - "fstream": "1.0.11", - "fstream-ignore": "1.0.5", - "once": "1.4.0", - "readable-stream": "2.2.9", - "rimraf": "2.6.1", - "tar": "2.2.1", - "uid-number": "0.0.6" + "chownr": "^1.0.1", + "fs-minipass": "^1.2.5", + "minipass": "^2.2.4", + "minizlib": "^1.1.0", + "mkdirp": "^0.5.0", + "safe-buffer": "^5.1.1", + "yallist": "^3.0.2" } }, - "tough-cookie": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.2.tgz", - "integrity": "sha1-8IH3bkyFcg5sN6X6ztc3FQ2EByo=", - "dev": true, - "optional": true, - "requires": { - "punycode": "1.4.1" - } - }, - "tunnel-agent": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz", - "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=", - "dev": true, - "optional": true, - "requires": { - "safe-buffer": "5.0.1" - } - }, - "tweetnacl": { - "version": "0.14.5", - "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz", - "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=", - "dev": true, - "optional": true - }, - "uid-number": { - "version": "0.0.6", - "resolved": "https://registry.npmjs.org/uid-number/-/uid-number-0.0.6.tgz", - "integrity": "sha1-DqEOgDXo61uOREnwbaHHMGY7qoE=", - "dev": true, - "optional": true - }, "util-deprecate": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", - "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", - "dev": true - }, - "uuid": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.0.1.tgz", - "integrity": "sha1-ZUS7ot/ajBzxfmKaOjBeK7H+5sE=", + "bundled": true, "dev": true, "optional": true }, - "verror": { - "version": "1.3.6", - "resolved": "https://registry.npmjs.org/verror/-/verror-1.3.6.tgz", - "integrity": "sha1-z/XfEpRtKX0rqu+qJoniW+AcAFw=", - "dev": true, - "optional": true, - "requires": { - "extsprintf": "1.0.2" - } - }, "wide-align": { "version": "1.1.2", - "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.2.tgz", - "integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==", + "bundled": true, "dev": true, "optional": true, "requires": { - "string-width": "1.0.2" + "string-width": "^1.0.2" } }, "wrappy": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", + "bundled": true, + "dev": true + }, + "yallist": { + "version": "3.0.2", + "bundled": true, "dev": true } } @@ -3993,10 +3539,10 @@ "integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=", "dev": true, "requires": { - "graceful-fs": "4.1.11", - "inherits": "2.0.3", - "mkdirp": "0.5.1", - "rimraf": "2.6.2" + "graceful-fs": "^4.1.2", + "inherits": "~2.0.0", + "mkdirp": ">=0.5 0", + "rimraf": "2" } }, "function-bind": { @@ -4011,7 +3557,7 @@ "integrity": "sha1-7Sgcq+1G/uz5Ie4y3ExQs3KsfPo=", "dev": true, "requires": { - "readable-stream": "1.0.34" + "readable-stream": "~1.0.26-4" }, "dependencies": { "isarray": { @@ -4026,10 +3572,10 @@ "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=", "dev": true, "requires": { - "core-util-is": "1.0.2", - "inherits": "2.0.3", + "core-util-is": "~1.0.0", + "inherits": "~2.0.1", "isarray": "0.0.1", - "string_decoder": "0.10.31" + "string_decoder": "~0.10.x" } }, "string_decoder": { @@ -4046,14 +3592,14 @@ "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", "dev": true, "requires": { - "aproba": "1.2.0", - "console-control-strings": "1.1.0", - "has-unicode": "2.0.1", - "object-assign": "4.1.1", - "signal-exit": "3.0.2", - "string-width": "1.0.2", - "strip-ansi": "3.0.1", - "wide-align": "1.1.3" + "aproba": "^1.0.3", + "console-control-strings": "^1.0.0", + "has-unicode": "^2.0.0", + "object-assign": "^4.1.0", + "signal-exit": "^3.0.0", + "string-width": "^1.0.1", + "strip-ansi": "^3.0.1", + "wide-align": "^1.1.0" } }, "gaze": { @@ -4062,7 +3608,7 @@ "integrity": "sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==", "dev": true, "requires": { - "globule": "1.2.0" + "globule": "^1.0.0" } }, "generate-function": { @@ -4077,7 +3623,7 @@ "integrity": "sha1-nA4cQDCM6AT0eDYYuTf6iPmdUNA=", "dev": true, "requires": { - "is-property": "1.0.2" + "is-property": "^1.0.0" } }, "get-caller-file": { @@ -4107,8 +3653,7 @@ "get-value": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz", - "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=", - "dev": true + "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=" }, "getpass": { "version": "0.1.7", @@ -4116,7 +3661,7 @@ "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=", "dev": true, "requires": { - "assert-plus": "1.0.0" + "assert-plus": "^1.0.0" } }, "github-url-from-git": { @@ -4131,12 +3676,12 @@ "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", "dev": true, "requires": { - "fs.realpath": "1.0.0", - "inflight": "1.0.6", - "inherits": "2.0.3", - "minimatch": "3.0.4", - "once": "1.4.0", - "path-is-absolute": "1.0.1" + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.4", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" } }, "glob-base": { @@ -4145,8 +3690,8 @@ "integrity": "sha1-27Fk9iIbHAscz4Kuoyi0l98Oo8Q=", "dev": true, "requires": { - "glob-parent": "2.0.0", - "is-glob": "2.0.1" + "glob-parent": "^2.0.0", + "is-glob": "^2.0.0" }, "dependencies": { "glob-parent": { @@ -4155,7 +3700,7 @@ "integrity": "sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=", "dev": true, "requires": { - "is-glob": "2.0.1" + "is-glob": "^2.0.0" } }, "is-extglob": { @@ -4170,7 +3715,7 @@ "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=", "dev": true, "requires": { - "is-extglob": "1.0.0" + "is-extglob": "^1.0.0" } } } @@ -4181,8 +3726,8 @@ "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=", "dev": true, "requires": { - "is-glob": "3.1.0", - "path-dirname": "1.0.2" + "is-glob": "^3.1.0", + "path-dirname": "^1.0.0" }, "dependencies": { "is-glob": { @@ -4191,7 +3736,7 @@ "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=", "dev": true, "requires": { - "is-extglob": "2.1.1" + "is-extglob": "^2.1.0" } } } @@ -4202,14 +3747,13 @@ "integrity": "sha1-sxnA3UYH81PzvpzKTHL8FIxJ9EU=", "dev": true, "requires": { - "ini": "1.3.5" + "ini": "^1.3.4" } }, "globals": { "version": "9.18.0", "resolved": "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz", - "integrity": "sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==", - "dev": true + "integrity": "sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==" }, "globby": { "version": "6.1.0", @@ -4217,22 +3761,22 @@ "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=", "dev": true, "requires": { - "array-union": "1.0.2", - "glob": "7.1.2", - "object-assign": "4.1.1", - "pify": "2.3.0", - "pinkie-promise": "2.0.1" + "array-union": "^1.0.1", + "glob": "^7.0.3", + "object-assign": "^4.0.1", + "pify": "^2.0.0", + "pinkie-promise": "^2.0.0" } }, "globule": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/globule/-/globule-1.2.0.tgz", - "integrity": "sha1-HcScaCLdnoovoAuiopUAboZkvQk=", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/globule/-/globule-1.2.1.tgz", + "integrity": "sha512-g7QtgWF4uYSL5/dn71WxubOrS7JVGCnFPEnoeChJmBnyR9Mw8nGoEwOgJL/RC2Te0WhbsEUCejfH8SZNJ+adYQ==", "dev": true, "requires": { - "glob": "7.1.2", - "lodash": "4.17.5", - "minimatch": "3.0.4" + "glob": "~7.1.1", + "lodash": "~4.17.10", + "minimatch": "~3.0.2" } }, "gonzales-pe-sl": { @@ -4241,7 +3785,7 @@ "integrity": "sha1-aoaLw4BkXxQf7rBCxvl/zHG1n+Y=", "dev": true, "requires": { - "minimist": "1.1.3" + "minimist": "1.1.x" }, "dependencies": { "minimist": { @@ -4258,24 +3802,23 @@ "integrity": "sha1-JAzQV4WpoY5WHcG0S0HHY+8ejbA=", "dev": true, "requires": { - "create-error-class": "3.0.2", - "duplexer3": "0.1.4", - "get-stream": "3.0.0", - "is-redirect": "1.0.0", - "is-retry-allowed": "1.1.0", - "is-stream": "1.1.0", - "lowercase-keys": "1.0.1", - "safe-buffer": "5.1.1", - "timed-out": "4.0.1", - "unzip-response": "2.0.1", - "url-parse-lax": "1.0.0" + "create-error-class": "^3.0.0", + "duplexer3": "^0.1.4", + "get-stream": "^3.0.0", + "is-redirect": "^1.0.0", + "is-retry-allowed": "^1.0.0", + "is-stream": "^1.0.0", + "lowercase-keys": "^1.0.0", + "safe-buffer": "^5.0.1", + "timed-out": "^4.0.0", + "unzip-response": "^2.0.1", + "url-parse-lax": "^1.0.0" } }, "graceful-fs": { "version": "4.1.11", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz", - "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=", - "dev": true + "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=" }, "growl": { "version": "1.10.3", @@ -4295,10 +3838,10 @@ "integrity": "sha1-Ywo13+ApS8KB7a5v/F0yn8eYLcw=", "dev": true, "requires": { - "async": "1.5.2", - "optimist": "0.6.1", - "source-map": "0.4.4", - "uglify-js": "2.8.29" + "async": "^1.4.0", + "optimist": "^0.6.1", + "source-map": "^0.4.4", + "uglify-js": "^2.6" }, "dependencies": { "async": { @@ -4321,8 +3864,8 @@ "dev": true, "optional": true, "requires": { - "center-align": "0.1.3", - "right-align": "0.1.3", + "center-align": "^0.1.1", + "right-align": "^0.1.1", "wordwrap": "0.0.2" } }, @@ -4332,7 +3875,7 @@ "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=", "dev": true, "requires": { - "amdefine": "1.0.1" + "amdefine": ">=0.0.4" } }, "uglify-js": { @@ -4342,9 +3885,9 @@ "dev": true, "optional": true, "requires": { - "source-map": "0.5.7", - "uglify-to-browserify": "1.0.2", - "yargs": "3.10.0" + "source-map": "~0.5.1", + "uglify-to-browserify": "~1.0.0", + "yargs": "~3.10.0" }, "dependencies": { "source-map": { @@ -4370,9 +3913,9 @@ "dev": true, "optional": true, "requires": { - "camelcase": "1.2.1", - "cliui": "2.1.0", - "decamelize": "1.2.0", + "camelcase": "^1.0.2", + "cliui": "^2.1.0", + "decamelize": "^1.0.0", "window-size": "0.1.0" } } @@ -4390,8 +3933,8 @@ "integrity": "sha1-ukAsJmGU8VlW7xXg/PJCmT9qff0=", "dev": true, "requires": { - "ajv": "5.5.2", - "har-schema": "2.0.0" + "ajv": "^5.1.0", + "har-schema": "^2.0.0" } }, "has": { @@ -4400,16 +3943,15 @@ "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", "dev": true, "requires": { - "function-bind": "1.1.1" + "function-bind": "^1.1.1" } }, "has-ansi": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz", "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=", - "dev": true, "requires": { - "ansi-regex": "2.1.1" + "ansi-regex": "^2.0.0" } }, "has-flag": { @@ -4428,30 +3970,27 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz", "integrity": "sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=", - "dev": true, "requires": { - "get-value": "2.0.6", - "has-values": "1.0.0", - "isobject": "3.0.1" + "get-value": "^2.0.6", + "has-values": "^1.0.0", + "isobject": "^3.0.0" } }, "has-values": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/has-values/-/has-values-1.0.0.tgz", "integrity": "sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=", - "dev": true, "requires": { - "is-number": "3.0.0", - "kind-of": "4.0.0" + "is-number": "^3.0.0", + "kind-of": "^4.0.0" }, "dependencies": { "kind-of": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz", "integrity": "sha1-IIE989cSkosgc3hpGkUGb65y3Vc=", - "dev": true, "requires": { - "is-buffer": "1.1.6" + "is-buffer": "^1.1.5" } } } @@ -4468,8 +4007,8 @@ "integrity": "sha1-X8hoaEfs1zSZQDMZprCj8/auSRg=", "dev": true, "requires": { - "inherits": "2.0.3", - "safe-buffer": "5.1.1" + "inherits": "^2.0.1", + "safe-buffer": "^5.0.1" } }, "hash.js": { @@ -4478,20 +4017,28 @@ "integrity": "sha512-A6RlQvvZEtFS5fLU43IDu0QUmBy+fDO9VMdTXvufKwIkt/rFfvICAViCax5fbDO4zdNzaC3/27ZhKUok5bAJyw==", "dev": true, "requires": { - "inherits": "2.0.3", - "minimalistic-assert": "1.0.1" + "inherits": "^2.0.3", + "minimalistic-assert": "^1.0.0" } }, "hawk": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/hawk/-/hawk-6.0.2.tgz", - "integrity": "sha512-miowhl2+U7Qle4vdLqDdPt9m09K6yZhkLDTWGoUiUzrQCn+mHHSmfJgAyGaLRZbPmTqfFFjRV1QWCW0VWUJBbQ==", + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz", + "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=", "dev": true, "requires": { - "boom": "4.3.1", - "cryptiles": "3.1.2", - "hoek": "4.2.1", - "sntp": "2.1.0" + "boom": "2.x.x", + "cryptiles": "2.x.x", + "hoek": "2.x.x", + "sntp": "1.x.x" + }, + "dependencies": { + "hoek": { + "version": "2.16.3", + "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz", + "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=", + "dev": true + } } }, "he": { @@ -4506,9 +4053,9 @@ "integrity": "sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=", "dev": true, "requires": { - "hash.js": "1.1.4", - "minimalistic-assert": "1.0.1", - "minimalistic-crypto-utils": "1.0.1" + "hash.js": "^1.0.3", + "minimalistic-assert": "^1.0.0", + "minimalistic-crypto-utils": "^1.0.1" } }, "hoek": { @@ -4523,15 +4070,14 @@ "integrity": "sha1-42w/LSyufXRqhX440Y1fMqeILbg=", "dev": true, "requires": { - "os-homedir": "1.0.2", - "os-tmpdir": "1.0.2" + "os-homedir": "^1.0.0", + "os-tmpdir": "^1.0.1" } }, "hosted-git-info": { "version": "2.6.0", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.6.0.tgz", - "integrity": "sha512-lIbgIIQA3lz5XaB6vxakj6sDHADJiZadYEJB+FgA+C4nubM1NwcuvUr9EJPmnH1skZqpqUzWborWo8EIUi0Sdw==", - "dev": true + "integrity": "sha512-lIbgIIQA3lz5XaB6vxakj6sDHADJiZadYEJB+FgA+C4nubM1NwcuvUr9EJPmnH1skZqpqUzWborWo8EIUi0Sdw==" }, "html-encoding-sniffer": { "version": "1.0.2", @@ -4539,7 +4085,7 @@ "integrity": "sha512-71lZziiDnsuabfdYiUeWdCVyKuqwWi23L8YeIgV9jSSZHCtb6wB1BKWooH7L3tn4/FuZJMVWyNaIDr4RGmaSYw==", "dev": true, "requires": { - "whatwg-encoding": "1.0.3" + "whatwg-encoding": "^1.0.1" } }, "http-parser-js": { @@ -4554,9 +4100,9 @@ "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=", "dev": true, "requires": { - "assert-plus": "1.0.0", - "jsprim": "1.4.1", - "sshpk": "1.14.1" + "assert-plus": "^1.0.0", + "jsprim": "^1.2.2", + "sshpk": "^1.7.0" } }, "hyperlinker": { @@ -4578,9 +4124,9 @@ "dev": true }, "ignore": { - "version": "3.3.7", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-3.3.7.tgz", - "integrity": "sha512-YGG3ejvBNHRqu0559EOxxNFihD0AjpvHlC/pdGKd3X3ofe+CoJkYazwNJYTNebqpPKN+VVQbh4ZFn1DivMNuHA==", + "version": "3.3.8", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-3.3.8.tgz", + "integrity": "sha512-pUh+xUQQhQzevjRHHFqqcTy0/dP/kS9I8HSrUydhihjuD09W6ldVWFtIrwhXdUJHis3i2rZNqEHpZH/cbinFbg==", "dev": true }, "immediate": { @@ -4601,8 +4147,8 @@ "integrity": "sha512-vAaZHieK9qjGo58agRBg+bhHX3hoTZU/Oa3GESWLz7t1U62fk63aHuDJJEteXoDeTCcPmUT+z38gkHPZkkmpmQ==", "dev": true, "requires": { - "pkg-dir": "2.0.0", - "resolve-cwd": "2.0.0" + "pkg-dir": "^2.0.0", + "resolve-cwd": "^2.0.0" } }, "imurmurhash": { @@ -4623,7 +4169,7 @@ "integrity": "sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=", "dev": true, "requires": { - "repeating": "2.0.1" + "repeating": "^2.0.0" } }, "indexof": { @@ -4638,8 +4184,8 @@ "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", "dev": true, "requires": { - "once": "1.4.0", - "wrappy": "1.0.2" + "once": "^1.3.0", + "wrappy": "1" } }, "inherits": { @@ -4658,9 +4204,8 @@ "version": "2.2.4", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", - "dev": true, "requires": { - "loose-envify": "1.3.1" + "loose-envify": "^1.0.0" } }, "invert-kv": { @@ -4670,9 +4215,9 @@ "dev": true }, "ionicons": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-4.1.2.tgz", - "integrity": "sha512-BbuKehkCfF3VuthugKLntpRfwRMEls5zvL96FQUJFSy/5GutOnW+uvbyy4OaHtQ0QhuvRYbWIQa16Lok8svhZQ==" + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-4.2.4.tgz", + "integrity": "sha512-iaBPyuPSefGd6X03SkBM1BRqVbVFe1PZL5kYSNbMLxvTXGTenxK+O2TWsE1PPDo10qd0OiDb5cBod1oeHPCItA==" }, "is": { "version": "0.2.7", @@ -4684,18 +4229,16 @@ "version": "0.1.6", "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=", - "dev": true, "requires": { - "kind-of": "3.2.2" + "kind-of": "^3.0.2" }, "dependencies": { "kind-of": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", - "dev": true, "requires": { - "is-buffer": "1.1.6" + "is-buffer": "^1.1.5" } } } @@ -4703,8 +4246,7 @@ "is-arrayish": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", - "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=", - "dev": true + "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=" }, "is-binary-path": { "version": "1.0.1", @@ -4712,29 +4254,26 @@ "integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=", "dev": true, "requires": { - "binary-extensions": "1.11.0" + "binary-extensions": "^1.0.0" } }, "is-buffer": { "version": "1.1.6", "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz", - "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==", - "dev": true + "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==" }, "is-builtin-module": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz", "integrity": "sha1-VAVy0096wxGfj3bDDLwbHgN6/74=", - "dev": true, "requires": { - "builtin-modules": "1.1.1" + "builtin-modules": "^1.0.0" }, "dependencies": { "builtin-modules": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz", - "integrity": "sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=", - "dev": true + "integrity": "sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=" } } }, @@ -4750,25 +4289,23 @@ "integrity": "sha512-c7TnwxLePuqIlxHgr7xtxzycJPegNHFuIrBkwbf8hc58//+Op1CqFkyS+xnIMkwn9UsJIwc174BIjkyBmSpjKg==", "dev": true, "requires": { - "ci-info": "1.1.3" + "ci-info": "^1.0.0" } }, "is-data-descriptor": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=", - "dev": true, "requires": { - "kind-of": "3.2.2" + "kind-of": "^3.0.2" }, "dependencies": { "kind-of": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", - "dev": true, "requires": { - "is-buffer": "1.1.6" + "is-buffer": "^1.1.5" } } } @@ -4783,18 +4320,16 @@ "version": "0.1.6", "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz", "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==", - "dev": true, "requires": { - "is-accessor-descriptor": "0.1.6", - "is-data-descriptor": "0.1.4", - "kind-of": "5.1.0" + "is-accessor-descriptor": "^0.1.6", + "is-data-descriptor": "^0.1.4", + "kind-of": "^5.0.0" }, "dependencies": { "kind-of": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz", - "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==", - "dev": true + "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==" } } }, @@ -4810,14 +4345,13 @@ "integrity": "sha1-IjgJj8Ih3gvPpdnqxMRdY4qhxTQ=", "dev": true, "requires": { - "is-primitive": "2.0.0" + "is-primitive": "^2.0.0" } }, "is-extendable": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz", - "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=", - "dev": true + "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=" }, "is-extglob": { "version": "2.1.1", @@ -4829,9 +4363,8 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.2.tgz", "integrity": "sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=", - "dev": true, "requires": { - "number-is-nan": "1.0.1" + "number-is-nan": "^1.0.0" } }, "is-fullwidth-code-point": { @@ -4840,7 +4373,7 @@ "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, "requires": { - "number-is-nan": "1.0.1" + "number-is-nan": "^1.0.0" } }, "is-generator-fn": { @@ -4855,7 +4388,7 @@ "integrity": "sha1-lSHHaEXMJhCoUgPd8ICpWML/q8A=", "dev": true, "requires": { - "is-extglob": "2.1.1" + "is-extglob": "^2.1.1" } }, "is-installed-globally": { @@ -4864,8 +4397,8 @@ "integrity": "sha1-Df2Y9akRFxbdU13aZJL2e/PSWoA=", "dev": true, "requires": { - "global-dirs": "0.1.1", - "is-path-inside": "1.0.1" + "global-dirs": "^0.1.0", + "is-path-inside": "^1.0.0" } }, "is-module": { @@ -4886,11 +4419,11 @@ "integrity": "sha512-IBhBslgngMQN8DDSppmgDv7RNrlFotuuDsKcrCP3+HbFaVivIBU7u9oiiErw8sH4ynx3+gOGQ3q2otkgiSi6kg==", "dev": true, "requires": { - "generate-function": "2.0.0", - "generate-object-property": "1.2.0", - "is-my-ip-valid": "1.0.0", - "jsonpointer": "4.0.1", - "xtend": "4.0.1" + "generate-function": "^2.0.0", + "generate-object-property": "^1.1.0", + "is-my-ip-valid": "^1.0.0", + "jsonpointer": "^4.0.0", + "xtend": "^4.0.0" }, "dependencies": { "xtend": { @@ -4911,18 +4444,16 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz", "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=", - "dev": true, "requires": { - "kind-of": "3.2.2" + "kind-of": "^3.0.2" }, "dependencies": { "kind-of": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", - "dev": true, "requires": { - "is-buffer": "1.1.6" + "is-buffer": "^1.1.5" } } } @@ -4943,16 +4474,14 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/is-odd/-/is-odd-2.0.0.tgz", "integrity": "sha512-OTiixgpZAT1M4NHgS5IguFp/Vz2VI3U7Goh4/HA1adtwyLtSBrxYlcSYkhpAE07s4fKEcjrFxyvtQBND4vFQyQ==", - "dev": true, "requires": { - "is-number": "4.0.0" + "is-number": "^4.0.0" }, "dependencies": { "is-number": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-4.0.0.tgz", - "integrity": "sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==", - "dev": true + "integrity": "sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==" } } }, @@ -4968,7 +4497,7 @@ "integrity": "sha512-FjV1RTW48E7CWM7eE/J2NJvAEEVektecDBVBE5Hh3nM1Jd0kvhHtX68Pr3xsDf857xt3Y4AkwVULK1Vku62aaQ==", "dev": true, "requires": { - "is-path-inside": "1.0.1" + "is-path-inside": "^1.0.0" } }, "is-path-inside": { @@ -4977,7 +4506,7 @@ "integrity": "sha1-jvW33lBDej/cprToZe96pVy0gDY=", "dev": true, "requires": { - "path-is-inside": "1.0.2" + "path-is-inside": "^1.0.1" } }, "is-plain-obj": { @@ -4990,9 +4519,8 @@ "version": "2.0.4", "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz", "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==", - "dev": true, "requires": { - "isobject": "3.0.1" + "isobject": "^3.0.1" } }, "is-posix-bracket": { @@ -5031,7 +4559,7 @@ "integrity": "sha1-VRdIm1RwkbCTDglWVM7SXul+lJE=", "dev": true, "requires": { - "has": "1.0.3" + "has": "^1.0.1" } }, "is-resolvable": { @@ -5067,14 +4595,12 @@ "is-utf8": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz", - "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=", - "dev": true + "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=" }, "is-windows": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz", - "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==", - "dev": true + "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==" }, "is-wsl": { "version": "1.1.0", @@ -5085,8 +4611,7 @@ "isarray": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", - "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", - "dev": true + "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=" }, "isbuffer": { "version": "0.0.0", @@ -5100,7 +4625,7 @@ "integrity": "sha512-zfRhJn9rFSGhzU5tGZqepRSAj3+g6oTOHxMGGriWNJZzyLPUK8H7VHpqKntegnW8KLyGA9zwuNaCoopl40LTpg==", "dev": true, "requires": { - "punycode": "2.1.1" + "punycode": "2.x.x" }, "dependencies": { "punycode": { @@ -5120,8 +4645,7 @@ "isobject": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", - "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=", - "dev": true + "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=" }, "isstream": { "version": "0.1.2", @@ -5141,25 +4665,24 @@ "integrity": "sha512-duj6AlLcsWNwUpfyfHt0nWIeRiZpuShnP40YTxOGQgtaN8fd6JYSxsvxUphTDy8V5MfDXo4s/xVCIIvVCO808g==", "dev": true, "requires": { - "async": "2.6.1", - "compare-versions": "3.3.0", - "fileset": "2.0.3", - "istanbul-lib-coverage": "1.2.0", - "istanbul-lib-hook": "1.2.1", - "istanbul-lib-instrument": "1.10.1", - "istanbul-lib-report": "1.1.4", - "istanbul-lib-source-maps": "1.2.5", - "istanbul-reports": "1.3.0", - "js-yaml": "3.11.0", - "mkdirp": "0.5.1", - "once": "1.4.0" + "async": "^2.1.4", + "compare-versions": "^3.1.0", + "fileset": "^2.0.2", + "istanbul-lib-coverage": "^1.2.0", + "istanbul-lib-hook": "^1.2.0", + "istanbul-lib-instrument": "^1.10.1", + "istanbul-lib-report": "^1.1.4", + "istanbul-lib-source-maps": "^1.2.4", + "istanbul-reports": "^1.3.0", + "js-yaml": "^3.7.0", + "mkdirp": "^0.5.1", + "once": "^1.4.0" } }, "istanbul-lib-coverage": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-1.2.0.tgz", - "integrity": "sha512-GvgM/uXRwm+gLlvkWHTjDAvwynZkL9ns15calTrmhGgowlwJBbWMYzWbKqE2DT6JDP1AFXKa+Zi0EkqNCUqY0A==", - "dev": true + "integrity": "sha512-GvgM/uXRwm+gLlvkWHTjDAvwynZkL9ns15calTrmhGgowlwJBbWMYzWbKqE2DT6JDP1AFXKa+Zi0EkqNCUqY0A==" }, "istanbul-lib-hook": { "version": "1.2.1", @@ -5167,22 +4690,28 @@ "integrity": "sha512-eLAMkPG9FU0v5L02lIkcj/2/Zlz9OuluaXikdr5iStk8FDbSwAixTK9TkYxbF0eNnzAJTwM2fkV2A1tpsIp4Jg==", "dev": true, "requires": { - "append-transform": "1.0.0" + "append-transform": "^1.0.0" } }, "istanbul-lib-instrument": { "version": "1.10.1", "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-1.10.1.tgz", "integrity": "sha512-1dYuzkOCbuR5GRJqySuZdsmsNKPL3PTuyPevQfoCXJePT9C8y1ga75neU+Tuy9+yS3G/dgx8wgOmp2KLpgdoeQ==", - "dev": true, "requires": { - "babel-generator": "6.26.1", - "babel-template": "6.26.0", - "babel-traverse": "6.26.0", - "babel-types": "6.26.0", - "babylon": "6.18.0", - "istanbul-lib-coverage": "1.2.0", - "semver": "5.5.0" + "babel-generator": "^6.18.0", + "babel-template": "^6.16.0", + "babel-traverse": "^6.18.0", + "babel-types": "^6.18.0", + "babylon": "^6.18.0", + "istanbul-lib-coverage": "^1.2.0", + "semver": "^5.3.0" + }, + "dependencies": { + "semver": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.5.0.tgz", + "integrity": "sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA==" + } } }, "istanbul-lib-report": { @@ -5191,10 +4720,10 @@ "integrity": "sha512-Azqvq5tT0U09nrncK3q82e/Zjkxa4tkFZv7E6VcqP0QCPn6oNljDPfrZEC/umNXds2t7b8sRJfs6Kmpzt8m2kA==", "dev": true, "requires": { - "istanbul-lib-coverage": "1.2.0", - "mkdirp": "0.5.1", - "path-parse": "1.0.5", - "supports-color": "3.2.3" + "istanbul-lib-coverage": "^1.2.0", + "mkdirp": "^0.5.1", + "path-parse": "^1.0.5", + "supports-color": "^3.1.2" }, "dependencies": { "has-flag": { @@ -5209,7 +4738,7 @@ "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=", "dev": true, "requires": { - "has-flag": "1.0.0" + "has-flag": "^1.0.0" } } } @@ -5220,11 +4749,11 @@ "integrity": "sha512-8O2T/3VhrQHn0XcJbP1/GN7kXMiRAlPi+fj3uEHrjBD8Oz7Py0prSC25C09NuAZS6bgW1NNKAvCSHZXB0irSGA==", "dev": true, "requires": { - "debug": "3.1.0", - "istanbul-lib-coverage": "1.2.0", - "mkdirp": "0.5.1", - "rimraf": "2.6.2", - "source-map": "0.5.7" + "debug": "^3.1.0", + "istanbul-lib-coverage": "^1.2.0", + "mkdirp": "^0.5.1", + "rimraf": "^2.6.1", + "source-map": "^0.5.3" }, "dependencies": { "debug": { @@ -5244,7 +4773,7 @@ "integrity": "sha512-y2Z2IMqE1gefWUaVjrBm0mSKvUkaBy9Vqz8iwr/r40Y9hBbIteH5wqHG/9DLTfJ9xUnUT2j7A3+VVJ6EaYBllA==", "dev": true, "requires": { - "handlebars": "4.0.11" + "handlebars": "^4.0.3" } }, "jest": { @@ -5253,8 +4782,8 @@ "integrity": "sha1-u7f4kxAKEadC3YvQ0EelSwlorRo=", "dev": true, "requires": { - "import-local": "1.0.0", - "jest-cli": "23.1.0" + "import-local": "^1.0.0", + "jest-cli": "^23.1.0" }, "dependencies": { "ansi-regex": { @@ -5263,13 +4792,22 @@ "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=", "dev": true }, + "ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "requires": { + "color-convert": "^1.9.0" + } + }, "arr-diff": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-2.0.0.tgz", "integrity": "sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=", "dev": true, "requires": { - "arr-flatten": "1.1.0" + "arr-flatten": "^1.0.1" } }, "array-unique": { @@ -5278,15 +4816,38 @@ "integrity": "sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=", "dev": true }, + "babel-jest": { + "version": "22.4.4", + "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-22.4.4.tgz", + "integrity": "sha512-A9NB6/lZhYyypR9ATryOSDcqBaqNdzq4U+CN+/wcMsLcmKkPxQEoTKLajGfd3IkxNyVBT8NewUK2nWyGbSzHEQ==", + "requires": { + "babel-plugin-istanbul": "^4.1.5", + "babel-preset-jest": "^22.4.4" + } + }, + "babel-plugin-jest-hoist": { + "version": "22.4.4", + "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-22.4.4.tgz", + "integrity": "sha512-DUvGfYaAIlkdnygVIEl0O4Av69NtuQWcrjMOv6DODPuhuGLDnbsARz3AwiiI/EkIMMlxQDUcrZ9yoyJvTNjcVQ==" + }, + "babel-preset-jest": { + "version": "22.4.4", + "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-22.4.4.tgz", + "integrity": "sha512-+dxMtOFwnSYWfum0NaEc0O03oSdwBsjx4tMSChRDPGwu/4wSY6Q6ANW3wkjKpJzzguaovRs/DODcT4hbSN8yiA==", + "requires": { + "babel-plugin-jest-hoist": "^22.4.4", + "babel-plugin-syntax-object-rest-spread": "^6.13.0" + } + }, "braces": { "version": "1.8.5", "resolved": "https://registry.npmjs.org/braces/-/braces-1.8.5.tgz", "integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=", "dev": true, "requires": { - "expand-range": "1.8.2", - "preserve": "0.2.0", - "repeat-element": "1.1.2" + "expand-range": "^1.8.1", + "preserve": "^0.2.0", + "repeat-element": "^1.1.2" } }, "camelcase": { @@ -5295,15 +4856,26 @@ "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=", "dev": true }, + "chalk": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", + "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + }, "cliui": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz", "integrity": "sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==", "dev": true, "requires": { - "string-width": "2.1.1", - "strip-ansi": "4.0.0", - "wrap-ansi": "2.1.0" + "string-width": "^2.1.1", + "strip-ansi": "^4.0.0", + "wrap-ansi": "^2.0.0" } }, "expand-brackets": { @@ -5312,7 +4884,7 @@ "integrity": "sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=", "dev": true, "requires": { - "is-posix-bracket": "0.1.1" + "is-posix-bracket": "^0.1.0" } }, "extglob": { @@ -5321,7 +4893,7 @@ "integrity": "sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=", "dev": true, "requires": { - "is-extglob": "1.0.0" + "is-extglob": "^1.0.0" } }, "find-up": { @@ -5330,7 +4902,7 @@ "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=", "dev": true, "requires": { - "locate-path": "2.0.0" + "locate-path": "^2.0.0" } }, "is-extglob": { @@ -5351,7 +4923,7 @@ "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=", "dev": true, "requires": { - "is-extglob": "1.0.0" + "is-extglob": "^1.0.0" } }, "jest-cli": { @@ -5360,41 +4932,41 @@ "integrity": "sha1-64vdTODRUlCJLjGtm2m8mdKo9r8=", "dev": true, "requires": { - "ansi-escapes": "3.1.0", - "chalk": "2.3.2", - "exit": "0.1.2", - "glob": "7.1.2", - "graceful-fs": "4.1.11", - "import-local": "1.0.0", - "is-ci": "1.1.0", - "istanbul-api": "1.3.1", - "istanbul-lib-coverage": "1.2.0", - "istanbul-lib-instrument": "1.10.1", - "istanbul-lib-source-maps": "1.2.5", - "jest-changed-files": "23.0.1", - "jest-config": "23.1.0", - "jest-environment-jsdom": "23.1.0", - "jest-get-type": "22.4.3", - "jest-haste-map": "23.1.0", - "jest-message-util": "23.1.0", - "jest-regex-util": "23.0.0", - "jest-resolve-dependencies": "23.0.1", - "jest-runner": "23.1.0", - "jest-runtime": "23.1.0", - "jest-snapshot": "23.0.1", - "jest-util": "23.1.0", - "jest-validate": "23.0.1", - "jest-watcher": "23.1.0", - "jest-worker": "23.0.1", - "micromatch": "2.3.11", - "node-notifier": "5.2.1", - "realpath-native": "1.0.0", - "rimraf": "2.6.2", - "slash": "1.0.0", - "string-length": "2.0.0", - "strip-ansi": "4.0.0", - "which": "1.3.0", - "yargs": "11.0.0" + "ansi-escapes": "^3.0.0", + "chalk": "^2.0.1", + "exit": "^0.1.2", + "glob": "^7.1.2", + "graceful-fs": "^4.1.11", + "import-local": "^1.0.0", + "is-ci": "^1.0.10", + "istanbul-api": "^1.3.1", + "istanbul-lib-coverage": "^1.2.0", + "istanbul-lib-instrument": "^1.10.1", + "istanbul-lib-source-maps": "^1.2.4", + "jest-changed-files": "^23.0.1", + "jest-config": "^23.1.0", + "jest-environment-jsdom": "^23.1.0", + "jest-get-type": "^22.1.0", + "jest-haste-map": "^23.1.0", + "jest-message-util": "^23.1.0", + "jest-regex-util": "^23.0.0", + "jest-resolve-dependencies": "^23.0.1", + "jest-runner": "^23.1.0", + "jest-runtime": "^23.1.0", + "jest-snapshot": "^23.0.1", + "jest-util": "^23.1.0", + "jest-validate": "^23.0.1", + "jest-watcher": "^23.1.0", + "jest-worker": "^23.0.1", + "micromatch": "^2.3.11", + "node-notifier": "^5.2.1", + "realpath-native": "^1.0.0", + "rimraf": "^2.5.4", + "slash": "^1.0.0", + "string-length": "^2.0.0", + "strip-ansi": "^4.0.0", + "which": "^1.2.12", + "yargs": "^11.0.0" } }, "kind-of": { @@ -5403,7 +4975,7 @@ "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", "dev": true, "requires": { - "is-buffer": "1.1.6" + "is-buffer": "^1.1.5" } }, "micromatch": { @@ -5412,19 +4984,19 @@ "integrity": "sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=", "dev": true, "requires": { - "arr-diff": "2.0.0", - "array-unique": "0.2.1", - "braces": "1.8.5", - "expand-brackets": "0.1.5", - "extglob": "0.3.2", - "filename-regex": "2.0.1", - "is-extglob": "1.0.0", - "is-glob": "2.0.1", - "kind-of": "3.2.2", - "normalize-path": "2.1.1", - "object.omit": "2.0.1", - "parse-glob": "3.0.4", - "regex-cache": "0.4.4" + "arr-diff": "^2.0.0", + "array-unique": "^0.2.1", + "braces": "^1.8.2", + "expand-brackets": "^0.1.4", + "extglob": "^0.3.1", + "filename-regex": "^2.0.0", + "is-extglob": "^1.0.0", + "is-glob": "^2.0.1", + "kind-of": "^3.0.2", + "normalize-path": "^2.0.1", + "object.omit": "^2.0.0", + "parse-glob": "^3.0.4", + "regex-cache": "^0.4.2" } }, "os-locale": { @@ -5433,9 +5005,9 @@ "integrity": "sha512-3sslG3zJbEYcaC4YVAvDorjGxc7tv6KVATnLPZONiljsUncvihe9BQoVCEs0RZ1kmf4Hk9OBqlZfJZWI4GanKA==", "dev": true, "requires": { - "execa": "0.7.0", - "lcid": "1.0.0", - "mem": "1.1.0" + "execa": "^0.7.0", + "lcid": "^1.0.0", + "mem": "^1.1.0" } }, "string-width": { @@ -5444,8 +5016,8 @@ "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==", "dev": true, "requires": { - "is-fullwidth-code-point": "2.0.0", - "strip-ansi": "4.0.0" + "is-fullwidth-code-point": "^2.0.0", + "strip-ansi": "^4.0.0" } }, "strip-ansi": { @@ -5454,7 +5026,7 @@ "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", "dev": true, "requires": { - "ansi-regex": "3.0.0" + "ansi-regex": "^3.0.0" } }, "which-module": { @@ -5469,18 +5041,18 @@ "integrity": "sha512-Rjp+lMYQOWtgqojx1dEWorjCofi1YN7AoFvYV7b1gx/7dAAeuI4kN5SZiEvr0ZmsZTOpDRcCqrpI10L31tFkBw==", "dev": true, "requires": { - "cliui": "4.1.0", - "decamelize": "1.2.0", - "find-up": "2.1.0", - "get-caller-file": "1.0.2", - "os-locale": "2.1.0", - "require-directory": "2.1.1", - "require-main-filename": "1.0.1", - "set-blocking": "2.0.0", - "string-width": "2.1.1", - "which-module": "2.0.0", - "y18n": "3.2.1", - "yargs-parser": "9.0.2" + "cliui": "^4.0.0", + "decamelize": "^1.1.1", + "find-up": "^2.1.0", + "get-caller-file": "^1.0.1", + "os-locale": "^2.0.0", + "require-directory": "^2.1.1", + "require-main-filename": "^1.0.1", + "set-blocking": "^2.0.0", + "string-width": "^2.0.0", + "which-module": "^2.0.0", + "y18n": "^3.2.1", + "yargs-parser": "^9.0.2" } }, "yargs-parser": { @@ -5489,7 +5061,7 @@ "integrity": "sha1-nM9qQ0YP5O1Aqbto9I1DuKaMwHc=", "dev": true, "requires": { - "camelcase": "4.1.0" + "camelcase": "^4.1.0" } } } @@ -5500,7 +5072,7 @@ "integrity": "sha1-95Vy0HIIROpd+EwqRI6GLCJU9gw=", "dev": true, "requires": { - "throat": "4.1.0" + "throat": "^4.0.0" } }, "jest-config": { @@ -5509,19 +5081,32 @@ "integrity": "sha1-cIyg9DHTVu5CT7SJXTMIAGvdgkE=", "dev": true, "requires": { - "babel-core": "6.26.3", - "babel-jest": "23.0.1", - "chalk": "2.3.2", - "glob": "7.1.2", - "jest-environment-jsdom": "23.1.0", - "jest-environment-node": "23.1.0", - "jest-get-type": "22.4.3", - "jest-jasmine2": "23.1.0", - "jest-regex-util": "23.0.0", - "jest-resolve": "23.1.0", - "jest-util": "23.1.0", - "jest-validate": "23.0.1", - "pretty-format": "23.0.1" + "babel-core": "^6.0.0", + "babel-jest": "^23.0.1", + "chalk": "^2.0.1", + "glob": "^7.1.1", + "jest-environment-jsdom": "^23.1.0", + "jest-environment-node": "^23.1.0", + "jest-get-type": "^22.1.0", + "jest-jasmine2": "^23.1.0", + "jest-regex-util": "^23.0.0", + "jest-resolve": "^23.1.0", + "jest-util": "^23.1.0", + "jest-validate": "^23.0.1", + "pretty-format": "^23.0.1" + }, + "dependencies": { + "chalk": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", + "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + } } }, "jest-diff": { @@ -5530,10 +5115,23 @@ "integrity": "sha1-PUkTfO4SwyCktNK0pvpugtSRoWo=", "dev": true, "requires": { - "chalk": "2.3.2", - "diff": "3.5.0", - "jest-get-type": "22.4.3", - "pretty-format": "23.0.1" + "chalk": "^2.0.1", + "diff": "^3.2.0", + "jest-get-type": "^22.1.0", + "pretty-format": "^23.0.1" + }, + "dependencies": { + "chalk": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", + "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + } } }, "jest-docblock": { @@ -5542,7 +5140,7 @@ "integrity": "sha1-3t3RgzO+XcJBUmCgTvP86SdrVyU=", "dev": true, "requires": { - "detect-newline": "2.1.0" + "detect-newline": "^2.1.0" } }, "jest-each": { @@ -5551,8 +5149,21 @@ "integrity": "sha1-FhRrWSw1SGelrl4TzfFcbGW2lsY=", "dev": true, "requires": { - "chalk": "2.3.2", - "pretty-format": "23.0.1" + "chalk": "^2.0.1", + "pretty-format": "^23.0.1" + }, + "dependencies": { + "chalk": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", + "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + } } }, "jest-environment-jsdom": { @@ -5561,9 +5172,9 @@ "integrity": "sha1-hZKZFOI77TV32sl1X0EG0Gl8R5w=", "dev": true, "requires": { - "jest-mock": "23.1.0", - "jest-util": "23.1.0", - "jsdom": "11.5.1" + "jest-mock": "^23.1.0", + "jest-util": "^23.1.0", + "jsdom": "^11.5.1" } }, "jest-environment-node": { @@ -5572,8 +5183,8 @@ "integrity": "sha1-RSwL+UnPy7rNoeF2Lu7XC8eEx9U=", "dev": true, "requires": { - "jest-mock": "23.1.0", - "jest-util": "23.1.0" + "jest-mock": "^23.1.0", + "jest-util": "^23.1.0" } }, "jest-get-type": { @@ -5588,13 +5199,13 @@ "integrity": "sha1-GObH1ajScTb5G32YUvhd4McHTEk=", "dev": true, "requires": { - "fb-watchman": "2.0.0", - "graceful-fs": "4.1.11", - "jest-docblock": "23.0.1", - "jest-serializer": "23.0.1", - "jest-worker": "23.0.1", - "micromatch": "2.3.11", - "sane": "2.5.2" + "fb-watchman": "^2.0.0", + "graceful-fs": "^4.1.11", + "jest-docblock": "^23.0.1", + "jest-serializer": "^23.0.1", + "jest-worker": "^23.0.1", + "micromatch": "^2.3.11", + "sane": "^2.0.0" }, "dependencies": { "arr-diff": { @@ -5603,7 +5214,7 @@ "integrity": "sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=", "dev": true, "requires": { - "arr-flatten": "1.1.0" + "arr-flatten": "^1.0.1" } }, "array-unique": { @@ -5618,9 +5229,9 @@ "integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=", "dev": true, "requires": { - "expand-range": "1.8.2", - "preserve": "0.2.0", - "repeat-element": "1.1.2" + "expand-range": "^1.8.1", + "preserve": "^0.2.0", + "repeat-element": "^1.1.2" } }, "expand-brackets": { @@ -5629,7 +5240,7 @@ "integrity": "sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=", "dev": true, "requires": { - "is-posix-bracket": "0.1.1" + "is-posix-bracket": "^0.1.0" } }, "extglob": { @@ -5638,7 +5249,7 @@ "integrity": "sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=", "dev": true, "requires": { - "is-extglob": "1.0.0" + "is-extglob": "^1.0.0" } }, "is-extglob": { @@ -5653,7 +5264,7 @@ "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=", "dev": true, "requires": { - "is-extglob": "1.0.0" + "is-extglob": "^1.0.0" } }, "kind-of": { @@ -5662,7 +5273,7 @@ "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", "dev": true, "requires": { - "is-buffer": "1.1.6" + "is-buffer": "^1.1.5" } }, "micromatch": { @@ -5671,19 +5282,19 @@ "integrity": "sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=", "dev": true, "requires": { - "arr-diff": "2.0.0", - "array-unique": "0.2.1", - "braces": "1.8.5", - "expand-brackets": "0.1.5", - "extglob": "0.3.2", - "filename-regex": "2.0.1", - "is-extglob": "1.0.0", - "is-glob": "2.0.1", - "kind-of": "3.2.2", - "normalize-path": "2.1.1", - "object.omit": "2.0.1", - "parse-glob": "3.0.4", - "regex-cache": "0.4.4" + "arr-diff": "^2.0.0", + "array-unique": "^0.2.1", + "braces": "^1.8.2", + "expand-brackets": "^0.1.4", + "extglob": "^0.3.1", + "filename-regex": "^2.0.0", + "is-extglob": "^1.0.0", + "is-glob": "^2.0.1", + "kind-of": "^3.0.2", + "normalize-path": "^2.0.1", + "object.omit": "^2.0.0", + "parse-glob": "^3.0.4", + "regex-cache": "^0.4.2" } } } @@ -5694,17 +5305,30 @@ "integrity": "sha1-SvqzFym2VN3NKwdK3YSTlvE7MLg=", "dev": true, "requires": { - "chalk": "2.3.2", - "co": "4.6.0", - "expect": "23.1.0", - "is-generator-fn": "1.0.0", - "jest-diff": "23.0.1", - "jest-each": "23.1.0", - "jest-matcher-utils": "23.0.1", - "jest-message-util": "23.1.0", - "jest-snapshot": "23.0.1", - "jest-util": "23.1.0", - "pretty-format": "23.0.1" + "chalk": "^2.0.1", + "co": "^4.6.0", + "expect": "^23.1.0", + "is-generator-fn": "^1.0.0", + "jest-diff": "^23.0.1", + "jest-each": "^23.1.0", + "jest-matcher-utils": "^23.0.1", + "jest-message-util": "^23.1.0", + "jest-snapshot": "^23.0.1", + "jest-util": "^23.1.0", + "pretty-format": "^23.0.1" + }, + "dependencies": { + "chalk": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", + "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + } } }, "jest-leak-detector": { @@ -5713,7 +5337,7 @@ "integrity": "sha1-nboHUFrDSVw50+wJrB5WRZnoYaA=", "dev": true, "requires": { - "pretty-format": "23.0.1" + "pretty-format": "^23.0.1" } }, "jest-matcher-utils": { @@ -5722,9 +5346,22 @@ "integrity": "sha1-DGwNrt+YM8Kn82I2Bp7+y0w/bl8=", "dev": true, "requires": { - "chalk": "2.3.2", - "jest-get-type": "22.4.3", - "pretty-format": "23.0.1" + "chalk": "^2.0.1", + "jest-get-type": "^22.1.0", + "pretty-format": "^23.0.1" + }, + "dependencies": { + "chalk": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", + "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + } } }, "jest-message-util": { @@ -5733,20 +5370,29 @@ "integrity": "sha1-moCbpIfsrFzlEdTmmO47XuJGHqk=", "dev": true, "requires": { - "@babel/code-frame": "7.0.0-beta.51", - "chalk": "2.3.2", - "micromatch": "2.3.11", - "slash": "1.0.0", - "stack-utils": "1.0.1" + "@babel/code-frame": "^7.0.0-beta.35", + "chalk": "^2.0.1", + "micromatch": "^2.3.11", + "slash": "^1.0.0", + "stack-utils": "^1.0.1" }, "dependencies": { + "ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "requires": { + "color-convert": "^1.9.0" + } + }, "arr-diff": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-2.0.0.tgz", "integrity": "sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=", "dev": true, "requires": { - "arr-flatten": "1.1.0" + "arr-flatten": "^1.0.1" } }, "array-unique": { @@ -5761,9 +5407,20 @@ "integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=", "dev": true, "requires": { - "expand-range": "1.8.2", - "preserve": "0.2.0", - "repeat-element": "1.1.2" + "expand-range": "^1.8.1", + "preserve": "^0.2.0", + "repeat-element": "^1.1.2" + } + }, + "chalk": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", + "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" } }, "expand-brackets": { @@ -5772,7 +5429,7 @@ "integrity": "sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=", "dev": true, "requires": { - "is-posix-bracket": "0.1.1" + "is-posix-bracket": "^0.1.0" } }, "extglob": { @@ -5781,7 +5438,7 @@ "integrity": "sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=", "dev": true, "requires": { - "is-extglob": "1.0.0" + "is-extglob": "^1.0.0" } }, "is-extglob": { @@ -5796,7 +5453,7 @@ "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=", "dev": true, "requires": { - "is-extglob": "1.0.0" + "is-extglob": "^1.0.0" } }, "kind-of": { @@ -5805,7 +5462,7 @@ "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", "dev": true, "requires": { - "is-buffer": "1.1.6" + "is-buffer": "^1.1.5" } }, "micromatch": { @@ -5814,19 +5471,19 @@ "integrity": "sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=", "dev": true, "requires": { - "arr-diff": "2.0.0", - "array-unique": "0.2.1", - "braces": "1.8.5", - "expand-brackets": "0.1.5", - "extglob": "0.3.2", - "filename-regex": "2.0.1", - "is-extglob": "1.0.0", - "is-glob": "2.0.1", - "kind-of": "3.2.2", - "normalize-path": "2.1.1", - "object.omit": "2.0.1", - "parse-glob": "3.0.4", - "regex-cache": "0.4.4" + "arr-diff": "^2.0.0", + "array-unique": "^0.2.1", + "braces": "^1.8.2", + "expand-brackets": "^0.1.4", + "extglob": "^0.3.1", + "filename-regex": "^2.0.0", + "is-extglob": "^1.0.0", + "is-glob": "^2.0.1", + "kind-of": "^3.0.2", + "normalize-path": "^2.0.1", + "object.omit": "^2.0.0", + "parse-glob": "^3.0.4", + "regex-cache": "^0.4.2" } } } @@ -5849,9 +5506,22 @@ "integrity": "sha1-ueMW7s69bwC8UKOWDRUnuuZXktI=", "dev": true, "requires": { - "browser-resolve": "1.11.2", - "chalk": "2.3.2", - "realpath-native": "1.0.0" + "browser-resolve": "^1.11.2", + "chalk": "^2.0.1", + "realpath-native": "^1.0.0" + }, + "dependencies": { + "chalk": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", + "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + } } }, "jest-resolve-dependencies": { @@ -5860,8 +5530,8 @@ "integrity": "sha1-0BoQ3a2RUsTOzfXqwriFccS2pk0=", "dev": true, "requires": { - "jest-regex-util": "23.0.0", - "jest-snapshot": "23.0.1" + "jest-regex-util": "^23.0.0", + "jest-snapshot": "^23.0.1" } }, "jest-runner": { @@ -5870,19 +5540,19 @@ "integrity": "sha1-+iCpM//3MaVDKzVh5/ZCZZT6KbU=", "dev": true, "requires": { - "exit": "0.1.2", - "graceful-fs": "4.1.11", - "jest-config": "23.1.0", - "jest-docblock": "23.0.1", - "jest-haste-map": "23.1.0", - "jest-jasmine2": "23.1.0", - "jest-leak-detector": "23.0.1", - "jest-message-util": "23.1.0", - "jest-runtime": "23.1.0", - "jest-util": "23.1.0", - "jest-worker": "23.0.1", - "source-map-support": "0.5.6", - "throat": "4.1.0" + "exit": "^0.1.2", + "graceful-fs": "^4.1.11", + "jest-config": "^23.1.0", + "jest-docblock": "^23.0.1", + "jest-haste-map": "^23.1.0", + "jest-jasmine2": "^23.1.0", + "jest-leak-detector": "^23.0.1", + "jest-message-util": "^23.1.0", + "jest-runtime": "^23.1.0", + "jest-util": "^23.1.0", + "jest-worker": "^23.0.1", + "source-map-support": "^0.5.6", + "throat": "^4.0.0" }, "dependencies": { "source-map": { @@ -5897,8 +5567,8 @@ "integrity": "sha512-N4KXEz7jcKqPf2b2vZF11lQIz9W5ZMuUcIOGj243lduidkf2fjkVKJS9vNxVWn3u/uxX38AcE8U9nnH9FPcq+g==", "dev": true, "requires": { - "buffer-from": "1.0.0", - "source-map": "0.6.1" + "buffer-from": "^1.0.0", + "source-map": "^0.6.0" } } } @@ -5909,27 +5579,27 @@ "integrity": "sha1-tK4OhyWeys/UqIS2OdsHz03WIK8=", "dev": true, "requires": { - "babel-core": "6.26.3", - "babel-plugin-istanbul": "4.1.6", - "chalk": "2.3.2", - "convert-source-map": "1.5.1", - "exit": "0.1.2", - "fast-json-stable-stringify": "2.0.0", - "graceful-fs": "4.1.11", - "jest-config": "23.1.0", - "jest-haste-map": "23.1.0", - "jest-message-util": "23.1.0", - "jest-regex-util": "23.0.0", - "jest-resolve": "23.1.0", - "jest-snapshot": "23.0.1", - "jest-util": "23.1.0", - "jest-validate": "23.0.1", - "micromatch": "2.3.11", - "realpath-native": "1.0.0", - "slash": "1.0.0", + "babel-core": "^6.0.0", + "babel-plugin-istanbul": "^4.1.6", + "chalk": "^2.0.1", + "convert-source-map": "^1.4.0", + "exit": "^0.1.2", + "fast-json-stable-stringify": "^2.0.0", + "graceful-fs": "^4.1.11", + "jest-config": "^23.1.0", + "jest-haste-map": "^23.1.0", + "jest-message-util": "^23.1.0", + "jest-regex-util": "^23.0.0", + "jest-resolve": "^23.1.0", + "jest-snapshot": "^23.0.1", + "jest-util": "^23.1.0", + "jest-validate": "^23.0.1", + "micromatch": "^2.3.11", + "realpath-native": "^1.0.0", + "slash": "^1.0.0", "strip-bom": "3.0.0", - "write-file-atomic": "2.3.0", - "yargs": "11.0.0" + "write-file-atomic": "^2.1.0", + "yargs": "^11.0.0" }, "dependencies": { "ansi-regex": { @@ -5938,13 +5608,22 @@ "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=", "dev": true }, + "ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "requires": { + "color-convert": "^1.9.0" + } + }, "arr-diff": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-2.0.0.tgz", "integrity": "sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=", "dev": true, "requires": { - "arr-flatten": "1.1.0" + "arr-flatten": "^1.0.1" } }, "array-unique": { @@ -5959,9 +5638,9 @@ "integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=", "dev": true, "requires": { - "expand-range": "1.8.2", - "preserve": "0.2.0", - "repeat-element": "1.1.2" + "expand-range": "^1.8.1", + "preserve": "^0.2.0", + "repeat-element": "^1.1.2" } }, "camelcase": { @@ -5970,15 +5649,26 @@ "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=", "dev": true }, + "chalk": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", + "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + }, "cliui": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz", "integrity": "sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==", "dev": true, "requires": { - "string-width": "2.1.1", - "strip-ansi": "4.0.0", - "wrap-ansi": "2.1.0" + "string-width": "^2.1.1", + "strip-ansi": "^4.0.0", + "wrap-ansi": "^2.0.0" } }, "expand-brackets": { @@ -5987,7 +5677,7 @@ "integrity": "sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=", "dev": true, "requires": { - "is-posix-bracket": "0.1.1" + "is-posix-bracket": "^0.1.0" } }, "extglob": { @@ -5996,7 +5686,7 @@ "integrity": "sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=", "dev": true, "requires": { - "is-extglob": "1.0.0" + "is-extglob": "^1.0.0" } }, "find-up": { @@ -6005,7 +5695,7 @@ "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=", "dev": true, "requires": { - "locate-path": "2.0.0" + "locate-path": "^2.0.0" } }, "is-extglob": { @@ -6026,7 +5716,7 @@ "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=", "dev": true, "requires": { - "is-extglob": "1.0.0" + "is-extglob": "^1.0.0" } }, "kind-of": { @@ -6035,7 +5725,7 @@ "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", "dev": true, "requires": { - "is-buffer": "1.1.6" + "is-buffer": "^1.1.5" } }, "micromatch": { @@ -6044,19 +5734,19 @@ "integrity": "sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=", "dev": true, "requires": { - "arr-diff": "2.0.0", - "array-unique": "0.2.1", - "braces": "1.8.5", - "expand-brackets": "0.1.5", - "extglob": "0.3.2", - "filename-regex": "2.0.1", - "is-extglob": "1.0.0", - "is-glob": "2.0.1", - "kind-of": "3.2.2", - "normalize-path": "2.1.1", - "object.omit": "2.0.1", - "parse-glob": "3.0.4", - "regex-cache": "0.4.4" + "arr-diff": "^2.0.0", + "array-unique": "^0.2.1", + "braces": "^1.8.2", + "expand-brackets": "^0.1.4", + "extglob": "^0.3.1", + "filename-regex": "^2.0.0", + "is-extglob": "^1.0.0", + "is-glob": "^2.0.1", + "kind-of": "^3.0.2", + "normalize-path": "^2.0.1", + "object.omit": "^2.0.0", + "parse-glob": "^3.0.4", + "regex-cache": "^0.4.2" } }, "os-locale": { @@ -6065,9 +5755,9 @@ "integrity": "sha512-3sslG3zJbEYcaC4YVAvDorjGxc7tv6KVATnLPZONiljsUncvihe9BQoVCEs0RZ1kmf4Hk9OBqlZfJZWI4GanKA==", "dev": true, "requires": { - "execa": "0.7.0", - "lcid": "1.0.0", - "mem": "1.1.0" + "execa": "^0.7.0", + "lcid": "^1.0.0", + "mem": "^1.1.0" } }, "string-width": { @@ -6076,8 +5766,8 @@ "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==", "dev": true, "requires": { - "is-fullwidth-code-point": "2.0.0", - "strip-ansi": "4.0.0" + "is-fullwidth-code-point": "^2.0.0", + "strip-ansi": "^4.0.0" } }, "strip-ansi": { @@ -6086,7 +5776,7 @@ "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", "dev": true, "requires": { - "ansi-regex": "3.0.0" + "ansi-regex": "^3.0.0" } }, "strip-bom": { @@ -6095,6 +5785,15 @@ "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=", "dev": true }, + "supports-color": { + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz", + "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + }, "which-module": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz", @@ -6107,18 +5806,18 @@ "integrity": "sha512-Rjp+lMYQOWtgqojx1dEWorjCofi1YN7AoFvYV7b1gx/7dAAeuI4kN5SZiEvr0ZmsZTOpDRcCqrpI10L31tFkBw==", "dev": true, "requires": { - "cliui": "4.1.0", - "decamelize": "1.2.0", - "find-up": "2.1.0", - "get-caller-file": "1.0.2", - "os-locale": "2.1.0", - "require-directory": "2.1.1", - "require-main-filename": "1.0.1", - "set-blocking": "2.0.0", - "string-width": "2.1.1", - "which-module": "2.0.0", - "y18n": "3.2.1", - "yargs-parser": "9.0.2" + "cliui": "^4.0.0", + "decamelize": "^1.1.1", + "find-up": "^2.1.0", + "get-caller-file": "^1.0.1", + "os-locale": "^2.0.0", + "require-directory": "^2.1.1", + "require-main-filename": "^1.0.1", + "set-blocking": "^2.0.0", + "string-width": "^2.0.0", + "which-module": "^2.0.0", + "y18n": "^3.2.1", + "yargs-parser": "^9.0.2" } }, "yargs-parser": { @@ -6127,7 +5826,7 @@ "integrity": "sha1-nM9qQ0YP5O1Aqbto9I1DuKaMwHc=", "dev": true, "requires": { - "camelcase": "4.1.0" + "camelcase": "^4.1.0" } } } @@ -6144,12 +5843,25 @@ "integrity": "sha1-ZnT6Gbnraamcq+zUFb3cQtavPn4=", "dev": true, "requires": { - "chalk": "2.3.2", - "jest-diff": "23.0.1", - "jest-matcher-utils": "23.0.1", - "mkdirp": "0.5.1", - "natural-compare": "1.4.0", - "pretty-format": "23.0.1" + "chalk": "^2.0.1", + "jest-diff": "^23.0.1", + "jest-matcher-utils": "^23.0.1", + "mkdirp": "^0.5.1", + "natural-compare": "^1.4.0", + "pretty-format": "^23.0.1" + }, + "dependencies": { + "chalk": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", + "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + } } }, "jest-util": { @@ -6158,21 +5870,50 @@ "integrity": "sha1-wCUbrzRkTG3S/qeKli9CY6xVdy0=", "dev": true, "requires": { - "callsites": "2.0.0", - "chalk": "2.3.2", - "graceful-fs": "4.1.11", - "is-ci": "1.1.0", - "jest-message-util": "23.1.0", - "mkdirp": "0.5.1", - "slash": "1.0.0", - "source-map": "0.6.1" + "callsites": "^2.0.0", + "chalk": "^2.0.1", + "graceful-fs": "^4.1.11", + "is-ci": "^1.0.10", + "jest-message-util": "^23.1.0", + "mkdirp": "^0.5.1", + "slash": "^1.0.0", + "source-map": "^0.6.0" }, "dependencies": { + "ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "requires": { + "color-convert": "^1.9.0" + } + }, + "chalk": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", + "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true + }, + "supports-color": { + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz", + "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } } } }, @@ -6182,10 +5923,23 @@ "integrity": "sha1-zZ8BqJ0mu4hfEqhmdxXpyGWldU8=", "dev": true, "requires": { - "chalk": "2.3.2", - "jest-get-type": "22.4.3", - "leven": "2.1.0", - "pretty-format": "23.0.1" + "chalk": "^2.0.1", + "jest-get-type": "^22.1.0", + "leven": "^2.1.0", + "pretty-format": "^23.0.1" + }, + "dependencies": { + "chalk": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", + "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + } } }, "jest-watcher": { @@ -6194,9 +5948,22 @@ "integrity": "sha1-qNWELjjZ+0r/+CPfartCpYrmzb0=", "dev": true, "requires": { - "ansi-escapes": "3.1.0", - "chalk": "2.3.2", - "string-length": "2.0.0" + "ansi-escapes": "^3.0.0", + "chalk": "^2.0.1", + "string-length": "^2.0.0" + }, + "dependencies": { + "chalk": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", + "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + } } }, "jest-worker": { @@ -6205,7 +5972,7 @@ "integrity": "sha1-nmSd2WP/QEYCb5HEAX8Dmmqkp7w=", "dev": true, "requires": { - "merge-stream": "1.0.1" + "merge-stream": "^1.0.1" } }, "joi": { @@ -6214,9 +5981,9 @@ "integrity": "sha512-O7Uw+w/zEWgbL6OcHbyACKSj0PkQeUgmehdoXVSxt92QFCq4+1390Rwh5moI2K/OgC7D8RHRZqHZxT2husMJHA==", "dev": true, "requires": { - "hoek": "4.2.1", - "isemail": "3.1.2", - "topo": "2.0.2" + "hoek": "4.x.x", + "isemail": "3.x.x", + "topo": "2.x.x" } }, "js-base64": { @@ -6228,17 +5995,16 @@ "js-tokens": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz", - "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=", - "dev": true + "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=" }, "js-yaml": { - "version": "3.11.0", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.11.0.tgz", - "integrity": "sha512-saJstZWv7oNeOyBh3+Dx1qWzhW0+e6/8eDzo7p5rDFqxntSztloLtuKu+Ejhtq82jsilwOIZYsCz+lIjthg1Hw==", + "version": "3.12.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.12.0.tgz", + "integrity": "sha512-PIt2cnwmPfL4hKNwqeiuz4bKfnzHTBv6HyVgjahA6mPLwPDzjDWrplJBMjHUFxku/N3FlmrbyPclad+I+4mJ3A==", "dev": true, "requires": { - "argparse": "1.0.10", - "esprima": "4.0.0" + "argparse": "^1.0.7", + "esprima": "^4.0.0" }, "dependencies": { "esprima": { @@ -6262,37 +6028,36 @@ "integrity": "sha512-89ztIZ03aYK9f1uUrLXLsZndRge/JnZjzjpaN+lrse3coqz+8PR/dX4WLHpbF5fIKTXhDjFODOJw2328lPJ90g==", "dev": true, "requires": { - "abab": "1.0.4", - "acorn": "5.5.3", - "acorn-globals": "4.1.0", - "array-equal": "1.0.0", - "browser-process-hrtime": "0.1.2", - "content-type-parser": "1.0.2", - "cssom": "0.3.2", - "cssstyle": "0.2.37", - "domexception": "1.0.1", - "escodegen": "1.9.1", - "html-encoding-sniffer": "1.0.2", - "left-pad": "1.3.0", - "nwmatcher": "1.4.4", - "parse5": "3.0.3", - "pn": "1.1.0", - "request": "2.85.0", - "request-promise-native": "1.0.5", - "sax": "1.2.4", - "symbol-tree": "3.2.2", - "tough-cookie": "2.3.4", - "webidl-conversions": "4.0.2", - "whatwg-encoding": "1.0.3", - "whatwg-url": "6.4.0", - "xml-name-validator": "2.0.1" + "abab": "^1.0.3", + "acorn": "^5.1.2", + "acorn-globals": "^4.0.0", + "array-equal": "^1.0.0", + "browser-process-hrtime": "^0.1.2", + "content-type-parser": "^1.0.1", + "cssom": ">= 0.3.2 < 0.4.0", + "cssstyle": ">= 0.2.37 < 0.3.0", + "domexception": "^1.0.0", + "escodegen": "^1.9.0", + "html-encoding-sniffer": "^1.0.1", + "left-pad": "^1.2.0", + "nwmatcher": "^1.4.3", + "parse5": "^3.0.2", + "pn": "^1.0.0", + "request": "^2.83.0", + "request-promise-native": "^1.0.3", + "sax": "^1.2.1", + "symbol-tree": "^3.2.1", + "tough-cookie": "^2.3.3", + "webidl-conversions": "^4.0.2", + "whatwg-encoding": "^1.0.1", + "whatwg-url": "^6.3.0", + "xml-name-validator": "^2.0.1" } }, "jsesc": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-1.3.0.tgz", - "integrity": "sha1-RsP+yMGJKxKwgz25vHYiF226s0s=", - "dev": true + "integrity": "sha1-RsP+yMGJKxKwgz25vHYiF226s0s=" }, "json-parse-better-errors": { "version": "1.0.2", @@ -6318,7 +6083,7 @@ "integrity": "sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=", "dev": true, "requires": { - "jsonify": "0.0.0" + "jsonify": "~0.0.0" } }, "json-stringify-safe": { @@ -6339,7 +6104,7 @@ "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=", "dev": true, "requires": { - "graceful-fs": "4.1.11" + "graceful-fs": "^4.1.6" } }, "jsonify": { @@ -6372,11 +6137,11 @@ "integrity": "sha512-5W8NUaFRFRqTOL7ZDDrx5qWHJyBXy6velVudIzQUSoqAAYqzSh2Z7/m0Rf1QbmQJccegD0r+YZxBjzqoBiEeJQ==", "dev": true, "requires": { - "core-js": "2.3.0", - "es6-promise": "3.0.2", - "lie": "3.1.1", - "pako": "1.0.6", - "readable-stream": "2.0.6" + "core-js": "~2.3.0", + "es6-promise": "~3.0.2", + "lie": "~3.1.0", + "pako": "~1.0.2", + "readable-stream": "~2.0.6" }, "dependencies": { "core-js": { @@ -6397,12 +6162,12 @@ "integrity": "sha1-j5A0HmilPMySh4jaz80Rs265t44=", "dev": true, "requires": { - "core-util-is": "1.0.2", - "inherits": "2.0.3", - "isarray": "1.0.0", - "process-nextick-args": "1.0.7", - "string_decoder": "0.10.31", - "util-deprecate": "1.0.2" + "core-util-is": "~1.0.0", + "inherits": "~2.0.1", + "isarray": "~1.0.0", + "process-nextick-args": "~1.0.6", + "string_decoder": "~0.10.x", + "util-deprecate": "~1.0.1" } }, "string_decoder": { @@ -6422,8 +6187,7 @@ "kind-of": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", - "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==", - "dev": true + "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==" }, "known-css-properties": { "version": "0.3.0", @@ -6437,7 +6201,7 @@ "integrity": "sha1-ogU4P+oyKzO1rjsYq+4NwvNW7hU=", "dev": true, "requires": { - "package-json": "4.0.1" + "package-json": "^4.0.0" } }, "lazy-cache": { @@ -6453,7 +6217,7 @@ "integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=", "dev": true, "requires": { - "invert-kv": "1.0.0" + "invert-kv": "^1.0.0" } }, "left-pad": { @@ -6469,8 +6233,8 @@ "dev": true, "requires": { "level-peek": "1.0.6", - "once": "1.4.0", - "readable-stream": "1.1.14" + "once": "^1.3.0", + "readable-stream": "^1.0.26-4" }, "dependencies": { "isarray": { @@ -6485,10 +6249,10 @@ "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=", "dev": true, "requires": { - "core-util-is": "1.0.2", - "inherits": "2.0.3", + "core-util-is": "~1.0.0", + "inherits": "~2.0.1", "isarray": "0.0.1", - "string_decoder": "0.10.31" + "string_decoder": "~0.10.x" } }, "string_decoder": { @@ -6505,15 +6269,15 @@ "integrity": "sha1-oArKmRnEpN+v3KaoEI0iWq3/Y7M=", "dev": true, "requires": { - "concat-stream": "1.6.2", - "errno": "0.1.7", - "fwd-stream": "1.0.4", - "level-blobs": "0.1.7", - "level-peek": "1.0.6", - "level-sublevel": "5.2.3", - "octal": "1.0.0", - "once": "1.4.0", - "xtend": "2.2.0" + "concat-stream": "^1.4.4", + "errno": "^0.1.1", + "fwd-stream": "^1.0.4", + "level-blobs": "^0.1.7", + "level-peek": "^1.0.6", + "level-sublevel": "^5.2.0", + "octal": "^1.0.0", + "once": "^1.3.0", + "xtend": "^2.2.0" } }, "level-fix-range": { @@ -6528,7 +6292,7 @@ "integrity": "sha1-G5rmGSKTDzMF0aYfxNg8gQLA3ZM=", "dev": true, "requires": { - "string-range": "1.2.2" + "string-range": "~1.2" } }, "level-js": { @@ -6537,12 +6301,12 @@ "integrity": "sha1-vAVfQYBjXUSJtWHJSG+jcOjBFpc=", "dev": true, "requires": { - "abstract-leveldown": "0.12.4", - "idb-wrapper": "1.7.2", - "isbuffer": "0.0.0", - "ltgt": "2.2.1", - "typedarray-to-buffer": "1.0.4", - "xtend": "2.1.2" + "abstract-leveldown": "~0.12.0", + "idb-wrapper": "^1.5.0", + "isbuffer": "~0.0.0", + "ltgt": "^2.1.2", + "typedarray-to-buffer": "~1.0.0", + "xtend": "~2.1.2" }, "dependencies": { "object-keys": { @@ -6557,7 +6321,7 @@ "integrity": "sha1-bv7MKk2tjmlixJAbM3znuoe10os=", "dev": true, "requires": { - "object-keys": "0.4.0" + "object-keys": "~0.4.0" } } } @@ -6568,7 +6332,7 @@ "integrity": "sha1-vsUccqgu5GTTNkNMfIdsP8vM538=", "dev": true, "requires": { - "level-fix-range": "1.0.2" + "level-fix-range": "~1.0.2" } }, "level-sublevel": { @@ -6577,10 +6341,10 @@ "integrity": "sha1-dEwSxy0ucr543eO5tc2E1iGRQTo=", "dev": true, "requires": { - "level-fix-range": "2.0.0", - "level-hooks": "4.5.0", - "string-range": "1.2.2", - "xtend": "2.0.6" + "level-fix-range": "2.0", + "level-hooks": ">=4.4.0 <5", + "string-range": "~1.2.1", + "xtend": "~2.0.4" }, "dependencies": { "level-fix-range": { @@ -6589,7 +6353,7 @@ "integrity": "sha1-xBfWIVlEIVGhnZojZ4aPFyTC1Ug=", "dev": true, "requires": { - "clone": "0.1.19" + "clone": "~0.1.9" } }, "xtend": { @@ -6598,8 +6362,8 @@ "integrity": "sha1-XqZXptukRwacLlnFihE4ywxebO4=", "dev": true, "requires": { - "is-object": "0.1.2", - "object-keys": "0.2.0" + "is-object": "~0.1.2", + "object-keys": "~0.2.0" } } } @@ -6610,13 +6374,13 @@ "integrity": "sha1-5qAcsIlhbI7MApHCqb0/DETj5es=", "dev": true, "requires": { - "bl": "0.8.2", - "deferred-leveldown": "0.2.0", - "errno": "0.1.7", - "prr": "0.0.0", - "readable-stream": "1.0.34", - "semver": "2.3.2", - "xtend": "3.0.0" + "bl": "~0.8.1", + "deferred-leveldown": "~0.2.0", + "errno": "~0.1.1", + "prr": "~0.0.0", + "readable-stream": "~1.0.26", + "semver": "~2.3.1", + "xtend": "~3.0.0" }, "dependencies": { "isarray": { @@ -6637,18 +6401,12 @@ "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=", "dev": true, "requires": { - "core-util-is": "1.0.2", - "inherits": "2.0.3", + "core-util-is": "~1.0.0", + "inherits": "~2.0.1", "isarray": "0.0.1", - "string_decoder": "0.10.31" + "string_decoder": "~0.10.x" } }, - "semver": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/semver/-/semver-2.3.2.tgz", - "integrity": "sha1-uYSPJdbPNjMwc+ye+IVtQvEjPlI=", - "dev": true - }, "string_decoder": { "version": "0.10.31", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", @@ -6675,8 +6433,8 @@ "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=", "dev": true, "requires": { - "prelude-ls": "1.1.2", - "type-check": "0.3.2" + "prelude-ls": "~1.1.2", + "type-check": "~0.3.2" } }, "lie": { @@ -6685,7 +6443,7 @@ "integrity": "sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=", "dev": true, "requires": { - "immediate": "3.0.6" + "immediate": "~3.0.5" } }, "listr-input": { @@ -6694,9 +6452,9 @@ "integrity": "sha512-dvjSD1MrWGXxxPixpMQlSBmkyqhJrPxGo30un25k/vlvFOWZj70AauU+YkEh7CA8vmpkE6Wde37DJDmqYqF39g==", "dev": true, "requires": { - "inquirer": "3.3.0", - "rxjs": "5.5.8", - "through": "2.3.8" + "inquirer": "^3.3.0", + "rxjs": "^5.5.2", + "through": "^2.3.8" }, "dependencies": { "ansi-regex": { @@ -6705,26 +6463,37 @@ "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=", "dev": true }, + "chalk": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", + "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + }, "inquirer": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-3.3.0.tgz", "integrity": "sha512-h+xtnyk4EwKvFWHrUYsWErEVR+igKtLdchu+o0Z1RL7VU/jVMFbYir2bp6bAj8efFNxWqHX0dIss6fJQ+/+qeQ==", "dev": true, "requires": { - "ansi-escapes": "3.1.0", - "chalk": "2.3.2", - "cli-cursor": "2.1.0", - "cli-width": "2.2.0", - "external-editor": "2.2.0", - "figures": "2.0.0", - "lodash": "4.17.5", + "ansi-escapes": "^3.0.0", + "chalk": "^2.0.0", + "cli-cursor": "^2.1.0", + "cli-width": "^2.0.0", + "external-editor": "^2.0.4", + "figures": "^2.0.0", + "lodash": "^4.3.0", "mute-stream": "0.0.7", - "run-async": "2.3.0", - "rx-lite": "4.0.8", - "rx-lite-aggregates": "4.0.8", - "string-width": "2.1.1", - "strip-ansi": "4.0.0", - "through": "2.3.8" + "run-async": "^2.2.0", + "rx-lite": "^4.0.8", + "rx-lite-aggregates": "^4.0.8", + "string-width": "^2.1.0", + "strip-ansi": "^4.0.0", + "through": "^2.3.6" } }, "is-fullwidth-code-point": { @@ -6733,14 +6502,23 @@ "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=", "dev": true }, + "rxjs": { + "version": "5.5.11", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.5.11.tgz", + "integrity": "sha512-3bjO7UwWfA2CV7lmwYMBzj4fQ6Cq+ftHc2MvUe+WMS7wcdJ1LosDWmdjPQanYp2dBRj572p7PeU81JUxHKOcBA==", + "dev": true, + "requires": { + "symbol-observable": "1.0.1" + } + }, "string-width": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==", "dev": true, "requires": { - "is-fullwidth-code-point": "2.0.0", - "strip-ansi": "4.0.0" + "is-fullwidth-code-point": "^2.0.0", + "strip-ansi": "^4.0.0" } }, "strip-ansi": { @@ -6749,8 +6527,14 @@ "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", "dev": true, "requires": { - "ansi-regex": "3.0.0" + "ansi-regex": "^3.0.0" } + }, + "symbol-observable": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.1.tgz", + "integrity": "sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ=", + "dev": true } } }, @@ -6766,10 +6550,10 @@ "integrity": "sha1-ggb0z21S3cWCfl/RSYng6WWTOjU=", "dev": true, "requires": { - "chalk": "1.1.3", - "cli-cursor": "1.0.2", - "date-fns": "1.29.0", - "figures": "1.7.0" + "chalk": "^1.1.3", + "cli-cursor": "^1.0.2", + "date-fns": "^1.27.2", + "figures": "^1.7.0" }, "dependencies": { "ansi-styles": { @@ -6784,11 +6568,11 @@ "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { - "ansi-styles": "2.2.1", - "escape-string-regexp": "1.0.5", - "has-ansi": "2.0.0", - "strip-ansi": "3.0.1", - "supports-color": "2.0.0" + "ansi-styles": "^2.2.1", + "escape-string-regexp": "^1.0.2", + "has-ansi": "^2.0.0", + "strip-ansi": "^3.0.0", + "supports-color": "^2.0.0" } }, "cli-cursor": { @@ -6797,7 +6581,7 @@ "integrity": "sha1-ZNo/fValRBLll5S9Ytw1KV6PKYc=", "dev": true, "requires": { - "restore-cursor": "1.0.1" + "restore-cursor": "^1.0.1" } }, "figures": { @@ -6806,8 +6590,8 @@ "integrity": "sha1-y+Hjr/zxzUS4DK3+0o3Hk6lwHS4=", "dev": true, "requires": { - "escape-string-regexp": "1.0.5", - "object-assign": "4.1.1" + "escape-string-regexp": "^1.0.5", + "object-assign": "^4.1.0" } }, "onetime": { @@ -6822,8 +6606,8 @@ "integrity": "sha1-NGYfRohjJ/7SmRR5FSJS35LapUE=", "dev": true, "requires": { - "exit-hook": "1.1.1", - "onetime": "1.1.0" + "exit-hook": "^1.0.0", + "onetime": "^1.0.0" } }, "supports-color": { @@ -6844,38 +6628,34 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=", - "dev": true, "requires": { - "graceful-fs": "4.1.11", - "parse-json": "2.2.0", - "pify": "2.3.0", - "pinkie-promise": "2.0.1", - "strip-bom": "2.0.0" + "graceful-fs": "^4.1.2", + "parse-json": "^2.2.0", + "pify": "^2.0.0", + "pinkie-promise": "^2.0.0", + "strip-bom": "^2.0.0" } }, "locate-path": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz", "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=", - "dev": true, "requires": { - "p-locate": "2.0.0", - "path-exists": "3.0.0" + "p-locate": "^2.0.0", + "path-exists": "^3.0.0" }, "dependencies": { "path-exists": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz", - "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=", - "dev": true + "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=" } } }, "lodash": { - "version": "4.17.5", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz", - "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw==", - "dev": true + "version": "4.17.10", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz", + "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==" }, "lodash._reinterpolate": { "version": "3.0.0", @@ -6925,8 +6705,8 @@ "integrity": "sha1-5zoDhcg1VZF0bgILmWecaQ5o+6A=", "dev": true, "requires": { - "lodash._reinterpolate": "3.0.0", - "lodash.templatesettings": "4.1.0" + "lodash._reinterpolate": "~3.0.0", + "lodash.templatesettings": "^4.0.0" } }, "lodash.templatesettings": { @@ -6935,7 +6715,29 @@ "integrity": "sha1-K01OlbpEDZFf8IvImeRVNmZxMxY=", "dev": true, "requires": { - "lodash._reinterpolate": "3.0.0" + "lodash._reinterpolate": "~3.0.0" + } + }, + "log-symbols": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz", + "integrity": "sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==", + "dev": true, + "requires": { + "chalk": "^2.0.1" + }, + "dependencies": { + "chalk": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", + "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + } } }, "log-update": { @@ -6944,8 +6746,8 @@ "integrity": "sha1-GZKfZMQJPS0ucHWh2tivWcKWuNE=", "dev": true, "requires": { - "ansi-escapes": "1.4.0", - "cli-cursor": "1.0.2" + "ansi-escapes": "^1.0.0", + "cli-cursor": "^1.0.2" }, "dependencies": { "ansi-escapes": { @@ -6960,7 +6762,7 @@ "integrity": "sha1-ZNo/fValRBLll5S9Ytw1KV6PKYc=", "dev": true, "requires": { - "restore-cursor": "1.0.1" + "restore-cursor": "^1.0.1" } }, "onetime": { @@ -6975,8 +6777,8 @@ "integrity": "sha1-NGYfRohjJ/7SmRR5FSJS35LapUE=", "dev": true, "requires": { - "exit-hook": "1.1.1", - "onetime": "1.1.0" + "exit-hook": "^1.0.0", + "onetime": "^1.0.0" } } } @@ -6991,9 +6793,8 @@ "version": "1.3.1", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz", "integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=", - "dev": true, "requires": { - "js-tokens": "3.0.2" + "js-tokens": "^3.0.0" } }, "loud-rejection": { @@ -7002,8 +6803,8 @@ "integrity": "sha1-W0b4AUft7leIcPCG0Eghz5mOVR8=", "dev": true, "requires": { - "currently-unhandled": "0.4.1", - "signal-exit": "3.0.2" + "currently-unhandled": "^0.4.1", + "signal-exit": "^3.0.0" } }, "lowercase-keys": { @@ -7013,13 +6814,13 @@ "dev": true }, "lru-cache": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.2.tgz", - "integrity": "sha512-wgeVXhrDwAWnIF/yZARsFnMBtdFXOg1b8RIrhilp+0iDYN4mdQcNZElDZ0e4B64BhaxeQ5zN7PMyvu7we1kPeQ==", + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.3.tgz", + "integrity": "sha512-fFEhvcgzuIoJVUF8fYr5KR0YqxD238zgObTps31YdADwPPAp82a4M8TrckkWyx7ekNlf9aBcVn81cFwwXngrJA==", "dev": true, "requires": { - "pseudomap": "1.0.2", - "yallist": "2.1.2" + "pseudomap": "^1.0.2", + "yallist": "^2.1.2" } }, "ltgt": { @@ -7034,16 +6835,16 @@ "integrity": "sha512-oreip9rJZkzvA8Qzk9HFs8fZGF/u7H/gtrE8EN6RjKJ9kh2HlC+yQ2QezifqTZfGyiuAV0dRv5a+y/8gBb1m9w==", "dev": true, "requires": { - "vlq": "0.2.3" + "vlq": "^0.2.2" } }, "make-dir": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.2.0.tgz", - "integrity": "sha512-aNUAa4UMg/UougV25bbrU4ZaaKNjJ/3/xnvg/twpmKROPdKZPZ9wGgI0opdZzO8q/zUFawoUuixuOv33eZ61Iw==", + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz", + "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==", "dev": true, "requires": { - "pify": "3.0.0" + "pify": "^3.0.0" }, "dependencies": { "pify": { @@ -7060,14 +6861,13 @@ "integrity": "sha1-4BpckQnyr3lmDk6LlYd5AYT1qWw=", "dev": true, "requires": { - "tmpl": "1.0.4" + "tmpl": "1.0.x" } }, "map-cache": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz", - "integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=", - "dev": true + "integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=" }, "map-obj": { "version": "1.0.1", @@ -7079,19 +6879,24 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz", "integrity": "sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=", - "dev": true, "requires": { - "object-visit": "1.0.1" + "object-visit": "^1.0.0" } }, + "math-random": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/math-random/-/math-random-1.0.1.tgz", + "integrity": "sha1-izqsWIuKZuSXXjzepn97sylgH6w=", + "dev": true + }, "md5.js": { "version": "1.3.4", "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.4.tgz", "integrity": "sha1-6b296UogpawYsENA/Fdk1bCdkB0=", "dev": true, "requires": { - "hash-base": "3.0.4", - "inherits": "2.0.3" + "hash-base": "^3.0.0", + "inherits": "^2.0.1" } }, "mem": { @@ -7100,7 +6905,7 @@ "integrity": "sha1-Xt1StIXKHZAP5kiVUFOZoN+kX3Y=", "dev": true, "requires": { - "mimic-fn": "1.2.0" + "mimic-fn": "^1.0.0" } }, "meow": { @@ -7109,16 +6914,16 @@ "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=", "dev": true, "requires": { - "camelcase-keys": "2.1.0", - "decamelize": "1.2.0", - "loud-rejection": "1.6.0", - "map-obj": "1.0.1", - "minimist": "1.2.0", - "normalize-package-data": "2.4.0", - "object-assign": "4.1.1", - "read-pkg-up": "1.0.1", - "redent": "1.0.0", - "trim-newlines": "1.0.0" + "camelcase-keys": "^2.0.0", + "decamelize": "^1.1.2", + "loud-rejection": "^1.0.0", + "map-obj": "^1.0.1", + "minimist": "^1.1.3", + "normalize-package-data": "^2.3.4", + "object-assign": "^4.0.1", + "read-pkg-up": "^1.0.1", + "redent": "^1.0.0", + "trim-newlines": "^1.0.0" } }, "merge": { @@ -7133,28 +6938,27 @@ "integrity": "sha1-QEEgLVCKNCugAXQAjfDCUbjBNeE=", "dev": true, "requires": { - "readable-stream": "2.3.6" + "readable-stream": "^2.0.1" } }, "micromatch": { "version": "3.1.10", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz", "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==", - "dev": true, "requires": { - "arr-diff": "4.0.0", - "array-unique": "0.3.2", - "braces": "2.3.2", - "define-property": "2.0.2", - "extend-shallow": "3.0.2", - "extglob": "2.0.4", - "fragment-cache": "0.2.1", - "kind-of": "6.0.2", - "nanomatch": "1.2.9", - "object.pick": "1.3.0", - "regex-not": "1.0.2", - "snapdragon": "0.8.2", - "to-regex": "3.0.2" + "arr-diff": "^4.0.0", + "array-unique": "^0.3.2", + "braces": "^2.3.1", + "define-property": "^2.0.2", + "extend-shallow": "^3.0.2", + "extglob": "^2.0.4", + "fragment-cache": "^0.2.1", + "kind-of": "^6.0.2", + "nanomatch": "^1.2.9", + "object.pick": "^1.3.0", + "regex-not": "^1.0.0", + "snapdragon": "^0.8.1", + "to-regex": "^3.0.2" } }, "miller-rabin": { @@ -7163,8 +6967,8 @@ "integrity": "sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==", "dev": true, "requires": { - "bn.js": "4.11.8", - "brorand": "1.1.0" + "bn.js": "^4.0.0", + "brorand": "^1.0.1" } }, "mime": { @@ -7185,7 +6989,7 @@ "integrity": "sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==", "dev": true, "requires": { - "mime-db": "1.33.0" + "mime-db": "~1.33.0" } }, "mimic-fn": { @@ -7212,7 +7016,7 @@ "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, "requires": { - "brace-expansion": "1.1.11" + "brace-expansion": "^1.1.7" } }, "minimist": { @@ -7227,27 +7031,25 @@ "integrity": "sha512-FyBrT/d0d4+uiZRbqznPXqw3IpZZG3gl3wKWiX784FycUKVwBt0uLBFkQrtE4tZOrgo78nZp2jnKz3L65T5LdQ==", "dev": true, "requires": { - "arrify": "1.0.1", - "is-plain-obj": "1.1.0" + "arrify": "^1.0.1", + "is-plain-obj": "^1.1.0" } }, "mixin-deep": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.1.tgz", "integrity": "sha512-8ZItLHeEgaqEvd5lYBXfm4EZSFCX29Jb9K+lAHhDKzReKBQKj3R+7NOF6tjqYi9t4oI8VUfaWITJQm86wnXGNQ==", - "dev": true, "requires": { - "for-in": "1.0.2", - "is-extendable": "1.0.1" + "for-in": "^1.0.2", + "is-extendable": "^1.0.1" }, "dependencies": { "is-extendable": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz", "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==", - "dev": true, "requires": { - "is-plain-object": "2.0.4" + "is-plain-object": "^2.0.4" } } } @@ -7320,7 +7122,7 @@ "integrity": "sha512-rKC3+DyXWgK0ZLKwmRsrkyHVZAjNkfzeehuFWdGGcqGDTZFH73+RH6S/RDAAxl9GusSjZSUWYLmT9N5pzXFOXQ==", "dev": true, "requires": { - "has-flag": "2.0.0" + "has-flag": "^2.0.0" } } } @@ -7328,8 +7130,7 @@ "ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", - "dev": true + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" }, "mute-stream": { "version": "0.0.7", @@ -7347,20 +7148,19 @@ "version": "1.2.9", "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.9.tgz", "integrity": "sha512-n8R9bS8yQ6eSXaV6jHUpKzD8gLsin02w1HSFiegwrs9E098Ylhw5jdyKPaYqvHknHaSCKTPp7C8dGCQ0q9koXA==", - "dev": true, "requires": { - "arr-diff": "4.0.0", - "array-unique": "0.3.2", - "define-property": "2.0.2", - "extend-shallow": "3.0.2", - "fragment-cache": "0.2.1", - "is-odd": "2.0.0", - "is-windows": "1.0.2", - "kind-of": "6.0.2", - "object.pick": "1.3.0", - "regex-not": "1.0.2", - "snapdragon": "0.8.2", - "to-regex": "3.0.2" + "arr-diff": "^4.0.0", + "array-unique": "^0.3.2", + "define-property": "^2.0.2", + "extend-shallow": "^3.0.2", + "fragment-cache": "^0.2.1", + "is-odd": "^2.0.0", + "is-windows": "^1.0.2", + "kind-of": "^6.0.2", + "object.pick": "^1.3.0", + "regex-not": "^1.0.0", + "snapdragon": "^0.8.1", + "to-regex": "^3.0.1" } }, "natural-compare": { @@ -7382,31 +7182,141 @@ "dev": true }, "node-gyp": { - "version": "3.6.2", - "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.6.2.tgz", - "integrity": "sha1-m/vlRWIoYoSDjnUOrAUpWFP6HGA=", + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.7.0.tgz", + "integrity": "sha512-qDQE/Ft9xXP6zphwx4sD0t+VhwV7yFaloMpfbL2QnnDZcyaiakWlLdtFGGQfTAwpFHdpbRhRxVhIHN1OKAjgbg==", "dev": true, "requires": { - "fstream": "1.0.11", - "glob": "7.1.2", - "graceful-fs": "4.1.11", - "minimatch": "3.0.4", - "mkdirp": "0.5.1", - "nopt": "3.0.6", - "npmlog": "4.1.2", - "osenv": "0.1.5", - "request": "2.85.0", - "rimraf": "2.6.2", - "semver": "5.3.0", - "tar": "2.2.1", - "which": "1.3.0" + "fstream": "^1.0.0", + "glob": "^7.0.3", + "graceful-fs": "^4.1.2", + "mkdirp": "^0.5.0", + "nopt": "2 || 3", + "npmlog": "0 || 1 || 2 || 3 || 4", + "osenv": "0", + "request": ">=2.9.0 <2.82.0", + "rimraf": "2", + "semver": "~5.3.0", + "tar": "^2.0.0", + "which": "1" }, "dependencies": { + "ajv": { + "version": "4.11.8", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-4.11.8.tgz", + "integrity": "sha1-gv+wKynmYq5TvcIK8VlHcGc5xTY=", + "dev": true, + "requires": { + "co": "^4.6.0", + "json-stable-stringify": "^1.0.1" + } + }, + "assert-plus": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz", + "integrity": "sha1-104bh+ev/A24qttwIfP+SBAasjQ=", + "dev": true + }, + "aws-sign2": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz", + "integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8=", + "dev": true + }, + "form-data": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz", + "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=", + "dev": true, + "requires": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.5", + "mime-types": "^2.1.12" + } + }, + "har-schema": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-1.0.5.tgz", + "integrity": "sha1-0mMTX0MwfALGAq/I/pWXDAFRNp4=", + "dev": true + }, + "har-validator": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-4.2.1.tgz", + "integrity": "sha1-M0gdDxu/9gDdID11gSpqX7oALio=", + "dev": true, + "requires": { + "ajv": "^4.9.1", + "har-schema": "^1.0.5" + } + }, + "http-signature": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz", + "integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=", + "dev": true, + "requires": { + "assert-plus": "^0.2.0", + "jsprim": "^1.2.2", + "sshpk": "^1.7.0" + } + }, + "performance-now": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz", + "integrity": "sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU=", + "dev": true + }, + "qs": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.4.0.tgz", + "integrity": "sha1-E+JtKK1rD/qpExLNO/cI7TUecjM=", + "dev": true + }, + "request": { + "version": "2.81.0", + "resolved": "https://registry.npmjs.org/request/-/request-2.81.0.tgz", + "integrity": "sha1-xpKJRqDgbF+Nb4qTM0af/aRimKA=", + "dev": true, + "requires": { + "aws-sign2": "~0.6.0", + "aws4": "^1.2.1", + "caseless": "~0.12.0", + "combined-stream": "~1.0.5", + "extend": "~3.0.0", + "forever-agent": "~0.6.1", + "form-data": "~2.1.1", + "har-validator": "~4.2.1", + "hawk": "~3.1.3", + "http-signature": "~1.1.0", + "is-typedarray": "~1.0.0", + "isstream": "~0.1.2", + "json-stringify-safe": "~5.0.1", + "mime-types": "~2.1.7", + "oauth-sign": "~0.8.1", + "performance-now": "^0.2.0", + "qs": "~6.4.0", + "safe-buffer": "^5.0.1", + "stringstream": "~0.0.4", + "tough-cookie": "~2.3.0", + "tunnel-agent": "^0.6.0", + "uuid": "^3.0.0" + } + }, "semver": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz", "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=", "dev": true + }, + "tough-cookie": { + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.4.tgz", + "integrity": "sha512-TZ6TTfI5NtZnuyy/Kecv+CnoROnyXn2DN97LontgQpCwsX2XyLYCC0ENhYkehSOwAp8rTQKc/NUIF7BkQ5rKLA==", + "dev": true, + "requires": { + "punycode": "^1.4.1" + } } } }, @@ -7422,10 +7332,18 @@ "integrity": "sha512-MIBs+AAd6dJ2SklbbE8RUDRlIVhU8MaNLh1A9SUZDUHPiZkWLFde6UNwG41yQHZEToHgJMXqyVZ9UcS/ReOVTg==", "dev": true, "requires": { - "growly": "1.3.0", - "semver": "5.5.0", - "shellwords": "0.1.1", - "which": "1.3.0" + "growly": "^1.3.0", + "semver": "^5.4.1", + "shellwords": "^0.1.1", + "which": "^1.3.0" + }, + "dependencies": { + "semver": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.5.0.tgz", + "integrity": "sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA==", + "dev": true + } } }, "node-sass": { @@ -7434,33 +7352,27 @@ "integrity": "sha512-QFHfrZl6lqRU3csypwviz2XLgGNOoWQbo2GOvtsfQqOfL4cy1BtWnhx/XUeAO9LT3ahBzSRXcEO6DdvAH9DzSg==", "dev": true, "requires": { - "async-foreach": "0.1.3", - "chalk": "1.1.3", - "cross-spawn": "3.0.1", - "gaze": "1.1.3", - "get-stdin": "4.0.1", - "glob": "7.1.2", - "in-publish": "2.0.0", - "lodash.assign": "4.2.0", - "lodash.clonedeep": "4.5.0", - "lodash.mergewith": "4.6.1", - "meow": "3.7.0", - "mkdirp": "0.5.1", - "nan": "2.10.0", - "node-gyp": "3.6.2", - "npmlog": "4.1.2", - "request": "2.79.0", - "sass-graph": "2.2.4", - "stdout-stream": "1.4.0", - "true-case-path": "1.0.2" + "async-foreach": "^0.1.3", + "chalk": "^1.1.1", + "cross-spawn": "^3.0.0", + "gaze": "^1.0.0", + "get-stdin": "^4.0.1", + "glob": "^7.0.3", + "in-publish": "^2.0.0", + "lodash.assign": "^4.2.0", + "lodash.clonedeep": "^4.3.2", + "lodash.mergewith": "^4.6.0", + "meow": "^3.7.0", + "mkdirp": "^0.5.1", + "nan": "^2.10.0", + "node-gyp": "^3.3.1", + "npmlog": "^4.0.0", + "request": "~2.79.0", + "sass-graph": "^2.2.4", + "stdout-stream": "^1.4.0", + "true-case-path": "^1.0.2" }, "dependencies": { - "ansi-styles": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", - "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", - "dev": true - }, "assert-plus": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz", @@ -7473,52 +7385,21 @@ "integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8=", "dev": true }, - "boom": { - "version": "2.10.1", - "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz", - "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=", - "dev": true, - "requires": { - "hoek": "2.16.3" - } - }, "caseless": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.11.0.tgz", "integrity": "sha1-cVuW6phBWTzDMGeSP17GDr2k99c=", "dev": true }, - "chalk": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", - "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", - "dev": true, - "requires": { - "ansi-styles": "2.2.1", - "escape-string-regexp": "1.0.5", - "has-ansi": "2.0.0", - "strip-ansi": "3.0.1", - "supports-color": "2.0.0" - } - }, - "cryptiles": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz", - "integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=", - "dev": true, - "requires": { - "boom": "2.10.1" - } - }, "form-data": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz", "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=", "dev": true, "requires": { - "asynckit": "0.4.0", - "combined-stream": "1.0.6", - "mime-types": "2.1.18" + "asynckit": "^0.4.0", + "combined-stream": "^1.0.5", + "mime-types": "^2.1.12" } }, "har-validator": { @@ -7527,39 +7408,21 @@ "integrity": "sha1-zcvAgYgmWtEZtqWnyKtw7s+10n0=", "dev": true, "requires": { - "chalk": "1.1.3", - "commander": "2.13.0", - "is-my-json-valid": "2.17.2", - "pinkie-promise": "2.0.1" + "chalk": "^1.1.1", + "commander": "^2.9.0", + "is-my-json-valid": "^2.12.4", + "pinkie-promise": "^2.0.0" } }, - "hawk": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz", - "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=", - "dev": true, - "requires": { - "boom": "2.10.1", - "cryptiles": "2.0.5", - "hoek": "2.16.3", - "sntp": "1.0.9" - } - }, - "hoek": { - "version": "2.16.3", - "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz", - "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=", - "dev": true - }, "http-signature": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz", "integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=", "dev": true, "requires": { - "assert-plus": "0.2.0", - "jsprim": "1.4.1", - "sshpk": "1.14.1" + "assert-plus": "^0.2.0", + "jsprim": "^1.2.2", + "sshpk": "^1.7.0" } }, "qs": { @@ -7574,43 +7437,37 @@ "integrity": "sha1-Tf5b9r6LjNw3/Pk+BLZVd3InEN4=", "dev": true, "requires": { - "aws-sign2": "0.6.0", - "aws4": "1.7.0", - "caseless": "0.11.0", - "combined-stream": "1.0.6", - "extend": "3.0.1", - "forever-agent": "0.6.1", - "form-data": "2.1.4", - "har-validator": "2.0.6", - "hawk": "3.1.3", - "http-signature": "1.1.1", - "is-typedarray": "1.0.0", - "isstream": "0.1.2", - "json-stringify-safe": "5.0.1", - "mime-types": "2.1.18", - "oauth-sign": "0.8.2", - "qs": "6.3.2", - "stringstream": "0.0.5", - "tough-cookie": "2.3.4", - "tunnel-agent": "0.4.3", - "uuid": "3.2.1" + "aws-sign2": "~0.6.0", + "aws4": "^1.2.1", + "caseless": "~0.11.0", + "combined-stream": "~1.0.5", + "extend": "~3.0.0", + "forever-agent": "~0.6.1", + "form-data": "~2.1.1", + "har-validator": "~2.0.6", + "hawk": "~3.1.3", + "http-signature": "~1.1.0", + "is-typedarray": "~1.0.0", + "isstream": "~0.1.2", + "json-stringify-safe": "~5.0.1", + "mime-types": "~2.1.7", + "oauth-sign": "~0.8.1", + "qs": "~6.3.0", + "stringstream": "~0.0.4", + "tough-cookie": "~2.3.0", + "tunnel-agent": "~0.4.1", + "uuid": "^3.0.0" } }, - "sntp": { - "version": "1.0.9", - "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz", - "integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=", + "tough-cookie": { + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.4.tgz", + "integrity": "sha512-TZ6TTfI5NtZnuyy/Kecv+CnoROnyXn2DN97LontgQpCwsX2XyLYCC0ENhYkehSOwAp8rTQKc/NUIF7BkQ5rKLA==", "dev": true, "requires": { - "hoek": "2.16.3" + "punycode": "^1.4.1" } }, - "supports-color": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", - "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", - "dev": true - }, "tunnel-agent": { "version": "0.4.3", "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.3.tgz", @@ -7625,19 +7482,18 @@ "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=", "dev": true, "requires": { - "abbrev": "1.1.1" + "abbrev": "1" } }, "normalize-package-data": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.4.0.tgz", "integrity": "sha512-9jjUFbTPfEy3R/ad/2oNbKtW9Hgovl5O1FvFWKkKblNXoN/Oou6+9+KKohPK13Yc3/TyunyWhJp6gvRNR/PPAw==", - "dev": true, "requires": { - "hosted-git-info": "2.6.0", - "is-builtin-module": "1.0.0", - "semver": "5.5.0", - "validate-npm-package-license": "3.0.3" + "hosted-git-info": "^2.1.4", + "is-builtin-module": "^1.0.0", + "semver": "2 || 3 || 4 || 5", + "validate-npm-package-license": "^3.0.1" } }, "normalize-path": { @@ -7646,7 +7502,7 @@ "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=", "dev": true, "requires": { - "remove-trailing-separator": "1.1.0" + "remove-trailing-separator": "^1.0.1" } }, "np": { @@ -7655,28 +7511,28 @@ "integrity": "sha512-IiCxi6SpqsVaGiQG5/XbkZ2uqfAe2G7lwS7BuaWC117MCgPs57SI+1F0chKN/abBmYZqxjqbEId6AUA+1aNblQ==", "dev": true, "requires": { - "any-observable": "0.2.0", - "chalk": "2.3.2", - "del": "3.0.0", - "execa": "0.8.0", - "github-url-from-git": "1.5.0", - "has-yarn": "1.0.0", - "hyperlinker": "1.0.0", - "inquirer": "3.3.0", - "issue-regex": "1.0.0", - "listr": "0.12.0", - "listr-input": "0.1.3", - "log-symbols": "2.2.0", - "meow": "4.0.0", - "p-tap": "1.0.0", - "p-timeout": "2.0.1", - "read-pkg-up": "3.0.0", + "any-observable": "^0.2.0", + "chalk": "^2.3.0", + "del": "^3.0.0", + "execa": "^0.8.0", + "github-url-from-git": "^1.5.0", + "has-yarn": "^1.0.0", + "hyperlinker": "^1.0.0", + "inquirer": "^3.0.6", + "issue-regex": "^1.0.0", + "listr": "^0.12.0", + "listr-input": "^0.1.1", + "log-symbols": "^2.1.0", + "meow": "^4.0.0", + "p-tap": "^1.0.0", + "p-timeout": "^2.0.1", + "read-pkg-up": "^3.0.0", "rxjs": "5.4.3", - "semver": "5.5.0", - "split": "1.0.1", - "stream-to-observable": "0.2.0", - "supports-hyperlinks": "1.0.1", - "update-notifier": "2.4.0" + "semver": "^5.2.0", + "split": "^1.0.0", + "stream-to-observable": "^0.2.0", + "supports-hyperlinks": "^1.0.1", + "update-notifier": "^2.1.0" }, "dependencies": { "ansi-regex": { @@ -7686,10 +7542,13 @@ "dev": true }, "ansi-styles": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", - "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", - "dev": true + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "requires": { + "color-convert": "^1.9.0" + } }, "camelcase": { "version": "4.1.0", @@ -7703,9 +7562,20 @@ "integrity": "sha1-oqpfsa9oh1glnDLBQUJteJI7m3c=", "dev": true, "requires": { - "camelcase": "4.1.0", - "map-obj": "2.0.0", - "quick-lru": "1.1.0" + "camelcase": "^4.1.0", + "map-obj": "^2.0.0", + "quick-lru": "^1.0.0" + } + }, + "chalk": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", + "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" } }, "cross-spawn": { @@ -7714,9 +7584,9 @@ "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=", "dev": true, "requires": { - "lru-cache": "4.1.2", - "shebang-command": "1.2.0", - "which": "1.3.0" + "lru-cache": "^4.0.1", + "shebang-command": "^1.2.0", + "which": "^1.2.9" } }, "execa": { @@ -7725,13 +7595,13 @@ "integrity": "sha1-2NdrvBtVIX7RkP1t1J08d07PyNo=", "dev": true, "requires": { - "cross-spawn": "5.1.0", - "get-stream": "3.0.0", - "is-stream": "1.1.0", - "npm-run-path": "2.0.2", - "p-finally": "1.0.0", - "signal-exit": "3.0.2", - "strip-eof": "1.0.0" + "cross-spawn": "^5.0.1", + "get-stream": "^3.0.0", + "is-stream": "^1.1.0", + "npm-run-path": "^2.0.0", + "p-finally": "^1.0.0", + "signal-exit": "^3.0.0", + "strip-eof": "^1.0.0" } }, "find-up": { @@ -7740,29 +7610,34 @@ "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=", "dev": true, "requires": { - "locate-path": "2.0.0" + "locate-path": "^2.0.0" } }, + "indent-string": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz", + "integrity": "sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=" + }, "inquirer": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-3.3.0.tgz", "integrity": "sha512-h+xtnyk4EwKvFWHrUYsWErEVR+igKtLdchu+o0Z1RL7VU/jVMFbYir2bp6bAj8efFNxWqHX0dIss6fJQ+/+qeQ==", "dev": true, "requires": { - "ansi-escapes": "3.1.0", - "chalk": "2.3.2", - "cli-cursor": "2.1.0", - "cli-width": "2.2.0", - "external-editor": "2.2.0", - "figures": "2.0.0", - "lodash": "4.17.5", + "ansi-escapes": "^3.0.0", + "chalk": "^2.0.0", + "cli-cursor": "^2.1.0", + "cli-width": "^2.0.0", + "external-editor": "^2.0.4", + "figures": "^2.0.0", + "lodash": "^4.3.0", "mute-stream": "0.0.7", - "run-async": "2.3.0", - "rx-lite": "4.0.8", - "rx-lite-aggregates": "4.0.8", - "string-width": "2.1.1", - "strip-ansi": "4.0.0", - "through": "2.3.8" + "run-async": "^2.2.0", + "rx-lite": "^4.0.8", + "rx-lite-aggregates": "^4.0.8", + "string-width": "^2.1.0", + "strip-ansi": "^4.0.0", + "through": "^2.3.6" } }, "is-fullwidth-code-point": { @@ -7777,22 +7652,22 @@ "integrity": "sha1-a84sD1YD+klYDqF81qAMwOX6RRo=", "dev": true, "requires": { - "chalk": "1.1.3", - "cli-truncate": "0.2.1", - "figures": "1.7.0", - "indent-string": "2.1.0", - "is-promise": "2.1.0", - "is-stream": "1.1.0", - "listr-silent-renderer": "1.1.1", - "listr-update-renderer": "0.2.0", - "listr-verbose-renderer": "0.4.1", - "log-symbols": "1.0.2", - "log-update": "1.0.2", - "ora": "0.2.3", - "p-map": "1.2.0", - "rxjs": "5.4.3", - "stream-to-observable": "0.1.0", - "strip-ansi": "3.0.1" + "chalk": "^1.1.3", + "cli-truncate": "^0.2.1", + "figures": "^1.7.0", + "indent-string": "^2.1.0", + "is-promise": "^2.1.0", + "is-stream": "^1.1.0", + "listr-silent-renderer": "^1.1.1", + "listr-update-renderer": "^0.2.0", + "listr-verbose-renderer": "^0.4.0", + "log-symbols": "^1.0.2", + "log-update": "^1.0.2", + "ora": "^0.2.3", + "p-map": "^1.1.1", + "rxjs": "^5.0.0-beta.11", + "stream-to-observable": "^0.1.0", + "strip-ansi": "^3.0.1" }, "dependencies": { "ansi-regex": { @@ -7801,17 +7676,23 @@ "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", "dev": true }, + "ansi-styles": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", + "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", + "dev": true + }, "chalk": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { - "ansi-styles": "2.2.1", - "escape-string-regexp": "1.0.5", - "has-ansi": "2.0.0", - "strip-ansi": "3.0.1", - "supports-color": "2.0.0" + "ansi-styles": "^2.2.1", + "escape-string-regexp": "^1.0.2", + "has-ansi": "^2.0.0", + "strip-ansi": "^3.0.0", + "supports-color": "^2.0.0" } }, "figures": { @@ -7820,8 +7701,17 @@ "integrity": "sha1-y+Hjr/zxzUS4DK3+0o3Hk6lwHS4=", "dev": true, "requires": { - "escape-string-regexp": "1.0.5", - "object-assign": "4.1.1" + "escape-string-regexp": "^1.0.5", + "object-assign": "^4.1.0" + } + }, + "indent-string": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz", + "integrity": "sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=", + "dev": true, + "requires": { + "repeating": "^2.0.0" } }, "log-symbols": { @@ -7830,7 +7720,7 @@ "integrity": "sha1-N2/3tY6jCGoPCfrMdGF+ylAeGhg=", "dev": true, "requires": { - "chalk": "1.1.3" + "chalk": "^1.0.0" } }, "stream-to-observable": { @@ -7845,8 +7735,14 @@ "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, "requires": { - "ansi-regex": "2.1.1" + "ansi-regex": "^2.0.0" } + }, + "supports-color": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", + "dev": true } } }, @@ -7856,14 +7752,14 @@ "integrity": "sha1-yoDhd5tOcCZoB+ju0a1qvjmFUPk=", "dev": true, "requires": { - "chalk": "1.1.3", - "cli-truncate": "0.2.1", - "elegant-spinner": "1.0.1", - "figures": "1.7.0", - "indent-string": "3.2.0", - "log-symbols": "1.0.2", - "log-update": "1.0.2", - "strip-ansi": "3.0.1" + "chalk": "^1.1.3", + "cli-truncate": "^0.2.1", + "elegant-spinner": "^1.0.1", + "figures": "^1.7.0", + "indent-string": "^3.0.0", + "log-symbols": "^1.0.2", + "log-update": "^1.0.2", + "strip-ansi": "^3.0.1" }, "dependencies": { "ansi-regex": { @@ -7872,17 +7768,23 @@ "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", "dev": true }, + "ansi-styles": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", + "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", + "dev": true + }, "chalk": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { - "ansi-styles": "2.2.1", - "escape-string-regexp": "1.0.5", - "has-ansi": "2.0.0", - "strip-ansi": "3.0.1", - "supports-color": "2.0.0" + "ansi-styles": "^2.2.1", + "escape-string-regexp": "^1.0.2", + "has-ansi": "^2.0.0", + "strip-ansi": "^3.0.0", + "supports-color": "^2.0.0" } }, "figures": { @@ -7891,8 +7793,8 @@ "integrity": "sha1-y+Hjr/zxzUS4DK3+0o3Hk6lwHS4=", "dev": true, "requires": { - "escape-string-regexp": "1.0.5", - "object-assign": "4.1.1" + "escape-string-regexp": "^1.0.5", + "object-assign": "^4.1.0" } }, "indent-string": { @@ -7907,7 +7809,7 @@ "integrity": "sha1-N2/3tY6jCGoPCfrMdGF+ylAeGhg=", "dev": true, "requires": { - "chalk": "1.1.3" + "chalk": "^1.0.0" } }, "strip-ansi": { @@ -7916,8 +7818,14 @@ "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, "requires": { - "ansi-regex": "2.1.1" + "ansi-regex": "^2.0.0" } + }, + "supports-color": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", + "dev": true } } }, @@ -7927,19 +7835,10 @@ "integrity": "sha1-L19Fq5HjMhYjT9U62rZo607AmTs=", "dev": true, "requires": { - "graceful-fs": "4.1.11", - "parse-json": "4.0.0", - "pify": "3.0.0", - "strip-bom": "3.0.0" - } - }, - "log-symbols": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz", - "integrity": "sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==", - "dev": true, - "requires": { - "chalk": "2.3.2" + "graceful-fs": "^4.1.2", + "parse-json": "^4.0.0", + "pify": "^3.0.0", + "strip-bom": "^3.0.0" } }, "map-obj": { @@ -7949,20 +7848,20 @@ "dev": true }, "meow": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/meow/-/meow-4.0.0.tgz", - "integrity": "sha512-Me/kel335m6vMKmEmA6c87Z6DUFW3JqkINRnxkbC+A/PUm0D5Fl2dEBQrPKnqCL9Te/CIa1MUt/0InMJhuC/sw==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/meow/-/meow-4.0.1.tgz", + "integrity": "sha512-xcSBHD5Z86zaOc+781KrupuHAzeGXSLtiAOmBsiLDiPSaYSB6hdew2ng9EBAnZ62jagG9MHAOdxpDi/lWBFJ/A==", "dev": true, "requires": { - "camelcase-keys": "4.2.0", - "decamelize-keys": "1.1.0", - "loud-rejection": "1.6.0", - "minimist": "1.2.0", - "minimist-options": "3.0.2", - "normalize-package-data": "2.4.0", - "read-pkg-up": "3.0.0", - "redent": "2.0.0", - "trim-newlines": "2.0.0" + "camelcase-keys": "^4.0.0", + "decamelize-keys": "^1.0.0", + "loud-rejection": "^1.0.0", + "minimist": "^1.1.3", + "minimist-options": "^3.0.1", + "normalize-package-data": "^2.3.4", + "read-pkg-up": "^3.0.0", + "redent": "^2.0.0", + "trim-newlines": "^2.0.0" } }, "parse-json": { @@ -7971,8 +7870,8 @@ "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=", "dev": true, "requires": { - "error-ex": "1.3.1", - "json-parse-better-errors": "1.0.2" + "error-ex": "^1.3.1", + "json-parse-better-errors": "^1.0.1" } }, "path-type": { @@ -7981,7 +7880,7 @@ "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==", "dev": true, "requires": { - "pify": "3.0.0" + "pify": "^3.0.0" } }, "pify": { @@ -7996,9 +7895,9 @@ "integrity": "sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=", "dev": true, "requires": { - "load-json-file": "4.0.0", - "normalize-package-data": "2.4.0", - "path-type": "3.0.0" + "load-json-file": "^4.0.0", + "normalize-package-data": "^2.3.2", + "path-type": "^3.0.0" } }, "read-pkg-up": { @@ -8007,8 +7906,8 @@ "integrity": "sha1-PtSWaF26D4/hGNBpHcUfSh/5bwc=", "dev": true, "requires": { - "find-up": "2.1.0", - "read-pkg": "3.0.0" + "find-up": "^2.0.0", + "read-pkg": "^3.0.0" } }, "redent": { @@ -8017,8 +7916,8 @@ "integrity": "sha1-wbIAe0LVfrE4kHmzyDM2OdXhzKo=", "dev": true, "requires": { - "indent-string": "3.2.0", - "strip-indent": "2.0.0" + "indent-string": "^3.0.0", + "strip-indent": "^2.0.0" }, "dependencies": { "indent-string": { @@ -8035,17 +7934,23 @@ "integrity": "sha512-fSNi+y+P9ss+EZuV0GcIIqPUK07DEaMRUtLJvdcvMyFjc9dizuDjere+A4V7JrLGnm9iCc+nagV/4QdMTkqC4A==", "dev": true, "requires": { - "symbol-observable": "1.0.1" + "symbol-observable": "^1.0.1" } }, + "semver": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.5.0.tgz", + "integrity": "sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA==", + "dev": true + }, "string-width": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==", "dev": true, "requires": { - "is-fullwidth-code-point": "2.0.0", - "strip-ansi": "4.0.0" + "is-fullwidth-code-point": "^2.0.0", + "strip-ansi": "^4.0.0" } }, "strip-ansi": { @@ -8054,7 +7959,7 @@ "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", "dev": true, "requires": { - "ansi-regex": "3.0.0" + "ansi-regex": "^3.0.0" } }, "strip-bom": { @@ -8070,10 +7975,13 @@ "dev": true }, "supports-color": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", - "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", - "dev": true + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz", + "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } }, "trim-newlines": { "version": "2.0.0", @@ -8089,7 +7997,7 @@ "integrity": "sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=", "dev": true, "requires": { - "path-key": "2.0.1" + "path-key": "^2.0.0" } }, "npmlog": { @@ -8098,17 +8006,16 @@ "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", "dev": true, "requires": { - "are-we-there-yet": "1.1.5", - "console-control-strings": "1.1.0", - "gauge": "2.7.4", - "set-blocking": "2.0.0" + "are-we-there-yet": "~1.1.2", + "console-control-strings": "~1.1.0", + "gauge": "~2.7.3", + "set-blocking": "~2.0.0" } }, "number-is-nan": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", - "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "dev": true + "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=" }, "nwmatcher": { "version": "1.4.4", @@ -8125,36 +8032,32 @@ "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", - "dev": true + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" }, "object-copy": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz", "integrity": "sha1-fn2Fi3gb18mRpBupde04EnVOmYw=", - "dev": true, "requires": { - "copy-descriptor": "0.1.1", - "define-property": "0.2.5", - "kind-of": "3.2.2" + "copy-descriptor": "^0.1.0", + "define-property": "^0.2.5", + "kind-of": "^3.0.3" }, "dependencies": { "define-property": { "version": "0.2.5", "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz", "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=", - "dev": true, "requires": { - "is-descriptor": "0.1.6" + "is-descriptor": "^0.1.0" } }, "kind-of": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", - "dev": true, "requires": { - "is-buffer": "1.1.6" + "is-buffer": "^1.1.5" } } } @@ -8165,18 +8068,17 @@ "integrity": "sha1-zd7AKZiwkb5CvxA1rjLknxy26mc=", "dev": true, "requires": { - "foreach": "2.0.5", - "indexof": "0.0.1", - "is": "0.2.7" + "foreach": "~2.0.1", + "indexof": "~0.0.1", + "is": "~0.2.6" } }, "object-visit": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz", "integrity": "sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=", - "dev": true, "requires": { - "isobject": "3.0.1" + "isobject": "^3.0.0" } }, "object.getownpropertydescriptors": { @@ -8185,8 +8087,8 @@ "integrity": "sha1-h1jIRvW0B62rDyNuCYbxSwUcqhY=", "dev": true, "requires": { - "define-properties": "1.1.2", - "es-abstract": "1.12.0" + "define-properties": "^1.1.2", + "es-abstract": "^1.5.1" } }, "object.omit": { @@ -8195,17 +8097,16 @@ "integrity": "sha1-Gpx0SCnznbuFjHbKNXmuKlTr0fo=", "dev": true, "requires": { - "for-own": "0.1.5", - "is-extendable": "0.1.1" + "for-own": "^0.1.4", + "is-extendable": "^0.1.1" } }, "object.pick": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz", "integrity": "sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=", - "dev": true, "requires": { - "isobject": "3.0.1" + "isobject": "^3.0.1" } }, "octal": { @@ -8220,7 +8121,7 @@ "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, "requires": { - "wrappy": "1.0.2" + "wrappy": "1" } }, "onetime": { @@ -8229,7 +8130,7 @@ "integrity": "sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=", "dev": true, "requires": { - "mimic-fn": "1.2.0" + "mimic-fn": "^1.0.0" } }, "opn": { @@ -8238,7 +8139,7 @@ "integrity": "sha512-bYJHo/LOmoTd+pfiYhfZDnf9zekVJrY+cnS2a5F2x+w5ppvTqObojTP7WiFG+kVZs9Inw+qQ/lw7TroWwhdd2g==", "dev": true, "requires": { - "is-wsl": "1.1.0" + "is-wsl": "^1.1.0" } }, "optimist": { @@ -8247,8 +8148,8 @@ "integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=", "dev": true, "requires": { - "minimist": "0.0.10", - "wordwrap": "0.0.3" + "minimist": "~0.0.1", + "wordwrap": "~0.0.2" }, "dependencies": { "minimist": { @@ -8271,12 +8172,12 @@ "integrity": "sha1-NkxeQJ0/TWMB1sC0wFu6UBgK62Q=", "dev": true, "requires": { - "deep-is": "0.1.3", - "fast-levenshtein": "2.0.6", - "levn": "0.3.0", - "prelude-ls": "1.1.2", - "type-check": "0.3.2", - "wordwrap": "1.0.0" + "deep-is": "~0.1.3", + "fast-levenshtein": "~2.0.4", + "levn": "~0.3.0", + "prelude-ls": "~1.1.2", + "type-check": "~0.3.2", + "wordwrap": "~1.0.0" } }, "ora": { @@ -8285,10 +8186,10 @@ "integrity": "sha1-N1J9Igrc1Tw5tzVx11QVbV22V6Q=", "dev": true, "requires": { - "chalk": "1.1.3", - "cli-cursor": "1.0.2", - "cli-spinners": "0.1.2", - "object-assign": "4.1.1" + "chalk": "^1.1.1", + "cli-cursor": "^1.0.2", + "cli-spinners": "^0.1.2", + "object-assign": "^4.0.1" }, "dependencies": { "ansi-styles": { @@ -8303,11 +8204,11 @@ "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { - "ansi-styles": "2.2.1", - "escape-string-regexp": "1.0.5", - "has-ansi": "2.0.0", - "strip-ansi": "3.0.1", - "supports-color": "2.0.0" + "ansi-styles": "^2.2.1", + "escape-string-regexp": "^1.0.2", + "has-ansi": "^2.0.0", + "strip-ansi": "^3.0.0", + "supports-color": "^2.0.0" } }, "cli-cursor": { @@ -8316,7 +8217,7 @@ "integrity": "sha1-ZNo/fValRBLll5S9Ytw1KV6PKYc=", "dev": true, "requires": { - "restore-cursor": "1.0.1" + "restore-cursor": "^1.0.1" } }, "onetime": { @@ -8331,8 +8232,8 @@ "integrity": "sha1-NGYfRohjJ/7SmRR5FSJS35LapUE=", "dev": true, "requires": { - "exit-hook": "1.1.1", - "onetime": "1.1.0" + "exit-hook": "^1.0.0", + "onetime": "^1.0.0" } }, "supports-color": { @@ -8355,7 +8256,7 @@ "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=", "dev": true, "requires": { - "lcid": "1.0.0" + "lcid": "^1.0.0" } }, "os-tmpdir": { @@ -8370,8 +8271,8 @@ "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==", "dev": true, "requires": { - "os-homedir": "1.0.2", - "os-tmpdir": "1.0.2" + "os-homedir": "^1.0.0", + "os-tmpdir": "^1.0.0" } }, "p-finally": { @@ -8381,21 +8282,19 @@ "dev": true }, "p-limit": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.2.0.tgz", - "integrity": "sha512-Y/OtIaXtUPr4/YpMv1pCL5L5ed0rumAaAeBSj12F+bSlMdys7i8oQF/GUJmfpTS/QoaRrS/k6pma29haJpsMng==", - "dev": true, + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz", + "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==", "requires": { - "p-try": "1.0.0" + "p-try": "^1.0.0" } }, "p-locate": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz", "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=", - "dev": true, "requires": { - "p-limit": "1.2.0" + "p-limit": "^1.1.0" } }, "p-map": { @@ -8416,14 +8315,13 @@ "integrity": "sha512-88em58dDVB/KzPEx1X0N3LwFfYZPyDc4B6eF38M1rk9VTZMbxXXgjugz8mmwpS9Ox4BDZ+t6t3QP5+/gazweIA==", "dev": true, "requires": { - "p-finally": "1.0.0" + "p-finally": "^1.0.0" } }, "p-try": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz", - "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=", - "dev": true + "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=" }, "package-json": { "version": "4.0.1", @@ -8431,10 +8329,18 @@ "integrity": "sha1-iGmgQBJTZhxMTKPabCEh7VVfXu0=", "dev": true, "requires": { - "got": "6.7.1", - "registry-auth-token": "3.3.2", - "registry-url": "3.1.0", - "semver": "5.5.0" + "got": "^6.7.1", + "registry-auth-token": "^3.0.1", + "registry-url": "^3.0.3", + "semver": "^5.1.0" + }, + "dependencies": { + "semver": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.5.0.tgz", + "integrity": "sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA==", + "dev": true + } } }, "pako": { @@ -8449,11 +8355,11 @@ "integrity": "sha512-KPx7flKXg775zZpnp9SxJlz00gTd4BmJ2yJufSc44gMCRrRQ7NSzAcSJQfifuOLgW6bEi+ftrALtsgALeB2Adw==", "dev": true, "requires": { - "asn1.js": "4.10.1", - "browserify-aes": "1.2.0", - "create-hash": "1.2.0", - "evp_bytestokey": "1.0.3", - "pbkdf2": "3.0.16" + "asn1.js": "^4.0.0", + "browserify-aes": "^1.0.0", + "create-hash": "^1.1.0", + "evp_bytestokey": "^1.0.0", + "pbkdf2": "^3.0.3" } }, "parse-glob": { @@ -8462,10 +8368,10 @@ "integrity": "sha1-ssN2z7EfNVE7rdFz7wu246OIORw=", "dev": true, "requires": { - "glob-base": "0.3.0", - "is-dotfile": "1.0.3", - "is-extglob": "1.0.0", - "is-glob": "2.0.1" + "glob-base": "^0.3.0", + "is-dotfile": "^1.0.0", + "is-extglob": "^1.0.0", + "is-glob": "^2.0.0" }, "dependencies": { "is-extglob": { @@ -8480,7 +8386,7 @@ "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=", "dev": true, "requires": { - "is-extglob": "1.0.0" + "is-extglob": "^1.0.0" } } } @@ -8489,9 +8395,8 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz", "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=", - "dev": true, "requires": { - "error-ex": "1.3.1" + "error-ex": "^1.2.0" } }, "parse5": { @@ -8500,14 +8405,13 @@ "integrity": "sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==", "dev": true, "requires": { - "@types/node": "9.6.5" + "@types/node": "*" } }, "pascalcase": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz", - "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=", - "dev": true + "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=" }, "path-dirname": { "version": "1.0.2", @@ -8519,9 +8423,8 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz", "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=", - "dev": true, "requires": { - "pinkie-promise": "2.0.1" + "pinkie-promise": "^2.0.0" } }, "path-is-absolute": { @@ -8552,11 +8455,10 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz", "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=", - "dev": true, "requires": { - "graceful-fs": "4.1.11", - "pify": "2.3.0", - "pinkie-promise": "2.0.1" + "graceful-fs": "^4.1.2", + "pify": "^2.0.0", + "pinkie-promise": "^2.0.0" } }, "pathval": { @@ -8571,11 +8473,11 @@ "integrity": "sha512-y4CXP3thSxqf7c0qmOF+9UeOTrifiVTIM+u7NWlq+PRsHbr7r7dpCmvzrZxa96JJUNi0Y5w9VqG5ZNeCVMoDcA==", "dev": true, "requires": { - "create-hash": "1.2.0", - "create-hmac": "1.1.7", - "ripemd160": "2.0.2", - "safe-buffer": "5.1.1", - "sha.js": "2.4.11" + "create-hash": "^1.1.2", + "create-hmac": "^1.1.4", + "ripemd160": "^2.0.1", + "safe-buffer": "^5.0.1", + "sha.js": "^2.4.8" } }, "pend": { @@ -8593,22 +8495,19 @@ "pify": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", - "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", - "dev": true + "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=" }, "pinkie": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz", - "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=", - "dev": true + "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=" }, "pinkie-promise": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz", "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=", - "dev": true, "requires": { - "pinkie": "2.0.4" + "pinkie": "^2.0.0" } }, "pkg-dir": { @@ -8617,7 +8516,7 @@ "integrity": "sha1-9tXREJ4Z1j7fQo4L1X4Sd3YVM0s=", "dev": true, "requires": { - "find-up": "2.1.0" + "find-up": "^2.1.0" }, "dependencies": { "find-up": { @@ -8626,7 +8525,7 @@ "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=", "dev": true, "requires": { - "locate-path": "2.0.0" + "locate-path": "^2.0.0" } } } @@ -8646,8 +8545,7 @@ "posix-character-classes": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz", - "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=", - "dev": true + "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=" }, "prelude-ls": { "version": "1.1.2", @@ -8679,8 +8577,8 @@ "integrity": "sha1-1h0GUmjkx1kIO8y8onoBrXx2AfQ=", "dev": true, "requires": { - "ansi-regex": "3.0.0", - "ansi-styles": "3.2.1" + "ansi-regex": "^3.0.0", + "ansi-styles": "^3.2.0" }, "dependencies": { "ansi-regex": { @@ -8688,6 +8586,15 @@ "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=", "dev": true + }, + "ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "requires": { + "color-convert": "^1.9.0" + } } } }, @@ -8727,17 +8634,23 @@ "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=", "dev": true }, + "psl": { + "version": "1.1.28", + "resolved": "https://registry.npmjs.org/psl/-/psl-1.1.28.tgz", + "integrity": "sha512-+AqO1Ae+N/4r7Rvchrdm432afjT9hqJRyBN3DQv9At0tPz4hIFSGKbq64fN9dVoCow4oggIIax5/iONx0r9hZw==", + "dev": true + }, "public-encrypt": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.2.tgz", "integrity": "sha512-4kJ5Esocg8X3h8YgJsKAuoesBgB7mqH3eowiDzMUPKiRDDE7E/BqqZD1hnTByIaAFiwAw246YEltSq7tdrOH0Q==", "dev": true, "requires": { - "bn.js": "4.11.8", - "browserify-rsa": "4.0.1", - "create-hash": "1.2.0", - "parse-asn1": "5.1.1", - "randombytes": "2.0.6" + "bn.js": "^4.1.0", + "browserify-rsa": "^4.0.0", + "create-hash": "^1.1.0", + "parse-asn1": "^5.0.0", + "randombytes": "^2.0.1" } }, "punycode": { @@ -8747,9 +8660,9 @@ "dev": true }, "qs": { - "version": "6.5.1", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.1.tgz", - "integrity": "sha512-eRzhrN1WSINYCDCbrz796z37LOe3m5tmW7RQf6oBntukAG1nmovJvhnwHHRMAfeoItc1m2Hk02WER2aQ/iqs+A==", + "version": "6.5.2", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz", + "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==", "dev": true }, "quick-lru": { @@ -8759,22 +8672,23 @@ "dev": true }, "randomatic": { - "version": "1.1.7", - "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-1.1.7.tgz", - "integrity": "sha512-D5JUjPyJbaJDkuAazpVnSfVkLlpeO3wDlPROTMLGKG1zMFNFRgrciKo1ltz/AzNTkqE0HzDx655QOL51N06how==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-3.0.0.tgz", + "integrity": "sha512-VdxFOIEY3mNO5PtSRkkle/hPJDHvQhK21oa73K4yAc9qmp6N429gAyF1gZMOTMeS0/AYzaV/2Trcef+NaIonSA==", "dev": true, "requires": { - "is-number": "3.0.0", - "kind-of": "4.0.0" + "is-number": "^4.0.0", + "kind-of": "^6.0.0", + "math-random": "^1.0.1" }, "dependencies": { - "kind-of": { + "is-number": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz", "integrity": "sha1-IIE989cSkosgc3hpGkUGb65y3Vc=", "dev": true, "requires": { - "is-buffer": "1.1.6" + "is-buffer": "^1.1.5" } } } @@ -8785,7 +8699,7 @@ "integrity": "sha512-CIQ5OFxf4Jou6uOKe9t1AOgqpeU5fd70A8NPdHSGeYXqXsPe6peOwI0cUl88RWZ6sP1vPMV3avd/R6cZ5/sP1A==", "dev": true, "requires": { - "safe-buffer": "5.1.1" + "safe-buffer": "^5.1.0" } }, "randomfill": { @@ -8794,8 +8708,8 @@ "integrity": "sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==", "dev": true, "requires": { - "randombytes": "2.0.6", - "safe-buffer": "5.1.1" + "randombytes": "^2.0.5", + "safe-buffer": "^5.1.0" } }, "raw-body": { @@ -8804,8 +8718,8 @@ "integrity": "sha1-HQJ8K/oRasxmI7yo8AAWVyqH1CU=", "dev": true, "requires": { - "bytes": "1.0.0", - "string_decoder": "0.10.31" + "bytes": "1", + "string_decoder": "0.10" }, "dependencies": { "string_decoder": { @@ -8817,36 +8731,34 @@ } }, "rc": { - "version": "1.2.6", - "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.6.tgz", - "integrity": "sha1-6xiYnG1PTxYsOZ953dKfODVWgJI=", + "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.4.2", - "ini": "1.3.5", - "minimist": "1.2.0", - "strip-json-comments": "2.0.1" + "deep-extend": "^0.6.0", + "ini": "~1.3.0", + "minimist": "^1.2.0", + "strip-json-comments": "~2.0.1" } }, "read-pkg": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz", "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=", - "dev": true, "requires": { - "load-json-file": "1.1.0", - "normalize-package-data": "2.4.0", - "path-type": "1.1.0" + "load-json-file": "^1.0.0", + "normalize-package-data": "^2.3.2", + "path-type": "^1.0.0" } }, "read-pkg-up": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz", "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=", - "dev": true, "requires": { - "find-up": "1.1.2", - "read-pkg": "1.1.0" + "find-up": "^1.0.0", + "read-pkg": "^1.0.0" } }, "readable-stream": { @@ -8855,13 +8767,13 @@ "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "dev": true, "requires": { - "core-util-is": "1.0.2", - "inherits": "2.0.3", - "isarray": "1.0.0", - "process-nextick-args": "2.0.0", - "safe-buffer": "5.1.1", - "string_decoder": "1.1.1", - "util-deprecate": "1.0.2" + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" } }, "readdirp": { @@ -8870,10 +8782,10 @@ "integrity": "sha1-TtCtBg3zBzMAxIRANz9y0cxkLXg=", "dev": true, "requires": { - "graceful-fs": "4.1.11", - "minimatch": "3.0.4", - "readable-stream": "2.3.6", - "set-immediate-shim": "1.0.1" + "graceful-fs": "^4.1.2", + "minimatch": "^3.0.2", + "readable-stream": "^2.0.2", + "set-immediate-shim": "^1.0.1" } }, "readline2": { @@ -8882,8 +8794,8 @@ "integrity": "sha1-QQWWCP/BVHV7cV2ZidGZ/783LjU=", "dev": true, "requires": { - "code-point-at": "1.1.0", - "is-fullwidth-code-point": "1.0.0", + "code-point-at": "^1.0.0", + "is-fullwidth-code-point": "^1.0.0", "mute-stream": "0.0.5" }, "dependencies": { @@ -8901,7 +8813,7 @@ "integrity": "sha512-XJtlRJ9jf0E1H1SLeJyQ9PGzQD7S65h1pRXEcAeK48doKOnKxcgPeNohJvD5u/2sI9J1oke6E8bZHS/fmW1UiQ==", "dev": true, "requires": { - "util.promisify": "1.0.0" + "util.promisify": "^1.0.0" } }, "redent": { @@ -8910,15 +8822,14 @@ "integrity": "sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=", "dev": true, "requires": { - "indent-string": "2.1.0", - "strip-indent": "1.0.1" + "indent-string": "^2.1.0", + "strip-indent": "^1.0.1" } }, "regenerator-runtime": { "version": "0.11.1", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz", - "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==", - "dev": true + "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==" }, "regex-cache": { "version": "0.4.4", @@ -8926,17 +8837,16 @@ "integrity": "sha512-nVIZwtCjkC9YgvWkpM55B5rBhBYRZhAaJbgcFYXXsHnbZ9UZI9nnVWYZpBlCqv9ho2eZryPnWrZGsOdPwVWXWQ==", "dev": true, "requires": { - "is-equal-shallow": "0.1.3" + "is-equal-shallow": "^0.1.3" } }, "regex-not": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz", "integrity": "sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==", - "dev": true, "requires": { - "extend-shallow": "3.0.2", - "safe-regex": "1.1.0" + "extend-shallow": "^3.0.2", + "safe-regex": "^1.1.0" } }, "registry-auth-token": { @@ -8945,8 +8855,8 @@ "integrity": "sha512-JL39c60XlzCVgNrO+qq68FoNb56w/m7JYvGR2jT5iR1xBrUA3Mfx5Twk5rqTThPmQKMWydGmq8oFtDlxfrmxnQ==", "dev": true, "requires": { - "rc": "1.2.6", - "safe-buffer": "5.1.1" + "rc": "^1.1.6", + "safe-buffer": "^5.0.1" } }, "registry-url": { @@ -8955,7 +8865,7 @@ "integrity": "sha1-PU74cPc93h138M+aOBQyRE4XSUI=", "dev": true, "requires": { - "rc": "1.2.6" + "rc": "^1.0.1" } }, "remove-trailing-separator": { @@ -8967,22 +8877,19 @@ "repeat-element": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.2.tgz", - "integrity": "sha1-7wiaF40Ug7quTZPrmLT55OEdmQo=", - "dev": true + "integrity": "sha1-7wiaF40Ug7quTZPrmLT55OEdmQo=" }, "repeat-string": { "version": "1.6.1", "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz", - "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=", - "dev": true + "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=" }, "repeating": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.1.tgz", "integrity": "sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=", - "dev": true, "requires": { - "is-finite": "1.0.2" + "is-finite": "^1.0.0" } }, "request": { @@ -8991,28 +8898,89 @@ "integrity": "sha512-8H7Ehijd4js+s6wuVPLjwORxD4zeuyjYugprdOXlPSqaApmL/QOy+EB/beICHVCHkGMKNh5rvihb5ov+IDw4mg==", "dev": true, "requires": { - "aws-sign2": "0.7.0", - "aws4": "1.7.0", - "caseless": "0.12.0", - "combined-stream": "1.0.6", - "extend": "3.0.1", - "forever-agent": "0.6.1", - "form-data": "2.3.2", - "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.18", - "oauth-sign": "0.8.2", - "performance-now": "2.1.0", - "qs": "6.5.1", - "safe-buffer": "5.1.1", - "stringstream": "0.0.5", - "tough-cookie": "2.3.4", - "tunnel-agent": "0.6.0", - "uuid": "3.2.1" + "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", + "stringstream": "~0.0.5", + "tough-cookie": "~2.3.3", + "tunnel-agent": "^0.6.0", + "uuid": "^3.1.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" + } + } + } + }, + "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" + } + }, + "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" + } + }, + "tough-cookie": { + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.4.tgz", + "integrity": "sha512-TZ6TTfI5NtZnuyy/Kecv+CnoROnyXn2DN97LontgQpCwsX2XyLYCC0ENhYkehSOwAp8rTQKc/NUIF7BkQ5rKLA==", + "dev": true, + "requires": { + "punycode": "^1.4.1" + } + } } }, "request-promise-core": { @@ -9021,7 +8989,7 @@ "integrity": "sha1-Pu4AssWqgyOc+wTFcA2jb4HNCLY=", "dev": true, "requires": { - "lodash": "4.17.5" + "lodash": "^4.13.1" } }, "request-promise-native": { @@ -9031,8 +8999,8 @@ "dev": true, "requires": { "request-promise-core": "1.1.1", - "stealthy-require": "1.1.1", - "tough-cookie": "2.3.4" + "stealthy-require": "^1.1.0", + "tough-cookie": ">=2.3.3" } }, "require-directory": { @@ -9044,8 +9012,7 @@ "require-main-filename": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz", - "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=", - "dev": true + "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=" }, "require-uncached": { "version": "1.0.3", @@ -9053,17 +9020,25 @@ "integrity": "sha1-Tg1W1slmL9MeQwEcS5WqSZVUIdM=", "dev": true, "requires": { - "caller-path": "0.1.0", - "resolve-from": "1.0.1" + "caller-path": "^0.1.0", + "resolve-from": "^1.0.0" + }, + "dependencies": { + "resolve-from": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-1.0.1.tgz", + "integrity": "sha1-Jsv+k10a7uq7Kbw/5a6wHpPUQiY=", + "dev": true + } } }, "resolve": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.7.0.tgz", - "integrity": "sha512-QdgZ5bjR1WAlpLaO5yHepFvC+o3rCr6wpfE2tpJNMkXdulf2jKomQBdNRQITF3ZKHNlT71syG98yQP03gasgnA==", + "version": "1.7.1", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.7.1.tgz", + "integrity": "sha512-c7rwLofp8g1U+h1KNyHL/jicrKg1Ek4q+Lr33AL65uZTinUZHe30D5HlyN5V9NW0JX1D5dXQ4jqW5l7Sy/kGfw==", "dev": true, "requires": { - "path-parse": "1.0.5" + "path-parse": "^1.0.5" } }, "resolve-cwd": { @@ -9072,7 +9047,7 @@ "integrity": "sha1-AKn3OHVW4nA46uIyyqNypqWbZlo=", "dev": true, "requires": { - "resolve-from": "3.0.0" + "resolve-from": "^3.0.0" }, "dependencies": { "resolve-from": { @@ -9083,17 +9058,10 @@ } } }, - "resolve-from": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-1.0.1.tgz", - "integrity": "sha1-Jsv+k10a7uq7Kbw/5a6wHpPUQiY=", - "dev": true - }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", - "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=", - "dev": true + "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=" }, "restore-cursor": { "version": "2.0.0", @@ -9101,15 +9069,14 @@ "integrity": "sha1-n37ih/gv0ybU/RYpI9YhKe7g368=", "dev": true, "requires": { - "onetime": "2.0.1", - "signal-exit": "3.0.2" + "onetime": "^2.0.0", + "signal-exit": "^3.0.2" } }, "ret": { "version": "0.1.15", "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz", - "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==", - "dev": true + "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==" }, "right-align": { "version": "0.1.3", @@ -9118,7 +9085,7 @@ "dev": true, "optional": true, "requires": { - "align-text": "0.1.4" + "align-text": "^0.1.1" } }, "rimraf": { @@ -9127,7 +9094,7 @@ "integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==", "dev": true, "requires": { - "glob": "7.1.2" + "glob": "^7.0.5" } }, "ripemd160": { @@ -9136,8 +9103,8 @@ "integrity": "sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==", "dev": true, "requires": { - "hash-base": "3.0.4", - "inherits": "2.0.3" + "hash-base": "^3.0.0", + "inherits": "^2.0.1" } }, "rollup": { @@ -9147,7 +9114,7 @@ "dev": true, "requires": { "@types/estree": "0.0.39", - "@types/node": "9.6.5" + "@types/node": "*" } }, "rollup-plugin-commonjs": { @@ -9156,10 +9123,10 @@ "integrity": "sha512-g91ZZKZwTW7F7vL6jMee38I8coj/Q9GBdTmXXeFL7ldgC1Ky5WJvHgbKlAiXXTh762qvohhExwUgeQGFh9suGg==", "dev": true, "requires": { - "estree-walker": "0.5.2", - "magic-string": "0.22.5", - "resolve": "1.7.0", - "rollup-pluginutils": "2.3.0" + "estree-walker": "^0.5.1", + "magic-string": "^0.22.4", + "resolve": "^1.5.0", + "rollup-pluginutils": "^2.0.1" } }, "rollup-plugin-node-builtins": { @@ -9168,10 +9135,10 @@ "integrity": "sha1-JKH+1KQyV7a2Q3HYq8bOGrFFl+k=", "dev": true, "requires": { - "browserify-fs": "1.0.0", - "buffer-es6": "4.9.3", - "crypto-browserify": "3.12.0", - "process-es6": "0.11.6" + "browserify-fs": "^1.0.0", + "buffer-es6": "^4.9.2", + "crypto-browserify": "^3.11.0", + "process-es6": "^0.11.2" } }, "rollup-plugin-node-globals": { @@ -9180,12 +9147,12 @@ "integrity": "sha512-PZgkJkVLWZRdwx33GaAeD92UjmvCM7kM9i/8wgoe9hN901RrjVs8eVjg5DzQ+2kGZSiqyx0aiIunLnOOCWshWQ==", "dev": true, "requires": { - "acorn": "5.5.3", - "buffer-es6": "4.9.3", - "estree-walker": "0.5.2", - "magic-string": "0.22.5", - "process-es6": "0.11.6", - "rollup-pluginutils": "2.3.0" + "acorn": "^5.5.0", + "buffer-es6": "^4.9.3", + "estree-walker": "^0.5.1", + "magic-string": "^0.22.4", + "process-es6": "^0.11.6", + "rollup-pluginutils": "^2.0.1" } }, "rollup-plugin-node-resolve": { @@ -9194,9 +9161,9 @@ "integrity": "sha512-9zHGr3oUJq6G+X0oRMYlzid9fXicBdiydhwGChdyeNRGPcN/majtegApRKHLR5drboUvEWU+QeUmGTyEZQs3WA==", "dev": true, "requires": { - "builtin-modules": "2.0.0", - "is-module": "1.0.0", - "resolve": "1.7.0" + "builtin-modules": "^2.0.0", + "is-module": "^1.0.0", + "resolve": "^1.1.6" } }, "rollup-pluginutils": { @@ -9205,8 +9172,8 @@ "integrity": "sha512-xB6hsRsjdJdIYWEyYUJy/3ki5g69wrf0luHPGNK3ZSocV6HLNfio59l3dZ3TL4xUwEKgROhFi9jOCt6c5gfUWw==", "dev": true, "requires": { - "estree-walker": "0.5.2", - "micromatch": "2.3.11" + "estree-walker": "^0.5.2", + "micromatch": "^2.3.11" }, "dependencies": { "arr-diff": { @@ -9215,7 +9182,7 @@ "integrity": "sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=", "dev": true, "requires": { - "arr-flatten": "1.1.0" + "arr-flatten": "^1.0.1" } }, "array-unique": { @@ -9230,9 +9197,9 @@ "integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=", "dev": true, "requires": { - "expand-range": "1.8.2", - "preserve": "0.2.0", - "repeat-element": "1.1.2" + "expand-range": "^1.8.1", + "preserve": "^0.2.0", + "repeat-element": "^1.1.2" } }, "expand-brackets": { @@ -9241,7 +9208,7 @@ "integrity": "sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=", "dev": true, "requires": { - "is-posix-bracket": "0.1.1" + "is-posix-bracket": "^0.1.0" } }, "extglob": { @@ -9250,7 +9217,7 @@ "integrity": "sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=", "dev": true, "requires": { - "is-extglob": "1.0.0" + "is-extglob": "^1.0.0" } }, "is-extglob": { @@ -9265,7 +9232,7 @@ "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=", "dev": true, "requires": { - "is-extglob": "1.0.0" + "is-extglob": "^1.0.0" } }, "kind-of": { @@ -9274,7 +9241,7 @@ "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", "dev": true, "requires": { - "is-buffer": "1.1.6" + "is-buffer": "^1.1.5" } }, "micromatch": { @@ -9283,19 +9250,19 @@ "integrity": "sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=", "dev": true, "requires": { - "arr-diff": "2.0.0", - "array-unique": "0.2.1", - "braces": "1.8.5", - "expand-brackets": "0.1.5", - "extglob": "0.3.2", - "filename-regex": "2.0.1", - "is-extglob": "1.0.0", - "is-glob": "2.0.1", - "kind-of": "3.2.2", - "normalize-path": "2.1.1", - "object.omit": "2.0.1", - "parse-glob": "3.0.4", - "regex-cache": "0.4.4" + "arr-diff": "^2.0.0", + "array-unique": "^0.2.1", + "braces": "^1.8.2", + "expand-brackets": "^0.1.4", + "extglob": "^0.3.1", + "filename-regex": "^2.0.0", + "is-extglob": "^1.0.0", + "is-glob": "^2.0.1", + "kind-of": "^3.0.2", + "normalize-path": "^2.0.1", + "object.omit": "^2.0.0", + "parse-glob": "^3.0.4", + "regex-cache": "^0.4.2" } } } @@ -9312,7 +9279,7 @@ "integrity": "sha1-A3GrSuC91yDUFm19/aZP96RFpsA=", "dev": true, "requires": { - "is-promise": "2.1.0" + "is-promise": "^2.1.0" } }, "rx-lite": { @@ -9327,22 +9294,13 @@ "integrity": "sha1-dTuHqJoRyVRnxKwWJsTvxOBcZ74=", "dev": true, "requires": { - "rx-lite": "4.0.8" - } - }, - "rxjs": { - "version": "5.5.8", - "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.5.8.tgz", - "integrity": "sha512-Bz7qou7VAIoGiglJZbzbXa4vpX5BmTTN2Dj/se6+SwADtw4SihqBIiEa7VmTXJ8pynvq0iFr5Gx9VLyye1rIxQ==", - "dev": true, - "requires": { - "symbol-observable": "1.0.1" + "rx-lite": "*" } }, "safe-buffer": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz", - "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==", + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", "dev": true }, "safe-json-parse": { @@ -9355,26 +9313,31 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz", "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=", - "dev": true, "requires": { - "ret": "0.1.15" + "ret": "~0.1.10" } }, + "safer-buffer": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", + "dev": true + }, "sane": { "version": "2.5.2", "resolved": "https://registry.npmjs.org/sane/-/sane-2.5.2.tgz", "integrity": "sha1-tNwYYcIbQn6SlQej51HiosuKs/o=", "dev": true, "requires": { - "anymatch": "2.0.0", - "capture-exit": "1.2.0", - "exec-sh": "0.2.1", - "fb-watchman": "2.0.0", - "fsevents": "1.2.4", - "micromatch": "3.1.10", - "minimist": "1.2.0", - "walker": "1.0.7", - "watch": "0.18.0" + "anymatch": "^2.0.0", + "capture-exit": "^1.2.0", + "exec-sh": "^0.2.0", + "fb-watchman": "^2.0.0", + "fsevents": "^1.2.3", + "micromatch": "^3.1.4", + "minimist": "^1.1.1", + "walker": "~1.0.5", + "watch": "~0.18.0" }, "dependencies": { "fsevents": { @@ -9384,8 +9347,8 @@ "dev": true, "optional": true, "requires": { - "nan": "2.10.0", - "node-pre-gyp": "0.10.0" + "nan": "^2.9.2", + "node-pre-gyp": "^0.10.0" }, "dependencies": { "abbrev": { @@ -9411,8 +9374,8 @@ "dev": true, "optional": true, "requires": { - "delegates": "1.0.0", - "readable-stream": "2.3.6" + "delegates": "^1.0.0", + "readable-stream": "^2.0.6" } }, "balanced-match": { @@ -9425,7 +9388,7 @@ "bundled": true, "dev": true, "requires": { - "balanced-match": "1.0.0", + "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, @@ -9489,7 +9452,7 @@ "dev": true, "optional": true, "requires": { - "minipass": "2.2.4" + "minipass": "^2.2.1" } }, "fs.realpath": { @@ -9504,14 +9467,14 @@ "dev": true, "optional": true, "requires": { - "aproba": "1.2.0", - "console-control-strings": "1.1.0", - "has-unicode": "2.0.1", - "object-assign": "4.1.1", - "signal-exit": "3.0.2", - "string-width": "1.0.2", - "strip-ansi": "3.0.1", - "wide-align": "1.1.2" + "aproba": "^1.0.3", + "console-control-strings": "^1.0.0", + "has-unicode": "^2.0.0", + "object-assign": "^4.1.0", + "signal-exit": "^3.0.0", + "string-width": "^1.0.1", + "strip-ansi": "^3.0.1", + "wide-align": "^1.1.0" } }, "glob": { @@ -9520,12 +9483,12 @@ "dev": true, "optional": true, "requires": { - "fs.realpath": "1.0.0", - "inflight": "1.0.6", - "inherits": "2.0.3", - "minimatch": "3.0.4", - "once": "1.4.0", - "path-is-absolute": "1.0.1" + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.4", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" } }, "has-unicode": { @@ -9540,7 +9503,7 @@ "dev": true, "optional": true, "requires": { - "safer-buffer": "2.1.2" + "safer-buffer": "^2.1.0" } }, "ignore-walk": { @@ -9549,7 +9512,7 @@ "dev": true, "optional": true, "requires": { - "minimatch": "3.0.4" + "minimatch": "^3.0.4" } }, "inflight": { @@ -9558,8 +9521,8 @@ "dev": true, "optional": true, "requires": { - "once": "1.4.0", - "wrappy": "1.0.2" + "once": "^1.3.0", + "wrappy": "1" } }, "inherits": { @@ -9578,7 +9541,7 @@ "bundled": true, "dev": true, "requires": { - "number-is-nan": "1.0.1" + "number-is-nan": "^1.0.0" } }, "isarray": { @@ -9592,7 +9555,7 @@ "bundled": true, "dev": true, "requires": { - "brace-expansion": "1.1.11" + "brace-expansion": "^1.1.7" } }, "minimist": { @@ -9605,8 +9568,8 @@ "bundled": true, "dev": true, "requires": { - "safe-buffer": "5.1.1", - "yallist": "3.0.2" + "safe-buffer": "^5.1.1", + "yallist": "^3.0.0" } }, "minizlib": { @@ -9615,7 +9578,7 @@ "dev": true, "optional": true, "requires": { - "minipass": "2.2.4" + "minipass": "^2.2.1" } }, "mkdirp": { @@ -9638,9 +9601,9 @@ "dev": true, "optional": true, "requires": { - "debug": "2.6.9", - "iconv-lite": "0.4.21", - "sax": "1.2.4" + "debug": "^2.1.2", + "iconv-lite": "^0.4.4", + "sax": "^1.2.4" } }, "node-pre-gyp": { @@ -9649,16 +9612,16 @@ "dev": true, "optional": true, "requires": { - "detect-libc": "1.0.3", - "mkdirp": "0.5.1", - "needle": "2.2.0", - "nopt": "4.0.1", - "npm-packlist": "1.1.10", - "npmlog": "4.1.2", - "rc": "1.2.7", - "rimraf": "2.6.2", - "semver": "5.5.0", - "tar": "4.4.1" + "detect-libc": "^1.0.2", + "mkdirp": "^0.5.1", + "needle": "^2.2.0", + "nopt": "^4.0.1", + "npm-packlist": "^1.1.6", + "npmlog": "^4.0.2", + "rc": "^1.1.7", + "rimraf": "^2.6.1", + "semver": "^5.3.0", + "tar": "^4" } }, "nopt": { @@ -9667,8 +9630,8 @@ "dev": true, "optional": true, "requires": { - "abbrev": "1.1.1", - "osenv": "0.1.5" + "abbrev": "1", + "osenv": "^0.1.4" } }, "npm-bundled": { @@ -9683,8 +9646,8 @@ "dev": true, "optional": true, "requires": { - "ignore-walk": "3.0.1", - "npm-bundled": "1.0.3" + "ignore-walk": "^3.0.1", + "npm-bundled": "^1.0.1" } }, "npmlog": { @@ -9693,10 +9656,10 @@ "dev": true, "optional": true, "requires": { - "are-we-there-yet": "1.1.4", - "console-control-strings": "1.1.0", - "gauge": "2.7.4", - "set-blocking": "2.0.0" + "are-we-there-yet": "~1.1.2", + "console-control-strings": "~1.1.0", + "gauge": "~2.7.3", + "set-blocking": "~2.0.0" } }, "number-is-nan": { @@ -9715,7 +9678,7 @@ "bundled": true, "dev": true, "requires": { - "wrappy": "1.0.2" + "wrappy": "1" } }, "os-homedir": { @@ -9736,8 +9699,8 @@ "dev": true, "optional": true, "requires": { - "os-homedir": "1.0.2", - "os-tmpdir": "1.0.2" + "os-homedir": "^1.0.0", + "os-tmpdir": "^1.0.0" } }, "path-is-absolute": { @@ -9758,10 +9721,10 @@ "dev": true, "optional": true, "requires": { - "deep-extend": "0.5.1", - "ini": "1.3.5", - "minimist": "1.2.0", - "strip-json-comments": "2.0.1" + "deep-extend": "^0.5.1", + "ini": "~1.3.0", + "minimist": "^1.2.0", + "strip-json-comments": "~2.0.1" }, "dependencies": { "minimist": { @@ -9778,13 +9741,13 @@ "dev": true, "optional": true, "requires": { - "core-util-is": "1.0.2", - "inherits": "2.0.3", - "isarray": "1.0.0", - "process-nextick-args": "2.0.0", - "safe-buffer": "5.1.1", - "string_decoder": "1.1.1", - "util-deprecate": "1.0.2" + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" } }, "rimraf": { @@ -9793,7 +9756,7 @@ "dev": true, "optional": true, "requires": { - "glob": "7.1.2" + "glob": "^7.0.5" } }, "safe-buffer": { @@ -9836,9 +9799,9 @@ "bundled": true, "dev": true, "requires": { - "code-point-at": "1.1.0", - "is-fullwidth-code-point": "1.0.0", - "strip-ansi": "3.0.1" + "code-point-at": "^1.0.0", + "is-fullwidth-code-point": "^1.0.0", + "strip-ansi": "^3.0.0" } }, "string_decoder": { @@ -9847,7 +9810,7 @@ "dev": true, "optional": true, "requires": { - "safe-buffer": "5.1.1" + "safe-buffer": "~5.1.0" } }, "strip-ansi": { @@ -9855,7 +9818,7 @@ "bundled": true, "dev": true, "requires": { - "ansi-regex": "2.1.1" + "ansi-regex": "^2.0.0" } }, "strip-json-comments": { @@ -9870,13 +9833,13 @@ "dev": true, "optional": true, "requires": { - "chownr": "1.0.1", - "fs-minipass": "1.2.5", - "minipass": "2.2.4", - "minizlib": "1.1.0", - "mkdirp": "0.5.1", - "safe-buffer": "5.1.1", - "yallist": "3.0.2" + "chownr": "^1.0.1", + "fs-minipass": "^1.2.5", + "minipass": "^2.2.4", + "minizlib": "^1.1.0", + "mkdirp": "^0.5.0", + "safe-buffer": "^5.1.1", + "yallist": "^3.0.2" } }, "util-deprecate": { @@ -9891,7 +9854,7 @@ "dev": true, "optional": true, "requires": { - "string-width": "1.0.2" + "string-width": "^1.0.2" } }, "wrappy": { @@ -9914,10 +9877,10 @@ "integrity": "sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=", "dev": true, "requires": { - "glob": "7.1.2", - "lodash": "4.17.5", - "scss-tokenizer": "0.2.3", - "yargs": "7.1.0" + "glob": "^7.0.0", + "lodash": "^4.0.0", + "scss-tokenizer": "^0.2.3", + "yargs": "^7.0.0" }, "dependencies": { "camelcase": { @@ -9932,19 +9895,19 @@ "integrity": "sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=", "dev": true, "requires": { - "camelcase": "3.0.0", - "cliui": "3.2.0", - "decamelize": "1.2.0", - "get-caller-file": "1.0.2", - "os-locale": "1.4.0", - "read-pkg-up": "1.0.1", - "require-directory": "2.1.1", - "require-main-filename": "1.0.1", - "set-blocking": "2.0.0", - "string-width": "1.0.2", - "which-module": "1.0.0", - "y18n": "3.2.1", - "yargs-parser": "5.0.0" + "camelcase": "^3.0.0", + "cliui": "^3.2.0", + "decamelize": "^1.1.1", + "get-caller-file": "^1.0.1", + "os-locale": "^1.4.0", + "read-pkg-up": "^1.0.1", + "require-directory": "^2.1.1", + "require-main-filename": "^1.0.1", + "set-blocking": "^2.0.0", + "string-width": "^1.0.2", + "which-module": "^1.0.0", + "y18n": "^3.2.1", + "yargs-parser": "^5.0.0" } } } @@ -9955,20 +9918,20 @@ "integrity": "sha1-Yw9pwhaqIGuCMvsqqQe98zNrbYM=", "dev": true, "requires": { - "commander": "2.13.0", - "eslint": "2.13.1", + "commander": "^2.8.1", + "eslint": "^2.7.0", "front-matter": "2.1.2", - "fs-extra": "3.0.1", - "glob": "7.1.2", - "globule": "1.2.0", - "gonzales-pe-sl": "4.2.3", - "js-yaml": "3.11.0", - "known-css-properties": "0.3.0", - "lodash.capitalize": "4.2.1", - "lodash.kebabcase": "4.1.1", - "merge": "1.2.0", - "path-is-absolute": "1.0.1", - "util": "0.10.3" + "fs-extra": "^3.0.1", + "glob": "^7.0.0", + "globule": "^1.0.0", + "gonzales-pe-sl": "^4.2.3", + "js-yaml": "^3.5.4", + "known-css-properties": "^0.3.0", + "lodash.capitalize": "^4.1.0", + "lodash.kebabcase": "^4.0.0", + "merge": "^1.2.0", + "path-is-absolute": "^1.0.0", + "util": "^0.10.3" }, "dependencies": { "fs-extra": { @@ -9977,9 +9940,9 @@ "integrity": "sha1-N5TzeMWLNC6n27sjCVEJxLO2IpE=", "dev": true, "requires": { - "graceful-fs": "4.1.11", - "jsonfile": "3.0.1", - "universalify": "0.1.1" + "graceful-fs": "^4.1.2", + "jsonfile": "^3.0.0", + "universalify": "^0.1.0" } }, "jsonfile": { @@ -9988,7 +9951,7 @@ "integrity": "sha1-pezG9l9T9mLEQVx2daAzHQmS7GY=", "dev": true, "requires": { - "graceful-fs": "4.1.11" + "graceful-fs": "^4.1.6" } } } @@ -10005,8 +9968,8 @@ "integrity": "sha1-jrBtualyMzOCTT9VMGQRSYR85dE=", "dev": true, "requires": { - "js-base64": "2.4.5", - "source-map": "0.4.4" + "js-base64": "^2.1.8", + "source-map": "^0.4.2" }, "dependencies": { "source-map": { @@ -10015,7 +9978,7 @@ "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=", "dev": true, "requires": { - "amdefine": "1.0.1" + "amdefine": ">=0.0.4" } } } @@ -10026,10 +9989,10 @@ "integrity": "sha512-WH7Aldse+2P5bbFBO4Gle/nuQOdVwpHMTL6raL3uuBj/vPG07k6uzt3aiahu352ONBr5xXh0hDlM3LhtXPOC4Q==", "dev": true, "requires": { - "jszip": "3.1.5", - "rimraf": "2.6.2", + "jszip": "^3.1.3", + "rimraf": "^2.5.4", "tmp": "0.0.30", - "xml2js": "0.4.19" + "xml2js": "^0.4.17" }, "dependencies": { "tmp": { @@ -10038,16 +10001,15 @@ "integrity": "sha1-ckGdSovn1s51FI/YsyTlk6cRwu0=", "dev": true, "requires": { - "os-tmpdir": "1.0.2" + "os-tmpdir": "~1.0.1" } } } }, "semver": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.5.0.tgz", - "integrity": "sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA==", - "dev": true + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-2.3.2.tgz", + "integrity": "sha1-uYSPJdbPNjMwc+ye+IVtQvEjPlI=" }, "semver-diff": { "version": "2.1.0", @@ -10055,7 +10017,15 @@ "integrity": "sha1-S7uEN8jTfksM8aaP1ybsbWRdbTY=", "dev": true, "requires": { - "semver": "5.5.0" + "semver": "^5.0.3" + }, + "dependencies": { + "semver": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.5.0.tgz", + "integrity": "sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA==", + "dev": true + } } }, "set-blocking": { @@ -10074,21 +10044,19 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.0.tgz", "integrity": "sha512-hw0yxk9GT/Hr5yJEYnHNKYXkIA8mVJgd9ditYZCe16ZczcaELYYcfvaXesNACk2O8O0nTiPQcQhGUQj8JLzeeg==", - "dev": true, "requires": { - "extend-shallow": "2.0.1", - "is-extendable": "0.1.1", - "is-plain-object": "2.0.4", - "split-string": "3.1.0" + "extend-shallow": "^2.0.1", + "is-extendable": "^0.1.1", + "is-plain-object": "^2.0.3", + "split-string": "^3.0.1" }, "dependencies": { "extend-shallow": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "dev": true, "requires": { - "is-extendable": "0.1.1" + "is-extendable": "^0.1.0" } } } @@ -10099,8 +10067,8 @@ "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==", "dev": true, "requires": { - "inherits": "2.0.3", - "safe-buffer": "5.1.1" + "inherits": "^2.0.1", + "safe-buffer": "^5.0.1" } }, "shebang-command": { @@ -10109,7 +10077,7 @@ "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=", "dev": true, "requires": { - "shebang-regex": "1.0.0" + "shebang-regex": "^1.0.0" } }, "shebang-regex": { @@ -10152,34 +10120,31 @@ "version": "0.8.2", "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz", "integrity": "sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==", - "dev": true, "requires": { - "base": "0.11.2", - "debug": "2.6.9", - "define-property": "0.2.5", - "extend-shallow": "2.0.1", - "map-cache": "0.2.2", - "source-map": "0.5.7", - "source-map-resolve": "0.5.1", - "use": "3.1.0" + "base": "^0.11.1", + "debug": "^2.2.0", + "define-property": "^0.2.5", + "extend-shallow": "^2.0.1", + "map-cache": "^0.2.2", + "source-map": "^0.5.6", + "source-map-resolve": "^0.5.0", + "use": "^3.1.0" }, "dependencies": { "define-property": { "version": "0.2.5", "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz", "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=", - "dev": true, "requires": { - "is-descriptor": "0.1.6" + "is-descriptor": "^0.1.0" } }, "extend-shallow": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "dev": true, "requires": { - "is-extendable": "0.1.1" + "is-extendable": "^0.1.0" } } } @@ -10188,49 +10153,44 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/snapdragon-node/-/snapdragon-node-2.1.1.tgz", "integrity": "sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==", - "dev": true, "requires": { - "define-property": "1.0.0", - "isobject": "3.0.1", - "snapdragon-util": "3.0.1" + "define-property": "^1.0.0", + "isobject": "^3.0.0", + "snapdragon-util": "^3.0.1" }, "dependencies": { "define-property": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz", "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=", - "dev": true, "requires": { - "is-descriptor": "1.0.2" + "is-descriptor": "^1.0.0" } }, "is-accessor-descriptor": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz", "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==", - "dev": true, "requires": { - "kind-of": "6.0.2" + "kind-of": "^6.0.0" } }, "is-data-descriptor": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz", "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==", - "dev": true, "requires": { - "kind-of": "6.0.2" + "kind-of": "^6.0.0" } }, "is-descriptor": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz", "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==", - "dev": true, "requires": { - "is-accessor-descriptor": "1.0.0", - "is-data-descriptor": "1.0.0", - "kind-of": "6.0.2" + "is-accessor-descriptor": "^1.0.0", + "is-data-descriptor": "^1.0.0", + "kind-of": "^6.0.2" } } } @@ -10239,48 +10199,52 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/snapdragon-util/-/snapdragon-util-3.0.1.tgz", "integrity": "sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==", - "dev": true, "requires": { - "kind-of": "3.2.2" + "kind-of": "^3.2.0" }, "dependencies": { "kind-of": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", - "dev": true, "requires": { - "is-buffer": "1.1.6" + "is-buffer": "^1.1.5" } } } }, "sntp": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/sntp/-/sntp-2.1.0.tgz", - "integrity": "sha512-FL1b58BDrqS3A11lJ0zEdnJ3UOKqVxawAkF3k7F0CVN7VQ34aZrV+G8BZ1WC9ZL7NyrwsW0oviwsWDgRuVYtJg==", + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz", + "integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=", "dev": true, "requires": { - "hoek": "4.2.1" + "hoek": "2.x.x" + }, + "dependencies": { + "hoek": { + "version": "2.16.3", + "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz", + "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=", + "dev": true + } } }, "source-map": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", - "dev": true + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=" }, "source-map-resolve": { - "version": "0.5.1", - "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.1.tgz", - "integrity": "sha512-0KW2wvzfxm8NCTb30z0LMNyPqWCdDGE2viwzUaucqJdkTRXtZiSY3I+2A6nVAjmdOy0I4gU8DwnVVGsk9jvP2A==", - "dev": true, + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.2.tgz", + "integrity": "sha512-MjqsvNwyz1s0k81Goz/9vRBe9SZdB09Bdw+/zYyO+3CuPk6fouTaxscHkgtE8jKvf01kVfl8riHzERQ/kefaSA==", "requires": { - "atob": "2.1.0", - "decode-uri-component": "0.2.0", - "resolve-url": "0.2.1", - "source-map-url": "0.4.0", - "urix": "0.1.0" + "atob": "^2.1.1", + "decode-uri-component": "^0.2.0", + "resolve-url": "^0.2.1", + "source-map-url": "^0.4.0", + "urix": "^0.1.0" } }, "source-map-support": { @@ -10289,46 +10253,41 @@ "integrity": "sha512-try0/JqxPLF9nOjvSta7tVondkP5dwgyLDjVoyMDlmjugT2lRZ1OfsrYTkCd2hkDnJTKRbO/Rl3orm8vlsUzbA==", "dev": true, "requires": { - "source-map": "0.5.7" + "source-map": "^0.5.6" } }, "source-map-url": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz", - "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=", - "dev": true + "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=" }, "spdx-correct": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.0.0.tgz", "integrity": "sha512-N19o9z5cEyc8yQQPukRCZ9EUmb4HUpnrmaL/fxS2pBo2jbfcFRVuFZ/oFC+vZz0MNNk0h80iMn5/S6qGZOL5+g==", - "dev": true, "requires": { - "spdx-expression-parse": "3.0.0", - "spdx-license-ids": "3.0.0" + "spdx-expression-parse": "^3.0.0", + "spdx-license-ids": "^3.0.0" } }, "spdx-exceptions": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.1.0.tgz", - "integrity": "sha512-4K1NsmrlCU1JJgUrtgEeTVyfx8VaYea9J9LvARxhbHtVtohPs/gFGG5yy49beySjlIMhhXZ4QqujIZEfS4l6Cg==", - "dev": true + "integrity": "sha512-4K1NsmrlCU1JJgUrtgEeTVyfx8VaYea9J9LvARxhbHtVtohPs/gFGG5yy49beySjlIMhhXZ4QqujIZEfS4l6Cg==" }, "spdx-expression-parse": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz", "integrity": "sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==", - "dev": true, "requires": { - "spdx-exceptions": "2.1.0", - "spdx-license-ids": "3.0.0" + "spdx-exceptions": "^2.1.0", + "spdx-license-ids": "^3.0.0" } }, "spdx-license-ids": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.0.tgz", - "integrity": "sha512-2+EPwgbnmOIl8HjGBXXMd9NAu02vLjOO1nWw4kmeRDFyHn+M/ETfHxQUK0oXg8ctgVnl9t3rosNVsZ1jG61nDA==", - "dev": true + "integrity": "sha512-2+EPwgbnmOIl8HjGBXXMd9NAu02vLjOO1nWw4kmeRDFyHn+M/ETfHxQUK0oXg8ctgVnl9t3rosNVsZ1jG61nDA==" }, "split": { "version": "1.0.1", @@ -10336,16 +10295,15 @@ "integrity": "sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==", "dev": true, "requires": { - "through": "2.3.8" + "through": "2" } }, "split-string": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz", "integrity": "sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==", - "dev": true, "requires": { - "extend-shallow": "3.0.2" + "extend-shallow": "^3.0.0" } }, "sprintf-js": { @@ -10355,19 +10313,20 @@ "dev": true }, "sshpk": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.14.1.tgz", - "integrity": "sha1-Ew9Zde3a2WPx1W+SuaxsUfqfg+s=", + "version": "1.14.2", + "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.14.2.tgz", + "integrity": "sha1-xvxhZIo9nE52T9P8306hBeSSupg=", "dev": true, "requires": { - "asn1": "0.2.3", - "assert-plus": "1.0.0", - "bcrypt-pbkdf": "1.0.1", - "dashdash": "1.14.1", - "ecc-jsbn": "0.1.1", - "getpass": "0.1.7", - "jsbn": "0.1.1", - "tweetnacl": "0.14.5" + "asn1": "~0.2.3", + "assert-plus": "^1.0.0", + "bcrypt-pbkdf": "^1.0.0", + "dashdash": "^1.12.0", + "ecc-jsbn": "~0.1.1", + "getpass": "^0.1.1", + "jsbn": "~0.1.0", + "safer-buffer": "^2.0.2", + "tweetnacl": "~0.14.0" } }, "stack-utils": { @@ -10380,19 +10339,17 @@ "version": "0.1.2", "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz", "integrity": "sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=", - "dev": true, "requires": { - "define-property": "0.2.5", - "object-copy": "0.1.0" + "define-property": "^0.2.5", + "object-copy": "^0.1.0" }, "dependencies": { "define-property": { "version": "0.2.5", "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz", "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=", - "dev": true, "requires": { - "is-descriptor": "0.1.6" + "is-descriptor": "^0.1.0" } } } @@ -10403,7 +10360,7 @@ "integrity": "sha1-osfIWH5U2UJ+qe2zrD8s1SLfN4s=", "dev": true, "requires": { - "readable-stream": "2.3.6" + "readable-stream": "^2.0.1" } }, "stealthy-require": { @@ -10418,7 +10375,7 @@ "integrity": "sha1-WdbqOT2HwsDdrBCqDVYbxrpvDhA=", "dev": true, "requires": { - "any-observable": "0.2.0" + "any-observable": "^0.2.0" } }, "string-length": { @@ -10427,8 +10384,8 @@ "integrity": "sha1-1A27aGo6zpYMHP/KVivyxF+DY+0=", "dev": true, "requires": { - "astral-regex": "1.0.0", - "strip-ansi": "4.0.0" + "astral-regex": "^1.0.0", + "strip-ansi": "^4.0.0" }, "dependencies": { "ansi-regex": { @@ -10443,7 +10400,7 @@ "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", "dev": true, "requires": { - "ansi-regex": "3.0.0" + "ansi-regex": "^3.0.0" } } } @@ -10466,9 +10423,9 @@ "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, "requires": { - "code-point-at": "1.1.0", - "is-fullwidth-code-point": "1.0.0", - "strip-ansi": "3.0.1" + "code-point-at": "^1.0.0", + "is-fullwidth-code-point": "^1.0.0", + "strip-ansi": "^3.0.0" } }, "string_decoder": { @@ -10477,31 +10434,29 @@ "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", "dev": true, "requires": { - "safe-buffer": "5.1.1" + "safe-buffer": "~5.1.0" } }, "stringstream": { - "version": "0.0.5", - "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz", - "integrity": "sha1-TkhM1N5aC7vuGORjB3EKioFiGHg=", + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.6.tgz", + "integrity": "sha512-87GEBAkegbBcweToUrdzf3eLhWNg06FJTebl4BVJz/JgWy8CvEr9dRtX5qWphiynMSQlxxi+QqN0z5T32SLlhA==", "dev": true }, "strip-ansi": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", - "dev": true, "requires": { - "ansi-regex": "2.1.1" + "ansi-regex": "^2.0.0" } }, "strip-bom": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz", "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=", - "dev": true, "requires": { - "is-utf8": "0.2.1" + "is-utf8": "^0.2.0" } }, "strip-eof": { @@ -10516,7 +10471,7 @@ "integrity": "sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=", "dev": true, "requires": { - "get-stdin": "4.0.1" + "get-stdin": "^4.0.1" } }, "strip-json-comments": { @@ -10531,7 +10486,7 @@ "integrity": "sha512-0aP01LLIskjKs3lq52EC0aGBAJhLq7B2Rd8HC/DR/PtNNpcLilNmHC12O+hu0usQpo7wtHNRqtrhBwtDb0+dNg==", "dev": true, "requires": { - "has-flag": "3.0.0" + "has-flag": "^3.0.0" } }, "supports-hyperlinks": { @@ -10540,8 +10495,8 @@ "integrity": "sha512-HHi5kVSefKaJkGYXbDuKbUGRVxqnWGn3J2e39CYcNJEfWciGq2zYtOhXLTlvrOZW1QU7VX67w7fMmWafHX9Pfw==", "dev": true, "requires": { - "has-flag": "2.0.0", - "supports-color": "5.3.0" + "has-flag": "^2.0.0", + "supports-color": "^5.0.0" }, "dependencies": { "has-flag": { @@ -10549,13 +10504,30 @@ "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz", "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=", "dev": true + }, + "supports-color": { + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz", + "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + }, + "dependencies": { + "has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", + "dev": true + } + } } } }, "symbol-observable": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.1.tgz", - "integrity": "sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ=", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz", + "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==", "dev": true }, "symbol-tree": { @@ -10570,12 +10542,12 @@ "integrity": "sha1-K7xULw/amGGnVdOUf+/Ys/UThV8=", "dev": true, "requires": { - "ajv": "4.11.8", - "ajv-keywords": "1.5.1", - "chalk": "1.1.3", - "lodash": "4.17.5", + "ajv": "^4.7.0", + "ajv-keywords": "^1.0.0", + "chalk": "^1.1.1", + "lodash": "^4.0.0", "slice-ansi": "0.0.4", - "string-width": "2.1.1" + "string-width": "^2.0.0" }, "dependencies": { "ajv": { @@ -10584,15 +10556,14 @@ "integrity": "sha1-gv+wKynmYq5TvcIK8VlHcGc5xTY=", "dev": true, "requires": { - "co": "4.6.0", - "json-stable-stringify": "1.0.1" + "co": "^4.6.0", + "json-stable-stringify": "^1.0.1" } }, "ansi-regex": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", - "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=", - "dev": true + "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=" }, "ansi-styles": { "version": "2.2.1", @@ -10606,11 +10577,28 @@ "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { - "ansi-styles": "2.2.1", - "escape-string-regexp": "1.0.5", - "has-ansi": "2.0.0", - "strip-ansi": "3.0.1", - "supports-color": "2.0.0" + "ansi-styles": "^2.2.1", + "escape-string-regexp": "^1.0.2", + "has-ansi": "^2.0.0", + "strip-ansi": "^3.0.0", + "supports-color": "^2.0.0" + }, + "dependencies": { + "ansi-regex": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", + "dev": true + }, + "strip-ansi": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", + "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", + "dev": true, + "requires": { + "ansi-regex": "^2.0.0" + } + } } }, "is-fullwidth-code-point": { @@ -10625,8 +10613,8 @@ "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==", "dev": true, "requires": { - "is-fullwidth-code-point": "2.0.0", - "strip-ansi": "4.0.0" + "is-fullwidth-code-point": "^2.0.0", + "strip-ansi": "^4.0.0" }, "dependencies": { "strip-ansi": { @@ -10635,11 +10623,19 @@ "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", "dev": true, "requires": { - "ansi-regex": "3.0.0" + "ansi-regex": "^3.0.0" } } } }, + "strip-ansi": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", + "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", + "requires": { + "ansi-regex": "^3.0.0" + } + }, "supports-color": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", @@ -10654,9 +10650,9 @@ "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=", "dev": true, "requires": { - "block-stream": "0.0.9", - "fstream": "1.0.11", - "inherits": "2.0.3" + "block-stream": "*", + "fstream": "^1.0.2", + "inherits": "2" } }, "term-size": { @@ -10665,7 +10661,7 @@ "integrity": "sha1-RYuDiH8oj8Vtb/+/rSYuJmOO+mk=", "dev": true, "requires": { - "execa": "0.7.0" + "execa": "^0.7.0" }, "dependencies": { "cross-spawn": { @@ -10674,9 +10670,9 @@ "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=", "dev": true, "requires": { - "lru-cache": "4.1.2", - "shebang-command": "1.2.0", - "which": "1.3.0" + "lru-cache": "^4.0.1", + "shebang-command": "^1.2.0", + "which": "^1.2.9" } }, "execa": { @@ -10685,13 +10681,13 @@ "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=", "dev": true, "requires": { - "cross-spawn": "5.1.0", - "get-stream": "3.0.0", - "is-stream": "1.1.0", - "npm-run-path": "2.0.2", - "p-finally": "1.0.0", - "signal-exit": "3.0.2", - "strip-eof": "1.0.0" + "cross-spawn": "^5.0.1", + "get-stream": "^3.0.0", + "is-stream": "^1.1.0", + "npm-run-path": "^2.0.0", + "p-finally": "^1.0.0", + "signal-exit": "^3.0.0", + "strip-eof": "^1.0.0" } } } @@ -10700,13 +10696,12 @@ "version": "4.2.1", "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-4.2.1.tgz", "integrity": "sha512-qpqlP/8Zl+sosLxBcVKl9vYy26T9NPalxSzzCP/OY6K7j938ui2oKgo+kRZYfxAeIpLqpbVnsHq1tyV70E4lWQ==", - "dev": true, "requires": { - "arrify": "1.0.1", - "micromatch": "3.1.10", - "object-assign": "4.1.1", - "read-pkg-up": "1.0.1", - "require-main-filename": "1.0.1" + "arrify": "^1.0.1", + "micromatch": "^3.1.8", + "object-assign": "^4.1.0", + "read-pkg-up": "^1.0.1", + "require-main-filename": "^1.0.1" } }, "text-table": { @@ -10739,12 +10734,12 @@ "integrity": "sha512-44yhA3tsaRoMOjQQ+5v5mVdqef+kH6Qze9jTpqtVufgYjYt08zyZAwNwwVBj3i1rJMnR52IxOW0LK0vBzgAkuA==", "dev": true, "requires": { - "body": "5.1.0", - "debug": "3.1.0", - "faye-websocket": "0.10.0", - "livereload-js": "2.3.0", - "object-assign": "4.1.1", - "qs": "6.5.1" + "body": "^5.1.0", + "debug": "^3.1.0", + "faye-websocket": "~0.10.0", + "livereload-js": "^2.3.0", + "object-assign": "^4.1.0", + "qs": "^6.4.0" }, "dependencies": { "debug": { @@ -10764,7 +10759,7 @@ "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==", "dev": true, "requires": { - "os-tmpdir": "1.0.2" + "os-tmpdir": "~1.0.2" } }, "tmpl": { @@ -10776,25 +10771,22 @@ "to-fast-properties": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-1.0.3.tgz", - "integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=", - "dev": true + "integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=" }, "to-object-path": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz", "integrity": "sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=", - "dev": true, "requires": { - "kind-of": "3.2.2" + "kind-of": "^3.0.2" }, "dependencies": { "kind-of": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", - "dev": true, "requires": { - "is-buffer": "1.1.6" + "is-buffer": "^1.1.5" } } } @@ -10803,22 +10795,20 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/to-regex/-/to-regex-3.0.2.tgz", "integrity": "sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==", - "dev": true, "requires": { - "define-property": "2.0.2", - "extend-shallow": "3.0.2", - "regex-not": "1.0.2", - "safe-regex": "1.1.0" + "define-property": "^2.0.2", + "extend-shallow": "^3.0.2", + "regex-not": "^1.0.2", + "safe-regex": "^1.1.0" } }, "to-regex-range": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz", "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=", - "dev": true, "requires": { - "is-number": "3.0.0", - "repeat-string": "1.6.1" + "is-number": "^3.0.0", + "repeat-string": "^1.6.1" } }, "topo": { @@ -10827,16 +10817,17 @@ "integrity": "sha1-zVYVdSU5BXwNwEkaYhw7xvvh0YI=", "dev": true, "requires": { - "hoek": "4.2.1" + "hoek": "4.x.x" } }, "tough-cookie": { - "version": "2.3.4", - "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.4.tgz", - "integrity": "sha512-TZ6TTfI5NtZnuyy/Kecv+CnoROnyXn2DN97LontgQpCwsX2XyLYCC0ENhYkehSOwAp8rTQKc/NUIF7BkQ5rKLA==", + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.2.tgz", + "integrity": "sha512-vahm+X8lSV/KjXziec8x5Vp0OTC9mq8EVCOApIsRAooeuMPSO8aT7PFACYkaL0yZ/3hVqw+8DzhCJwl8H2Ad6w==", "dev": true, "requires": { - "punycode": "1.4.1" + "psl": "^1.1.24", + "punycode": "^1.4.1" } }, "tr46": { @@ -10845,13 +10836,13 @@ "integrity": "sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=", "dev": true, "requires": { - "punycode": "2.1.0" + "punycode": "^2.1.0" }, "dependencies": { "punycode": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.0.tgz", - "integrity": "sha1-X4Y+3Im5bbCQdLrXlHvwkFbKTn0=", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz", + "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==", "dev": true } } @@ -10865,8 +10856,7 @@ "trim-right": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz", - "integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=", - "dev": true + "integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=" }, "true-case-path": { "version": "1.0.2", @@ -10874,7 +10864,7 @@ "integrity": "sha1-fskRMJJHZsf1c74wIMNPj9/QDWI=", "dev": true, "requires": { - "glob": "6.0.4" + "glob": "^6.0.4" }, "dependencies": { "glob": { @@ -10883,19 +10873,19 @@ "integrity": "sha1-DwiGD2oVUSey+t1PnOJLGqtuTSI=", "dev": true, "requires": { - "inflight": "1.0.6", - "inherits": "2.0.3", - "minimatch": "3.0.4", - "once": "1.4.0", - "path-is-absolute": "1.0.1" + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "2 || 3", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" } } } }, "tslib": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.0.tgz", - "integrity": "sha512-f/qGG2tUkrISBlQZEjEqoZ3B2+npJjIf04H1wuAv9iA8i04Icp+61KRXxFdha22670NJopsZCIjhC3SnjPRKrQ==", + "version": "1.9.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.2.tgz", + "integrity": "sha512-AVP5Xol3WivEr7hnssHDsaM+lVrVXWUvd1cfXTRkTj80b//6g2wIFEH6hZG0muGZRnHGrfttpdzRk3YlBkWjKw==", "dev": true }, "tslint": { @@ -10904,25 +10894,60 @@ "integrity": "sha1-EeJrzLiK+gLdDZlWyuPUVAtfVMM=", "dev": true, "requires": { - "babel-code-frame": "6.26.0", - "builtin-modules": "1.1.1", - "chalk": "2.3.2", - "commander": "2.13.0", - "diff": "3.5.0", - "glob": "7.1.2", - "js-yaml": "3.11.0", - "minimatch": "3.0.4", - "resolve": "1.7.0", - "semver": "5.5.0", - "tslib": "1.9.0", - "tsutils": "2.26.2" + "babel-code-frame": "^6.22.0", + "builtin-modules": "^1.1.1", + "chalk": "^2.3.0", + "commander": "^2.12.1", + "diff": "^3.2.0", + "glob": "^7.1.1", + "js-yaml": "^3.7.0", + "minimatch": "^3.0.4", + "resolve": "^1.3.2", + "semver": "^5.3.0", + "tslib": "^1.8.0", + "tsutils": "^2.12.1" }, "dependencies": { + "ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "requires": { + "color-convert": "^1.9.0" + } + }, "builtin-modules": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz", "integrity": "sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=", "dev": true + }, + "chalk": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", + "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + }, + "semver": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.5.0.tgz", + "integrity": "sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA==", + "dev": true + }, + "supports-color": { + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz", + "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } } } }, @@ -10932,9 +10957,9 @@ "integrity": "sha1-fDDniC8mvCdr/5HSOEl1xp2viLo=", "dev": true, "requires": { - "doctrine": "0.7.2", - "tslib": "1.9.0", - "tsutils": "1.9.1" + "doctrine": "^0.7.2", + "tslib": "^1.0.0", + "tsutils": "^1.4.0" }, "dependencies": { "doctrine": { @@ -10943,7 +10968,7 @@ "integrity": "sha1-fLhgNZujvpDgQLJrcpzkv6ZUxSM=", "dev": true, "requires": { - "esutils": "1.1.6", + "esutils": "^1.1.6", "isarray": "0.0.1" } }, @@ -10973,16 +10998,16 @@ "integrity": "sha512-phpdO9Gd0Qfi+BpIUGiYC1cx1Jev8J8/lmQp6Gp38HHfnnWxNqbMLoR5WqtqSejFcojPI3e5YFzngYdAtd+1sg==", "dev": true, "requires": { - "tslint-eslint-rules": "4.1.1" + "tslint-eslint-rules": "^4.1.1" } }, "tsutils": { - "version": "2.26.2", - "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.26.2.tgz", - "integrity": "sha512-uzwnhmrSbyinPCiwfzGsOY3IulBTwoky7r83HmZdz9QNCjhSCzavkh47KLWuU0zF2F2WbpmmzoJUIEiYyd+jEQ==", + "version": "2.27.1", + "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.27.1.tgz", + "integrity": "sha512-AE/7uzp32MmaHvNNFES85hhUDHFdFZp6OAiZcd6y4ZKKIg6orJTm8keYWBhIhrJQH3a4LzNKat7ZPXZt5aTf6w==", "dev": true, "requires": { - "tslib": "1.9.0" + "tslib": "^1.8.1" } }, "tunnel-agent": { @@ -10991,7 +11016,7 @@ "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=", "dev": true, "requires": { - "safe-buffer": "5.1.1" + "safe-buffer": "^5.0.1" } }, "tweetnacl": { @@ -11007,7 +11032,7 @@ "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=", "dev": true, "requires": { - "prelude-ls": "1.1.2" + "prelude-ls": "~1.1.2" } }, "type-detect": { @@ -11040,10 +11065,16 @@ "integrity": "sha512-r+MU0rfv4L/0eeW3xZrd16t4NZfK8Ld4SWVglYBb7ez5uXFWHuVRs6xCTrf1yirs9a4j4Y27nn7SRfO6v67XsQ==", "dev": true, "requires": { - "commander": "2.13.0", - "source-map": "0.6.1" + "commander": "~2.13.0", + "source-map": "~0.6.1" }, "dependencies": { + "commander": { + "version": "2.13.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.13.0.tgz", + "integrity": "sha512-MVuS359B+YzaWqjCL/c+22gfryv+mCBPHAv3zyVI2GN8EY6IRP8VwtasXn8jyyhvvq84R4ImN1OKRtcbIasjYA==", + "dev": true + }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -11063,33 +11094,30 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.0.tgz", "integrity": "sha1-XHHDTLW61dzr4+oM0IIHulqhrqQ=", - "dev": true, "requires": { - "arr-union": "3.1.0", - "get-value": "2.0.6", - "is-extendable": "0.1.1", - "set-value": "0.4.3" + "arr-union": "^3.1.0", + "get-value": "^2.0.6", + "is-extendable": "^0.1.1", + "set-value": "^0.4.3" }, "dependencies": { "extend-shallow": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "dev": true, "requires": { - "is-extendable": "0.1.1" + "is-extendable": "^0.1.0" } }, "set-value": { "version": "0.4.3", "resolved": "https://registry.npmjs.org/set-value/-/set-value-0.4.3.tgz", "integrity": "sha1-fbCPnT0i3H945Trzw79GZuzfzPE=", - "dev": true, "requires": { - "extend-shallow": "2.0.1", - "is-extendable": "0.1.1", - "is-plain-object": "2.0.4", - "to-object-path": "0.3.0" + "extend-shallow": "^2.0.1", + "is-extendable": "^0.1.1", + "is-plain-object": "^2.0.1", + "to-object-path": "^0.3.0" } } } @@ -11100,7 +11128,7 @@ "integrity": "sha1-nhBXzKhRq7kzmPizOuGHuZyuwRo=", "dev": true, "requires": { - "crypto-random-string": "1.0.0" + "crypto-random-string": "^1.0.0" } }, "universalify": { @@ -11113,28 +11141,25 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz", "integrity": "sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=", - "dev": true, "requires": { - "has-value": "0.3.1", - "isobject": "3.0.1" + "has-value": "^0.3.1", + "isobject": "^3.0.0" }, "dependencies": { "has-value": { "version": "0.3.1", "resolved": "https://registry.npmjs.org/has-value/-/has-value-0.3.1.tgz", "integrity": "sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=", - "dev": true, "requires": { - "get-value": "2.0.6", - "has-values": "0.1.4", - "isobject": "2.1.0" + "get-value": "^2.0.3", + "has-values": "^0.1.4", + "isobject": "^2.0.0" }, "dependencies": { "isobject": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz", "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=", - "dev": true, "requires": { "isarray": "1.0.0" } @@ -11144,8 +11169,7 @@ "has-values": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/has-values/-/has-values-0.1.4.tgz", - "integrity": "sha1-bWHeldkd/Km5oCCJrThL/49it3E=", - "dev": true + "integrity": "sha1-bWHeldkd/Km5oCCJrThL/49it3E=" } } }, @@ -11167,23 +11191,35 @@ "integrity": "sha1-+bTHAPv9TsEsgRWHJYd31WPYyGY=", "dev": true, "requires": { - "boxen": "1.3.0", - "chalk": "2.3.2", - "configstore": "3.1.2", - "import-lazy": "2.1.0", - "is-ci": "1.1.0", - "is-installed-globally": "0.1.0", - "is-npm": "1.0.0", - "latest-version": "3.1.0", - "semver-diff": "2.1.0", - "xdg-basedir": "3.0.0" + "boxen": "^1.2.1", + "chalk": "^2.0.1", + "configstore": "^3.0.0", + "import-lazy": "^2.1.0", + "is-ci": "^1.0.10", + "is-installed-globally": "^0.1.0", + "is-npm": "^1.0.0", + "latest-version": "^3.0.0", + "semver-diff": "^2.0.0", + "xdg-basedir": "^3.0.0" + }, + "dependencies": { + "chalk": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", + "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + } } }, "urix": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz", - "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=", - "dev": true + "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=" }, "url-join": { "version": "2.0.5", @@ -11197,16 +11233,15 @@ "integrity": "sha1-evjzA2Rem9eaJy56FKxovAYJ2nM=", "dev": true, "requires": { - "prepend-http": "1.0.4" + "prepend-http": "^1.0.1" } }, "use": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/use/-/use-3.1.0.tgz", "integrity": "sha512-6UJEQM/L+mzC3ZJNM56Q4DFGLX/evKGRg15UJHGB9X5j5Z3AFbgZvjUh2yq/UJUY4U5dh7Fal++XbNg1uzpRAw==", - "dev": true, "requires": { - "kind-of": "6.0.2" + "kind-of": "^6.0.2" } }, "user-home": { @@ -11215,24 +11250,16 @@ "integrity": "sha1-nHC/2Babwdy/SGBODwS4tJzenp8=", "dev": true, "requires": { - "os-homedir": "1.0.2" + "os-homedir": "^1.0.0" } }, "util": { - "version": "0.10.3", - "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz", - "integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=", + "version": "0.10.4", + "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz", + "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==", "dev": true, "requires": { - "inherits": "2.0.1" - }, - "dependencies": { - "inherits": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz", - "integrity": "sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE=", - "dev": true - } + "inherits": "2.0.3" } }, "util-deprecate": { @@ -11247,8 +11274,8 @@ "integrity": "sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==", "dev": true, "requires": { - "define-properties": "1.1.2", - "object.getownpropertydescriptors": "2.0.3" + "define-properties": "^1.1.2", + "object.getownpropertydescriptors": "^2.0.3" } }, "uuid": { @@ -11261,10 +11288,9 @@ "version": "3.0.3", "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.3.tgz", "integrity": "sha512-63ZOUnL4SIXj4L0NixR3L1lcjO38crAbgrTpl28t8jjrfuiOBL5Iygm+60qPs/KsZGzPNg6Smnc/oY16QTjF0g==", - "dev": true, "requires": { - "spdx-correct": "3.0.0", - "spdx-expression-parse": "3.0.0" + "spdx-correct": "^3.0.0", + "spdx-expression-parse": "^3.0.0" } }, "verror": { @@ -11273,9 +11299,9 @@ "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=", "dev": true, "requires": { - "assert-plus": "1.0.0", + "assert-plus": "^1.0.0", "core-util-is": "1.0.2", - "extsprintf": "1.3.0" + "extsprintf": "^1.2.0" } }, "vlq": { @@ -11290,7 +11316,7 @@ "integrity": "sha1-L3+bj9ENZ3JisYqITijRlhjgKPs=", "dev": true, "requires": { - "makeerror": "1.0.11" + "makeerror": "1.0.x" } }, "watch": { @@ -11299,8 +11325,8 @@ "integrity": "sha1-KAlUdsbffJDJYxOJkMClQj60uYY=", "dev": true, "requires": { - "exec-sh": "0.2.1", - "minimist": "1.2.0" + "exec-sh": "^0.2.0", + "minimist": "^1.2.0" } }, "webidl-conversions": { @@ -11315,8 +11341,8 @@ "integrity": "sha1-DK+dLXVdk67gSdS90NP+LMoqJOs=", "dev": true, "requires": { - "http-parser-js": "0.4.13", - "websocket-extensions": "0.1.3" + "http-parser-js": ">=0.4.0", + "websocket-extensions": ">=0.1.1" } }, "websocket-extensions": { @@ -11335,23 +11361,23 @@ } }, "whatwg-url": { - "version": "6.4.0", - "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-6.4.0.tgz", - "integrity": "sha512-Z0CVh/YE217Foyb488eo+iBv+r7eAQ0wSTyApi9n06jhcA3z6Nidg/EGvl0UFkg7kMdKxfBzzr+o9JF+cevgMg==", + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-6.5.0.tgz", + "integrity": "sha512-rhRZRqx/TLJQWUpQ6bmrt2UV4f0HCQ463yQuONJqC6fO2VoEb1pTYddbe59SkYq87aoM5A3bdhMZiUiVws+fzQ==", "dev": true, "requires": { - "lodash.sortby": "4.7.0", - "tr46": "1.0.1", - "webidl-conversions": "4.0.2" + "lodash.sortby": "^4.7.0", + "tr46": "^1.0.1", + "webidl-conversions": "^4.0.2" } }, "which": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/which/-/which-1.3.0.tgz", - "integrity": "sha512-xcJpopdamTuY5duC/KnTTNBraPK54YwpenP4lzxU8H91GudWpFv38u0CKjclE1Wi2EH2EDz5LRcHcKbCIzqGyg==", + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", + "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", "dev": true, "requires": { - "isexe": "2.0.0" + "isexe": "^2.0.0" } }, "which-module": { @@ -11366,7 +11392,7 @@ "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==", "dev": true, "requires": { - "string-width": "1.0.2" + "string-width": "^1.0.2 || 2" } }, "widest-line": { @@ -11375,7 +11401,7 @@ "integrity": "sha1-AUKk6KJD+IgsAjOqDgKBqnYVInM=", "dev": true, "requires": { - "string-width": "2.1.1" + "string-width": "^2.1.1" }, "dependencies": { "ansi-regex": { @@ -11396,8 +11422,8 @@ "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==", "dev": true, "requires": { - "is-fullwidth-code-point": "2.0.0", - "strip-ansi": "4.0.0" + "is-fullwidth-code-point": "^2.0.0", + "strip-ansi": "^4.0.0" } }, "strip-ansi": { @@ -11406,7 +11432,7 @@ "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", "dev": true, "requires": { - "ansi-regex": "3.0.0" + "ansi-regex": "^3.0.0" } } } @@ -11430,7 +11456,7 @@ "integrity": "sha512-BYg8Qb90apOAVOj8fR5IpWRoykTTv2eX61lV20UOYSZNkjyoZlyTMzAlW6eHmoUm4NaBVsuYwQL9EUH2ModpYQ==", "dev": true, "requires": { - "workbox-core": "3.3.1" + "workbox-core": "^3.3.1" } }, "workbox-broadcast-cache-update": { @@ -11439,7 +11465,7 @@ "integrity": "sha512-4n7+2wSK+fOzDPcpehHTHvBh6VlgQkHPxcy/JtqK9WbMYnl6PND6At9vCJH1WdZB6z3L3WebGZM5rlpyl3uWVg==", "dev": true, "requires": { - "workbox-core": "3.3.1" + "workbox-core": "^3.3.1" } }, "workbox-build": { @@ -11448,25 +11474,25 @@ "integrity": "sha512-Ttz4my45+pyaw3YUTIFB1PgJmTpvRTIs6EDna0HUYpP2H/Tcn9Z2gi7wkaApWG5qOrcp+Y+l2NqYBcrCKQ55Gg==", "dev": true, "requires": { - "babel-runtime": "6.26.0", - "common-tags": "1.8.0", - "fs-extra": "4.0.3", - "glob": "7.1.2", - "joi": "11.4.0", - "lodash.template": "4.4.0", - "pretty-bytes": "4.0.2", - "workbox-background-sync": "3.3.1", - "workbox-broadcast-cache-update": "3.3.1", - "workbox-cache-expiration": "3.3.1", - "workbox-cacheable-response": "3.3.1", - "workbox-core": "3.3.1", - "workbox-google-analytics": "3.3.1", - "workbox-precaching": "3.3.1", - "workbox-range-requests": "3.3.1", - "workbox-routing": "3.3.1", - "workbox-strategies": "3.3.1", - "workbox-streams": "3.3.1", - "workbox-sw": "3.3.1" + "babel-runtime": "^6.26.0", + "common-tags": "^1.4.0", + "fs-extra": "^4.0.2", + "glob": "^7.1.2", + "joi": "^11.1.1", + "lodash.template": "^4.4.0", + "pretty-bytes": "^4.0.2", + "workbox-background-sync": "^3.3.1", + "workbox-broadcast-cache-update": "^3.3.1", + "workbox-cache-expiration": "^3.3.1", + "workbox-cacheable-response": "^3.3.1", + "workbox-core": "^3.3.1", + "workbox-google-analytics": "^3.3.1", + "workbox-precaching": "^3.3.1", + "workbox-range-requests": "^3.3.1", + "workbox-routing": "^3.3.1", + "workbox-strategies": "^3.3.1", + "workbox-streams": "^3.3.1", + "workbox-sw": "^3.3.1" } }, "workbox-cache-expiration": { @@ -11475,7 +11501,7 @@ "integrity": "sha512-JCHZD9wK6TD7W2Ip7y3XgaMuZBHifK5YTpdv1g8UHsQscWU+w/GeRUsnTweTjlg1oR8LbHoMFwGMA0y/rzgeWA==", "dev": true, "requires": { - "workbox-core": "3.3.1" + "workbox-core": "^3.3.1" } }, "workbox-cacheable-response": { @@ -11484,7 +11510,7 @@ "integrity": "sha512-0Qo2l5QFaPxJmFfUrgPFTPMYuZb6FpBmAJtjQjJKqfs5DhZquiIgfTVIAKn2R232z56ngPDOJbw6NUTWKfGIJg==", "dev": true, "requires": { - "workbox-core": "3.3.1" + "workbox-core": "^3.3.1" } }, "workbox-core": { @@ -11499,10 +11525,10 @@ "integrity": "sha512-d3cqejBKDsLFEoWlgFTi6E+3p7VDk5CJXaQd7fX7oTKCrz4OYG+xrhH5k/Qjw68rwwl/5nKJInlH+OQUObKKUw==", "dev": true, "requires": { - "workbox-background-sync": "3.3.1", - "workbox-core": "3.3.1", - "workbox-routing": "3.3.1", - "workbox-strategies": "3.3.1" + "workbox-background-sync": "^3.3.1", + "workbox-core": "^3.3.1", + "workbox-routing": "^3.3.1", + "workbox-strategies": "^3.3.1" } }, "workbox-precaching": { @@ -11511,7 +11537,7 @@ "integrity": "sha512-hKkJaIF/Q1QMysp7ErmtQKvPbFoWcr5q8BnjK2iGu61JtObq+Hqgan5lE3YL9QLZu1lI4n11cESIi1fAOXmmfA==", "dev": true, "requires": { - "workbox-core": "3.3.1" + "workbox-core": "^3.3.1" } }, "workbox-range-requests": { @@ -11520,7 +11546,7 @@ "integrity": "sha512-IA9yieHKHsmZRWOUxGEYX8AYXhgMT1QfIO2ADanMIBX7ojmAOsr4OJYgCzsB9v2T7QhqSH4lFipzw+wxCJ7y5g==", "dev": true, "requires": { - "workbox-core": "3.3.1" + "workbox-core": "^3.3.1" } }, "workbox-routing": { @@ -11529,7 +11555,7 @@ "integrity": "sha512-3858dhIbIv6aKooqm9z6CZvCSSByZKlM8KQi3AQlEg+Vsby/hOYhT0gKHZcc42uqwxtfFKVV6a8xX0zrzc9TKg==", "dev": true, "requires": { - "workbox-core": "3.3.1" + "workbox-core": "^3.3.1" } }, "workbox-strategies": { @@ -11538,7 +11564,7 @@ "integrity": "sha512-HgT0UY5PJo9/BDs6ExFSSBlkdoLT6AVa5smk2MiOeubRMc28YDvWBn3QIldelVRKjKLnnKo7MtwiLn9G9l0MUg==", "dev": true, "requires": { - "workbox-core": "3.3.1" + "workbox-core": "^3.3.1" } }, "workbox-streams": { @@ -11547,7 +11573,7 @@ "integrity": "sha512-xjwZMX6MVCFv7tV7kcgfNZCW1vrR2o8iZ8DGpcUQBYT/7Vqw0QHXfflBM7AJkTYQsdWRKeyIXGvuxt5LOEGcoQ==", "dev": true, "requires": { - "workbox-core": "3.3.1" + "workbox-core": "^3.3.1" } }, "workbox-sw": { @@ -11562,8 +11588,8 @@ "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=", "dev": true, "requires": { - "string-width": "1.0.2", - "strip-ansi": "3.0.1" + "string-width": "^1.0.1", + "strip-ansi": "^3.0.1" } }, "wrappy": { @@ -11578,7 +11604,7 @@ "integrity": "sha1-X8A4KOJkzqP+kUVUdvejxWbLB1c=", "dev": true, "requires": { - "mkdirp": "0.5.1" + "mkdirp": "^0.5.1" } }, "write-file-atomic": { @@ -11587,9 +11613,9 @@ "integrity": "sha512-xuPeK4OdjWqtfi59ylvVL0Yn35SF3zgcAcv7rBPFHVaEapaDr4GdGgm3j7ckTwH9wHL7fGmgfAnb0+THrHb8tA==", "dev": true, "requires": { - "graceful-fs": "4.1.11", - "imurmurhash": "0.1.4", - "signal-exit": "3.0.2" + "graceful-fs": "^4.1.11", + "imurmurhash": "^0.1.4", + "signal-exit": "^3.0.2" } }, "xdg-basedir": { @@ -11610,8 +11636,8 @@ "integrity": "sha512-esZnJZJOiJR9wWKMyuvSE1y6Dq5LCuJanqhxslH2bxM6duahNZ+HMpCLhBQGZkbX6xRf8x1Y2eJlgt2q3qo49Q==", "dev": true, "requires": { - "sax": "1.2.4", - "xmlbuilder": "9.0.7" + "sax": ">=0.6.0", + "xmlbuilder": "~9.0.1" } }, "xmlbuilder": { @@ -11644,18 +11670,18 @@ "integrity": "sha512-ivSoxqBGYOqQVruxD35+EyCFDYNEFL/Uo6FcOnz+9xZdZzK0Zzw4r4KhbrME1Oo2gOggwJod2MnsdamSG7H9ig==", "dev": true, "requires": { - "cliui": "4.0.0", - "decamelize": "1.2.0", - "find-up": "2.1.0", - "get-caller-file": "1.0.2", - "os-locale": "2.1.0", - "require-directory": "2.1.1", - "require-main-filename": "1.0.1", - "set-blocking": "2.0.0", - "string-width": "2.1.1", - "which-module": "2.0.0", - "y18n": "3.2.1", - "yargs-parser": "8.1.0" + "cliui": "^4.0.0", + "decamelize": "^1.1.1", + "find-up": "^2.1.0", + "get-caller-file": "^1.0.1", + "os-locale": "^2.0.0", + "require-directory": "^2.1.1", + "require-main-filename": "^1.0.1", + "set-blocking": "^2.0.0", + "string-width": "^2.0.0", + "which-module": "^2.0.0", + "y18n": "^3.2.1", + "yargs-parser": "^8.1.0" }, "dependencies": { "ansi-regex": { @@ -11676,9 +11702,9 @@ "integrity": "sha512-nY3W5Gu2racvdDk//ELReY+dHjb9PlIcVDFXP72nVIhq2Gy3LuVXYwJoPVudwQnv1shtohpgkdCKT2YaKY0CKw==", "dev": true, "requires": { - "string-width": "2.1.1", - "strip-ansi": "4.0.0", - "wrap-ansi": "2.1.0" + "string-width": "^2.1.1", + "strip-ansi": "^4.0.0", + "wrap-ansi": "^2.0.0" } }, "cross-spawn": { @@ -11687,9 +11713,9 @@ "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=", "dev": true, "requires": { - "lru-cache": "4.1.2", - "shebang-command": "1.2.0", - "which": "1.3.0" + "lru-cache": "^4.0.1", + "shebang-command": "^1.2.0", + "which": "^1.2.9" } }, "execa": { @@ -11698,13 +11724,13 @@ "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=", "dev": true, "requires": { - "cross-spawn": "5.1.0", - "get-stream": "3.0.0", - "is-stream": "1.1.0", - "npm-run-path": "2.0.2", - "p-finally": "1.0.0", - "signal-exit": "3.0.2", - "strip-eof": "1.0.0" + "cross-spawn": "^5.0.1", + "get-stream": "^3.0.0", + "is-stream": "^1.1.0", + "npm-run-path": "^2.0.0", + "p-finally": "^1.0.0", + "signal-exit": "^3.0.0", + "strip-eof": "^1.0.0" } }, "find-up": { @@ -11713,7 +11739,7 @@ "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=", "dev": true, "requires": { - "locate-path": "2.0.0" + "locate-path": "^2.0.0" } }, "is-fullwidth-code-point": { @@ -11728,9 +11754,9 @@ "integrity": "sha512-3sslG3zJbEYcaC4YVAvDorjGxc7tv6KVATnLPZONiljsUncvihe9BQoVCEs0RZ1kmf4Hk9OBqlZfJZWI4GanKA==", "dev": true, "requires": { - "execa": "0.7.0", - "lcid": "1.0.0", - "mem": "1.1.0" + "execa": "^0.7.0", + "lcid": "^1.0.0", + "mem": "^1.1.0" } }, "string-width": { @@ -11739,8 +11765,8 @@ "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==", "dev": true, "requires": { - "is-fullwidth-code-point": "2.0.0", - "strip-ansi": "4.0.0" + "is-fullwidth-code-point": "^2.0.0", + "strip-ansi": "^4.0.0" } }, "strip-ansi": { @@ -11749,7 +11775,7 @@ "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", "dev": true, "requires": { - "ansi-regex": "3.0.0" + "ansi-regex": "^3.0.0" } }, "which-module": { @@ -11764,7 +11790,7 @@ "integrity": "sha512-yP+6QqN8BmrgW2ggLtTbdrOyBNSI7zBa4IykmiV5R1wl1JWNxQvWhMfMdmzIYtKU7oP3OOInY/tl2ov3BDjnJQ==", "dev": true, "requires": { - "camelcase": "4.1.0" + "camelcase": "^4.1.0" } } } @@ -11775,7 +11801,7 @@ "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=", "dev": true, "requires": { - "camelcase": "3.0.0" + "camelcase": "^3.0.0" }, "dependencies": { "camelcase": { @@ -11792,7 +11818,7 @@ "integrity": "sha1-lSj0QtqxsihOWLQ3m7GU4i4MQAU=", "dev": true, "requires": { - "fd-slicer": "1.0.1" + "fd-slicer": "~1.0.1" } } } diff --git a/core/package.json b/core/package.json index b38cafdb31..1ebafaf237 100644 --- a/core/package.json +++ b/core/package.json @@ -14,25 +14,27 @@ "progressive web app", "pwa" ], - "module": "dist/esm/index.js", + "module": "dist/collection/index.js", "main": "dist/index.js", "types": "dist/types/index.d.ts", "collection": "dist/collection/collection-manifest.json", "unpkg": "dist/ionic.js", "files": [ - "dist/" + "dist/", + "css/" ], "dependencies": { - "ionicons": "4.1.2" + "ionicons": "4.2.4" }, "devDependencies": { - "@stencil/core": "^0.10.0-6", + "@stencil/core": "0.10.0-11", "@stencil/dev-server": "latest", "@stencil/sass": "latest", "@stencil/utils": "latest", "@types/jest": "^22.2.3", "chai": "^4.1.2", "chromedriver": "^2.38.3", + "clean-css-cli": "^4.1.11", "jest": "^23.1.0", "mocha": "^4.0.1", "np": "^2.17.0", @@ -40,16 +42,19 @@ "selenium-webdriver": "^3.6.0", "tslint": "^5.10.0", "tslint-ionic-rules": "0.0.14", + "typescript": "^2.9.2", "yargs": "^10.0.3" }, "scripts": { - "build": "npm run clean && stencil build --docs", + "build": "npm run clean && npm run build.css && stencil build --docs", + "build.css": "npm run css.sass && npm run css.clean", "build.debug": "npm run clean && stencil build --debug", "build.docs.json": "stencil build --docs-json dist/docs.json", "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s", "clean": "node scripts/clean.js", - "dev": "sd concurrent \"stencil build --dev --watch --docs\" \"stencil-dev-server\"", - "devapp": "sd concurrent \"stencil build --dev --watch --docs\" \"stencil-dev-server --broadcast\"", + "css.clean": "cleancss -O2 -o ./css/ionic.min.css ./css/ionic.css", + "css.sass": "node-sass --output ./css src/css", + "dev": "npm run build.css && stencil build --dev --watch --serve", "e2e": "node ./scripts/e2e", "e2e-debug": "node --inspect --debug-brk ./scripts/e2e", "lint": "npm run lint.ts && npm run lint.sass", diff --git a/core/scripts/theme-builder/src/components/variable-selector/variable-selector.css b/core/scripts/theme-builder/src/components/variable-selector/variable-selector.css index 1c950ab591..c04aee5ef6 100644 --- a/core/scripts/theme-builder/src/components/variable-selector/variable-selector.css +++ b/core/scripts/theme-builder/src/components/variable-selector/variable-selector.css @@ -23,12 +23,13 @@ input[type="text"] { } input[type="color"] { - -webkit-appearance: none; border: none; width: 64px; height: 20px; outline: none; background: transparent; + + appearance: none; } input[type="color"]::-webkit-color-swatch-wrapper { diff --git a/core/src/components.d.ts b/core/src/components.d.ts index efc00cf19c..9c31e3c918 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -36,15 +36,21 @@ import { Animation, AnimationBuilder, BlockerConfig, + BlockerDelegate, CheckedInputChangeEvent, Color, ComponentProps, ComponentRef, + DomRenderFn, FrameworkDelegate, GestureCallback, GestureConfig, + GestureDelegate, GestureDetail, + HeaderFn, InputChangeEvent, + ItemHeightFn, + ItemRenderFn, Knob, LoadingOptions, Menu, @@ -53,6 +59,7 @@ import { Mode, NavComponent, NavOptions, + OverlayEventDetail, PickerButton, PickerColumn, PickerOptions, @@ -63,47 +70,23 @@ import { RouterEventDetail, RouterOutletOptions, RouteWrite, + ScrollBaseDetail, + ScrollDetail, SelectInputChangeEvent, SelectInterface, SelectPopoverOption, + Side, StyleEvent, + TabbarLayout, + TabbarPlacement, ToastOptions, TransitionDoneFn, TransitionInstruction, + ViewController, } from './interface'; -import { - OverlayEventDetail, -} from './utils/overlays'; import { EventEmitter, } from '@stencil/core'; -import { - BlockerDelegate, - GestureDelegate, -} from './components/gesture-controller/gesture-controller-utils'; -import { - Side, -} from './utils/helpers'; -import { - ViewController, -} from './components/nav/view-controller'; -import { - RouterIntent, -} from './components/router/utils/constants'; -import { - ScrollBaseDetail, - ScrollDetail, -} from './components/scroll/scroll'; -import { - TabbarLayout, - TabbarPlacement, -} from './components/tabbar/tabbar'; -import { - DomRenderFn, - HeaderFn, - ItemHeightFn, - ItemRenderFn, -} from './components/virtual-scroll/virtual-scroll-utils'; declare global { @@ -112,7 +95,7 @@ declare global { /** * Create an action sheet overlay with action sheet options. */ - 'create': (opts?: ActionSheetOptions | undefined) => Promise; + 'create': (opts?: ActionSheetOptions | undefined) => Promise; /** * Dismiss the open action sheet overlay. */ @@ -188,11 +171,11 @@ declare global { /** * Returns a promise that resolves when the action-sheet did dismiss. It also accepts a callback that is called in the same circustances. */ - 'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise; + 'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; /** * Returns a promise that resolves when the action-sheet will dismiss. It also accepts a callback that is called in the same circustances. */ - 'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise; + 'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; /** * Unique ID to be used with the overlay. Internal only */ @@ -315,7 +298,7 @@ declare global { /** * Create an alert overlay with alert options */ - 'create': (opts?: AlertOptions | undefined) => Promise; + 'create': (opts?: AlertOptions | undefined) => Promise; /** * Dismiss the open alert overlay. */ @@ -359,7 +342,7 @@ declare global { /** * Array of buttons to be added to the alert. */ - 'buttons': AlertButton[]; + 'buttons': (AlertButton | string)[]; /** * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. */ @@ -397,11 +380,11 @@ declare global { /** * Returns a promise that resolves when the alert did dismiss. It also accepts a callback that is called in the same circumstances. */ - 'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise; + 'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; /** * Returns a promise that resolves when the alert will dismiss. It also accepts a callback that is called in the same circumstances. */ - 'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise; + 'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; 'overlayId': number; /** * Present the alert overlay after it has been created. @@ -444,7 +427,7 @@ declare global { /** * Array of buttons to be added to the alert. */ - 'buttons'?: AlertButton[]; + 'buttons'?: (AlertButton | string)[]; /** * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. */ @@ -801,7 +784,7 @@ declare global { namespace StencilComponents { interface IonBadge { /** - * The color the badge should be + * The color the badge should be. */ 'color': Color; /** @@ -831,7 +814,7 @@ declare global { namespace JSXElements { export interface IonBadgeAttributes extends HTMLAttributes { /** - * The color the badge should be + * The color the badge should be. */ 'color'?: Color; /** @@ -1015,10 +998,6 @@ declare global { namespace StencilComponents { interface IonCardContent { - /** - * The color to use for the text. - */ - 'color': Color; /** * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. */ @@ -1045,10 +1024,6 @@ declare global { } namespace JSXElements { export interface IonCardContentAttributes extends HTMLAttributes { - /** - * The color to use for the text. - */ - 'color'?: Color; /** * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. */ @@ -1420,6 +1395,61 @@ declare global { } +declare global { + + namespace StencilComponents { + interface IonChipIcon { + /** + * The color to use. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. + */ + 'color': Color; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode': Mode; + /** + * The icon to use. Possible values are the same as `"ion-icon"`. + */ + 'name': string; + } + } + + interface HTMLIonChipIconElement extends StencilComponents.IonChipIcon, HTMLStencilElement {} + + var HTMLIonChipIconElement: { + prototype: HTMLIonChipIconElement; + new (): HTMLIonChipIconElement; + }; + interface HTMLElementTagNameMap { + 'ion-chip-icon': HTMLIonChipIconElement; + } + interface ElementTagNameMap { + 'ion-chip-icon': HTMLIonChipIconElement; + } + namespace JSX { + interface IntrinsicElements { + 'ion-chip-icon': JSXElements.IonChipIconAttributes; + } + } + namespace JSXElements { + export interface IonChipIconAttributes extends HTMLAttributes { + /** + * The color to use. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. + */ + 'color'?: Color; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode'?: Mode; + /** + * The icon to use. Possible values are the same as `"ion-icon"`. + */ + 'name'?: string; + } + } +} + + declare global { namespace StencilComponents { @@ -1694,6 +1724,7 @@ declare global { namespace StencilComponents { interface IonContent { + 'color': Color; /** * If true and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, the does not disable the system bounce on iOS. That is an OS level setting. */ @@ -1702,24 +1733,15 @@ declare global { * If true, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent. */ 'fullscreen': boolean; + 'getScrollElement': () => HTMLIonScrollElement; /** - * Scroll by a specific X/Y distance + * By default `ion-content` uses an `ion-scroll` under the hood to implement scrolling, if you want to disable the content scrolling for a given page, set this property to `false`. */ - 'scrollByPoint': (x: number, y: number, duration: number, done?: Function | undefined) => Promise; 'scrollEnabled': boolean; + /** + * Because of performance reasons, ionScroll events are disabled by default, in order to enable them and start listening from (ionScroll), set this property to `true`. + */ 'scrollEvents': boolean; - /** - * Scroll to the bottom of the content component. Duration of the scroll animation in milliseconds. Defaults to `300`. Returns a promise which is resolved when the scroll has completed. - */ - 'scrollToBottom': (duration?: number) => Promise; - /** - * Scroll to a specific X/Y coordinate in the content - */ - 'scrollToPoint': (x: number, y: number, duration: number, done?: Function | undefined) => Promise; - /** - * Scroll to the top of the content component. Duration of the scroll animation in milliseconds. Defaults to `300`. Returns a promise which is resolved when the scroll has completed. - */ - 'scrollToTop': (duration?: number) => Promise; } } @@ -1742,6 +1764,7 @@ declare global { } namespace JSXElements { export interface IonContentAttributes extends HTMLAttributes { + 'color'?: Color; /** * If true and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, the does not disable the system bounce on iOS. That is an OS level setting. */ @@ -1750,7 +1773,13 @@ declare global { * If true, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent. */ 'fullscreen'?: boolean; + /** + * By default `ion-content` uses an `ion-scroll` under the hood to implement scrolling, if you want to disable the content scrolling for a given page, set this property to `false`. + */ 'scrollEnabled'?: boolean; + /** + * Because of performance reasons, ionScroll events are disabled by default, in order to enable them and start listening from (ionScroll), set this property to `true`. + */ 'scrollEvents'?: boolean; } } @@ -2148,9 +2177,9 @@ declare global { namespace StencilComponents { interface IonFooter { /** - * If true, the footer will be translucent. Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content. Defaults to `false`. + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. */ - 'translucent': boolean; + 'mode': Mode; } } @@ -2174,9 +2203,9 @@ declare global { namespace JSXElements { export interface IonFooterAttributes extends HTMLAttributes { /** - * If true, the footer will be translucent. Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content. Defaults to `false`. + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. */ - 'translucent'?: boolean; + 'mode'?: Mode; } } } @@ -2233,10 +2262,6 @@ declare global { * What component to attach listeners to. */ 'attachTo': string | HTMLElement; - /** - * If true, gesture will prevent any other gestures from firing - */ - 'autoBlockAll': boolean; /** * Function to execute to see if gesture can start. Return boolean */ @@ -2319,10 +2344,6 @@ declare global { * What component to attach listeners to. */ 'attachTo'?: string | HTMLElement; - /** - * If true, gesture will prevent any other gestures from firing - */ - 'autoBlockAll'?: boolean; /** * Function to execute to see if gesture can start. Return boolean */ @@ -2428,9 +2449,9 @@ declare global { namespace StencilComponents { interface IonHeader { /** - * If true, the header will be translucent. Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. Defaults to `false`. + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. */ - 'translucent': boolean; + 'mode': Mode; } } @@ -2454,9 +2475,9 @@ declare global { namespace JSXElements { export interface IonHeaderAttributes extends HTMLAttributes { /** - * If true, the header will be translucent. Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. Defaults to `false`. + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. */ - 'translucent'?: boolean; + 'mode'?: Mode; } } } @@ -2466,10 +2487,29 @@ declare global { namespace StencilComponents { interface IonHideWhen { + /** + * If the current media query matches this value, the element will hide. + */ 'mediaQuery': string; + /** + * If the current platform matches the given value, the element will hide. Accepts a comma separated list of modes to match against. + */ + 'mode': Mode; + /** + * If false, and two or more conditions are set, the element will hide when all are true. If true, and two or more conditions are set, the element will hide when at least one is true. + */ 'or': boolean; + /** + * If the current orientation matches this value, the element will hide. + */ 'orientation': string; + /** + * If the current platform matches the given value, the element will hide. Accepts a comma separated list of platform to match against. + */ 'platform': string; + /** + * If the current screen width matches the given size, the element will hide. Uses the build in sizes of xs, sm, md, lg, xl. + */ 'size': string; } } @@ -2493,10 +2533,29 @@ declare global { } namespace JSXElements { export interface IonHideWhenAttributes extends HTMLAttributes { + /** + * If the current media query matches this value, the element will hide. + */ 'mediaQuery'?: string; + /** + * If the current platform matches the given value, the element will hide. Accepts a comma separated list of modes to match against. + */ + 'mode'?: Mode; + /** + * If false, and two or more conditions are set, the element will hide when all are true. If true, and two or more conditions are set, the element will hide when at least one is true. + */ 'or'?: boolean; + /** + * If the current orientation matches this value, the element will hide. + */ 'orientation'?: string; + /** + * If the current platform matches the given value, the element will hide. Accepts a comma separated list of platform to match against. + */ 'platform'?: string; + /** + * If the current screen width matches the given size, the element will hide. Uses the build in sizes of xs, sm, md, lg, xl. + */ 'size'?: string; } } @@ -3199,6 +3258,10 @@ declare global { * If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `button` property is present. */ 'detail': boolean; + /** + * The icon to use when `detail` is set to `true`. Defaults to `"ios-arrow-forward"`. + */ + 'detailIcon': string; /** * If true, the user cannot interact with the item. Defaults to `false`. */ @@ -3219,6 +3282,7 @@ declare global { * When using a router, it specifies the transition direction when navigating to another page using `href`. */ 'routerDirection': RouterDirection; + 'state': 'valid' | 'unvalid' | 'focus'; } } @@ -3253,6 +3317,10 @@ declare global { * If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `button` property is present. */ 'detail'?: boolean; + /** + * The icon to use when `detail` is set to `true`. Defaults to `"ios-arrow-forward"`. + */ + 'detailIcon'?: string; /** * If true, the user cannot interact with the item. Defaults to `false`. */ @@ -3273,6 +3341,7 @@ declare global { * When using a router, it specifies the transition direction when navigating to another page using `href`. */ 'routerDirection'?: RouterDirection; + 'state'?: 'valid' | 'unvalid' | 'focus'; } } } @@ -3397,6 +3466,10 @@ declare global { * Get the [Item Sliding](../../item-sliding/ItemSliding) that is currently opene. */ 'getOpenItem': () => HTMLIonItemSlidingElement | undefined; + /** + * How the bottom border should be displayed on all items. + */ + 'inset': boolean; /** * How the bottom border should be displayed on all items. */ @@ -3427,6 +3500,10 @@ declare global { } namespace JSXElements { export interface IonListAttributes extends HTMLAttributes { + /** + * How the bottom border should be displayed on all items. + */ + 'inset'?: boolean; /** * How the bottom border should be displayed on all items. */ @@ -3443,7 +3520,7 @@ declare global { /** * Create a loading overlay with loading options. */ - 'create': (opts?: LoadingOptions | undefined) => Promise; + 'create': (opts?: LoadingOptions | undefined) => Promise; /** * Dismiss the open loading overlay. */ @@ -3523,11 +3600,11 @@ declare global { /** * Returns a promise that resolves when the loading did dismiss. It also accepts a callback that is called in the same circumstances. */ - 'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise; + 'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; /** * Returns a promise that resolves when the loading will dismiss. It also accepts a callback that is called in the same circumstances. */ - 'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise; + 'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; 'overlayId': number; /** * Present the loading overlay after it has been created. @@ -3849,10 +3926,6 @@ declare global { */ 'menuId': string; 'open': (animated?: boolean) => Promise; - /** - * If true, the menu will persist on child pages. - */ - 'persistent': boolean; 'setOpen': (shouldOpen: boolean, animated?: boolean) => Promise; /** * Which side of the view the menu should be placed. Default `"start"`. @@ -3917,10 +3990,6 @@ declare global { * Emitted when the menu is open. */ 'onIonOpen'?: (event: CustomEvent) => void; - /** - * If true, the menu will persist on child pages. - */ - 'persistent'?: boolean; /** * Which side of the view the menu should be placed. Default `"start"`. */ @@ -3945,7 +4014,7 @@ declare global { /** * Create a modal overlay with modal options. */ - 'create': (opts?: ModalOptions | undefined) => Promise; + 'create': (opts?: ModalOptions | undefined) => Promise; /** * Dismiss the open modal overlay. */ @@ -3986,10 +4055,6 @@ declare global { namespace StencilComponents { interface IonModal { - /** - * The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app). - */ - 'color': Color; /** * The component to display inside of the modal. */ @@ -4020,18 +4085,14 @@ declare global { * Animation to use when the modal is dismissed. */ 'leaveAnimation': AnimationBuilder; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles). - */ - 'mode': Mode; /** * Returns a promise that resolves when the modal did dismiss. It also accepts a callback that is called in the same circustances. */ - 'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise; + 'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; /** * Returns a promise that resolves when the modal will dismiss. It also accepts a callback that is called in the same circustances. */ - 'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise; + 'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; 'overlayId': number; /** * Present the modal overlay after it has been created. @@ -4067,10 +4128,6 @@ declare global { } namespace JSXElements { export interface IonModalAttributes extends HTMLAttributes { - /** - * The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app). - */ - 'color'?: Color; /** * The component to display inside of the modal. */ @@ -4097,10 +4154,6 @@ declare global { * Animation to use when the modal is dismissed. */ 'leaveAnimation'?: AnimationBuilder; - /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles). - */ - 'mode'?: Mode; /** * Emitted after the modal has dismissed. */ @@ -4303,6 +4356,7 @@ declare global { /** * Returns the length of navigation stack */ + 'isAnimating': () => boolean; 'length': () => number; /** * Call to navigate back from a current component. Similar to push(), you can also pass navigation options. @@ -4340,7 +4394,7 @@ declare global { * Set the root for the current navigation stack. */ 'setRoot': (component: NavComponent, componentProps?: ComponentProps | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; - 'setRouteId': (id: string, params: any, direction: RouterIntent) => Promise; + 'setRouteId': (id: string, params: any, direction: number) => Promise; /** * If the nav component should allow for swipe-to-go-back */ @@ -4485,7 +4539,7 @@ declare global { namespace StencilComponents { interface IonPickerController { - 'create': (opts?: PickerOptions | undefined) => Promise; + 'create': (opts?: PickerOptions | undefined) => Promise; 'dismiss': (data?: any, role?: string | undefined, pickerId?: number) => Promise; 'getTop': () => HTMLIonPickerElement; } @@ -4575,11 +4629,11 @@ declare global { /** * Returns a promise that resolves when the picker did dismiss. It also accepts a callback that is called in the same circustances. */ - 'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise; + 'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; /** * Returns a promise that resolves when the picker will dismiss. It also accepts a callback that is called in the same circustances. */ - 'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise; + 'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; 'overlayId': number; /** * Present the picker overlay after it has been created. @@ -4692,7 +4746,7 @@ declare global { /** * Create a popover overlay with popover options. */ - 'create': (opts?: PopoverOptions | undefined) => Promise; + 'create': (opts?: PopoverOptions | undefined) => Promise; /** * Dismiss the open popover overlay. */ @@ -4778,11 +4832,11 @@ declare global { /** * Returns a promise that resolves when the popover did dismiss. It also accepts a callback that is called in the same circustances. */ - 'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise; + 'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; /** * Returns a promise that resolves when the popover will dismiss. It also accepts a callback that is called in the same circustances. */ - 'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise; + 'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; 'overlayId': number; /** * Present the popover overlay after it has been created. @@ -5498,6 +5552,10 @@ declare global { * Adds the ripple effect to the parent elment */ 'addRipple': (pageX: number, pageY: number) => void; + 'parent': HTMLElement | string; + /** + * If true, the ripple effect will listen to any click events and animate + */ 'tapClick': boolean; } } @@ -5521,6 +5579,10 @@ declare global { } namespace JSXElements { export interface IonRippleEffectAttributes extends HTMLAttributes { + 'parent'?: HTMLElement | string; + /** + * If true, the ripple effect will listen to any click events and animate + */ 'tapClick'?: boolean; } } @@ -5691,7 +5753,7 @@ declare global { namespace StencilComponents { interface IonRouter { - 'navChanged': (intent: RouterIntent) => Promise; + 'navChanged': (intent: number) => Promise; 'printDebug': () => void; /** * Navigate to the specified URL @@ -5798,7 +5860,7 @@ declare global { */ 'scrollByPoint': (x: number, y: number, duration: number, done?: Function | undefined) => Promise; /** - * If true, the component will emit scroll events + * If true, the component will emit scroll events. */ 'scrollEvents': boolean; /** @@ -5856,7 +5918,7 @@ declare global { */ 'onIonScrollStart'?: (event: CustomEvent) => void; /** - * If true, the component will emit scroll events + * If true, the component will emit scroll events. */ 'scrollEvents'?: boolean; } @@ -5881,11 +5943,19 @@ declare global { */ 'autocorrect': string; /** - * Set the the cancel button text. Default: `"Cancel"`. + * Set the cancel button icon. Only applies to `md` mode. Defaults to `"md-arrow-back"`. + */ + 'cancelButtonIcon': string; + /** + * Set the the cancel button text. Only applies to `ios` mode. Default: `"Cancel"`. */ 'cancelButtonText': string; /** - * The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app). + * Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close"` for `md`. + */ + 'clearIcon': string; + /** + * The color the searchbar should be. */ 'color': Color; /** @@ -5893,13 +5963,17 @@ declare global { */ 'debounce': number; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles). + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. */ 'mode': Mode; /** * Set the input's placeholder. Default `"Search"`. */ 'placeholder': string; + /** + * The icon to use as the search icon. Defaults to `"search"`. + */ + 'searchIcon': string; /** * If true, show the cancel button. Default `false`. */ @@ -5951,11 +6025,19 @@ declare global { */ 'autocorrect'?: string; /** - * Set the the cancel button text. Default: `"Cancel"`. + * Set the cancel button icon. Only applies to `md` mode. Defaults to `"md-arrow-back"`. + */ + 'cancelButtonIcon'?: string; + /** + * Set the the cancel button text. Only applies to `ios` mode. Default: `"Cancel"`. */ 'cancelButtonText'?: string; /** - * The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app). + * Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close"` for `md`. + */ + 'clearIcon'?: string; + /** + * The color the searchbar should be. */ 'color'?: Color; /** @@ -5963,7 +6045,7 @@ declare global { */ 'debounce'?: number; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles). + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. */ 'mode'?: Mode; /** @@ -5994,6 +6076,10 @@ declare global { * Set the input's placeholder. Default `"Search"`. */ 'placeholder'?: string; + /** + * The icon to use as the search icon. Defaults to `"search"`. + */ + 'searchIcon'?: string; /** * If true, show the cancel button. Default `false`. */ @@ -6028,10 +6114,6 @@ declare global { */ 'color': Color; 'disabled': boolean; - /** - * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. - */ - 'href': string; /** * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. */ @@ -6071,10 +6153,6 @@ declare global { */ 'color'?: Color; 'disabled'?: boolean; - /** - * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. - */ - 'href'?: string; /** * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. */ @@ -6414,10 +6492,29 @@ declare global { namespace StencilComponents { interface IonShowWhen { + /** + * If the current media query matches this value, the element will show. + */ 'mediaQuery': string; + /** + * If the current platform matches the given value, the element will show. Accepts a comma separated list of modes to match against. + */ + 'mode': Mode; + /** + * If false, and two or more conditions are set, the element will show when all are true. If true, and two or more conditions are set, the element will show when at least one is true. + */ 'or': boolean; + /** + * If the current orientation matches this value, the element will show. + */ 'orientation': string; + /** + * If the current platform matches the given value, the element will show. Accepts a comma separated list of platform to match against. + */ 'platform': string; + /** + * If the current screen width matches the given size, the element will show. Uses the build in sizes of xs, sm, md, lg, xl. + */ 'size': string; } } @@ -6441,10 +6538,29 @@ declare global { } namespace JSXElements { export interface IonShowWhenAttributes extends HTMLAttributes { + /** + * If the current media query matches this value, the element will show. + */ 'mediaQuery'?: string; + /** + * If the current platform matches the given value, the element will show. Accepts a comma separated list of modes to match against. + */ + 'mode'?: Mode; + /** + * If false, and two or more conditions are set, the element will show when all are true. If true, and two or more conditions are set, the element will show when at least one is true. + */ 'or'?: boolean; + /** + * If the current orientation matches this value, the element will show. + */ 'orientation'?: string; + /** + * If the current platform matches the given value, the element will show. Accepts a comma separated list of platform to match against. + */ 'platform'?: string; + /** + * If the current screen width matches the given size, the element will show. Uses the build in sizes of xs, sm, md, lg, xl. + */ 'size'?: string; } } @@ -6564,9 +6680,13 @@ declare global { */ 'options': any; /** - * Show or hide the pager + * If true, show the pagination. Defaults to `false`. */ 'pager': boolean; + /** + * If true, show the scrollbar. Defaults to `false`. + */ + 'scrollbar': boolean; /** * Transition to the next slide. */ @@ -6670,9 +6790,13 @@ declare global { */ 'options'?: any; /** - * Show or hide the pager + * If true, show the pagination. Defaults to `false`. */ 'pager'?: boolean; + /** + * If true, show the scrollbar. Defaults to `false`. + */ + 'scrollbar'?: boolean; } } } @@ -6809,49 +6933,12 @@ declare global { } -declare global { - - namespace StencilComponents { - interface IonStatusTap { - /** - * How long the scrolling action should take. - */ - 'duration': number; - } - } - - interface HTMLIonStatusTapElement extends StencilComponents.IonStatusTap, HTMLStencilElement {} - - var HTMLIonStatusTapElement: { - prototype: HTMLIonStatusTapElement; - new (): HTMLIonStatusTapElement; - }; - interface HTMLElementTagNameMap { - 'ion-status-tap': HTMLIonStatusTapElement; - } - interface ElementTagNameMap { - 'ion-status-tap': HTMLIonStatusTapElement; - } - namespace JSX { - interface IntrinsicElements { - 'ion-status-tap': JSXElements.IonStatusTapAttributes; - } - } - namespace JSXElements { - export interface IonStatusTapAttributes extends HTMLAttributes { - /** - * How long the scrolling action should take. - */ - 'duration'?: number; - } - } -} - - declare global { namespace StencilComponents { interface IonTabButton { + 'color': Color; + 'mode': Mode; /** * If the tab is selected or not */ @@ -6882,6 +6969,8 @@ declare global { } namespace JSXElements { export interface IonTabButtonAttributes extends HTMLAttributes { + 'color'?: Color; + 'mode'?: Mode; /** * Emitted when the tab button is loaded */ @@ -7060,6 +7149,7 @@ declare global { namespace StencilComponents { interface IonTabbar { + 'color': Color; /** * If the tabbar should include the highlight on the active tab */ @@ -7068,6 +7158,7 @@ declare global { * The layout of the title and icons */ 'layout': TabbarLayout; + 'mode': Mode; /** * The placement of the tabbar in the app */ @@ -7110,6 +7201,7 @@ declare global { } namespace JSXElements { export interface IonTabbarAttributes extends HTMLAttributes { + 'color'?: Color; /** * If the tabbar should include the highlight on the active tab */ @@ -7118,6 +7210,7 @@ declare global { * The layout of the title and icons */ 'layout'?: TabbarLayout; + 'mode'?: Mode; /** * The placement of the tabbar in the app */ @@ -7621,7 +7714,7 @@ declare global { /** * Create a toast overlay with toast options. */ - 'create': (opts?: ToastOptions | undefined) => Promise; + 'create': (opts?: ToastOptions | undefined) => Promise; /** * Dismiss the open toast overlay. */ @@ -7694,11 +7787,11 @@ declare global { /** * Returns a promise that resolves when the toast did dismiss. It also accepts a callback that is called in the same circustances. */ - 'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise; + 'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; /** * Returns a promise that resolves when the toast will dismiss. It also accepts a callback that is called in the same circustances. */ - 'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise; + 'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise>; 'overlayId': number; /** * The position of the toast on the screen. Possible values: "top", "middle", "bottom". diff --git a/core/src/components/action-sheet-controller/action-sheet-controller.tsx b/core/src/components/action-sheet-controller/action-sheet-controller.tsx index c62b02521a..0e2f6de07a 100644 --- a/core/src/components/action-sheet-controller/action-sheet-controller.tsx +++ b/core/src/components/action-sheet-controller/action-sheet-controller.tsx @@ -31,7 +31,7 @@ export class ActionSheetController implements OverlayController { * Create an action sheet overlay with action sheet options. */ @Method() - create(opts?: ActionSheetOptions): Promise { + create(opts?: ActionSheetOptions): Promise { return createOverlay(this.doc.createElement('ion-action-sheet'), opts); } diff --git a/core/src/components/action-sheet/action-sheet.ios.scss b/core/src/components/action-sheet/action-sheet.ios.scss index de8745d9e2..7094591446 100644 --- a/core/src/components/action-sheet/action-sheet.ios.scss +++ b/core/src/components/action-sheet/action-sheet.ios.scss @@ -4,13 +4,13 @@ // iOS Action Sheet // -------------------------------------------------- -.action-sheet-ios { - @include text-align($action-sheet-ios-text-align); +:host { + text-align: $action-sheet-ios-text-align; font-family: $action-sheet-ios-font-family; } -.action-sheet-ios .action-sheet-wrapper { +.action-sheet-wrapper { @include margin(constant(safe-area-inset-top), auto, constant(safe-area-inset-bottom), auto); @include margin(env(safe-area-inset-top), auto, env(safe-area-inset-bottom), auto); } @@ -19,7 +19,7 @@ // iOS Action Sheet Container // ----------------------------------------- -.action-sheet-ios .action-sheet-container { +.action-sheet-container { @include padding($action-sheet-ios-padding-top, $action-sheet-ios-padding-end, $action-sheet-ios-padding-bottom, $action-sheet-ios-padding-start); } @@ -27,18 +27,18 @@ // iOS Action Sheet Group // ----------------------------------------- -.action-sheet-ios .action-sheet-group { +.action-sheet-group { @include border-radius($action-sheet-ios-border-radius); @include margin(null, null, $action-sheet-ios-group-margin-bottom - 2, null); background: $action-sheet-ios-background-color; } -.action-sheet-ios .action-sheet-group:first-child { +.action-sheet-group:first-child { @include margin($action-sheet-ios-group-margin-top, null, null, null); } -.action-sheet-ios .action-sheet-group:last-child { +.action-sheet-group:last-child { @include margin(null, null, $action-sheet-ios-group-margin-bottom, null); } @@ -46,7 +46,7 @@ // iOS Translucent Action Sheet // ----------------------------------------- -.action-sheet-translucent-ios .action-sheet-group { +:host(.action-sheet-translucent) .action-sheet-group { background: $action-sheet-ios-translucent-background-color; backdrop-filter: $action-sheet-ios-translucent-filter; @@ -56,10 +56,10 @@ // iOS Action Sheet Title // ----------------------------------------- -.action-sheet-ios .action-sheet-title { +.action-sheet-title { @include padding($action-sheet-ios-title-padding-top, $action-sheet-ios-title-padding-end, $action-sheet-ios-title-padding-bottom, $action-sheet-ios-title-padding-start); - @include text-align($action-sheet-ios-text-align); + text-align: $action-sheet-ios-text-align; border-bottom: $action-sheet-ios-title-border-width $action-sheet-ios-title-border-style $action-sheet-ios-title-border-color; @@ -68,7 +68,7 @@ color: $action-sheet-ios-title-color; } -.action-sheet-ios .action-sheet-sub-title { +.action-sheet-sub-title { @include padding($action-sheet-ios-sub-title-padding-top, $action-sheet-ios-sub-title-padding-end, $action-sheet-ios-sub-title-padding-bottom, $action-sheet-ios-sub-title-padding-start); font-size: $action-sheet-ios-sub-title-font-size; @@ -78,7 +78,7 @@ // iOS Action Sheet Buttons // ----------------------------------------- -.action-sheet-ios .action-sheet-button { +.action-sheet-button { @include margin(0); @include padding($action-sheet-ios-button-padding); @@ -94,21 +94,17 @@ contain: strict; } -.action-sheet-ios .action-sheet-button .action-sheet-icon { - @include margin($action-sheet-ios-button-icon-margin-top, null, null, null); - - @include padding-horizontal(null, $action-sheet-ios-button-icon-padding-right); - - height: $action-sheet-ios-button-icon-height; +.action-sheet-button .action-sheet-icon { + @include margin-horizontal(null, $action-sheet-ios-button-icon-padding-right); font-size: $action-sheet-ios-button-icon-font-size; } -.action-sheet-ios .action-sheet-button:last-child { +.action-sheet-button:last-child { border-bottom-color: transparent; } -.action-sheet-ios .action-sheet-button.activated { +.action-sheet-button.activated { @include margin(-$action-sheet-ios-button-border-width, null, null, null); border-top: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-button-background-activated; @@ -116,16 +112,16 @@ background: $action-sheet-ios-button-background-activated; } -.action-sheet-ios .action-sheet-selected { +.action-sheet-selected { font-weight: bold; background: $action-sheet-ios-button-background-selected; } -.action-sheet-ios .action-sheet-destructive { +.action-sheet-destructive { color: $action-sheet-ios-button-destructive-text-color; } -.action-sheet-ios .action-sheet-cancel { +.action-sheet-cancel { font-weight: $action-sheet-ios-button-cancel-font-weight; background: $action-sheet-ios-button-cancel-background; } diff --git a/core/src/components/action-sheet/action-sheet.ios.vars.scss b/core/src/components/action-sheet/action-sheet.ios.vars.scss index 75609f3be3..6fb4d73494 100644 --- a/core/src/components/action-sheet/action-sheet.ios.vars.scss +++ b/core/src/components/action-sheet/action-sheet.ios.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Font family of the action sheet -$action-sheet-ios-font-family: $font-family-ios-base !default; +$action-sheet-ios-font-family: $font-family-base !default; /// @prop - Text align of the action sheet $action-sheet-ios-text-align: center !default; @@ -34,7 +34,7 @@ $action-sheet-ios-background-color: $overlay-ios-background- $action-sheet-ios-translucent-background-color-alpha: .8 !default; /// @prop - Background color of the action sheet when translucent -$action-sheet-ios-translucent-background-color: css-var($background-ios-color-value, background-ios-color, $action-sheet-ios-translucent-background-color-alpha) !default; +$action-sheet-ios-translucent-background-color: rgba(var(--ion-background-color-rgb, $background-color-rgb), $action-sheet-ios-translucent-background-color-alpha) !default; /// @prop - Border radius of the action sheet $action-sheet-ios-border-radius: 13px !default; @@ -52,7 +52,7 @@ $action-sheet-ios-title-padding-bottom: 13px !default; $action-sheet-ios-title-padding-start: $action-sheet-ios-title-padding-end !default; /// @prop - Color of the action sheet title -$action-sheet-ios-title-color: $text-ios-color-step-600 !default; +$action-sheet-ios-title-color: $text-color-step-600 !default; /// @prop - Font size of the action sheet title $action-sheet-ios-title-font-size: 13px !default; @@ -70,7 +70,7 @@ $action-sheet-ios-title-border-style: solid !default; $action-sheet-ios-title-border-color-alpha: .2 !default; /// @prop - Border color of the action sheet title -$action-sheet-ios-title-border-color: css-var($text-ios-color-value, text-ios-color, $action-sheet-ios-title-border-color-alpha) !default; +$action-sheet-ios-title-border-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), $action-sheet-ios-title-border-color-alpha) !default; /// @prop - Font size of the action sheet sub title $action-sheet-ios-sub-title-font-size: 12px !default; @@ -94,10 +94,10 @@ $action-sheet-ios-button-height: 56px !default; $action-sheet-ios-button-padding: 18px !default; /// @prop - Text color of the action sheet button -$action-sheet-ios-button-text-color: ion-color($colors-ios, primary, base, ios) !default; +$action-sheet-ios-button-text-color: ion-color(primary, base) !default; /// @prop - Font size of the action sheet button icon -$action-sheet-ios-button-icon-font-size: 1.4em !default; +$action-sheet-ios-button-icon-font-size: 28px !default; /// @prop - Padding right of the action sheet button icon $action-sheet-ios-button-icon-padding-right: .1em !default; @@ -121,7 +121,7 @@ $action-sheet-ios-button-border-style: solid !default; $action-sheet-ios-button-border-color-alpha: .2 !default; /// @prop - Border color of the action sheet button -$action-sheet-ios-button-border-color: css-var($text-ios-color-value, text-ios-color, $action-sheet-ios-button-border-color-alpha) !default; +$action-sheet-ios-button-border-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), $action-sheet-ios-button-border-color-alpha) !default; /// @prop - Background color of the action sheet button $action-sheet-ios-button-background: transparent !default; @@ -130,16 +130,16 @@ $action-sheet-ios-button-background: transparent !default; $action-sheet-ios-button-background-alpha-activated: .1 !default; /// @prop - Background color of the activated action sheet button -$action-sheet-ios-button-background-activated: css-var($text-ios-color-value, text-ios-color, $action-sheet-ios-button-background-alpha-activated) !default; +$action-sheet-ios-button-background-activated: rgba(var(--ion-text-color-rgb, $text-color-rgb), $action-sheet-ios-button-background-alpha-activated) !default; /// @prop - Background color of the selected action sheet button -$action-sheet-ios-button-background-selected: $background-ios-color !default; +$action-sheet-ios-button-background-selected: $background-color !default; /// @prop - Destructive text color of the action sheet button -$action-sheet-ios-button-destructive-text-color: ion-color($colors-ios, danger, base, ios) !default; +$action-sheet-ios-button-destructive-text-color: ion-color(danger, base) !default; /// @prop - Background color of the action sheet cancel button -$action-sheet-ios-button-cancel-background: $background-ios-color !default; +$action-sheet-ios-button-cancel-background: $background-color !default; /// @prop - Font weight of the action sheet cancel button $action-sheet-ios-button-cancel-font-weight: 600 !default; diff --git a/core/src/components/action-sheet/action-sheet.md.scss b/core/src/components/action-sheet/action-sheet.md.scss index c2ced00fac..580b4f2bd6 100644 --- a/core/src/components/action-sheet/action-sheet.md.scss +++ b/core/src/components/action-sheet/action-sheet.md.scss @@ -4,23 +4,23 @@ // Material Design Action Sheet // -------------------------------------------------- -.action-sheet-md { +:host { font-family: $action-sheet-md-font-family; } // Material Design Action Sheet Title // ----------------------------------------- -.action-sheet-md .action-sheet-title { +.action-sheet-title { @include padding($action-sheet-md-title-padding-top, $action-sheet-md-title-padding-end, $action-sheet-md-title-padding-bottom, $action-sheet-md-title-padding-start); - @include text-align($action-sheet-md-text-align); + text-align: $action-sheet-md-text-align; font-size: $action-sheet-md-title-font-size; color: $action-sheet-md-title-color; } -.action-sheet-md .action-sheet-sub-title { +.action-sheet-sub-title { @include padding($action-sheet-md-sub-title-padding-top, $action-sheet-md-sub-title-padding-end, $action-sheet-md-sub-title-padding-bottom, $action-sheet-md-sub-title-padding-start); font-size: $action-sheet-md-sub-title-font-size; @@ -30,15 +30,15 @@ // Material Design Action Sheet Group // ----------------------------------------- -.action-sheet-md .action-sheet-group { +.action-sheet-group { background-color: $action-sheet-md-background-color; } -.action-sheet-md .action-sheet-group:first-child { +.action-sheet-group:first-child { @include padding($action-sheet-md-padding-top, null, null, null); } -.action-sheet-md .action-sheet-group:last-child { +.action-sheet-group:last-child { @include padding(null, null, $action-sheet-md-padding-bottom, null); } @@ -46,10 +46,10 @@ // Material Design Action Sheet Buttons // ----------------------------------------- -.action-sheet-md .action-sheet-button { +.action-sheet-button { @include padding($action-sheet-md-button-padding-top, $action-sheet-md-button-padding-end, $action-sheet-md-button-padding-bottom, $action-sheet-md-button-padding-start); - @include text-align($action-sheet-md-text-align); + text-align: $action-sheet-md-text-align; position: relative; overflow: hidden; @@ -63,21 +63,21 @@ contain: strict; } -.action-sheet-md .action-sheet-button.activated { +.action-sheet-button.activated { background: $action-sheet-md-button-background-activated; } -.action-sheet-md .action-sheet-icon { +.action-sheet-icon { @include margin($action-sheet-md-icon-margin-top, $action-sheet-md-icon-margin-end, $action-sheet-md-icon-margin-bottom, $action-sheet-md-icon-margin-start); font-size: $action-sheet-md-icon-font-size; } -.action-sheet-md .action-sheet-button-inner { +.action-sheet-button-inner { justify-content: flex-start; } -.action-sheet-md .action-sheet-selected { +.action-sheet-selected { font-weight: bold; background-color: $action-sheet-md-button-background-selected; } diff --git a/core/src/components/action-sheet/action-sheet.md.vars.scss b/core/src/components/action-sheet/action-sheet.md.vars.scss index b27e88c8cc..d413d4c0f3 100644 --- a/core/src/components/action-sheet/action-sheet.md.vars.scss +++ b/core/src/components/action-sheet/action-sheet.md.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Font family of the action sheet -$action-sheet-md-font-family: $font-family-md-base !default; +$action-sheet-md-font-family: $font-family-base !default; /// @prop - Text align of the action sheet $action-sheet-md-text-align: start !default; @@ -19,7 +19,7 @@ $action-sheet-md-padding-top: 8px !default; $action-sheet-md-padding-bottom: 8px !default; /// @prop - Color of the action sheet title -$action-sheet-md-title-color: $text-md-color-step-400 !default; +$action-sheet-md-title-color: $text-color-step-400 !default; /// @prop - Font size of the action sheet title $action-sheet-md-title-font-size: 16px !default; @@ -55,7 +55,7 @@ $action-sheet-md-sub-title-padding-start: $action-sheet-md-sub-tit $action-sheet-md-button-height: 48px !default; /// @prop - Text color of the action sheet button -$action-sheet-md-button-text-color: $text-md-color-step-150 !default; +$action-sheet-md-button-text-color: $text-color-step-150 !default; /// @prop - Font size of the action sheet button $action-sheet-md-button-font-size: 16px !default; @@ -76,7 +76,7 @@ $action-sheet-md-button-padding-start: $action-sheet-md-button- $action-sheet-md-button-background: transparent !default; /// @prop - Background color of the action sheet activated button -$action-sheet-md-button-background-activated: $background-md-color-step-50 !default; +$action-sheet-md-button-background-activated: $background-color-step-50 !default; /// @prop - Background color of the selected action sheet button $action-sheet-md-button-background-selected: null !default; diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss index b90e591c18..b051e26029 100644 --- a/core/src/components/action-sheet/action-sheet.scss +++ b/core/src/components/action-sheet/action-sheet.scss @@ -3,7 +3,7 @@ // Action Sheet // -------------------------------------------------- -ion-action-sheet { +:host { @include font-smoothing(); @include position(0, 0, 0, 0); @@ -36,10 +36,7 @@ ion-action-sheet { font-family: inherit; - &:active, - &:focus { - outline: none; - } + outline: none; } .action-sheet-button-inner { @@ -66,15 +63,21 @@ ion-action-sheet { } .action-sheet-group { - overflow: scroll; + -webkit-overflow-scrolling: touch; - overscroll-behavior: contain; + overflow-y: scroll; + + overscroll-behavior-y: contain; flex-shrink: 2; pointer-events: all; } +.action-sheet-group::-webkit-scrollbar { + display: none; +} + .action-sheet-group-cancel { overflow: hidden; diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx index f7acd23251..0a60b0f3e1 100644 --- a/core/src/components/action-sheet/action-sheet.tsx +++ b/core/src/components/action-sheet/action-sheet.tsx @@ -1,7 +1,7 @@ import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core'; -import { ActionSheetButton, Animation, AnimationBuilder, Color, Config, CssClassMap, Mode } from '../../interface'; -import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, isCancel, present } from '../../utils/overlays'; -import { createThemedClasses, getClassMap } from '../../utils/theme'; +import { ActionSheetButton, Animation, AnimationBuilder, Color, Config, CssClassMap, Mode, OverlayEventDetail, OverlayInterface } from '../../interface'; +import { BACKDROP, dismiss, eventMethod, isCancel, present } from '../../utils/overlays'; +import { createColorClasses, getClassMap } from '../../utils/theme'; import { iosEnterAnimation } from './animations/ios.enter'; import { iosLeaveAnimation } from './animations/ios.leave'; import { mdEnterAnimation } from './animations/md.enter'; @@ -14,9 +14,7 @@ import { mdLeaveAnimation } from './animations/md.leave'; ios: 'action-sheet.ios.scss', md: 'action-sheet.md.scss' }, - host: { - theme: 'action-sheet' - } + scoped: true }) export class ActionSheet implements OverlayInterface { @@ -201,15 +199,14 @@ export class ActionSheet implements OverlayInterface { } hostData() { - const themedClasses = this.translucent ? createThemedClasses(this.mode, this.color, 'action-sheet-translucent') : {}; - return { style: { zIndex: 20000 + this.overlayId, }, class: { - ...themedClasses, - ...getClassMap(this.cssClass) + ...createColorClasses(this.color), + ...getClassMap(this.cssClass), + 'action-sheet-translucent': this.translucent } }; } diff --git a/core/src/components/action-sheet/action-sheet.vars.scss b/core/src/components/action-sheet/action-sheet.vars.scss index 11cb6a28bf..0ed262aa44 100644 --- a/core/src/components/action-sheet/action-sheet.vars.scss +++ b/core/src/components/action-sheet/action-sheet.vars.scss @@ -7,4 +7,4 @@ $action-sheet-width: 100% !default; /// @prop - Maximum width of the action sheet -$action-sheet-max-width: 500px !default; +$action-sheet-max-width: var(--ion-action-sheet-max-width, 500px) !default; diff --git a/core/src/components/action-sheet/animations/md.leave.ts b/core/src/components/action-sheet/animations/md.leave.ts index 1b15893193..8527f99c4f 100644 --- a/core/src/components/action-sheet/animations/md.leave.ts +++ b/core/src/components/action-sheet/animations/md.leave.ts @@ -4,6 +4,7 @@ import { Animation } from '../../../interface'; * MD Action Sheet Leave Animation */ export function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise { + const baseAnimation = new Animation(); const backdropAnimation = new Animation(); diff --git a/core/src/components/action-sheet/test/basic/index.html b/core/src/components/action-sheet/test/basic/index.html index 0e433f5e56..b9fbc73f69 100644 --- a/core/src/components/action-sheet/test/basic/index.html +++ b/core/src/components/action-sheet/test/basic/index.html @@ -6,6 +6,7 @@ Action Sheet - Basic + @@ -34,7 +35,7 @@ + @@ -34,7 +35,7 @@ + diff --git a/core/src/components/action-sheet/test/translucent/index.html b/core/src/components/action-sheet/test/translucent/index.html index a9aaeff624..4ee7b3d7d8 100644 --- a/core/src/components/action-sheet/test/translucent/index.html +++ b/core/src/components/action-sheet/test/translucent/index.html @@ -6,6 +6,7 @@ Action Sheet - Translucent + diff --git a/core/src/components/alert-controller/alert-controller.tsx b/core/src/components/alert-controller/alert-controller.tsx index d3bcf6b78f..305781b506 100644 --- a/core/src/components/alert-controller/alert-controller.tsx +++ b/core/src/components/alert-controller/alert-controller.tsx @@ -31,7 +31,7 @@ export class AlertController implements OverlayController { * Create an alert overlay with alert options */ @Method() - create(opts?: AlertOptions): Promise { + create(opts?: AlertOptions): Promise { return createOverlay(this.doc.createElement('ion-alert'), opts); } diff --git a/core/src/components/alert/alert-interface.ts b/core/src/components/alert/alert-interface.ts index e47440cb54..b27a7d630a 100644 --- a/core/src/components/alert/alert-interface.ts +++ b/core/src/components/alert/alert-interface.ts @@ -29,5 +29,5 @@ export interface AlertButton { text: string; role?: string; cssClass?: string | string[]; - handler?: (value: any) => boolean|void; + handler?: (value: any) => boolean | void | {[key: string]: any}; } diff --git a/core/src/components/alert/alert.ios.scss b/core/src/components/alert/alert.ios.scss index d3ef8691fe..1f2dbd957e 100644 --- a/core/src/components/alert/alert.ios.scss +++ b/core/src/components/alert/alert.ios.scss @@ -4,12 +4,12 @@ // iOS Alert // -------------------------------------------------- -.alert-ios { +:host { font-family: $alert-ios-font-family; font-size: $alert-ios-font-size; } -.alert-ios .alert-wrapper { +.alert-wrapper { @include border-radius($alert-ios-border-radius); overflow: hidden; @@ -25,7 +25,7 @@ // iOS Translucent Alert // ----------------------------------------- -.alert-translucent-ios .alert-wrapper { +:host(.alert-translucent) .alert-wrapper { background: $alert-ios-translucent-background-color; backdrop-filter: $alert-ios-translucent-filter; @@ -35,13 +35,13 @@ // iOS Alert Header // -------------------------------------------------- -.alert-ios .alert-head { - @include text-align($alert-ios-head-text-align); +.alert-head { + text-align: $alert-ios-head-text-align; @include padding($alert-ios-head-padding-top, $alert-ios-head-padding-end, $alert-ios-head-padding-bottom, $alert-ios-head-padding-start); } -.alert-ios .alert-title { +.alert-title { @include margin($alert-ios-title-margin-top, null, null, null); font-size: $alert-ios-title-font-size; @@ -49,7 +49,7 @@ color: $alert-ios-title-color; } -.alert-ios .alert-sub-title { +.alert-sub-title { font-size: $alert-ios-sub-title-font-size; color: $alert-ios-sub-title-text-color; } @@ -58,21 +58,21 @@ // iOS Alert Message // -------------------------------------------------- -.alert-ios .alert-message, -.alert-ios .alert-input-group { +.alert-message, +.alert-input-group { @include padding($alert-ios-message-padding-top, $alert-ios-message-padding-end, $alert-ios-message-padding-bottom, $alert-ios-message-padding-start); - @include text-align($alert-ios-message-text-align); + text-align: $alert-ios-message-text-align; font-size: $alert-ios-message-font-size; color: $alert-ios-message-text-color; } -.alert-ios .alert-message { +.alert-message { max-height: $alert-ios-content-max-height; } -.alert-ios .alert-message:empty { +.alert-message:empty { @include padding($alert-ios-message-empty-padding-top, $alert-ios-message-empty-padding-end, $alert-ios-message-empty-padding-bottom, $alert-ios-message-empty-padding-start); } @@ -80,27 +80,25 @@ // iOS Alert Input // -------------------------------------------------- -.alert-ios .alert-input { +.alert-input { @include placeholder($alert-ios-input-placeholder-color); - @include appearance(none); - @include border-radius($alert-ios-input-border-radius); - @include margin($alert-ios-input-margin-top, null, null, null); - @include padding($alert-ios-input-padding-top, $alert-ios-input-padding-end, $alert-ios-input-padding-bottom, $alert-ios-input-padding-start); border: $alert-ios-input-border; background-color: $alert-ios-input-background-color; + + appearance: none; } // iOS Alert Radio/Checkbox Group // -------------------------------------------------- -.alert-ios .alert-radio-group, -.alert-ios .alert-checkbox-group { - overflow: scroll; +.alert-radio-group, +.alert-checkbox-group { + overflow-y: scroll; overscroll-behavior: contain; @@ -111,7 +109,7 @@ -webkit-overflow-scrolling: touch; } -.alert-ios .alert-tappable { +.alert-tappable { display: flex; height: $alert-ios-tappable-height; @@ -123,7 +121,7 @@ // iOS Alert Radio Label // -------------------------------------------------- -.alert-ios .alert-radio-label { +.alert-radio-label { @include padding($alert-ios-radio-label-padding-top, $alert-ios-radio-label-padding-end, $alert-ios-radio-label-padding-bottom, $alert-ios-radio-label-padding-start); overflow: hidden; @@ -142,7 +140,7 @@ // iOS Alert Radio Label: Checked // -------------------------------------------------- -.alert-ios [aria-checked=true] .alert-radio-label { +[aria-checked=true] .alert-radio-label { color: $alert-ios-radio-label-text-color-checked; } @@ -150,7 +148,7 @@ // iOS Alert Radio Checkmark: Unchecked // ----------------------------------------- -.alert-ios .alert-radio-icon { +.alert-radio-icon { position: relative; order: 1; @@ -162,7 +160,7 @@ // iOS Alert Radio Checked // ----------------------------------------- -.alert-ios [aria-checked=true] .alert-radio-inner { +[aria-checked=true] .alert-radio-inner { @include position($alert-ios-radio-icon-top, null, null, $alert-ios-radio-icon-start); position: absolute; @@ -182,7 +180,7 @@ // iOS Alert Checkbox Label // -------------------------------------------------- -.alert-ios .alert-checkbox-label { +.alert-checkbox-label { @include padding($alert-ios-checkbox-label-padding-top, $alert-ios-checkbox-label-padding-end, $alert-ios-checkbox-label-padding-bottom, $alert-ios-checkbox-label-padding-start); overflow: hidden; @@ -198,7 +196,7 @@ // iOS Alert Checkbox Outer Circle: Unchecked // ----------------------------------------- -.alert-ios .alert-checkbox-icon { +.alert-checkbox-icon { @include border-radius($alert-ios-checkbox-border-radius); @include margin($alert-ios-checkbox-margin-top, $alert-ios-checkbox-margin-end, $alert-ios-checkbox-margin-bottom, $alert-ios-checkbox-margin-start); @@ -220,7 +218,7 @@ // iOS Alert Checkbox Outer Circle: Checked // ----------------------------------------- -.alert-ios [aria-checked=true] .alert-checkbox-icon { +[aria-checked=true] .alert-checkbox-icon { border-color: $alert-ios-checkbox-border-color-on; background-color: $alert-ios-checkbox-background-color-on; } @@ -229,7 +227,7 @@ // iOS Alert Checkbox Inner Checkmark: Checked // ----------------------------------------- -.alert-ios [aria-checked=true] .alert-checkbox-inner { +[aria-checked=true] .alert-checkbox-inner { @include position($alert-ios-checkbox-icon-top, null, null, $alert-ios-checkbox-icon-start); position: absolute; @@ -249,13 +247,13 @@ // iOS Alert Button // -------------------------------------------------- -.alert-ios .alert-button-group { +.alert-button-group { @include margin-horizontal(null, -$alert-ios-button-border-width); flex-wrap: $alert-ios-button-group-flex-wrap; } -.alert-ios .alert-button { +.alert-button { @include margin($alert-ios-button-margin); @include border-radius($alert-ios-button-border-radius); @@ -273,11 +271,11 @@ background-color: $alert-ios-button-background-color; } -.alert-ios .alert-button:last-child { +.alert-button:last-child { border-right: 0; font-weight: $alert-ios-button-main-font-weight; } -.alert-ios .alert-button.activated { +.alert-button.activated { background-color: $alert-ios-button-background-color-activated; } diff --git a/core/src/components/alert/alert.ios.vars.scss b/core/src/components/alert/alert.ios.vars.scss index 6de86f87b6..8afd1fff79 100644 --- a/core/src/components/alert/alert.ios.vars.scss +++ b/core/src/components/alert/alert.ios.vars.scss @@ -6,16 +6,16 @@ // -------------------------------------------------- /// @prop - Font family of the alert -$alert-ios-font-family: $font-family-ios-base !default; +$alert-ios-font-family: $font-family-base !default; /// @prop - Font size of the alert -$alert-ios-font-size: $font-size-ios-base !default; +$alert-ios-font-size: 14px !default; /// @prop - Max width of the alert -$alert-ios-max-width: 270px !default; +$alert-ios-max-width: var(--ion-alert-max-width, 270px) !default; /// @prop - Border radius of the alert -$alert-ios-border-radius: 13px !default; +$alert-ios-border-radius: var(--ion-alert-border-radius, 13px) !default; /// @prop - Background color of the alert $alert-ios-background-color: $overlay-ios-background-color !default; @@ -24,10 +24,10 @@ $alert-ios-background-color: $overlay-ios-background- $alert-ios-translucent-background-color-alpha: .9 !default; /// @prop - Background color of the alert when translucent -$alert-ios-translucent-background-color: css-var($background-ios-color-value, background-ios-color, $alert-ios-translucent-background-color-alpha) !default; +$alert-ios-translucent-background-color: rgba(var(--ion-background-color-rgb, $background-color-rgb), $alert-ios-translucent-background-color-alpha) !default; /// @prop - Box shadow of the alert -$alert-ios-box-shadow: none !default; +$alert-ios-box-shadow: var(--ion-alert-box-shadow, none) !default; /// @prop - Padding top of the alert head $alert-ios-head-padding-top: 12px !default; @@ -45,22 +45,22 @@ $alert-ios-head-padding-start: $alert-ios-head-padding- $alert-ios-head-text-align: center !default; /// @prop - Color of the alert title -$alert-ios-title-color: $text-ios-color !default; +$alert-ios-title-color: $text-color !default; /// @prop - Margin top of the alert title $alert-ios-title-margin-top: 8px !default; /// @prop - Font size of the alert title -$alert-ios-title-font-size: 17px !default; +$alert-ios-title-font-size: var(--ion-alert-title-font-size, 17px) !default; /// @prop - Font weight of the alert title -$alert-ios-title-font-weight: 600 !default; +$alert-ios-title-font-weight: var(--ion-alert-title-font-weight, 600) !default; /// @prop - Font size of the alert sub title -$alert-ios-sub-title-font-size: 14px !default; +$alert-ios-sub-title-font-size: var(--ion-alert-sub-title-font-size, 14px) !default; /// @prop - Text color of the alert sub title -$alert-ios-sub-title-text-color: $text-ios-color-step-400 !default; +$alert-ios-sub-title-text-color: $text-color-step-400 !default; /// @prop - Padding top of the alert message $alert-ios-message-padding-top: 0 !default; @@ -75,13 +75,13 @@ $alert-ios-message-padding-bottom: 21px !default; $alert-ios-message-padding-start: $alert-ios-message-padding-end !default; /// @prop - Font size of the alert message -$alert-ios-message-font-size: 13px !default; +$alert-ios-message-font-size: var(--ion-alert-ios-message-font-size, 13px) !default; /// @prop - Text align of the alert message $alert-ios-message-text-align: center !default; /// @prop - Text color of the alert message -$alert-ios-message-text-color: $text-ios-color !default; +$alert-ios-message-text-color: $text-color !default; /// @prop - Padding top of the alert empty message $alert-ios-message-empty-padding-top: 0 !default; @@ -114,10 +114,10 @@ $alert-ios-input-padding-bottom: $alert-ios-input-padding $alert-ios-input-padding-start: $alert-ios-input-padding-end !default; /// @prop - Placeholder Color for input -$alert-ios-input-placeholder-color: $placeholder-text-ios-color !default; +$alert-ios-input-placeholder-color: $placeholder-text-color !default; /// @prop - Border color of the alert input -$alert-ios-input-border-color: $background-ios-color-step-250 !default; +$alert-ios-input-border-color: $background-color-step-250 !default; /// @prop - Border of the alert input $alert-ios-input-border: $hairlines-width solid $alert-ios-input-border-color !default; @@ -126,7 +126,7 @@ $alert-ios-input-border: $hairlines-width solid $ $alert-ios-input-border-radius: 4px !default; /// @prop - Background color of the alert input -$alert-ios-input-background-color: $background-ios-color !default; +$alert-ios-input-background-color: $background-color !default; /// @prop - Flex wrap of the alert button group $alert-ios-button-group-flex-wrap: wrap !default; @@ -147,7 +147,7 @@ $alert-ios-button-min-height: 44px !default; $alert-ios-button-font-size: 17px !default; /// @prop - Color of the text in the alert button -$alert-ios-button-text-color: ion-color($colors-ios, primary, base, ios) !default; +$alert-ios-button-text-color: ion-color(primary, base) !default; /// @prop - Background color of the alert button $alert-ios-button-background-color: transparent !default; @@ -156,7 +156,7 @@ $alert-ios-button-background-color: transparent !default; $alert-ios-button-background-color-alpha-activated: .1 !default; /// @prop - Background color of the alert activated button -$alert-ios-button-background-color-activated: css-var($text-ios-color-value, text-ios-color, $alert-ios-button-background-color-alpha-activated) !default; +$alert-ios-button-background-color-activated: rgba(var(--ion-text-color-rgb, $text-color-rgb), $alert-ios-button-background-color-alpha-activated) !default; /// @prop - Border width of the alert button $alert-ios-button-border-width: $hairlines-width !default; @@ -168,7 +168,7 @@ $alert-ios-button-border-style: solid !default; $alert-ios-button-border-color-alpha: .2 !default; /// @prop - Border color of the alert button -$alert-ios-button-border-color: css-var($text-ios-color-value, text-ios-color, $alert-ios-button-border-color-alpha) !default; +$alert-ios-button-border-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), $alert-ios-button-border-color-alpha) !default; /// @prop - Border radius of the alert button $alert-ios-button-border-radius: 0 !default; @@ -192,7 +192,7 @@ $alert-ios-radio-label-padding-bottom: $alert-ios-radio-label-p $alert-ios-radio-label-padding-start: $alert-ios-radio-label-padding-end !default; /// @prop - Text color of the label for the radio alert -$alert-ios-radio-label-text-color: $text-ios-color !default; +$alert-ios-radio-label-text-color: $text-color !default; /// @prop - Text color of the label for the checked radio alert $alert-ios-radio-label-text-color-checked: $alert-ios-button-text-color !default; @@ -237,7 +237,7 @@ $alert-ios-checkbox-label-padding-bottom: $alert-ios-checkbox-labe $alert-ios-checkbox-label-padding-start: $alert-ios-checkbox-label-padding-end !default; /// @prop - Text color of the label for the checkbox in the alert -$alert-ios-checkbox-label-text-color: $text-ios-color !default; +$alert-ios-checkbox-label-text-color: $text-color !default; /// @prop - Margin top of the checkbox in the alert $alert-ios-checkbox-margin-top: 10px !default; @@ -267,13 +267,13 @@ $alert-ios-checkbox-border-radius: 50% !default; $alert-ios-checkbox-border-color-off: $item-ios-border-color !default; /// @prop - Border color of the checkbox in the alert when on -$alert-ios-checkbox-border-color-on: ion-color($colors-ios, primary, base, ios) !default; +$alert-ios-checkbox-border-color-on: ion-color(primary, base) !default; /// @prop - Background color of the checkbox in the alert when off -$alert-ios-checkbox-background-color-off: $item-ios-background-color !default; +$alert-ios-checkbox-background-color-off: $item-background-color !default; /// @prop - Background color of the checkbox in the alert when on -$alert-ios-checkbox-background-color-on: ion-color($colors-ios, primary, base, ios) !default; +$alert-ios-checkbox-background-color-on: ion-color(primary, base) !default; /// @prop - Top of the icon in the checkbox alert $alert-ios-checkbox-icon-top: $alert-ios-checkbox-size / 6 !default; @@ -294,7 +294,7 @@ $alert-ios-checkbox-icon-border-width: $alert-ios-checkbox-bord $alert-ios-checkbox-icon-border-style: $alert-ios-checkbox-border-style !default; /// @prop - Border color of the icon in the checkbox alert -$alert-ios-checkbox-icon-border-color: $background-ios-color !default; +$alert-ios-checkbox-icon-border-color: $background-color !default; /// @prop - Transform of the icon in the checkbox alert $alert-ios-checkbox-icon-transform: rotate(45deg) !default; diff --git a/core/src/components/alert/alert.md.scss b/core/src/components/alert/alert.md.scss index 1c95b686c6..052582a972 100644 --- a/core/src/components/alert/alert.md.scss +++ b/core/src/components/alert/alert.md.scss @@ -4,12 +4,12 @@ // Material Design Alert // -------------------------------------------------- -.alert-md { +:host { font-family: $alert-md-font-family; font-size: $alert-md-font-size; } -.alert-md .alert-wrapper { +.alert-wrapper { @include border-radius($alert-md-border-radius); max-width: $alert-md-max-width; @@ -22,19 +22,19 @@ // Material Design Alert Header // -------------------------------------------------- -.alert-md .alert-head { - @include text-align($alert-md-head-text-align); +.alert-head { + text-align: $alert-md-head-text-align; @include padding($alert-md-head-padding-top, $alert-md-head-padding-end, $alert-md-head-padding-bottom, $alert-md-head-padding-start); } -.alert-md .alert-title { +.alert-title { font-size: $alert-md-title-font-size; font-weight: $alert-md-title-font-weight; color: $alert-md-title-color; } -.alert-md .alert-sub-title { +.alert-sub-title { font-size: $alert-md-sub-title-font-size; color: $alert-md-sub-title-text-color; } @@ -43,20 +43,20 @@ // Material Design Alert Message // -------------------------------------------------- -.alert-md .alert-message, -.alert-md .alert-input-group { +.alert-message, +.alert-input-group { @include padding($alert-md-message-padding-top, $alert-md-message-padding-end, $alert-md-message-padding-bottom, $alert-md-message-padding-start); color: $alert-md-message-text-color; } -.alert-md .alert-message { +.alert-message { max-height: $alert-md-content-max-height; font-size: $alert-md-message-font-size; } -.alert-md .alert-message:empty { +.alert-message:empty { @include padding($alert-md-message-empty-padding-top, $alert-md-message-empty-padding-end, $alert-md-message-empty-padding-bottom, $alert-md-message-empty-padding-start); } @@ -64,7 +64,7 @@ // Material Design Alert Input // -------------------------------------------------- -.alert-md .alert-input { +.alert-input { @include placeholder($alert-md-input-placeholder-color); @include margin($alert-md-input-margin-top, $alert-md-input-margin-end, $alert-md-input-margin-bottom, $alert-md-input-margin-start); @@ -72,7 +72,7 @@ color: $alert-md-input-text-color; } -.alert-md .alert-input:focus { +.alert-input:focus { @include margin(null, null, $alert-md-input-margin-bottom - 1, null); border-bottom: $alert-md-input-border-width-focused $alert-md-input-border-style-focused $alert-md-input-border-color-focused; @@ -82,8 +82,8 @@ // Material Design Alert Radio/Checkbox Group // -------------------------------------------------- -.alert-md .alert-radio-group, -.alert-md .alert-checkbox-group { +.alert-radio-group, +.alert-checkbox-group { position: relative; overflow: auto; @@ -93,7 +93,7 @@ border-bottom: $alert-md-list-border-bottom; } -.alert-md .alert-tappable { +.alert-tappable { position: relative; display: flex; @@ -108,7 +108,7 @@ // Material Design Alert Radio // -------------------------------------------------- -.alert-md .alert-radio-label { +.alert-radio-label { @include padding($alert-md-radio-label-padding-top, $alert-md-radio-label-padding-end, $alert-md-radio-label-padding-bottom, $alert-md-radio-label-padding-start); overflow: hidden; @@ -125,7 +125,7 @@ // Material Design Alert Radio Unchecked Circle // --------------------------------------------------- -.alert-md .alert-radio-icon { +.alert-radio-icon { @include position($alert-md-radio-top, null, null, $alert-md-radio-left); @include border-radius($alert-md-radio-border-radius); @@ -143,7 +143,7 @@ // Material Design Alert Radio Checked Dot // --------------------------------------------------- -.alert-md .alert-radio-inner { +.alert-radio-inner { @include position($alert-md-radio-icon-top, null, null, $alert-md-radio-icon-start); @include border-radius($alert-md-radio-icon-border-radius); @@ -161,15 +161,15 @@ // Material Design Alert Radio Checked // --------------------------------------------------- -.alert-md [aria-checked=true] .alert-radio-label { +[aria-checked=true] .alert-radio-label { color: $alert-md-radio-label-text-color-checked; } -.alert-md [aria-checked=true] .alert-radio-icon { +[aria-checked=true] .alert-radio-icon { border-color: $alert-md-radio-border-color-on; } -.alert-md [aria-checked=true] .alert-radio-inner { +[aria-checked=true] .alert-radio-inner { transform: $alert-md-radio-icon-transform-on; } @@ -177,7 +177,7 @@ // Material Design Alert Checkbox Label // -------------------------------------------------- -.alert-md .alert-checkbox-label { +.alert-checkbox-label { @include padding($alert-md-checkbox-label-padding-top, $alert-md-checkbox-label-padding-end, $alert-md-checkbox-label-padding-bottom, $alert-md-checkbox-label-padding-start); overflow: hidden; @@ -195,7 +195,7 @@ // Material Design Alert Checkbox Outline: Unchecked // -------------------------------------------------- -.alert-md .alert-checkbox-icon { +.alert-checkbox-icon { @include position($alert-md-checkbox-top, null, null, $alert-md-checkbox-left); @include border-radius($alert-md-checkbox-border-radius); @@ -214,12 +214,12 @@ // Material Design Alert Checkbox Checkmark: Checked // -------------------------------------------------- -.alert-md [aria-checked=true] .alert-checkbox-icon { +[aria-checked=true] .alert-checkbox-icon { border-color: $alert-md-checkbox-border-color-on; background-color: $alert-md-checkbox-border-color-on; } -.alert-md [aria-checked=true] .alert-checkbox-inner { +[aria-checked=true] .alert-checkbox-inner { @include position($alert-md-checkbox-icon-top, null, null, $alert-md-checkbox-icon-start); position: absolute; @@ -239,7 +239,7 @@ // Material Design Alert Button // -------------------------------------------------- -.alert-md .alert-button-group { +.alert-button-group { @include padding($alert-md-button-group-padding-top, $alert-md-button-group-padding-end, $alert-md-button-group-padding-bottom, $alert-md-button-group-padding-start); box-sizing: border-box; @@ -248,14 +248,14 @@ justify-content: $alert-md-button-group-justify-content; } -.alert-md .alert-button { +.alert-button { @include border-radius($alert-md-button-border-radius); @include margin($alert-md-button-margin-top, $alert-md-button-margin-end, $alert-md-button-margin-bottom, $alert-md-button-margin-start); @include padding($alert-md-button-padding-top, $alert-md-button-padding-end, $alert-md-button-padding-bottom, $alert-md-button-padding-start); - @include text-align($alert-md-button-text-align); + text-align: $alert-md-button-text-align; // necessary for ripple to work properly position: relative; @@ -267,10 +267,10 @@ background-color: $alert-md-button-background-color; } -.alert-md .alert-button.activated { +.alert-button.activated { background-color: $alert-md-button-background-color-activated; } -.alert-md .alert-button-inner { +.alert-button-inner { justify-content: $alert-md-button-group-justify-content; } diff --git a/core/src/components/alert/alert.md.vars.scss b/core/src/components/alert/alert.md.vars.scss index 31c864aa19..752a821140 100644 --- a/core/src/components/alert/alert.md.vars.scss +++ b/core/src/components/alert/alert.md.vars.scss @@ -6,25 +6,22 @@ // -------------------------------------------------- /// @prop - Font family of the alert -$alert-md-font-family: $font-family-md-base !default; +$alert-md-font-family: $font-family-base !default; /// @prop - Font size of the alert -$alert-md-font-size: $font-size-md-base !default; +$alert-md-font-size: 14px !default; /// @prop - Max width of the alert -$alert-md-max-width: 280px !default; +$alert-md-max-width: var(--ion-alert-max-width, 280px) !default; /// @prop - Border radius of the alert -$alert-md-border-radius: 2px !default; +$alert-md-border-radius: var(--ion-alert-border-radius, 2px) !default; /// @prop - Background color of the alert $alert-md-background-color: $overlay-md-background-color !default; /// @prop - Box shadow color of the alert -$alert-md-box-shadow-color: rgba(0, 0, 0, .4) !default; - -/// @prop - Box shadow of the alert -$alert-md-box-shadow: 0 16px 20px $alert-md-box-shadow-color !default; +$alert-md-box-shadow: var(--ion-alert-box-shadow, 0 16px 20px rgba(0, 0, 0, .4)) !default; /// @prop - Padding top of the alert head $alert-md-head-padding-top: 20px !default; @@ -42,19 +39,19 @@ $alert-md-head-padding-start: $alert-md-head-padding-end !defaul $alert-md-head-text-align: start !default; /// @prop - Color of the alert title -$alert-md-title-color: $text-md-color !default; +$alert-md-title-color: $text-color !default; /// @prop - Font size of the alert title -$alert-md-title-font-size: 20px !default; +$alert-md-title-font-size: var(--ion-alert-title-font-size, 20px) !default; /// @prop - Font weight of the alert title -$alert-md-title-font-weight: 500 !default; +$alert-md-title-font-weight: var(--ion-alert-title-font-weight, 500) !default; /// @prop - Font size of the alert sub title -$alert-md-sub-title-font-size: 16px !default; +$alert-md-sub-title-font-size: var(--ion-alert-sub-title-font-size, 16px) !default; /// @prop - Text color of the alert sub title -$alert-md-sub-title-text-color: $text-md-color !default; +$alert-md-sub-title-text-color: $text-color !default; /// @prop - Padding top of the alert message $alert-md-message-padding-top: 0 !default; @@ -69,10 +66,10 @@ $alert-md-message-padding-bottom: 24px !default; $alert-md-message-padding-start: $alert-md-message-padding-end !default; /// @prop - Font size of the alert message -$alert-md-message-font-size: 15px !default; +$alert-md-message-font-size: var(--ion-alert-message-font-size, 15px) !default; /// @prop - Text color of the alert message -$alert-md-message-text-color: $text-md-color-step-450 !default; +$alert-md-message-text-color: $text-color-step-450 !default; /// @prop - Padding top of the alert empty message $alert-md-message-empty-padding-top: 0 !default; @@ -96,10 +93,10 @@ $alert-md-input-border-width: 1px !default; $alert-md-input-border-style: solid !default; /// @prop - Border color of the alert input -$alert-md-input-border-color: $background-md-color-step-150 !default; +$alert-md-input-border-color: $background-color-step-150 !default; /// @prop - Text color of the alert input -$alert-md-input-text-color: $text-md-color !default; +$alert-md-input-text-color: $text-color !default; /// @prop - Border width of the alert input when focused $alert-md-input-border-width-focused: 2px !default; @@ -108,7 +105,7 @@ $alert-md-input-border-width-focused: 2px !default; $alert-md-input-border-style-focused: $alert-md-input-border-style !default; /// @prop - Border color of the alert input when focused -$alert-md-input-border-color-focused: ion-color($colors-md, primary, base, md) !default; +$alert-md-input-border-color-focused: ion-color(primary, base) !default; /// @prop - Margin top of the alert input $alert-md-input-margin-top: 5px !default; @@ -123,7 +120,7 @@ $alert-md-input-margin-bottom: 5px !default; $alert-md-input-margin-start: 0 !default; /// @prop - Placeholder Color for input -$alert-md-input-placeholder-color: $placeholder-text-md-color !default; +$alert-md-input-placeholder-color: $placeholder-text-color !default; /// @prop - Flex wrap of the alert button group $alert-md-button-group-flex-wrap: wrap-reverse !default; @@ -171,13 +168,13 @@ $alert-md-button-margin-start: 0 !default; $alert-md-button-font-weight: 500 !default; /// @prop - Text color of the alert button -$alert-md-button-text-color: ion-color($colors-md, primary, base, md) !default; +$alert-md-button-text-color: ion-color(primary, base) !default; /// @prop - Background color of the alert button $alert-md-button-background-color: transparent !default; /// @prop - Background color of the alert activated button -$alert-md-button-background-color-activated: $background-md-color-step-400 !default; +$alert-md-button-background-color-activated: $background-color-step-400 !default; /// @prop - Border radius of the alert button $alert-md-button-border-radius: 2px !default; @@ -216,7 +213,7 @@ $alert-md-radio-border-style: solid !default; $alert-md-radio-border-radius: 50% !default; /// @prop - Border color of the alert radio when off -$alert-md-radio-border-color-off: $text-md-color-step-450 !default; +$alert-md-radio-border-color-off: $text-color-step-450 !default; /// @prop - Border color of the alert radio when on $alert-md-radio-border-color-on: $alert-md-button-text-color !default; @@ -261,7 +258,7 @@ $alert-md-radio-label-padding-start: $alert-md-radio-label-padding-end $alert-md-radio-label-font-size: 16px !default; /// @prop - Text color of the label for the radio alert -$alert-md-radio-label-text-color: $text-md-color-step-150 !default; +$alert-md-radio-label-text-color: $text-color-step-150 !default; /// @prop - Text color of the label for the checked radio alert $alert-md-radio-label-text-color-checked: $alert-md-radio-label-text-color !default; @@ -288,7 +285,7 @@ $alert-md-checkbox-border-style: solid !default; $alert-md-checkbox-border-radius: 2px !default; /// @prop - Border color of the checkbox in the alert when off -$alert-md-checkbox-border-color-off: $text-md-color-step-450 !default; +$alert-md-checkbox-border-color-off: $text-color-step-450 !default; /// @prop - Border color of the checkbox in the alert when on $alert-md-checkbox-border-color-on: $alert-md-button-text-color !default; @@ -312,7 +309,7 @@ $alert-md-checkbox-icon-border-width: 2px !default; $alert-md-checkbox-icon-border-style: solid !default; /// @prop - Border color of the icon in the checkbox alert -$alert-md-checkbox-icon-border-color: ion-color($colors-md, $alert-md-checkbox-border-color-on, contrast, md) !default; +$alert-md-checkbox-icon-border-color: ion-color(primary, contrast) !default; /// @prop - Transform of the icon in the checkbox alert $alert-md-checkbox-icon-transform: rotate(45deg) !default; @@ -330,7 +327,7 @@ $alert-md-checkbox-label-padding-bottom: $alert-md-checkbox-label-padding-t $alert-md-checkbox-label-padding-start: $alert-md-checkbox-label-padding-end + 27px !default; /// @prop - Text color of the label for the checkbox in the alert -$alert-md-checkbox-label-text-color: $text-md-color-step-150 !default; +$alert-md-checkbox-label-text-color: $text-color-step-150 !default; /// @prop - Font size of the label for the checkbox in the alert $alert-md-checkbox-label-font-size: 16px !default; diff --git a/core/src/components/alert/alert.scss b/core/src/components/alert/alert.scss index b11eb83719..8996844392 100644 --- a/core/src/components/alert/alert.scss +++ b/core/src/components/alert/alert.scss @@ -3,7 +3,7 @@ // Alert // -------------------------------------------------- -ion-alert { +:host { @include font-smoothing(); @include position(0, 0, 0, 0); @@ -21,7 +21,7 @@ ion-alert { contain: strict; } -ion-alert.alert-top { +:host(.alert-top) { @include padding(50px, null, null, null); align-items: flex-start; @@ -63,6 +63,10 @@ ion-alert.alert-top { overscroll-behavior-y: contain; } +.alert-message::-webkit-scrollbar { + display: none; +} + .alert-input { @include padding(10px, 0); @@ -114,8 +118,7 @@ ion-alert.alert-top { } .alert-tappable { - @include text-align(start); - @include appearance(none); + text-align: start; @include margin(0); @include padding(0); @@ -126,6 +129,8 @@ ion-alert.alert-top { font-size: inherit; line-height: initial; background: transparent; + + appearance: none; } .alert-button, diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx index 7ffc559aff..89d8adf114 100644 --- a/core/src/components/alert/alert.tsx +++ b/core/src/components/alert/alert.tsx @@ -1,7 +1,7 @@ import { Component, Element, Event, EventEmitter, Listen, Method, Prop, Watch } from '@stencil/core'; -import { AlertButton, AlertInput, Animation, AnimationBuilder, Color, Config, CssClassMap, Mode } from '../../interface'; -import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, isCancel, present } from '../../utils/overlays'; -import { createThemedClasses, getClassMap } from '../../utils/theme'; +import { AlertButton, AlertInput, Animation, AnimationBuilder, Color, Config, CssClassMap, Mode, OverlayEventDetail, OverlayInterface } from '../../interface'; +import { BACKDROP, dismiss, eventMethod, isCancel, present } from '../../utils/overlays'; +import { createColorClasses, getClassMap } from '../../utils/theme'; import { iosEnterAnimation } from './animations/ios.enter'; import { iosLeaveAnimation } from './animations/ios.leave'; @@ -14,15 +14,14 @@ import { mdLeaveAnimation } from './animations/md.leave'; ios: 'alert.ios.scss', md: 'alert.md.scss' }, - host: { - theme: 'alert' - } + scoped: true }) export class Alert implements OverlayInterface { private activeId?: string; private inputType?: string; private processedInputs: AlertInput[] = []; + private processedButtons: AlertButton[] = []; presented = false; animation?: Animation; @@ -71,7 +70,7 @@ export class Alert implements OverlayInterface { /** * Array of buttons to be added to the alert. */ - @Prop() buttons: AlertButton[] = []; + @Prop() buttons: (AlertButton | string)[] = []; /** * Array of input to show in the alert. @@ -123,6 +122,16 @@ export class Alert implements OverlayInterface { */ @Event({eventName: 'ionAlertDidDismiss'}) didDismiss!: EventEmitter; + @Watch('buttons') + buttonsChanged() { + const buttons = this.buttons; + this.processedButtons = buttons.map(btn => { + return (typeof btn === 'string') + ? { text: btn, role: btn.toLowerCase() === 'cancel' ? 'cancel' : undefined } + : btn; + }).filter(b => b != null); + } + @Watch('inputs') inputsChanged() { const inputs = this.inputs; @@ -151,6 +160,7 @@ export class Alert implements OverlayInterface { componentWillLoad() { this.inputsChanged(); + this.buttonsChanged(); } componentDidLoad() { @@ -170,7 +180,7 @@ export class Alert implements OverlayInterface { protected dispatchCancelHandler(ev: CustomEvent) { const role = ev.detail.role; if (isCancel(role)) { - const cancelButton = this.buttons.find(b => b.role === 'cancel'); + const cancelButton = this.processedButtons.find(b => b.role === 'cancel'); this.callButtonHandler(cancelButton); } } @@ -232,58 +242,58 @@ export class Alert implements OverlayInterface { private buttonClick(button: AlertButton) { const role = button.role; + const values = this.getValues(); if (isCancel(role)) { - this.dismiss(this.getValues(), role); + this.dismiss({values}, role); return; } - const shouldDismiss = this.callButtonHandler(button); - if (shouldDismiss) { - this.dismiss(this.getValues(), button.role); + const returnData = this.callButtonHandler(button, values); + if (returnData !== false) { + this.dismiss({values, ...returnData}, button.role); } } - private callButtonHandler(button: AlertButton|undefined): boolean { + private callButtonHandler(button: AlertButton|undefined, data: any = undefined) { if (button && button.handler) { // a handler has been provided, execute it // pass the handler the values from the inputs - if (button.handler(this.getValues()) === false) { + const returnData = button.handler(data); + if (returnData === false) { // if the return value of the handler is false then do not dismiss return false; } + if (typeof returnData === 'object') { + return returnData; + } } - return true; + return {}; } private getValues(): any { + if (this.processedInputs.length === 0) { + // this is an alert without any options/inputs at all + return undefined; + } + if (this.inputType === 'radio') { // this is an alert with radio buttons (single value select) // return the one value which is checked, otherwise undefined const checkedInput = this.processedInputs.find(i => i.checked === true); - console.debug('returning', checkedInput ? checkedInput.value : undefined); return checkedInput ? checkedInput.value : undefined; } if (this.inputType === 'checkbox') { // this is an alert with checkboxes (multiple value select) // return an array of all the checked values - console.debug('returning', this.processedInputs.filter(i => i.checked).map(i => i.value)); return this.processedInputs.filter(i => i.checked).map(i => i.value); } - if (this.processedInputs.length === 0) { - // this is an alert without any options/inputs at all - console.debug('returning', 'undefined'); - return undefined; - } - // this is an alert with text inputs // return an object of all the values with the input name as the key const values: {[k: string]: string} = {}; this.processedInputs.forEach(i => { values[i.name] = i.value || ''; }); - - console.debug('returning', values); return values; } @@ -366,20 +376,38 @@ export class Alert implements OverlayInterface { } hostData() { - const themedClasses = this.translucent ? createThemedClasses(this.mode, this.color, 'alert-translucent') : {}; - return { role: 'alertdialog', style: { zIndex: 20000 + this.overlayId, }, class: { - ...themedClasses, - ...getClassMap(this.cssClass) + ...createColorClasses(this.color), + ...getClassMap(this.cssClass), + 'alert-translucent': this.translucent } }; } + private renderAlertButtons() { + const buttons = this.processedButtons; + const alertButtonGroupClass = { + 'alert-button-group': true, + 'alert-button-group-vertical': buttons.length > 2 + }; + return ( +
+ {buttons.map(button => + + )} +
+ ); + } + render() { const hdrId = `alert-${this.overlayId}-hdr`; const subHdrId = `alert-${this.overlayId}-sub-hdr`; @@ -392,19 +420,6 @@ export class Alert implements OverlayInterface { labelledById = subHdrId; } - const buttons = this.buttons.map(b => { - if (typeof b === 'string') { - return { text: b } as AlertButton; - } - return b; - }) - .filter(b => b !== null); - - const alertButtonGroupClass = { - 'alert-button-group': true, - 'alert-button-group-vertical': buttons.length > 2 - }; - return [ , @@ -418,16 +433,8 @@ export class Alert implements OverlayInterface {
{ this.renderAlertInputs(labelledById) } + { this.renderAlertButtons() } -
- {buttons.map(button => - - )} -
]; } diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md index dc52384070..b32955da85 100644 --- a/core/src/components/alert/readme.md +++ b/core/src/components/alert/readme.md @@ -27,7 +27,7 @@ Alerts can also include several different inputs whose data can be passed back t #### buttons -AlertButton[] +(AlertButton | string)[] Array of buttons to be added to the alert. diff --git a/core/src/components/alert/test/basic/index.html b/core/src/components/alert/test/basic/index.html index 616eb2a08d..e5b8a56b2a 100644 --- a/core/src/components/alert/test/basic/index.html +++ b/core/src/components/alert/test/basic/index.html @@ -6,37 +6,38 @@ Alert - Basic + - - - Alert - Basic - - + + + Alert - Basic + + - - + + - Alert - Alert Long Message - Multiple Buttons (>2) - Alert No Message - Confirm - Prompt - Radio - Checkbox - CssClass - + Alert + Alert Long Message + Multiple Buttons (>2) + Alert No Message + Confirm + Prompt + Radio + Checkbox + CssClass + + diff --git a/core/src/components/alert/test/preview/index.html b/core/src/components/alert/test/preview/index.html index d807c01b75..39709f4953 100644 --- a/core/src/components/alert/test/preview/index.html +++ b/core/src/components/alert/test/preview/index.html @@ -6,37 +6,38 @@ Alert + - - - Alert - - + + + Alert + + - - + + - Alert - Alert Long Message - Multiple Buttons (>2) - Alert No Message - Confirm - Prompt - Radio - Checkbox - CssClass - + Alert + Alert Long Message + Multiple Buttons (>2) + Alert No Message + Confirm + Prompt + Radio + Checkbox + CssClass + + diff --git a/core/src/components/alert/test/standalone/index.html b/core/src/components/alert/test/standalone/index.html index a7b1aecc78..44a03b4b91 100644 --- a/core/src/components/alert/test/standalone/index.html +++ b/core/src/components/alert/test/standalone/index.html @@ -6,7 +6,7 @@ Alert - Standalone - + diff --git a/core/src/components/alert/test/translucent/index.html b/core/src/components/alert/test/translucent/index.html index 99a0737e1e..f6eead3701 100644 --- a/core/src/components/alert/test/translucent/index.html +++ b/core/src/components/alert/test/translucent/index.html @@ -6,6 +6,7 @@ Alert - Translucent + @@ -356,6 +357,8 @@ .orange { background-color: #f69234; } + + diff --git a/core/src/components/anchor/anchor.tsx b/core/src/components/anchor/anchor.tsx index 47e1aa0bd6..66fa907053 100644 --- a/core/src/components/anchor/anchor.tsx +++ b/core/src/components/anchor/anchor.tsx @@ -4,7 +4,8 @@ import { openURL } from '../../utils/theme'; @Component({ - tag: 'ion-anchor' + tag: 'ion-anchor', + shadow: true, }) export class Anchor { @@ -26,7 +27,7 @@ export class Anchor { return openURL(this.win, this.href, ev, this.routerDirection)}> - + ; } } diff --git a/core/src/components/app/app.ios.scss b/core/src/components/app/app.ios.scss index 7d104c9221..17b6f9fc7b 100644 --- a/core/src/components/app/app.ios.scss +++ b/core/src/components/app/app.ios.scss @@ -8,10 +8,6 @@ @include footer-safe-area($toolbar-ios-height, $toolbar-ios-padding, $tabbar-ios-height); - font-family: $font-family-ios-base; - font-size: $font-size-ios-base; - background-color: $background-ios-color; - // TODO this can be simplified &.statusbar-padding { .ion-page, @@ -19,24 +15,8 @@ .ion-page > ion-header, ion-menu > .menu-inner, ion-menu > .menu-inner > ion-header { - @include toolbar-statusbar-padding($toolbar-ios-height, $toolbar-ios-padding, $content-ios-padding, $app-ios-statusbar-padding); - @include toolbar-title-statusbar-padding($toolbar-ios-height, $toolbar-ios-padding, $content-ios-padding, $app-ios-statusbar-padding); + @include toolbar-statusbar-padding($toolbar-ios-height, $toolbar-ios-padding, $content-padding, $app-ios-statusbar-padding); + @include toolbar-title-statusbar-padding($toolbar-ios-height, $toolbar-ios-padding, $content-padding, $app-ios-statusbar-padding); } } } - -a { - color: $app-ios-link-color; -} - - -// iOS Content Padding -// -------------------------------------------------- - -@include app-padding("ios", $content-ios-padding); - - -// iOS Content Margin -// -------------------------------------------------- - -@include app-margin("ios", $content-ios-margin); diff --git a/core/src/components/app/app.ios.vars.scss b/core/src/components/app/app.ios.vars.scss index ae14385183..0332bb0fbe 100644 --- a/core/src/components/app/app.ios.vars.scss +++ b/core/src/components/app/app.ios.vars.scss @@ -6,7 +6,7 @@ // -------------------------------------------------- /// @prop - Color for links for the app -$app-ios-link-color: ion-color($colors-ios, primary, base, ios) !default; +$app-ios-link-color: ion-color(primary, base) !default; /// @prop - Statusbar padding for the app $app-ios-statusbar-padding: 20px !default; diff --git a/core/src/components/app/app.md.scss b/core/src/components/app/app.md.scss index 1265ebcb49..6e55bd1982 100644 --- a/core/src/components/app/app.md.scss +++ b/core/src/components/app/app.md.scss @@ -11,10 +11,6 @@ $toolbar-md-padding, $tabbar-md-height); - font-family: $font-family-md-base; - font-size: $font-size-md-base; - background-color: $background-md-color; - // TODO this can be simplified &.statusbar-padding { .ion-page, @@ -27,17 +23,3 @@ } } -a { - color: $app-md-link-color; -} - -// Material Design Content Padding -// -------------------------------------------------- - -@include app-padding("md", $content-md-padding); - - -// Material Design Content Margin -// -------------------------------------------------- - -@include app-margin("md", $content-md-margin); diff --git a/core/src/components/app/app.md.vars.scss b/core/src/components/app/app.md.vars.scss index 9482901799..828bd388c9 100644 --- a/core/src/components/app/app.md.vars.scss +++ b/core/src/components/app/app.md.vars.scss @@ -6,8 +6,5 @@ // Material Design App // -------------------------------------------------- -/// @prop - Color for links for the app -$app-md-link-color: ion-color($colors-md, primary, base, md) !default; - /// @prop - Statusbar padding for the app $app-md-statusbar-padding: 20px !default; diff --git a/core/src/components/app/app.scss b/core/src/components/app/app.scss index cdbd37a9bb..ea71301144 100644 --- a/core/src/components/app/app.scss +++ b/core/src/components/app/app.scss @@ -1,134 +1,5 @@ @import "./app.vars"; -// Normalize -// -------------------------------------------------- -@import "../../themes/normalize"; - - -// Util -// -------------------------------------------------- -@import "../../themes/util"; - - -// App Structure -// -------------------------------------------------- - -* { - box-sizing: border-box; - - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-tap-highlight-color: transparent; - -webkit-touch-callout: none; -} - -html { - width: 100%; - height: 100%; - - text-size-adjust: 100%; -} - -body { - @include font-smoothing(); - @include margin(0); - @include padding(0); - - position: fixed; - overflow: hidden; - - width: 100%; - max-width: 100%; - height: 100%; - max-height: 100%; - - text-rendering: optimizeLegibility; - - -webkit-user-drag: none; - - -ms-content-zooming: none; - touch-action: manipulation; - - word-wrap: break-word; - - overscroll-behavior-y: contain; - - text-size-adjust: none; - user-select: none; -} - - -// App Typography -// -------------------------------------------------- - -a { - background-color: transparent; -} - -a:not(.button):hover { - opacity: .7; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - @include margin(16px, null, 10px, null); - - font-weight: $headings-font-weight; - line-height: $headings-line-height; -} - -h1 { - @include margin(20px, null, null, null); - - font-size: $h1-font-size; -} - -h2 { - @include margin(18px, null, null, null); - - font-size: $h2-font-size; -} - -h3 { - font-size: $h3-font-size; -} - -h4 { - font-size: $h4-font-size; -} - -h5 { - font-size: $h5-font-size; -} - -h6 { - font-size: $h6-font-size; -} - -small { - font-size: 75%; -} - -sub, -sup { - position: relative; - - font-size: 75%; - line-height: 0; - vertical-align: baseline; -} - -sup { - top: -.5em; -} - -sub { - bottom: -.25em; -} - // Page Container Structure // -------------------------------------------------- @@ -159,36 +30,18 @@ ion-app, opacity: 0; } -// TODO: move to somewhere else - -$navigation-ios-transition-background: #000 !default; - -.nav-decor { - display: none; +[hidden] { + display: none !important; } -.show-decor > .nav-decor { - @include position(0, 0, 0, 0); - - // when ios pages transition, the leaving page grays out - // this is the black square behind all pages so they gray out - position: absolute; - z-index: 0; - display: block; - - background: $navigation-ios-transition-background; - - pointer-events: none; -} // Misc // -------------------------------------------------- ion-tap-click, -ion-status-tap, -ion-input-shims, ion-route, -ion-route-controller, +ion-route-redirect, +ion-router, ion-animation-controller, ion-nav-controller, ion-menu-controller, @@ -197,222 +50,6 @@ ion-alert-controller, ion-loading-controller, ion-modal-controller, ion-picker-controller, -ion-toast-controller, -[app-viewport], -[overlay-portal], -[nav-viewport], -[tab-portal] { +ion-toast-controller { display: none; } - - -// Text Alignment -// -------------------------------------------------- - -@if ($include-text-alignment-utilities == true) { - // Creates text alignment attributes based on screen size - @each $breakpoint in map-keys($screen-breakpoints) { - $infix: breakpoint-infix($breakpoint, $screen-breakpoints); - - @include media-breakpoint-up($breakpoint, $screen-breakpoints) { - // Provide `[text-{bp}]` attributes for aligning the text based - // on the breakpoint - [text#{$infix}-center] { - @include text-align(center, !important); - } - - [text#{$infix}-justify] { - @include text-align(justify, !important); - } - - [text#{$infix}-start] { - @include text-align(start, !important); - } - - [text#{$infix}-end] { - @include text-align(end, !important); - } - - [text#{$infix}-left] { - @include text-align(left, !important); - } - - [text#{$infix}-right] { - @include text-align(right, !important); - } - - [text#{$infix}-nowrap] { - // scss-lint:disable ImportantRule - white-space: nowrap !important; - } - - [text#{$infix}-wrap] { - // scss-lint:disable ImportantRule - white-space: normal !important; - } - } - } -} - - -// Text Transformation -// -------------------------------------------------- - -@if ($include-text-transform-utilities == true) { - // Creates text transform attributes based on screen size - @each $breakpoint in map-keys($screen-breakpoints) { - $infix: breakpoint-infix($breakpoint, $screen-breakpoints); - - @include media-breakpoint-up($breakpoint, $screen-breakpoints) { - // Provide `[text-{bp}]` attributes for transforming the text based - // on the breakpoint - [text#{$infix}-uppercase] { - // scss-lint:disable ImportantRule - text-transform: uppercase !important; - } - - [text#{$infix}-lowercase] { - // scss-lint:disable ImportantRule - text-transform: lowercase !important; - } - - [text#{$infix}-capitalize] { - // scss-lint:disable ImportantRule - text-transform: capitalize !important; - } - } - } -} - - -// Float Elements -// -------------------------------------------------- - -@if ($include-float-element-utilities == true) { - // Creates text transform attributes based on screen size - @each $breakpoint in map-keys($screen-breakpoints) { - $infix: breakpoint-infix($breakpoint, $screen-breakpoints); - - @include media-breakpoint-up($breakpoint, $screen-breakpoints) { - // Provide `[float-{bp}]` attributes for floating the element based - // on the breakpoint - [float#{$infix}-left] { - @include float(left, !important); - } - - [float#{$infix}-right] { - @include float(right, !important); - } - - [float#{$infix}-start] { - @include float(start, !important); - } - - [float#{$infix}-end] { - @include float(end, !important); - } - } - } -} - - - -ion-app [no-padding], -ion-app [no-padding] .scroll-inner { - @include padding(0); -} - -@mixin app-padding($mode, $content-padding) { - .app-#{$mode} [padding], - .app-#{$mode} [padding] .scroll-inner { - @include padding($content-padding); - } - - .app-#{$mode} [padding-top], - .app-#{$mode} [padding-top] .scroll-inner { - @include padding($content-padding, null, null, null); - } - - .app-#{$mode} [padding-left], - .app-#{$mode} [padding-left] .scroll-inner { - @include padding-horizontal($content-padding, null); - } - - .app-#{$mode} [padding-right], - .app-#{$mode} [padding-right] .scroll-inner { - @include padding-horizontal(null, $content-padding); - } - - .app-#{$mode} [padding-bottom], - .app-#{$mode} [padding-bottom] .scroll-inner { - @include padding(null, null, $content-padding, null); - } - - .app-#{$mode} [padding-vertical], - .app-#{$mode} [padding-vertical] .scroll-inner { - @include padding($content-padding, null, $content-padding, null); - } - - .app-#{$mode} [padding-horizontal], - .app-#{$mode} [padding-horizontal] .scroll-inner { - @include padding-horizontal($content-padding); - } -} - - -// Content Margin -// -------------------------------------------------- - -ion-app [no-margin], -ion-app [no-margin] ion-scroll { - @include margin(0); -} - -@mixin app-margin($mode, $content-margin) { - .app-#{$mode} [margin], - .app-#{$mode} [margin] .scroll-inner { - @include margin($content-margin); - } - - .app-#{$mode} [margin-top], - .app-#{$mode} [margin-top] .scroll-inner { - @include margin($content-margin, null, null, null); - } - - .app-#{$mode} [margin-left], - .app-#{$mode} [margin-left] .scroll-inner { - // scss-lint:disable PropertySpelling - margin-left: $content-margin; - } - - .app-#{$mode} [margin-start], - .app-#{$mode} [margin-start] .scroll-inner { - @include margin-horizontal($content-margin, null); - } - - .app-#{$mode} [margin-right], - .app-#{$mode} [margin-right] .scroll-inner { - // scss-lint:disable PropertySpelling - margin-right: $content-margin; - } - - .app-#{$mode} [margin-end], - .app-#{$mode} [margin-end] .scroll-inner { - @include margin-horizontal(null, $content-margin); - } - - .app-#{$mode} [margin-bottom], - .app-#{$mode} [margin-bottom] .scroll-inner { - @include margin(null, null, $content-margin, null); - } - - .app-#{$mode} [margin-vertical], - .app-#{$mode} [margin-vertical] .scroll-inner { - @include margin($content-margin, null, $content-margin, null); - } - - .app-#{$mode} [margin-horizontal], - .app-#{$mode} [margin-horizontal] .scroll-inner { - @include margin-horizontal($content-margin); - } -} diff --git a/core/src/components/app/app.tsx b/core/src/components/app/app.tsx index 878b734cc1..0edc00713b 100644 --- a/core/src/components/app/app.tsx +++ b/core/src/components/app/app.tsx @@ -1,28 +1,22 @@ -import { Component, Element, Prop } from '@stencil/core'; -import { Config, Mode } from '../../interface'; +import { Component, Element, Prop, QueueApi } from '@stencil/core'; +import { Config } from '../../interface'; import { isDevice, isHybrid, needInputShims } from '../../utils/platform'; @Component({ tag: 'ion-app', - styleUrls: { - ios: 'app.ios.scss', - md: 'app.md.scss' - }, - host: { - theme: 'app' - } + styleUrl: 'app.scss' }) export class App { - mode!: Mode; - @Element() el!: HTMLElement; @Prop({ context: 'window' }) win!: Window; @Prop({ context: 'config' }) config!: Config; + @Prop({ context: 'queue' }) queue!: QueueApi; componentDidLoad() { - loadInputShims(this.win, this.config); + importInputShims(this.win, this.config); + importStatusTap(this.win, this.config, this.queue); } hostData() { @@ -31,23 +25,27 @@ export class App { return { class: { - [this.mode]: true, 'statusbar-padding': statusBar } }; } render() { - const device = this.config.getBoolean('isDevice', isDevice(this.win)); return [ , - device && , ]; } } -async function loadInputShims(win: Window, config: Config) { +async function importStatusTap(win: Window, config: Config, queue: QueueApi) { + const device = config.getBoolean('isDevice', isDevice(win)); + if (device) { + (await import('../../utils/status-tap')).startStatusTap(win, queue); + } +} + +async function importInputShims(win: Window, config: Config) { const inputShims = config.getBoolean('inputShims', needInputShims(win)); if (inputShims) { (await import('../../utils/input-shims/input-shims')).startInputShims(win.document, config); diff --git a/core/src/components/app/app.vars.scss b/core/src/components/app/app.vars.scss index aff9cb4c30..84cd3b9f34 100644 --- a/core/src/components/app/app.vars.scss +++ b/core/src/components/app/app.vars.scss @@ -30,33 +30,3 @@ $h5-font-size: 18px !default; /// @prop - Font size of heading level 6 $h6-font-size: 16px !default; - - -// Responsive Utilities -// -------------------------------------------------- - -/// @prop - Whether to include all of the responsive utility attributes -$include-responsive-utilities: true !default; - -/// @prop - Whether to include all of the responsive text alignment attributes -$include-text-alignment-utilities: $include-responsive-utilities !default; - -/// @prop - Whether to include all of the responsive text transform attributes -$include-text-transform-utilities: $include-responsive-utilities !default; - -/// @prop - Whether to include all of the responsive float attributes -$include-float-element-utilities: $include-responsive-utilities !default; - - -// Screen Breakpoints -// -------------------------------------------------- - -/// @prop - The minimum dimensions at which your layout will change, -/// adapting to different screen sizes, for use in media queries -$screen-breakpoints: ( - xs: 0, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px -) !default; diff --git a/core/src/components/app/test/cordova/index.html b/core/src/components/app/test/cordova/index.html index 81fbe5e31a..c306b4d362 100644 --- a/core/src/components/app/test/cordova/index.html +++ b/core/src/components/app/test/cordova/index.html @@ -1,14 +1,17 @@ + App - Cordova + + @@ -343,4 +346,5 @@ + diff --git a/core/src/components/avatar/avatar.ios.scss b/core/src/components/avatar/avatar.ios.scss index 5b3c5d2c1f..5cb0d8ce8d 100644 --- a/core/src/components/avatar/avatar.ios.scss +++ b/core/src/components/avatar/avatar.ios.scss @@ -5,15 +5,15 @@ // iOS Avatar // -------------------------------------------------- -.avatar-ios { +:host { @include border-radius($avatar-ios-border-radius); width: $avatar-ios-width; height: $avatar-ios-height; } -.avatar-ios ion-img, -.avatar-ios img { +::slotted(ion-img), +::slotted(img) { @include border-radius($avatar-ios-border-radius); overflow: hidden; diff --git a/core/src/components/avatar/avatar.md.scss b/core/src/components/avatar/avatar.md.scss index c5b0ce653e..e6338e4cfa 100644 --- a/core/src/components/avatar/avatar.md.scss +++ b/core/src/components/avatar/avatar.md.scss @@ -5,15 +5,15 @@ // Material Design Avatar // -------------------------------------------------- -.avatar-md { +:host { @include border-radius($avatar-md-border-radius); width: $avatar-md-width; height: $avatar-md-height; } -.avatar-md ion-img, -.avatar-md img { +::slotted(ion-img), +::slotted(img) { @include border-radius($avatar-md-border-radius); overflow: hidden; diff --git a/core/src/components/avatar/avatar.scss b/core/src/components/avatar/avatar.scss index 2495151f6a..4df2a0af20 100644 --- a/core/src/components/avatar/avatar.scss +++ b/core/src/components/avatar/avatar.scss @@ -4,11 +4,12 @@ // Avatar // -------------------------------------------------- -ion-avatar { +:host { display: block; } -ion-avatar img { +::slotted(ion-img), +::slotted(img) { width: 100%; height: 100%; diff --git a/core/src/components/avatar/avatar.tsx b/core/src/components/avatar/avatar.tsx index 42f056000a..f3368b1d33 100644 --- a/core/src/components/avatar/avatar.tsx +++ b/core/src/components/avatar/avatar.tsx @@ -7,8 +7,12 @@ import { Component } from '@stencil/core'; ios: 'avatar.ios.scss', md: 'avatar.md.scss' }, - host: { - theme: 'avatar' - } + shadow: true }) -export class Avatar {} +export class Avatar { + + render() { + return ; + } + +} diff --git a/core/src/components/avatar/test/basic/index.html b/core/src/components/avatar/test/basic/index.html index b8e499c35d..fcf1988dcd 100644 --- a/core/src/components/avatar/test/basic/index.html +++ b/core/src/components/avatar/test/basic/index.html @@ -6,43 +6,44 @@ Avatar - Basic + - - - Avatar - Basic - - + + + Avatar - Basic + + - + + + + + + + Chip Avatar + - - - - - Chip Avatar - + + + + + Item Avatar + - - - - - Item Avatar - - - - - - - Wide Avatar - - + + + + + Wide Avatar + + diff --git a/core/src/components/avatar/test/preview/index.html b/core/src/components/avatar/test/preview/index.html index 10a7b8288b..f91484a65f 100644 --- a/core/src/components/avatar/test/preview/index.html +++ b/core/src/components/avatar/test/preview/index.html @@ -6,36 +6,37 @@ Avatar + - - - Avatar - - + + + Avatar + + - + + + + + + + Chip Avatar + - - - - - Chip Avatar - - - - - - - Item Avatar - - + + + + + Item Avatar + + diff --git a/core/src/components/avatar/test/standalone/index.html b/core/src/components/avatar/test/standalone/index.html index ce0ac1bede..629ed3e808 100644 --- a/core/src/components/avatar/test/standalone/index.html +++ b/core/src/components/avatar/test/standalone/index.html @@ -6,6 +6,7 @@ Avatar - Standalone + diff --git a/core/src/components/back-button/back-button.ios.scss b/core/src/components/back-button/back-button.ios.scss index e207ead6cb..0f5682d898 100644 --- a/core/src/components/back-button/back-button.ios.scss +++ b/core/src/components/back-button/back-button.ios.scss @@ -4,9 +4,13 @@ // iOS Back Button // -------------------------------------------------- -.back-button-ios { +:host { + --ion-color-base: #{$back-button-ios-color}; +} + +.back-button-native { @include padding(0); - @include margin(0, 0, 0, 0); + @include margin(0); z-index: $back-button-ios-button-z-index; overflow: visible; @@ -17,7 +21,6 @@ font-size: 17px; line-height: 1; - color: $back-button-ios-color; background-color: transparent; transform: translateZ(0); @@ -27,7 +30,7 @@ } } -.back-button-ios ion-icon { +ion-icon { @include padding(0); @include margin(0, -5px, 0, -4px); @@ -37,15 +40,3 @@ pointer-events: none; } - - -// Generate iOS Back Button Colors -// -------------------------------------------------- - -@each $color-name, $color-value in $colors-ios { - $base-color: ion-color($colors-ios, $color-name, base, ios); - - .back-button-ios-#{$color-name} { - color: $base-color; - } -} diff --git a/core/src/components/back-button/back-button.ios.vars.scss b/core/src/components/back-button/back-button.ios.vars.scss index 1ecf51558f..8793d741f2 100644 --- a/core/src/components/back-button/back-button.ios.vars.scss +++ b/core/src/components/back-button/back-button.ios.vars.scss @@ -7,4 +7,4 @@ $back-button-ios-button-z-index: $z-index-toolbar-buttons !default; /// @prop - Text color of the back button -$back-button-ios-color: ion-color($colors-ios, primary, base, ios) !default; +$back-button-ios-color: ion-color(primary, base) !default; diff --git a/core/src/components/back-button/back-button.md.scss b/core/src/components/back-button/back-button.md.scss index d896f62fe0..1cd2aab40d 100644 --- a/core/src/components/back-button/back-button.md.scss +++ b/core/src/components/back-button/back-button.md.scss @@ -4,7 +4,11 @@ // MD Back Button // -------------------------------------------------- -.back-button-md { +:host { + --ion-color-base: currentColor; +} + +.back-button-native { @include margin(1px, 6px, 0, 0); @include padding(0, 5px); @@ -16,7 +20,6 @@ font-weight: 500; text-transform: uppercase; - color: $back-button-md-color; background-color: transparent; box-shadow: none; @@ -26,27 +29,16 @@ } } -.back-button-md ion-icon { +ion-icon { @include padding-horizontal(null, .3em); @include margin(0); - @include padding(0, 6px); - @include text-align(start); + @include margin(0, 6px); font-size: 24px; font-weight: normal; line-height: .67; + text-align: start; + pointer-events: none; } - - -// Generate Material Design Back Button Colors -// -------------------------------------------------- - -@each $color-name, $color-value in $colors-md { - $base-color: ion-color($colors-md, $color-name, base, md); - - .back-button-md-#{$color-name} { - color: $base-color; - } -} diff --git a/core/src/components/back-button/back-button.scss b/core/src/components/back-button/back-button.scss index e1697da0af..517a69306f 100644 --- a/core/src/components/back-button/back-button.scss +++ b/core/src/components/back-button/back-button.scss @@ -3,29 +3,25 @@ // Back Button // -------------------------------------------------- -.back-button { +:host { display: none; + + color: #{current-color(base)}; + + pointer-events: all; } -.can-go-back > ion-header .back-button, -.back-button.show-back-button { - display: inline-block; +:host-context(.can-go-back > ion-header), +:host(.show-back-button) { + display: block; } -.back-button button { +.back-button-native { @include font-smoothing(); - @include text-align(center); - @include appearance(none); position: relative; z-index: 0; - display: inline-flex; - - flex-flow: row nowrap; - flex-shrink: 0; - - align-items: center; - justify-content: center; + display: block; border: 0; outline: none; @@ -35,17 +31,18 @@ text-decoration: none; text-overflow: ellipsis; text-transform: none; - white-space: nowrap; - cursor: pointer; - vertical-align: top; // the better option for most scenarios - vertical-align: -webkit-baseline-middle; // the best for those that support it + color: inherit; + cursor: pointer; transition: background-color, opacity 100ms linear; + text-align: center; user-select: none; font-kerning: none; + + appearance: none; } .back-button-inner { diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx index 167657c66c..2a658c5b20 100644 --- a/core/src/components/back-button/back-button.tsx +++ b/core/src/components/back-button/back-button.tsx @@ -1,6 +1,6 @@ import { Component, Element, Prop } from '@stencil/core'; import { Color, Config, Mode } from '../../interface'; -import { createThemedClasses, getElementClassMap, openURL } from '../../utils/theme'; +import { createColorClasses, openURL } from '../../utils/theme'; @Component({ tag: 'ion-back-button', @@ -8,9 +8,7 @@ import { createThemedClasses, getElementClassMap, openURL } from '../../utils/th ios: 'back-button.ios.scss', md: 'back-button.md.scss' }, - host: { - theme: 'back-button' - } + scoped: true }) export class BackButton { @@ -46,42 +44,43 @@ export class BackButton { @Prop() text?: string; - private onClick(ev: Event) { + private async onClick(ev: Event) { const nav = this.el.closest('ion-nav'); if (nav && nav.canGoBack()) { ev.preventDefault(); - nav.pop(); + if (!nav.isAnimating()) { + nav.pop(); + } } else if (this.defaultHref) { openURL(this.win, this.defaultHref, ev, 'back'); } } hostData() { + const showBackButton = !!this.defaultHref; + return { class: { - 'show-back-button': !!this.defaultHref - } + ...createColorClasses(this.color), + 'button': true, + 'show-back-button': showBackButton + }, + 'tappable': true, }; } render() { const backButtonIcon = this.icon || this.config.get('backButtonIcon', 'arrow-back'); const backButtonText = this.text != null ? this.text : this.config.get('backButtonText', 'Back'); - const themedClasses = createThemedClasses(this.mode, this.color, 'back-button'); - - const backButtonClasses = { - ...themedClasses, - ...getElementClassMap(this.el.classList), - }; return ( ); diff --git a/core/src/components/back-button/test/basic/index.html b/core/src/components/back-button/test/basic/index.html index 4295340660..743fbbe532 100644 --- a/core/src/components/back-button/test/basic/index.html +++ b/core/src/components/back-button/test/basic/index.html @@ -1,11 +1,14 @@ + Back Button + + @@ -122,4 +125,5 @@ await nav.push(fourthPage); } + diff --git a/core/src/components/back-button/test/host-element/index.html b/core/src/components/back-button/test/host-element/index.html index b6e47e8e36..126d528cc6 100644 --- a/core/src/components/back-button/test/host-element/index.html +++ b/core/src/components/back-button/test/host-element/index.html @@ -1,10 +1,12 @@ + Back Button + + diff --git a/core/src/components/back-button/test/preview/index.html b/core/src/components/back-button/test/preview/index.html index df44f8530c..36df173dc3 100644 --- a/core/src/components/back-button/test/preview/index.html +++ b/core/src/components/back-button/test/preview/index.html @@ -1,11 +1,14 @@ + Back Button + + @@ -122,4 +125,5 @@ await nav.push(fourthPage); } + diff --git a/core/src/components/back-button/test/standalone/index.html b/core/src/components/back-button/test/standalone/index.html index 35fc582818..70fc72b992 100644 --- a/core/src/components/back-button/test/standalone/index.html +++ b/core/src/components/back-button/test/standalone/index.html @@ -6,6 +6,7 @@ Back Button + diff --git a/core/src/components/backdrop/backdrop.ios.scss b/core/src/components/backdrop/backdrop.ios.scss index 5b0e3349f4..b012fc0b97 100644 --- a/core/src/components/backdrop/backdrop.ios.scss +++ b/core/src/components/backdrop/backdrop.ios.scss @@ -1,6 +1,6 @@ @import "./backdrop"; @import "./backdrop.ios.vars"; -.backdrop-ios { +:host { background-color: $backdrop-ios-color; } diff --git a/core/src/components/backdrop/backdrop.md.scss b/core/src/components/backdrop/backdrop.md.scss index abc5104e72..9e033ba209 100644 --- a/core/src/components/backdrop/backdrop.md.scss +++ b/core/src/components/backdrop/backdrop.md.scss @@ -1,6 +1,6 @@ @import "./backdrop"; @import "./backdrop.md.vars"; -.backdrop-md { +:host { background-color: $backdrop-md-color; } diff --git a/core/src/components/backdrop/backdrop.scss b/core/src/components/backdrop/backdrop.scss index 518a2f89b6..ccf1567cca 100644 --- a/core/src/components/backdrop/backdrop.scss +++ b/core/src/components/backdrop/backdrop.scss @@ -3,7 +3,7 @@ // Backdrop // -------------------------------------------------- -ion-backdrop { +:host { @include position(0, 0, 0, 0); position: absolute; diff --git a/core/src/components/backdrop/backdrop.tsx b/core/src/components/backdrop/backdrop.tsx index 09db5ba7ab..29a2d47bb9 100644 --- a/core/src/components/backdrop/backdrop.tsx +++ b/core/src/components/backdrop/backdrop.tsx @@ -7,9 +7,7 @@ import { now } from '../../utils/helpers'; ios: 'backdrop.ios.scss', md: 'backdrop.md.scss' }, - host: { - theme: 'backdrop' - } + shadow: true }) export class Backdrop { diff --git a/core/src/components/badge/badge.ios.scss b/core/src/components/badge/badge.ios.scss index 915ab7f4de..2bb723a471 100644 --- a/core/src/components/badge/badge.ios.scss +++ b/core/src/components/badge/badge.ios.scss @@ -4,26 +4,8 @@ // iOS Badge // -------------------------------------------------- -.badge-ios { +:host { @include border-radius($badge-ios-border-radius); font-family: $badge-ios-font-family; - - color: $badge-ios-text-color; - background-color: $badge-ios-background-color; -} - - -// Generate iOS Badge Colors -// -------------------------------------------------- - -@each $color-name, $color-value in $colors-ios { - $base-color: ion-color($colors-ios, $color-name, base, ios); - $contrast-color: ion-color($colors-ios, $color-name, contrast, ios); - - .badge-ios-#{$color-name} { - color: $contrast-color; - background-color: $base-color; - } - } diff --git a/core/src/components/badge/badge.ios.vars.scss b/core/src/components/badge/badge.ios.vars.scss index 769d4ae40f..78f0a01dbf 100644 --- a/core/src/components/badge/badge.ios.vars.scss +++ b/core/src/components/badge/badge.ios.vars.scss @@ -7,10 +7,4 @@ $badge-ios-border-radius: 10px !default; /// @prop - Font family of the badge -$badge-ios-font-family: $font-family-ios-base !default; - -/// @prop - Background color of the badge -$badge-ios-background-color: ion-color($colors-ios, primary, base, ios) !default; - -/// @prop - Text color of the badge -$badge-ios-text-color: ion-color($colors-ios, $badge-ios-background-color, contrast, ios) !default; +$badge-ios-font-family: $font-family-base !default; diff --git a/core/src/components/badge/badge.md.scss b/core/src/components/badge/badge.md.scss index 71739df576..ca92bd4d16 100644 --- a/core/src/components/badge/badge.md.scss +++ b/core/src/components/badge/badge.md.scss @@ -4,26 +4,8 @@ // Material Design Badge // -------------------------------------------------- -.badge-md { +:host { @include border-radius($badge-md-border-radius); font-family: $badge-md-font-family; - - color: $badge-md-text-color; - background-color: $badge-md-background-color; } - - -// Generate Material Design Badge Colors -// -------------------------------------------------- - -@each $color-name, $color-value in $colors-md { - $base-color: ion-color($colors-md, $color-name, base, md); - $contrast-color: ion-color($colors-md, $color-name, contrast, md); - - .badge-md-#{$color-name} { - color: $contrast-color; - background-color: $base-color; - } -} - diff --git a/core/src/components/badge/badge.md.vars.scss b/core/src/components/badge/badge.md.vars.scss index 74d0151469..b1f4044140 100644 --- a/core/src/components/badge/badge.md.vars.scss +++ b/core/src/components/badge/badge.md.vars.scss @@ -7,10 +7,4 @@ $badge-md-border-radius: 4px !default; /// @prop - Font family of the badge -$badge-md-font-family: $font-family-md-base !default; - -/// @prop - Background color of the badge -$badge-md-background-color: ion-color($colors-md, primary, base, md) !default; - -/// @prop - Text color of the badge -$badge-md-text-color: ion-color($colors-md, $badge-md-background-color, contrast, md) !default; +$badge-md-font-family: $font-family-base !default; diff --git a/core/src/components/badge/badge.scss b/core/src/components/badge/badge.scss index 6123e51ef6..e499ed8c20 100644 --- a/core/src/components/badge/badge.scss +++ b/core/src/components/badge/badge.scss @@ -3,10 +3,13 @@ // Badge // -------------------------------------------------- -ion-badge { +:host { + --ion-color-base: #{ion-color(primary, base)}; + --ion-color-contrast: #{ion-color(primary, contrast)}; + @include font-smoothing(); @include padding($badge-padding-top, $badge-padding-end, $badge-padding-bottom, $badge-padding-start); - @include text-align(center); + text-align: center; display: inline-block; @@ -18,11 +21,13 @@ ion-badge { line-height: 1; white-space: nowrap; + color: #{current-color(contrast)}; + background-color: #{current-color(base)}; vertical-align: baseline; contain: content; } -ion-badge:empty { +:host(:empty) { display: none; } diff --git a/core/src/components/badge/badge.tsx b/core/src/components/badge/badge.tsx index 444e10a38f..2f22c46b01 100644 --- a/core/src/components/badge/badge.tsx +++ b/core/src/components/badge/badge.tsx @@ -1,5 +1,6 @@ import { Component, Prop } from '@stencil/core'; import { Color, Mode } from '../../interface'; +import { createColorClasses } from '../../utils/theme'; @Component({ tag: 'ion-badge', @@ -7,13 +8,11 @@ import { Color, Mode } from '../../interface'; ios: 'badge.ios.scss', md: 'badge.md.scss' }, - host: { - theme: 'badge' - } + shadow: true }) export class Badge { /** - * The color the badge should be + * The color the badge should be. */ @Prop() color?: Color; @@ -22,4 +21,14 @@ export class Badge { * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; + + hostData() { + return { + class: createColorClasses(this.color) + }; + } + + render() { + return ; + } } diff --git a/core/src/components/badge/readme.md b/core/src/components/badge/readme.md index d66bc264d4..99a94fcc91 100644 --- a/core/src/components/badge/readme.md +++ b/core/src/components/badge/readme.md @@ -12,7 +12,7 @@ Badges are inline block elements that usually appear near another element. Typic string -The color the badge should be +The color the badge should be. #### mode @@ -29,7 +29,7 @@ Possible values are: `"ios"` or `"md"`. string -The color the badge should be +The color the badge should be. #### mode diff --git a/core/src/components/badge/test/basic/index.html b/core/src/components/badge/test/basic/index.html index 78ae950fd8..62a08193ac 100644 --- a/core/src/components/badge/test/basic/index.html +++ b/core/src/components/badge/test/basic/index.html @@ -6,110 +6,111 @@ Badge - Basic + - - - Badge - Basic - - + + + Badge - Basic + + - - - Badges Right - - Default Badge - 00 - - - Primary Badge - 11 - - - Secondary Badge - 22 - - - Tertiary Badge - 33 - - - Success Badge - 44 - - - Warning Badge - 55 - - - Danger Badge - 66 - - - Light Badge - 77 - - - Medium Badge - 88 - - - Dark Badge - 99 - - - primary - Dynamic Badge Color (toggle) - - + + + Badges Right + + Default Badge + 00 + + + Primary Badge + 11 + + + Secondary Badge + 22 + + + Tertiary Badge + 33 + + + Success Badge + 44 + + + Warning Badge + 55 + + + Danger Badge + 66 + + + Light Badge + 77 + + + Medium Badge + 88 + + + Dark Badge + 99 + + + primary + Dynamic Badge Color (toggle) + + - - Badges Left - - Default Badge - 00 - - - Primary Badge - 11 - - - Secondary Badge - 22 - - - Tertiary Badge - 33 - - - Success Badge - 44 - - - Warning Badge - 55 - - - Danger Badge - 66 - - - Light Badge - 77 - - - Medium Badge - 88 - - - Dark Badge - 99 - - - + + Badges Left + + Default Badge + 00 + + + Primary Badge + 11 + + + Secondary Badge + 22 + + + Tertiary Badge + 33 + + + Success Badge + 44 + + + Warning Badge + 55 + + + Danger Badge + 66 + + + Light Badge + 77 + + + Medium Badge + 88 + + + Dark Badge + 99 + + + @@ -124,4 +125,5 @@ } + diff --git a/core/src/components/badge/test/preview/index.html b/core/src/components/badge/test/preview/index.html index aec583e478..724611acfe 100644 --- a/core/src/components/badge/test/preview/index.html +++ b/core/src/components/badge/test/preview/index.html @@ -6,110 +6,111 @@ Badge + - - - Badge - - + + + Badge + + - - - Badges Right - - Default Badge - 00 - - - Primary Badge - 11 - - - Secondary Badge - 22 - - - Tertiary Badge - 33 - - - Success Badge - 44 - - - Warning Badge - 55 - - - Danger Badge - 66 - - - Light Badge - 77 - - - Medium Badge - 88 - - - Dark Badge - 99 - - - primary - Dynamic Badge Color (toggle) - - + + + Badges Right + + Default Badge + 00 + + + Primary Badge + 11 + + + Secondary Badge + 22 + + + Tertiary Badge + 33 + + + Success Badge + 44 + + + Warning Badge + 55 + + + Danger Badge + 66 + + + Light Badge + 77 + + + Medium Badge + 88 + + + Dark Badge + 99 + + + primary + Dynamic Badge Color (toggle) + + - - Badges Left - - Default Badge - 00 - - - Primary Badge - 11 - - - Secondary Badge - 22 - - - Tertiary Badge - 33 - - - Success Badge - 44 - - - Warning Badge - 55 - - - Danger Badge - 66 - - - Light Badge - 77 - - - Medium Badge - 88 - - - Dark Badge - 99 - - - + + Badges Left + + Default Badge + 00 + + + Primary Badge + 11 + + + Secondary Badge + 22 + + + Tertiary Badge + 33 + + + Success Badge + 44 + + + Warning Badge + 55 + + + Danger Badge + 66 + + + Light Badge + 77 + + + Medium Badge + 88 + + + Dark Badge + 99 + + + @@ -124,4 +125,5 @@ } + diff --git a/core/src/components/badge/test/standalone/index.html b/core/src/components/badge/test/standalone/index.html index e338f881ed..f60f449d91 100644 --- a/core/src/components/badge/test/standalone/index.html +++ b/core/src/components/badge/test/standalone/index.html @@ -6,6 +6,7 @@ Badge - Standalone + diff --git a/core/src/components/button/button.ios.scss b/core/src/components/button/button.ios.scss index 6e480a132a..b4645cd787 100644 --- a/core/src/components/button/button.ios.scss +++ b/core/src/components/button/button.ios.scss @@ -5,239 +5,131 @@ // iOS Button // -------------------------------------------------- -.button-ios { - @include border-radius($button-ios-border-radius); +:host { + font-family: #{$button-ios-font-family}; + font-size: #{$button-ios-font-size}; + font-weight: #{$button-ios-font-weight}; + letter-spacing: #{$button-ios-letter-spacing}; - @include margin($button-ios-margin-top, $button-ios-margin-end, $button-ios-margin-bottom, $button-ios-margin-start); + --border-radius: #{$button-ios-border-radius}; - @include padding($button-ios-padding-top, $button-ios-padding-end, $button-ios-padding-bottom, $button-ios-padding-start); + --margin-top: #{$button-ios-margin-top}; + --margin-bottom: #{$button-ios-margin-bottom}; + --margin-start: #{$button-ios-margin-start}; + --margin-end: #{$button-ios-margin-end}; - height: $button-ios-height; + --padding-top: #{$button-ios-padding-top}; + --padding-bottom: #{$button-ios-padding-bottom}; + --padding-start: #{$button-ios-padding-start}; + --padding-end: #{$button-ios-padding-end}; - font-family: $button-ios-font-family; - font-size: $button-ios-font-size; - font-weight: $button-ios-font-weight; + --height: #{$button-ios-height}; - letter-spacing: $button-ios-letter-spacing; - - color: $button-ios-text-color; - background-color: $button-ios-background-color; + --transition: background-color, opacity 100ms linear; } -.button-ios.activated { - background-color: $button-ios-background-color-activated; - opacity: $button-ios-opacity-activated; -} - -.button-ios.focused { - background-color: $button-ios-background-color-focused; -} - -.button-ios:hover { - opacity: $button-ios-opacity-hover; -} - -a[disabled], -button[disabled], -.button[disabled] { - opacity: $button-ios-opacity-disabled; -} - - -// iOS Default Button Color Mixin +// iOS Solid Button // -------------------------------------------------- -@mixin ios-button-default($color-name) { - $bg-color: ion-color($colors-ios, $color-name, base, ios); - $bg-color-activated: ion-color($colors-ios, $color-name, shade, ios); - $bg-color-focused: ion-color($colors-ios, $color-name, shade, ios); - $fg-color: ion-color($colors-ios, $color-name, contrast, ios); - - .button-ios-#{$color-name} { - color: $fg-color; - background-color: $bg-color; - } - - .button-ios-#{$color-name}.activated { - background-color: $bg-color-activated; - } - - .button-ios-#{$color-name}.focused { - background-color: $bg-color-focused; - } +:host(.button-solid:hover) { + --opacity: #{$button-ios-opacity-hover}; } - -// iOS Button Sizes -// -------------------------------------------------- - -.button-large-ios { - @include padding($button-ios-large-padding-top, $button-ios-large-padding-end, $button-ios-large-padding-bottom, $button-ios-large-padding-start); - - height: $button-ios-large-height; - - font-size: $button-ios-large-font-size; +:host(.button-solid.focused) { + --background: #{current-color(shade)}; } -.button-small-ios { - @include padding($button-ios-small-padding-top, $button-ios-small-padding-end, $button-ios-small-padding-bottom, $button-ios-small-padding-start); - - height: $button-ios-small-height; - - font-size: $button-ios-small-font-size; -} - -// iOS Block Button -// -------------------------------------------------- - -.button-block-ios { - @include margin-horizontal(0); -} - -// iOS Full Button -// -------------------------------------------------- - -.button-full-ios { - @include margin-horizontal(0); - @include border-radius(0); - - border-right-width: 0; - border-left-width: 0; +:host(.button-solid.activated) { + --background: #{current-color(shade)}; + --opacity: #{$button-ios-opacity-activated}; } // iOS Outline Button // -------------------------------------------------- -.button-outline-ios { - @include border-radius($button-ios-outline-border-radius); - - border-width: $button-ios-outline-border-width; - border-style: $button-ios-outline-border-style; - border-color: $button-ios-outline-border-color; - color: $button-ios-outline-text-color; - background-color: $button-ios-outline-background-color; +:host(.button-outline) { + --border-radius: #{$button-ios-outline-border-radius}; + --border-width: #{$button-ios-outline-border-width}; + --border-style: #{$button-ios-outline-border-style}; } -.button-outline-ios.activated { - color: $button-ios-outline-text-color-activated; - background-color: $button-ios-outline-background-color-activated; - opacity: $button-ios-outline-opacity-activated; +:host(.button-outline.activated) { + color: #{current-color(contrast)}; + + --background: #{current-color(base)}; } -.button-outline-ios.focused { - background-color: $button-ios-outline-background-color-focused; +:host(.button-outline.focused) { + --background: #{current-color(base, .1)}; } -.button-outline-ios.activated.focused { - border-color: ion-color($colors-ios, $button-ios-background-color, shade, ios); - background-color: ion-color($colors-ios, $button-ios-background-color, shade, ios); +:host(.button-outline.activated.focused) { + --border-color: #{current-color(shade)}; + --background-color: #{current-color(shade)}; } -// iOS Outline Button Color Mixin -// -------------------------------------------------- - -@mixin ios-button-outline($color-name) { - $color-base: ion-color($colors-ios, $color-name, base, ios); - $color-contrast: ion-color($colors-ios, $color-name, contrast, ios); - $color-tint: ion-color($colors-ios, $color-name, shade, ios); - $bg-color-focused: ion-color($colors-ios, $color-name, base, ios, $button-ios-outline-background-color-alpha-focused); - - .button-outline-ios-#{$color-name} { - border-color: $color-base; - color: $color-base; - background-color: $button-ios-outline-background-color; - } - - .button-outline-ios-#{$color-name}.activated { - color: $color-contrast; - background-color: $color-base; - } - - .button-outline-ios-#{$color-name}.focused { - background-color: $bg-color-focused; - } - - .button-outline-ios-#{$color-name}.activated.focused { - border-color: $color-tint; - background-color: $color-tint; - } -} - - // iOS Clear Button // -------------------------------------------------- -.button-clear-ios { - border-color: $button-ios-clear-border-color; - color: $button-ios-background-color; - background-color: $button-ios-clear-background-color; +:host(.button-clear:hover) { + --opacity: #{$button-ios-clear-opacity-hover}; } -.button-clear-ios.activated { - background-color: $button-ios-clear-background-color-activated; - opacity: $button-ios-clear-opacity-activated; +:host(.button-clear.activated) { + --opacity: #{$button-ios-clear-opacity-activated}; } -.button-clear-ios.focused { - background-color: $button-ios-clear-background-color-focused; -} - -.button-clear-ios:hover { - color: $button-ios-clear-text-color-hover; - opacity: $button-ios-clear-opacity-hover; -} - - -// iOS Clear Button Color Mixin -// -------------------------------------------------- - -@mixin ios-button-clear($color-name) { - $fg-color: ion-color($colors-ios, $color-name, base, ios); - $bg-color-focused: ion-color($colors-ios, $color-name, base, ios, $button-ios-clear-background-color-alpha-focused); - - .button-clear-ios-#{$color-name} { - border-color: $button-ios-clear-border-color; - color: $fg-color; - background-color: $button-ios-clear-background-color; - } - - .button-clear-ios-#{$color-name}.activated { - opacity: $button-ios-clear-opacity-activated; - } - - .button-clear-ios-#{$color-name}.focused { - background-color: $bg-color-focused; - } - - .button-clear-ios-#{$color-name}:hover { - color: $fg-color; - } +:host(.button-clear.focused) { + --background: #{current-color(base, .1)}; } // iOS Round Button // -------------------------------------------------- -.button-round-ios { - @include border-radius($button-ios-round-border-radius); +:host(.button-round) { + --border-radius: #{$button-ios-round-border-radius}; - @include padding($button-ios-round-padding-top, $button-ios-round-padding-end, $button-ios-round-padding-bottom, $button-ios-round-padding-start); + --padding-top: #{$button-ios-round-padding-top}; + --padding-start: #{$button-ios-round-padding-start}; + --padding-end: #{$button-ios-round-padding-end}; + --padding-bottom: #{$button-ios-round-padding-bottom}; } -// Generate iOS Button Colors +// iOS Button Sizes // -------------------------------------------------- -@each $color-name, $color-value in $colors-ios { - @include ios-button-default($color-name); - @include ios-button-outline($color-name); - @include ios-button-clear($color-name); +:host(.button-large) { + font-size: #{$button-ios-large-font-size}; + + --border-radius: #{$button-ios-large-border-radius}; + + --padding-top: #{$button-ios-large-padding-top}; + --padding-start: #{$button-ios-large-padding-start}; + --padding-end: #{$button-ios-large-padding-end}; + --padding-bottom: #{$button-ios-large-padding-bottom}; + + --height: #{$button-ios-large-height}; +} + +:host(.button-small) { + font-size: #{$button-ios-small-font-size}; + + --border-radius: #{$button-ios-small-border-radius}; + + --padding-top: #{$button-ios-small-padding-top}; + --padding-start: #{$button-ios-small-padding-start}; + --padding-end: #{$button-ios-small-padding-end}; + --padding-bottom: #{$button-ios-small-padding-bottom}; + + --height: #{$button-ios-small-height}; } // iOS strong Button // -------------------------------------------------- -.button-strong-ios { - font-weight: $button-ios-strong-font-weight; +:host(.button-strong) { + font-weight: #{$button-ios-strong-font-weight}; } diff --git a/core/src/components/button/button.ios.vars.scss b/core/src/components/button/button.ios.vars.scss index 1d39e2cb56..cfc2c746b6 100644 --- a/core/src/components/button/button.ios.vars.scss +++ b/core/src/components/button/button.ios.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Font family of the button -$button-ios-font-family: $font-family-ios-base !default; +$button-ios-font-family: $font-family-base !default; /// @prop - Margin top of the button $button-ios-margin-top: 4px !default; @@ -34,7 +34,7 @@ $button-ios-padding-start: $button-ios-padding-end !d $button-ios-height: 2.8em !default; /// @prop - Border radius of the button -$button-ios-border-radius: 8px !default; +$button-ios-border-radius: 12px !default; /// @prop - Font size of the button text $button-ios-font-size: 16px !default; @@ -46,13 +46,13 @@ $button-ios-font-weight: 500 !default; $button-ios-letter-spacing: -.03em !default; /// @prop - Background color of the button -$button-ios-background-color: ion-color($colors-ios, primary, base, ios) !default; +$button-ios-background-color: ion-color(primary, base) !default; /// @prop - Text color of the button -$button-ios-text-color: ion-color($colors-ios, $button-ios-background-color, contrast, ios) !default; +$button-ios-text-color: ion-color(primary, contrast) !default; /// @prop - Background color of the activated button -$button-ios-background-color-activated: ion-color($colors-ios, $button-ios-background-color, shade, ios) !default; +$button-ios-background-color-activated: ion-color(primary, shade) !default; /// @prop - Opacity of the activated button $button-ios-opacity-activated: 1 !default; @@ -61,10 +61,10 @@ $button-ios-opacity-activated: 1 !default; $button-ios-opacity-hover: .8 !default; /// @prop - Background color of the focused button -$button-ios-background-color-focused: ion-color($colors-ios, $button-ios-background-color, shade, ios) !default; +$button-ios-background-color-focused: ion-color(primary, shade) !default; /// @prop - Opacity of the button when disabled -$button-ios-opacity-disabled: $button-opacity-disabled !default; +$button-ios-opacity-disabled: 0.5 !default; // iOS Large Button @@ -85,6 +85,9 @@ $button-ios-large-padding-start: $button-ios-large-padding- /// @prop - Height of the large button $button-ios-large-height: 2.8em !default; +/// @prop - Border radius of the large button +$button-ios-large-border-radius: 14px !default; + /// @prop - Font size of the large button $button-ios-large-font-size: 20px !default; @@ -107,6 +110,9 @@ $button-ios-small-padding-start: $button-ios-small-padding- /// @prop - Height of the small button $button-ios-small-height: 2.1em !default; +/// @prop - Border radius of the small button +$button-ios-small-border-radius: 8px !default; + /// @prop - Font size of the small button $button-ios-small-font-size: 13px !default; @@ -133,7 +139,7 @@ $button-ios-outline-text-color: $button-ios-background-col $button-ios-outline-background-color: transparent !default; /// @prop - Text color of the activated outline button -$button-ios-outline-text-color-activated: ion-color($colors-ios, $button-ios-background-color, contrast, ios) !default; +$button-ios-outline-text-color-activated: ion-color(primary, contrast) !default; /// @prop - Background color of the activated outline button $button-ios-outline-background-color-activated: $button-ios-background-color !default; @@ -145,7 +151,7 @@ $button-ios-outline-opacity-activated: 1 !default; $button-ios-outline-background-color-alpha-focused: .25 !default; /// @prop - Background color of the focused outline button -$button-ios-outline-background-color-focused: ion-color($colors-ios, primary, base, ios, $button-ios-outline-background-color-alpha-focused) !default; +$button-ios-outline-background-color-focused: ion-color(primary, base, $button-ios-outline-background-color-alpha-focused) !default; // iOS Clear Button // -------------------------------------------------- @@ -172,7 +178,7 @@ $button-ios-clear-opacity-hover: .6 !default; $button-ios-clear-background-color-alpha-focused: .25 !default; /// @prop - Background color of the focused clear button -$button-ios-clear-background-color-focused: ion-color($colors-ios, primary, base, ios, $button-ios-clear-background-color-alpha-focused) !default; +$button-ios-clear-background-color-focused: ion-color(primary, base, $button-ios-clear-background-color-alpha-focused) !default; // iOS Round Button // -------------------------------------------------- @@ -197,4 +203,4 @@ $button-ios-round-border-radius: $button-round-border-radiu // -------------------------------------------------- /// @prop - Font weight of the strong button -$button-ios-strong-font-weight: 600 !default; +$button-ios-strong-font-weight: 600 !default; \ No newline at end of file diff --git a/core/src/components/button/button.md.scss b/core/src/components/button/button.md.scss index 7874695125..f5034a4faf 100644 --- a/core/src/components/button/button.md.scss +++ b/core/src/components/button/button.md.scss @@ -4,270 +4,117 @@ // Material Design Button // -------------------------------------------------- -.button-md { - @include border-radius($button-md-border-radius); +:host { + font-family: #{$button-md-font-family}; + font-size: #{$button-md-font-size}; + font-weight: #{$button-md-font-weight}; - @include margin($button-md-margin-top, $button-md-margin-end, $button-md-margin-bottom, $button-md-margin-start); + letter-spacing: #{$button-md-letter-spacing}; + text-transform: #{$button-md-text-transform}; - @include padding($button-md-padding-top, $button-md-padding-end, $button-md-padding-bottom, $button-md-padding-start); - - overflow: hidden; - - height: $button-md-height; - - font-family: $button-md-font-family; - font-size: $button-md-font-size; - font-weight: $button-md-font-weight; - - text-transform: $button-md-text-transform; - color: $button-md-text-color; - background-color: $button-md-background-color; - box-shadow: $button-md-box-shadow; - - transition: box-shadow $button-md-transition-duration $button-md-transition-timing-function, + --transition: #{box-shadow $button-md-transition-duration $button-md-transition-timing-function, background-color $button-md-transition-duration $button-md-transition-timing-function, - color $button-md-transition-duration $button-md-transition-timing-function; + color $button-md-transition-duration $button-md-transition-timing-function}; + + --border-radius: #{$button-md-border-radius}; + + --margin-top: #{$button-md-margin-top}; + --margin-bottom: #{$button-md-margin-bottom}; + --margin-start: #{$button-md-margin-start}; + --margin-end: #{$button-md-margin-end}; + + --padding-top: #{$button-md-padding-top}; + --padding-bottom: #{$button-md-padding-bottom}; + --padding-start: #{$button-md-padding-start}; + --padding-end: #{$button-md-padding-end}; + + --height: #{$button-md-height}; } -.button-md:hover { - background-color: $button-md-background-color-hover; -} - -.button-md.activated { - background-color: $button-md-background-color-activated; - box-shadow: $button-md-box-shadow-activated; -} - -.button-md.focused { - background-color: $button-md-background-color-focused; -} - -.button-md .ripple-effect { - background-color: $button-md-text-color; -} - -a[disabled], -button[disabled], -.button[disabled] { - opacity: $button-md-opacity-disabled; -} - -// Material Design Default Button Color Mixin +// Material Design Solid Button // -------------------------------------------------- -@mixin md-button-default($color-name) { - $bg-color: ion-color($colors-md, $color-name, base, md); - $bg-color-activated: ion-color($colors-md, $color-name, shade, md); - $bg-color-focused: ion-color($colors-md, $color-name, shade, md); - $fg-color: ion-color($colors-md, $color-name, contrast, md); - - .button-md-#{$color-name} { - color: $fg-color; - background-color: $bg-color; - } - - .button-md-#{$color-name}:hover { - background-color: $bg-color; - } - - .button-md-#{$color-name}.activated { - background-color: $bg-color-activated; - opacity: $button-md-opacity-activated; - } - - .button-md-#{$color-name}.focused { - background-color: $bg-color-focused; - } - - .button-md-#{$color-name} .ripple-effect { - background-color: $fg-color; - } +:host(.button-solid) { + --box-shadow: #{$button-md-box-shadow}; } - -// Material Design Button Sizes -// -------------------------------------------------- - -.button-large-md { - @include padding($button-md-large-padding-top, $button-md-large-padding-end, $button-md-large-padding-bottom, $button-md-large-padding-start); - - height: $button-md-large-height; - - font-size: $button-md-large-font-size; -} - -.button-small-md { - @include padding($button-md-small-padding-top, $button-md-small-padding-end, $button-md-small-padding-bottom, $button-md-small-padding-start); - - height: $button-md-small-height; - - font-size: $button-md-small-font-size; -} - -// Material Design Block Button -// -------------------------------------------------- - -.button-block-md { - @include margin-horizontal(0); -} - -// Material Design Full Button -// -------------------------------------------------- - -.button-full-md { - @include margin-horizontal(0); - @include border-radius(0); - - border-right-width: 0; - border-left-width: 0; +:host(.button-solid.activated) { + --box-shadow: #{$button-md-box-shadow-activated}; + --background: #{current-color(shade)}; } // Material Design Outline Button // -------------------------------------------------- -.button-outline-md { - border-width: $button-md-outline-border-width; - border-style: $button-md-outline-border-style; - border-color: $button-md-outline-border-color; - color: $button-md-outline-text-color; - background-color: $button-md-outline-background-color; - box-shadow: $button-md-outline-box-shadow; +:host(.button-outline) { + --border-width: 1px; + --border-style: solid; + --box-shadow: none; } -.button-outline-md:hover { - background-color: $button-md-outline-background-color-hover; +:host(.button-outline.activated) { + --background: transparent; } -.button-outline-md.activated { - background-color: $button-md-outline-background-color-activated; - box-shadow: $button-md-outline-box-shadow-activated; - opacity: $button-md-outline-opacity-activated; -} - -.button-outline-md.focused { - background-color: $button-md-outline-background-color-focused; -} - -.button-outline-md .ripple-effect { - background-color: $button-md-outline-ripple-background-color; -} - - -// Material Design Outline Button Color Mixin -// -------------------------------------------------- - -@mixin md-button-outline($color-name) { - $fg-color: ion-color($colors-md, $color-name, tint, md); - $bg-color-focused: ion-color($colors-md, $color-name, base, md, $button-md-outline-background-color-alpha-focused); - - .button-outline-md-#{$color-name} { - border-color: $fg-color; - color: $fg-color; - background-color: $button-md-outline-background-color; - } - - .button-outline-md-#{$color-name}:hover { - background-color: $button-md-outline-background-color-hover; - } - - .button-outline-md-#{$color-name}.activated { - background-color: $button-md-outline-background-color-activated; - } - - .button-outline-md-#{$color-name}.focused { - background-color: $bg-color-focused; - } - - .button-outline-md-#{$color-name} .ripple-effect { - background-color: $fg-color; - } +:host(.button-outline.focused) { + --background: #{current-color(base, .1)}; } // Material Design Clear Button // -------------------------------------------------- -.button-clear-md { - border-color: $button-md-clear-border-color; - color: $button-md-background-color; - background-color: $button-md-clear-background-color; - box-shadow: $button-md-clear-box-shadow; - opacity: $button-md-clear-opacity; -} - -.button-clear-md.activated { - background-color: $button-md-clear-background-color-activated; - box-shadow: $button-md-clear-box-shadow-activated; -} - -.button-clear-md.focused { - background-color: $button-md-clear-background-color-focused; -} - -.button-clear-md:hover { - background-color: $button-md-clear-background-color-hover; -} - -.button-clear-md .ripple-effect { - background-color: $button-md-clear-ripple-background-color; -} - - -// Material Design Clear Button Color Mixin -// -------------------------------------------------- - -@mixin md-button-clear($color-name) { - $fg-color: ion-color($colors-md, $color-name, base, md); - $bg-color-focused: ion-color($colors-md, $color-name, base, md, $button-md-clear-background-color-alpha-focused); - - .button-clear-md-#{$color-name} { - border-color: $button-md-clear-border-color; - color: $fg-color; - background-color: $button-md-clear-background-color; - } - - .button-clear-md-#{$color-name}.activated { - background-color: $button-md-clear-background-color-activated; - box-shadow: $button-md-clear-box-shadow-activated; - } - - .button-clear-md-#{$color-name}.focused { - background-color: $bg-color-focused; - } - - .button-clear-md-#{$color-name}:hover { - color: $fg-color; - } +:host(.button-clear) { + --opacity: #{$button-md-clear-opacity}; } // Material Design Round Button // -------------------------------------------------- -.button-round-md { - @include border-radius($button-md-round-border-radius); +:host(.button-round) { + --border-radius: #{$button-md-round-border-radius}; - @include padding($button-md-round-padding-top, $button-md-round-padding-end, $button-md-round-padding-bottom, $button-md-round-padding-start); -} - -.button-md ion-icon[slot="icon-only"] { - @include padding(0); + --padding-top: #{$button-md-round-padding-top}; + --padding-start: #{$button-md-round-padding-start}; + --padding-end: #{$button-md-round-padding-end}; + --padding-bottom: #{$button-md-round-padding-bottom}; } -// Generate Material Design Button Colors +// Material Design Button Sizes // -------------------------------------------------- -@each $color-name, $color-value in $colors-md { - @include md-button-default($color-name); - @include md-button-outline($color-name); - @include md-button-clear($color-name); +:host(.button-large) { + font-size: #{$button-md-large-font-size}; + + --padding-top: #{$button-md-large-padding-top}; + --padding-start: #{$button-md-large-padding-start}; + --padding-end: #{$button-md-large-padding-end}; + --padding-bottom: #{$button-md-large-padding-bottom}; + + --height: #{$button-md-large-height}; +} + +:host(.button-small) { + font-size: #{$button-md-small-font-size}; + + --padding-top: #{$button-md-small-padding-top}; + --padding-start: #{$button-md-small-padding-start}; + --padding-end: #{$button-md-small-padding-end}; + --padding-bottom: #{$button-md-small-padding-bottom}; + + --height: #{$button-md-small-height}; } // MD strong Button // -------------------------------------------------- -.button-strong-md { - font-weight: $button-md-strong-font-weight; +:host(.button-strong) { + font-weight: #{$button-md-strong-font-weight}; } + +::slotted(ion-icon[slot="icon-only"]) { + @include padding(0); +} \ No newline at end of file diff --git a/core/src/components/button/button.md.vars.scss b/core/src/components/button/button.md.vars.scss index c73a4f869e..34d6c81cd0 100644 --- a/core/src/components/button/button.md.vars.scss +++ b/core/src/components/button/button.md.vars.scss @@ -4,10 +4,10 @@ // -------------------------------------------------- /// @prop - Font family of the button -$button-md-font-family: $font-family-md-base !default; +$button-md-font-family: $font-family-base !default; /// @prop - Margin top of the button -$button-md-margin-top: 4px !default; +$button-md-margin-top: 4px; /// @prop - Margin end of the button $button-md-margin-end: 2px !default; @@ -25,10 +25,10 @@ $button-md-padding-top: 0 !default; $button-md-padding-end: 1.1em !default; /// @prop - Padding bottom of the button -$button-md-padding-bottom: $button-md-padding-top !default; +$button-md-padding-bottom: 0 !default; /// @prop - Padding start of the button -$button-md-padding-start: $button-md-padding-end !default; +$button-md-padding-start: 1.1em !default; /// @prop - Height of the button $button-md-height: 36px !default; @@ -45,11 +45,7 @@ $button-md-font-weight: 500 !default; /// @prop - Capitalization of the button text $button-md-text-transform: uppercase !default; -/// @prop - Background color of the button -$button-md-background-color: ion-color($colors-md, primary, base, md) !default; - -/// @prop - Text color of the button -$button-md-text-color: ion-color($colors-md, $button-md-background-color, contrast, md) !default; +$button-md-letter-spacing: 0; /// @prop - Box shadow of the button $button-md-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default; @@ -60,12 +56,6 @@ $button-md-transition-duration: 300ms !default; /// @prop - Speed curve of the transition of the button $button-md-transition-timing-function: cubic-bezier(.4, 0, .2, 1) !default; -/// @prop - Background color of the button on hover -$button-md-background-color-hover: $button-md-background-color !default; - -/// @prop - Background color of the activated button -$button-md-background-color-activated: ion-color($colors-md, $button-md-background-color, shade, md) !default; - /// @prop - Opacity of the activated button $button-md-opacity-activated: 1 !default; @@ -73,13 +63,10 @@ $button-md-opacity-activated: 1 !default; $button-md-box-shadow-activated: 0 3px 5px rgba(0, 0, 0, .14), 0 3px 5px rgba(0, 0, 0, .21) !default; /// @prop - Background color of the ripple on the button -$button-md-ripple-background-color: $text-md-color-step-400 !default; - -/// @prop - Background color of the focused button -$button-md-background-color-focused: ion-color($colors-md, $button-md-background-color, shade, md) !default; +$button-md-ripple-background-color: $text-color-step-400 !default; /// @prop - Opacity of the button when disabled -$button-md-opacity-disabled: $button-opacity-disabled !default; +$button-md-opacity-disabled: 0.5 !default; // Material Design Large Button // -------------------------------------------------- @@ -134,12 +121,6 @@ $button-md-outline-border-width: 1px !default; /// @prop - Border style of the outline button $button-md-outline-border-style: solid !default; -/// @prop - Border color of the outline button -$button-md-outline-border-color: $button-md-background-color !default; - -/// @prop - Text color of the outline button -$button-md-outline-text-color: $button-md-background-color !default; - /// @prop - Background color of the outline button $button-md-outline-background-color: transparent !default; @@ -150,7 +131,7 @@ $button-md-outline-box-shadow: none !default; $button-md-outline-background-color-alpha-hover: .1 !default; /// @prop - Background color of the outline button on hover -$button-md-outline-background-color-hover: css-var($text-md-color-value, text-md-color, $button-md-outline-background-color-alpha-hover) !default; +$button-md-outline-background-color-hover: rgba(var(--ion-text-color-rgb, $text-color-rgb), $button-md-outline-background-color-alpha-hover) !default; /// @prop - Background color of the activated outline button $button-md-outline-background-color-activated: transparent !default; @@ -161,14 +142,11 @@ $button-md-outline-box-shadow-activated: none !default; /// @prop - Opacity of the activated outline button $button-md-outline-opacity-activated: 1 !default; -/// @prop - Background color of the ripple on the outline button -$button-md-outline-ripple-background-color: $button-md-background-color !default; - /// @prop - Background color alpha of the focused outline button $button-md-outline-background-color-alpha-focused: .1 !default; /// @prop - Background color of the focused outline button -$button-md-outline-background-color-focused: ion-color($colors-md, primary, base, md, $button-md-outline-background-color-alpha-focused) !default; +$button-md-outline-background-color-focused: ion-color(primary, base, $button-md-outline-background-color-alpha-focused) !default; // Material Design Clear Button // -------------------------------------------------- @@ -176,9 +154,6 @@ $button-md-outline-background-color-focused: ion-color($colors-md, pr /// @prop - Border color of the clear button $button-md-clear-border-color: transparent !default; -/// @prop - Text color of the clear button -$button-md-clear-text-color: $button-md-background-color !default; - /// @prop - Background color of the clear button $button-md-clear-background-color: transparent !default; @@ -192,7 +167,7 @@ $button-md-clear-opacity: 1 !default; $button-md-clear-background-color-alpha-activated: .1 !default; /// @prop - Background color of the activated clear button -$button-md-clear-background-color-activated: css-var($text-md-color-value, text-md-color, $button-md-clear-background-color-alpha-activated) !default; +$button-md-clear-background-color-activated: rgba(var(--ion-text-color-rgb, $text-color-rgb), $button-md-clear-background-color-alpha-activated) !default; /// @prop - Box shadow of the activated clear button $button-md-clear-box-shadow-activated: $button-md-clear-box-shadow !default; @@ -201,16 +176,16 @@ $button-md-clear-box-shadow-activated: $button-md-clear-box-sha $button-md-clear-background-color-alpha-hover: .1 !default; /// @prop - Background color of the clear button on hover -$button-md-clear-background-color-hover: css-var($text-md-color-value, text-md-color, $button-md-clear-background-color-alpha-hover) !default; +$button-md-clear-background-color-hover: rgba(var(--ion-text-color-rgb, $text-color-rgb), $button-md-clear-background-color-alpha-hover) !default; /// @prop - Background color of the ripple on the clear button -$button-md-clear-ripple-background-color: $text-md-color-step-600 !default; +$button-md-clear-ripple-background-color: $text-color-step-600 !default; /// @props - Background color of the focused clear button $button-md-clear-background-color-alpha-focused: .1 !default; /// @props - Background color of the focused clear button -$button-md-clear-background-color-focused: ion-color($colors-md, primary, base, md, $button-md-clear-background-color-alpha-focused) !default; +$button-md-clear-background-color-focused: ion-color(primary, base, $button-md-clear-background-color-alpha-focused) !default; // Material Design Round Button // -------------------------------------------------- diff --git a/core/src/components/button/button.scss b/core/src/components/button/button.scss index 0e0f189a8f..df32c71b52 100644 --- a/core/src/components/button/button.scss +++ b/core/src/components/button/button.scss @@ -3,38 +3,165 @@ // Button // -------------------------------------------------- -.button { +:host { + vertical-align: top; // the better option for most scenarios + vertical-align: -webkit-baseline-middle; // the best for those that support it + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + text-align: center; + + --ion-color-base: #{ion-color(primary, base)}; + --ion-color-contrast: #{ion-color(primary, contrast)}; + --ion-color-shade: #{ion-color(primary, shade)}; + + --ripple-color: currentColor; +} + +:host([disabled]) { + pointer-events: none; +} + + +// Solid Button +// -------------------------------------------------- + +:host(.button-solid) { + color: #{current-color(contrast)}; + + --background: #{current-color(base)}; +} + + +// Outline Button +// -------------------------------------------------- + +:host(.button-outline) { + color: #{current-color(base)}; + + --border-color: #{current-color(base)}; + --background: transparent; +} + + +// Clear Button +// -------------------------------------------------- + +:host(.button-clear) { + color: #{current-color(base)}; + + --border-width: 0; + --background: transparent; +} + + +// Block Button +// -------------------------------------------------- + +:host(.button-block) .button-native { + @include margin-horizontal(0); + + display: block; + clear: both; + + width: 100%; + + contain: strict; +} + +:host(.button-block) .button-native::after { + clear: both; +} + + +// Full Button +// -------------------------------------------------- + +:host(.button-full) .button-native { + @include margin-horizontal(0); + + display: block; + + width: 100%; + + contain: strict; +} + +:host(.button-full:not(.button-round)) .button-native { + @include border-radius(0); + + border-right-width: 0; + border-left-width: 0; +} + + +.button-native { @include font-smoothing(); - @include text-align(center); - @include appearance(none); + @include border-radius(var(--border-radius)); + @include margin( + var(--margin-top), + var(--margin-end), + var(--margin-bottom), + var(--margin-start) + ); + + @include padding( + var(--padding-top), + var(--padding-end), + var(--padding-bottom), + var(--padding-start) + ); position: relative; z-index: 0; display: inline-block; + overflow: hidden; - border: 0; + height: var(--height); + border-width: var(--border-width); + border-style: var(--border-style); + border-color: var(--border-color); + font-family: inherit; + font-size: inherit; + font-weight: inherit; + letter-spacing: inherit; line-height: 1; - - text-decoration: none; - text-overflow: ellipsis; - text-transform: none; - - white-space: nowrap; + text-decoration: inherit; + text-overflow: inherit; + text-transform: inherit; + white-space: inherit; + color: inherit; + background: var(--background); + box-shadow: var(--box-shadow); cursor: pointer; + opacity: var(--opacity); vertical-align: top; // the better option for most scenarios vertical-align: -webkit-baseline-middle; // the best for those that support it - - transition: background-color, opacity 100ms linear; + transition: var(--transition); font-kerning: none; user-select: none; + text-align: inherit; contain: content; + + appearance: none; } -.button:active, -.button:focus { +.button-native[disabled] { + cursor: default; + opacity: .5; + + pointer-events: none; +} + +// .button > .button-container:hover { +// opacity: var(--opacity-hover); +// } + +.button-native:active, +.button-native:focus { outline: none; } @@ -51,72 +178,31 @@ } -a[disabled], -button[disabled], -.button[disabled] { - cursor: default; - - pointer-events: none; -} - - -// Block Button -// -------------------------------------------------- - -.button-block { - display: block; - clear: both; - - width: 100%; - - contain: strict; -} - -.button-block::after { - clear: both; -} - - -// Full Button -// -------------------------------------------------- - -.button-full { - display: block; - - width: 100%; - - contain: strict; -} - - -// Full Outline Button -// -------------------------------------------------- - -.button-full.button-outline { - @include border-radius(0); - - border-right-width: 0; - border-left-width: 0; -} - - // Button Icons // -------------------------------------------------- -.button ion-icon { +::slotted(ion-icon) { font-size: 1.4em; pointer-events: none; } -.button ion-icon[slot="start"] { +::slotted(ion-icon[slot="start"]) { @include margin(0, .3em, 0, -.3em); } -.button ion-icon[slot="end"] { +::slotted(ion-icon[slot="end"]) { @include margin(0, -.2em, 0, .3em); } -.button ion-icon[slot="icon-only"] { +::slotted(ion-icon[slot="icon-only"]) { font-size: 1.8em; } + + +// Button Ripple effect +// -------------------------------------------------- + +ion-ripple-effect { + color: var(--ripple-color); +} diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx index 9274ebd90f..daf4f522e2 100644 --- a/core/src/components/button/button.tsx +++ b/core/src/components/button/button.tsx @@ -1,6 +1,6 @@ import { Component, Element, Event, EventEmitter, Prop, State } from '@stencil/core'; import { Color, CssClassMap, Mode, RouterDirection } from '../../interface'; -import { getButtonClassMap, getElementClassMap, openURL } from '../../utils/theme'; +import { openURL } from '../../utils/theme'; @Component({ @@ -8,7 +8,8 @@ import { getButtonClassMap, getElementClassMap, openURL } from '../../utils/them styleUrls: { ios: 'button.ios.scss', md: 'button.md.scss' - } + }, + shadow: true, }) export class Button { @Element() el!: HTMLElement; @@ -37,20 +38,20 @@ export class Button { /** * If true, the user cannot interact with the button. Defaults to `false`. */ - @Prop() disabled = false; + @Prop({ reflectToAttr: true }) disabled = false; /** * Set to `"block"` for a full-width button or to `"full"` for a full-width button * without left and right borders. */ - @Prop() expand?: 'full' | 'block'; + @Prop({reflectToAttr: true}) expand?: 'full' | 'block'; /** * Set to `"clear"` for a transparent button, to `"outline"` for a transparent * button with a border, or to `"solid"`. The default style is `"solid"` except inside of * a toolbar, where the default is `"clear"`. */ - @Prop() fill: 'clear' | 'outline' | 'solid' | 'default' = 'default'; + @Prop({reflectToAttr: true, mutable: true}) fill?: 'clear' | 'outline' | 'solid' | 'default'; /** * When using a router, it specifies the transition direction when navigating to @@ -68,13 +69,13 @@ export class Button { * The button shape. * Possible values are: `"round"`. */ - @Prop() shape?: 'round'; + @Prop({reflectToAttr: true}) shape?: 'round'; /** * The button size. * Possible values are: `"small"`, `"default"`, `"large"`. */ - @Prop() size?: 'small' | 'default' | 'large'; + @Prop({reflectToAttr: true}) size?: 'small' | 'default' | 'large'; /** * If true, activates a button with a heavier font weight. @@ -99,8 +100,8 @@ export class Button { @Event() ionBlur!: EventEmitter; componentWillLoad() { - if (this.el.closest('ion-buttons')) { - this.buttonType = 'bar-button'; + if (this.fill === undefined) { + this.fill = this.el.closest('ion-buttons') ? 'clear' : 'solid'; } } @@ -117,21 +118,26 @@ export class Button { this.ionBlur.emit(); } - protected render() { + hostData() { const { buttonType, color, expand, fill, mode, shape, size, strong } = this; - const TagType = this.href ? 'a' : 'button'; - const buttonClasses = { - ...getButtonClassMap(buttonType, mode), - ...getButtonTypeClassMap(buttonType, expand, mode), - ...getButtonTypeClassMap(buttonType, size, mode), - ...getButtonTypeClassMap(buttonType, shape, mode), - ...getButtonTypeClassMap(buttonType, strong ? 'strong' : undefined, mode), - ...getColorClassMap(buttonType, color, fill, mode), - ...getElementClassMap(this.el.classList), - 'focused': this.keyFocus + return { + class: { + ...getButtonClassMap(buttonType, mode), + ...getButtonTypeClassMap(buttonType, expand, mode), + ...getButtonTypeClassMap(buttonType, size, mode), + ...getButtonTypeClassMap(buttonType, shape, mode), + ...getButtonTypeClassMap(buttonType, strong ? 'strong' : undefined, mode), + ...getColorClassMap(buttonType, color, fill, mode), + 'focused': this.keyFocus, + }, + 'tappable': true, }; + } + protected render() { + + const TagType = this.href ? 'a' : 'button'; const attrs = (TagType === 'button') ? { type: this.type } : { href: this.href }; @@ -139,7 +145,7 @@ export class Button { return ( - { this.mode === 'md' && } + { this.mode === 'md' && } ); } } +/** + * Get the classes based on the button type + * e.g. alert-button, action-sheet-button + */ +function getButtonClassMap(buttonType: string | undefined, mode: Mode): CssClassMap { + if (!buttonType) { + return {}; + } + return { + [buttonType]: true, + [`${buttonType}-${mode}`]: true + }; +} + /** * Get the classes based on the type * e.g. block, full, round, large @@ -173,32 +193,19 @@ function getButtonTypeClassMap(buttonType: string, type: string|undefined, mode: }; } -function getColorClassMap(buttonType: string, color: string | undefined, fill: string, mode: Mode): CssClassMap { +function getColorClassMap(buttonType: string, color: string | undefined, fill: string | undefined, mode: Mode): CssClassMap { let className = buttonType; - if (buttonType !== 'bar-button' && fill === 'solid') { - fill = 'default'; - } - - if (fill && fill !== 'default') { + if (fill) { className += `-${fill.toLowerCase()}`; } - // special case for a default bar button - // if the bar button is default it should get the fill - // but if a color is passed the fill shouldn't be added - if (buttonType === 'bar-button' && fill === 'default') { - className = buttonType; - if (!color) { - className += '-' + fill.toLowerCase(); - } - } const map: CssClassMap = { [className]: true, [`${className}-${mode}`]: true, }; if (color) { - map[`${className}-${mode}-${color}`] = true; + map[`ion-color-${color}`] = true; } return map; } diff --git a/core/src/components/button/button.vars.scss b/core/src/components/button/button.vars.scss index ab8d0750ca..6ae48363c0 100644 --- a/core/src/components/button/button.vars.scss +++ b/core/src/components/button/button.vars.scss @@ -19,4 +19,3 @@ $button-round-padding-start: $button-round-padding-end !default; $button-round-border-radius: 64px !default; /// @prop - Opacity of the button when disabled -$button-opacity-disabled: .5 !default; diff --git a/core/src/components/button/test/anchor/index.html b/core/src/components/button/test/anchor/index.html index a9698c9203..fb6825ea9e 100644 --- a/core/src/components/button/test/anchor/index.html +++ b/core/src/components/button/test/anchor/index.html @@ -1,67 +1,71 @@ + Button - Anchor + + - - - Button - Anchor - - + + + Button - Anchor + + - -

- Default - Default.activated -

-

- Primary - Primary.activated -

-

- Secondary - Secondary.activated -

-

- Tertiary - Tertiary.activated -

-

- Success - Success.activated -

-

- Warning - Warning.activated -

-

- Danger - Danger.activated -

-

- Light - Light.activated -

-

- Medium - Medium.activated -

-

- Dark - Dark.activated -

-

- Disabled - Secondary Disabled -

- + +

+ Default + Default.activated +

+

+ Primary + Primary.activated +

+

+ Secondary + Secondary.activated +

+

+ Tertiary + Tertiary.activated +

+

+ Success + Success.activated +

+

+ Warning + Warning.activated +

+

+ Danger + Danger.activated +

+

+ Light + Light.activated +

+

+ Medium + Medium.activated +

+

+ Dark + Dark.activated +

+

+ Disabled + Secondary Disabled +

+ + diff --git a/core/src/components/button/test/basic/index.html b/core/src/components/button/test/basic/index.html index 11b39c731b..527af6af6b 100644 --- a/core/src/components/button/test/basic/index.html +++ b/core/src/components/button/test/basic/index.html @@ -1,82 +1,85 @@ + Button - Basic + + - - - Button - Basic - - + + + Button - Basic + + - -

- Default - Default.activated -

+ +

+ Default + Default.activated +

-

- Primary - Primary.activated -

+

+ Primary + Primary.activated +

-

- Secondary - Secondary.activated -

+

+ Secondary + Secondary.activated +

-

- Tertiary - Tertiary.activated -

+

+ Tertiary + Tertiary.activated +

-

- Success - Success.activated -

+

+ Success + Success.activated +

-

- Warning - Warning.activated -

+

+ Warning + Warning.activated +

-

- Danger - Danger.activated -

+

+ Danger + Danger.activated +

-

- Light - Light.activated -

+

+ Light + Light.activated +

-

- Medium - Medium.activated -

+

+ Medium + Medium.activated +

-

- Dark - Dark.activated -

+

+ Dark + Dark.activated +

-

- Button Disabled - Secondary Disabled -

+

+ Button Disabled + Secondary Disabled +

-

- Change Color - Change Color -

+

+ Change Color + Change Color +

- + @@ -97,4 +100,5 @@ } + diff --git a/core/src/components/button/test/expand/index.html b/core/src/components/button/test/expand/index.html index 166adc1a19..fa14e140ae 100644 --- a/core/src/components/button/test/expand/index.html +++ b/core/src/components/button/test/expand/index.html @@ -1,47 +1,51 @@ + Button - Expand + + - - - Button - Expand - - + + + Button - Expand + + - -

- Block - Full -

-

- Block + Outline - Full + Outline -

-

- Block + Clear - Full + Clear -

-

- Block + Small - Full + Small -

-

- Block + Large - Full + Large -

-

- Block + Round - Full + Round -

- + +

+ Block + Full +

+

+ Block + Outline + Full + Outline +

+

+ Block + Clear + Full + Clear +

+

+ Block + Small + Full + Small +

+

+ Block + Large + Full + Large +

+

+ Block + Round + Full + Round +

+ + diff --git a/core/src/components/button/test/fill/index.html b/core/src/components/button/test/fill/index.html index 3686a3a64b..5e871f7c7a 100644 --- a/core/src/components/button/test/fill/index.html +++ b/core/src/components/button/test/fill/index.html @@ -1,130 +1,134 @@ + Button - Fill + + - - - Button - Fill - - + + + Button - Fill + + - -

- Default - Default.activated -

+ +

+ Default + Default.activated +

-

- Primary - Primary.activated -

+

+ Primary + Primary.activated +

-

- Secondary - Secondary.activated -

+

+ Secondary + Secondary.activated +

-

- Tertiary - Tertiary.activated -

+

+ Tertiary + Tertiary.activated +

-

- Success - Success.activated -

+

+ Success + Success.activated +

-

- Warning - Warning.activated -

+

+ Warning + Warning.activated +

-

- Danger - Danger.activated -

+

+ Danger + Danger.activated +

-

- Light - Light.activated -

+

+ Light + Light.activated +

-

- Medium - Medium.activated -

+

+ Medium + Medium.activated +

-

- Dark - Dark.activated -

-

- Disabled - Secondary Disabled -

+

+ Dark + Dark.activated +

+

+ Disabled + Secondary Disabled +

-

- Default - Default.activated -

+

+ Default + Default.activated +

-

- Primary - Primary.activated -

+

+ Primary + Primary.activated +

-

- Secondary - Secondary.activated -

+

+ Secondary + Secondary.activated +

-

- Tertiary - Tertiary.activated -

+

+ Tertiary + Tertiary.activated +

-

- Success - Success.activated -

+

+ Success + Success.activated +

-

- Warning - Warning.activated -

+

+ Warning + Warning.activated +

-

- Danger - Danger.activated -

+

+ Danger + Danger.activated +

-

- Light - Light.activated -

+

+ Light + Light.activated +

-

- Medium - Medium.activated -

+

+ Medium + Medium.activated +

-

- Dark - Dark.activated -

-

- Disabled - Secondary Disabled -

- +

+ Dark + Dark.activated +

+

+ Disabled + Secondary Disabled +

+ + diff --git a/core/src/components/button/test/icon/index.html b/core/src/components/button/test/icon/index.html index c9da331b8c..c487d3f963 100644 --- a/core/src/components/button/test/icon/index.html +++ b/core/src/components/button/test/icon/index.html @@ -1,125 +1,129 @@ + Button - Icon + + - - - Button - Icon - - + + + Button - Icon + + - -

- - - Left Icon - -

-

- - - Left Icon - -

-

- - - Right Icon - -

-

- - - Right Icon - -

-

- - - -

-

- - - -

-

- - - Left, Large - -

-

- - - Left, Large - -

-

- - - Right, Large - -

-

- - - Right, Large - -

-

- - - -

-

- - - -

-

- - - Left, Small - -

-

- - - Left, Small - -

-

- - - Right, Small - -

-

- - - Right, Small - -

-

- - - -

-

- - - -

- + +

+ + + Left Icon + +

+

+ + + Left Icon + +

+

+ + + Right Icon + +

+

+ + + Right Icon + +

+

+ + + +

+

+ + + +

+

+ + + Left, Large + +

+

+ + + Left, Large + +

+

+ + + Right, Large + +

+

+ + + Right, Large + +

+

+ + + +

+

+ + + +

+

+ + + Left, Small + +

+

+ + + Left, Small + +

+

+ + + Right, Small + +

+

+ + + Right, Small + +

+

+ + + +

+

+ + + +

+ + diff --git a/core/src/components/button/test/preview/index.html b/core/src/components/button/test/preview/index.html index a640ae132a..f87da6e384 100644 --- a/core/src/components/button/test/preview/index.html +++ b/core/src/components/button/test/preview/index.html @@ -1,102 +1,85 @@ + Button + + - - - Button - - + + + Button + + - -

- Default - Default.activated -

+ +

+ Default + Default.activated +

-

- Primary - Primary.activated -

+

+ Primary + Primary.activated +

-

- Secondary - Secondary.activated -

+

+ Secondary + Secondary.activated +

-

- Tertiary - Tertiary.activated -

+

+ Tertiary + Tertiary.activated +

-

- Success - Success.activated -

+

+ Success + Success.activated +

-

- Warning - Warning.activated -

+

+ Warning + Warning.activated +

-

- Danger - Danger.activated -

+

+ Danger + Danger.activated +

-

- Light - Light.activated -

+

+ Light + Light.activated +

-

- Medium - Medium.activated -

+

+ Medium + Medium.activated +

-

- Dark - Dark.activated -

+

+ Dark + Dark.activated +

-

- Button Disabled - Secondary Disabled -

+

+ Button Disabled + Secondary Disabled +

-

- Change Color - Change Color -

- -

- - - Left Icon - -

+

+ Change Color + Change Color +

-

- - Right Icon - - -

- -

- - - -

- - + @@ -117,4 +100,5 @@ } + diff --git a/core/src/components/button/test/round/index.html b/core/src/components/button/test/round/index.html index f332be3786..d7e73da48b 100644 --- a/core/src/components/button/test/round/index.html +++ b/core/src/components/button/test/round/index.html @@ -1,48 +1,55 @@ + Button - Round + + - - - Button - Round - - + + + Button - Round + + - - Default - Primary - Secondary - Tertiary - Success - Warning - Danger - Light - Medium - Dark + + Default + Primary + Secondary + Tertiary + Success + Warning + Danger + Light + Medium + Dark - Default - Primary - Secondary - Tertiary - Success - Warning - Danger - Light - Medium - Dark + Default + Primary + Secondary + Tertiary + Success + Warning + Danger + Light + Medium + Dark - Clear - Block - Full - Strong - + Clear + Block + Full + + Block - Outline + Full - Outline + + Strong + @@ -51,6 +58,8 @@ display: block !important; margin: 8px auto !important; } + + diff --git a/core/src/components/button/test/size/index.html b/core/src/components/button/test/size/index.html index 55cade42b8..cce609b3dd 100644 --- a/core/src/components/button/test/size/index.html +++ b/core/src/components/button/test/size/index.html @@ -1,57 +1,61 @@ + Button - Size + + - - - Button - Size - - + + + Button - Size + + - -

- Default - Default -

-

- Small - Small -

-

- Small - Small -

-

- Small - Small -

-

- Large - - H - E - L - L - O - -

-

- Large - Large -

-

- Large - Large -

- + +

+ Default + Default +

+

+ Small + Small +

+

+ Small + Small +

+

+ Small + Small +

+

+ Large + + H + E + L + L + O + +

+

+ Large + Large +

+

+ Large + Large +

+ + diff --git a/core/src/components/button/test/standalone/index.html b/core/src/components/button/test/standalone/index.html index 3e7dc86c7e..f7337e195c 100644 --- a/core/src/components/button/test/standalone/index.html +++ b/core/src/components/button/test/standalone/index.html @@ -6,6 +6,7 @@ Button - Standalone + diff --git a/core/src/components/button/test/strong/index.html b/core/src/components/button/test/strong/index.html index 2300deef21..ab6068e96b 100644 --- a/core/src/components/button/test/strong/index.html +++ b/core/src/components/button/test/strong/index.html @@ -1,29 +1,45 @@ + Button - Strong + + - - - Button - Strong - - + + + Button - Strong + + - -

Default

-

Outline

-

Clear

-

Block

-

Full

-

Strong

- + +

+ Default +

+

+ Outline +

+

+ Clear +

+

+ Block +

+

+ Full +

+

+ Strong +

+ + diff --git a/core/src/components/button/test/toolbar/index.html b/core/src/components/button/test/toolbar/index.html index 8109ec7d9b..dfb285316c 100644 --- a/core/src/components/button/test/toolbar/index.html +++ b/core/src/components/button/test/toolbar/index.html @@ -1,261 +1,265 @@ + Button - Toolbar + + - - - Button - Toolbar - - + + + Button - Toolbar + + - + - This should have no padding - + This should have no padding + - - This is the title that never ends. It just goes on and on my friend. - + + This is the title that never ends. It just goes on and on my friend. + - - - - - - - - - - - - - - - This is a long title with buttons. It just goes on and on my friend. - + + + + + + + + + + + + + + + This is a long title with buttons. It just goes on and on my friend. + - - - - Close - - - - - - - - - - - This is a long title with buttons. It just goes on and on my friend. - + + + + Close + + + + + + + + + + + This is a long title with buttons. It just goes on and on my friend. + - - - - - - - - - - - - - - - Defaults - + + + + + + + + + + + + + + + Defaults + - - - - - - - - - - - - - - - Defaults.activated - + + + + + + + + + + + + + + + Defaults.activated + - - - - - - - - Solid - - - Solid - - - Help - - - - + + + + + + + + Solid + + + Solid + + + Help + + + + - - - - - - - - Solid - - - Solid Activated - - - Help - - - - + + + + + + + + Solid + + + Solid Activated + + + Help + + + + - - - - - - - - Star - - - - - - - - Outline - + + + + + + + + Star + + + + + + + + Outline + - - - - - - - - Star - - - - - - - - Outline.activated - + + + + + + + + Star + + + + + + + + Outline.activated + - - - - - Clear - - - - - Edit - - - - Icon/Color Attr - + + + + + Clear + + + + + Edit + + + + Icon/Color Attr + - - - - Go Back - - - - - Edit - - - Text Only - + + + + Go Back + + + + + Edit + + + Text Only + - - - - - - - - - - - - Left side menu toggle - + + + + + + + + + + + + Left side menu toggle + - - - - - - - Right side menu toggle - - - - - - + + + + + + + Right side menu toggle + + + + + + - - - - - - - - - Something - - - Else - - - + + + + + + + + + Something + + + Else + + + - - - - Light - - - Toolbar - - - Default Segment - - - - + + + + Light + + + Toolbar + + + Default Segment + + + + + diff --git a/core/src/components/buttons/buttons.ios.scss b/core/src/components/buttons/buttons.ios.scss new file mode 100644 index 0000000000..f0ae12fa8f --- /dev/null +++ b/core/src/components/buttons/buttons.ios.scss @@ -0,0 +1,115 @@ +@import "./buttons.ios.vars"; +@import "./buttons"; + + +// iOS Toolbar Button Default +// -------------------------------------------------- + +::slotted(*) ion-button { + font-size: #{$toolbar-ios-button-font-size}; + font-weight: 400; + + --padding-top: 0; + --pading-bottom: 0; + --padding-start: 5px; + --padding-end: 5px; + + --border-radius: #{$toolbar-ios-button-border-radius}; + + --height: 32px; +} + +:host-context(.ion-color)::slotted(*) .button { + --ion-color-base: currentColor; +} + +// iOS Toolbar Button Icon +// -------------------------------------------------- +::slotted(*) ion-icon[slot="start"] { + @include margin(0); + @include margin-horizontal(null, .3em); + + font-size: 24px; + line-height: .67; + + pointer-events: none; +} + +::slotted(*) ion-icon[slot="end"] { + @include margin(0); + @include margin-horizontal(.4em, null); + + font-size: 24px; + line-height: .67; + + pointer-events: none; +} + +::slotted(*) ion-icon[slot="icon-only"] { + @include padding(0); + @include margin(0); + + font-size: 31px; + line-height: .67; + + pointer-events: none; +} + +::slotted(*) ion-button.button-clear { + --height: 35px; +} + +// iOS Toolbar Button Solid +// -------------------------------------------------- + +::slotted(*) ion-button.button-solid-ios:hover { + opacity: .4; +} + + // iOS Toolbar Menu Toggle + // -------------------------------------------------- + + // .button-menutoggle-ios { + // order: map-get($toolbar-order-ios, menu-toggle-start); + + // min-width: 36px; + + // --margin-top: 0; + // --margin-bottom: 0; + // --margin-start: 6px; + // --margin-end: 6px; + + // --padding-top: 0; + // --padding-bottom: 0; + // --padding-start: 0; + // --padding-end: 0; + + // ion-icon { + // @include padding(0, 6px); + + // font-size: 28px; + // } + // } + +// iOS Toolbar Button Placement +// -------------------------------------------------- + +:host([slot="start"]) { + order: map-get($toolbar-order-ios, buttons-start); +} + +:host([slot="secondary"]) { + order: map-get($toolbar-order-ios, buttons-secondary); +} + +:host([slot="primary"]) { + order: map-get($toolbar-order-ios, buttons-primary); + + text-align: end; +} + +:host([slot="end"]) { + order: map-get($toolbar-order-ios, buttons-end); + + text-align: end; +} diff --git a/core/src/components/buttons/buttons.ios.vars.scss b/core/src/components/buttons/buttons.ios.vars.scss new file mode 100644 index 0000000000..a6c3f86a4c --- /dev/null +++ b/core/src/components/buttons/buttons.ios.vars.scss @@ -0,0 +1,43 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Toolbar +// -------------------------------------------------- + +/// @prop - Order of the toolbar elements +$toolbar-order-ios: ( + back-button: 0, + menu-toggle-start: 1, + buttons-start: 2, + buttons-secondary: 3, + content: 4, + buttons-primary: 5, + buttons-end: 6, + menu-toggle-end: 7, +); + +/// @prop - Font family of the toolbar +$toolbar-ios-font-family: $font-family-base !default; + +/// @prop - Font size of the toolbar button +$toolbar-ios-button-font-size: 17px !default; + +/// @prop - Text color of the toolbar button +$toolbar-ios-button-color: ion-color(primary, base) !default; + +/// @prop - Background color of the toolbar button +$toolbar-ios-button-background-color: $toolbar-ios-background-color !default; + +/// @prop - Background color of the toolbar button when activated +$toolbar-ios-button-background-color-activated: $toolbar-ios-color-active !default; + +/// @prop - Border radius of the toolbar button +$toolbar-ios-button-border-radius: 4px !default; + +/// @prop - Font weight of the strong toolbar button +$toolbar-ios-button-strong-font-weight: 600 !default; + +/// @prop - Fill color of the toolbar button icon +$toolbar-ios-button-icon-fill-color: currentColor !default; + +/// @prop - Filter of the translucent toolbar +$toolbar-ios-translucent-filter: saturate(180%) blur(20px) !default; diff --git a/core/src/components/buttons/buttons.md.scss b/core/src/components/buttons/buttons.md.scss new file mode 100644 index 0000000000..beff12d029 --- /dev/null +++ b/core/src/components/buttons/buttons.md.scss @@ -0,0 +1,89 @@ +@import "./buttons.md.vars"; +@import "./buttons"; + +// Material Design Toolbar Button Default +// -------------------------------------------------- + +:host { + @include margin(0, 2px); +} + +::slotted(*) ion-button { + font-size: #{$toolbar-md-button-font-size}; + font-weight: 500; + + --padding-top: 0; + --padding-bottom: 0; + --padding-start: 8px; + --padding-end: 8px; + + --border-radius: #{$toolbar-md-button-border-radius}; + --height: 32px; + --box-shadow: none; +} + + +// Material Design Toolbar Button Icon +// -------------------------------------------------- +::slotted(*) ion-icon[slot="start"] { + @include margin(0); + @include margin-horizontal(null, .3em); + + font-size: 1.4em; + + pointer-events: none; +} + +::slotted(*) ion-icon[slot="end"] { + @include margin(0); + @include margin-horizontal(.4em, null); + + font-size: 1.4em; + + pointer-events: none; +} + +::slotted(*) ion-icon[slot="icon-only"] { + @include padding(0); + @include margin(0); + + font-size: 1.8em; + + pointer-events: none; +} + +::slotted(*) ion-button.button-solid, +::slotted(*) ion-button.button-outline { + --ion-color-base: #{$toolbar-md-text-color}; + --ion-color-contrast: #{$toolbar-md-background-color}; + --ion-color-shade: #{$toolbar-md-text-color}; +} + +::slotted(*) ion-button.button-clear { + --ion-color-base: currentColor; + --height: 45px; +} + + +// Material Design Toolbar Button Placement +// -------------------------------------------------- + +:host([slot="start"]) { + order: map-get($toolbar-order-md, buttons-start); +} + +:host([slot="secondary"]) { + order: map-get($toolbar-order-md, buttons-secondary); +} + +:host([slot="primary"]) { + order: map-get($toolbar-order-md, buttons-primary); + + text-align: end; +} + +:host([slot="end"]) { + order: map-get($toolbar-order-md, buttons-end); + + text-align: end; +} diff --git a/core/src/components/buttons/buttons.md.vars.scss b/core/src/components/buttons/buttons.md.vars.scss new file mode 100644 index 0000000000..d92b493474 --- /dev/null +++ b/core/src/components/buttons/buttons.md.vars.scss @@ -0,0 +1,40 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Toolbar +// -------------------------------------------------- + +/// @prop - Order of the toolbar elements +$toolbar-order-md: ( + back-button: 0, + menu-toggle-start: 1, + buttons-start: 2, + content: 3, + buttons-secondary: 4, + buttons-primary: 5, + buttons-end: 6, + menu-toggle-end: 7, +); + +/// @prop - Font family of the toolbar +$toolbar-md-font-family: $font-family-base !default; + +/// @prop - Font size of the toolbar button +$toolbar-md-button-font-size: 14px !default; + +/// @prop - Text color of the toolbar button +$toolbar-md-button-color: $toolbar-md-text-color !default; + +/// @prop - Background color of the toolbar button +$toolbar-md-button-background-color: $toolbar-md-background-color !default; + +/// @prop - Background color of the toolbar button when activated +$toolbar-md-button-background-color-activated: $toolbar-md-color-active !default; + +/// @prop - Border radius of the toolbar button +$toolbar-md-button-border-radius: 2px !default; + +/// @prop - Fill color of the toolbar button icon +$toolbar-md-button-icon-fill-color: currentColor !default; + +/// @prop - Font weight of the strong toolbar button +$toolbar-md-button-strong-font-weight: bold !default; diff --git a/core/src/components/buttons/buttons.scss b/core/src/components/buttons/buttons.scss new file mode 100644 index 0000000000..766b8938d8 --- /dev/null +++ b/core/src/components/buttons/buttons.scss @@ -0,0 +1,31 @@ +@import "../../themes/ionic.globals"; + +:host { + z-index: $z-index-toolbar-buttons; + + display: block; + + transform: translateZ(0); + + pointer-events: none; +} + +// Toolbar Buttons +// -------------------------------------------------- + +::slotted(*) ion-button { + --margin-top: 0; + --margin-bottom: 0; + --margin-start: 0; + --margin-end: 0; + + --padding-top: 0; + --padding-bottom: 0; + --padding-start: 0; + --padding-end: 0; + + --box-shadow: none; + + pointer-events: auto; +} + diff --git a/core/src/components/buttons/buttons.tsx b/core/src/components/buttons/buttons.tsx index e3c5b05b24..4ff2a11cee 100644 --- a/core/src/components/buttons/buttons.tsx +++ b/core/src/components/buttons/buttons.tsx @@ -1,10 +1,11 @@ import { Component } from '@stencil/core'; - @Component({ tag: 'ion-buttons', - host: { - theme: 'bar-buttons' - } + styleUrls: { + ios: 'buttons.ios.scss', + md: 'buttons.md.scss' + }, + scoped: true, }) export class Buttons {} diff --git a/core/src/components/buttons/test/icon/index.html b/core/src/components/buttons/test/icon/index.html index d609f94cc7..44991e85d0 100644 --- a/core/src/components/buttons/test/icon/index.html +++ b/core/src/components/buttons/test/icon/index.html @@ -1,31 +1,35 @@ + Buttons - Basic + + - - - Buttons - Basic - - start btn - - - - - - - - - - Content - + + + Buttons - Basic + + start btn + + + + + + + + + + Content + + diff --git a/core/src/components/card-content/card-content.ios.scss b/core/src/components/card-content/card-content.ios.scss index febb235956..7817834fe4 100644 --- a/core/src/components/card-content/card-content.ios.scss +++ b/core/src/components/card-content/card-content.ios.scss @@ -9,31 +9,34 @@ font-size: $card-ios-font-size; line-height: 1.4; -} + h1 { + @include margin(0, 0, 2px); -// Generate iOS Card Content Colors -// -------------------------------------------------- - -@each $color-name, $color-value in $colors-ios { - $color-base: ion-color($colors-ios, $color-name, base, ios); - $color-contrast: ion-color($colors-ios, $color-name, contrast, ios); - - .card-ios-#{$color-name} { - .card-content-ios { - color: $color-contrast; - } - - @each $color-name, $color-value in $colors-ios { - $color-base: ion-color($colors-ios, $color-name, base, ios); - - .card-content-ios-#{$color-name} { - color: $color-base; - } - } + font-size: 24px; + font-weight: normal; } - .card-content-ios-#{$color-name} { - color: $color-base; + h2 { + @include margin(2px, 0); + + font-size: 16px; + font-weight: normal; + } + + h3, + h4, + h5, + h6 { + @include margin(2px, 0); + + font-size: 14px; + font-weight: normal; + } + + p { + @include margin(0, 0, 2px); + + font-size: 14px; } } diff --git a/core/src/components/card-content/card-content.md.scss b/core/src/components/card-content/card-content.md.scss index a29a2c9baa..5c22b9a8e4 100644 --- a/core/src/components/card-content/card-content.md.scss +++ b/core/src/components/card-content/card-content.md.scss @@ -9,32 +9,36 @@ font-size: $card-md-font-size; line-height: $card-md-line-height; -} + h1 { + @include margin(0, 0, 2px); -// Generate Material Design Card Content Colors -// -------------------------------------------------- - -@each $color-name, $color-value in $colors-md { - $color-base: ion-color($colors-md, $color-name, base, md); - $color-contrast: ion-color($colors-md, $color-name, contrast, md); - - .card-md-#{$color-name} { - - .card-content-md { - color: $color-contrast; - } - - @each $color-name, $color-value in $colors-md { - $color-base: ion-color($colors-md, $color-name, base, md); - - .card-content-md-#{$color-name} { - color: $color-base; - } - } + font-size: 24px; + font-weight: normal; } - .card-content-md-#{$color-name} { - color: $color-base; + h2 { + @include margin(2px, 0); + + font-size: 16px; + font-weight: normal; + } + + h3, + h4, + h5, + h6 { + @include margin(2px, 0); + + font-size: 14px; + font-weight: normal; + } + + p { + @include margin(0, 0, 2px); + + font-size: 14px; + font-weight: normal; + line-height: 1.5; } } diff --git a/core/src/components/card-content/card-content.tsx b/core/src/components/card-content/card-content.tsx index 69f3e647ee..b75e6fbea5 100644 --- a/core/src/components/card-content/card-content.tsx +++ b/core/src/components/card-content/card-content.tsx @@ -1,25 +1,25 @@ import { Component, Prop } from '@stencil/core'; -import { Color, Mode } from '../../interface'; +import { Mode } from '../../interface'; +import { createThemedClasses } from '../../utils/theme'; @Component({ tag: 'ion-card-content', styleUrls: { ios: 'card-content.ios.scss', md: 'card-content.md.scss' - }, - host: { - theme: 'card-content' } }) export class CardContent { - /** - * The color to use for the text. - */ - @Prop() color?: Color; /** * The mode determines which platform styles to use. * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; + + hostData() { + return { + class: createThemedClasses(this.mode, 'card-content') + }; + } } diff --git a/core/src/components/card-content/readme.md b/core/src/components/card-content/readme.md index f35f81747b..5db4938152 100644 --- a/core/src/components/card-content/readme.md +++ b/core/src/components/card-content/readme.md @@ -9,13 +9,6 @@ It is recommended that any text content for a card should be placed in an `ion-c ## Properties -#### color - -string - -The color to use for the text. - - #### mode string @@ -26,13 +19,6 @@ Possible values are: `"ios"` or `"md"`. ## Attributes -#### color - -string - -The color to use for the text. - - #### mode string diff --git a/core/src/components/card-header/card-header.ios.scss b/core/src/components/card-header/card-header.ios.scss index a0b83d633d..ff9c9e7c40 100644 --- a/core/src/components/card-header/card-header.ios.scss +++ b/core/src/components/card-header/card-header.ios.scss @@ -4,11 +4,11 @@ // iOS Card Header // -------------------------------------------------- -.card-header-ios { +:host { @include padding($card-ios-header-padding-top, $card-ios-header-padding-end, $card-ios-header-padding-bottom, $card-ios-header-padding-start); } -.card-header-translucent-ios { +:host(.card-header-translucent) { background-color: $card-ios-header-translucent-background-color; backdrop-filter: $card-ios-header-translucent-filter; diff --git a/core/src/components/card-header/card-header.ios.vars.scss b/core/src/components/card-header/card-header.ios.vars.scss index b21b7e5cf9..c71017f091 100644 --- a/core/src/components/card-header/card-header.ios.vars.scss +++ b/core/src/components/card-header/card-header.ios.vars.scss @@ -19,7 +19,7 @@ $card-ios-header-padding-start: $card-ios-header-padding $card-ios-header-translucent-background-color-alpha: .9 !default; /// @prop - Filter of the translucent card header background color -$card-ios-header-translucent-background-color: css-var($background-ios-color-value, background-ios-color, $card-ios-header-translucent-background-color-alpha) !default; +$card-ios-header-translucent-background-color: rgba(var(--ion-background-color-rgb, $background-color-rgb), $card-ios-header-translucent-background-color-alpha) !default; /// @prop - Filter of the translucent card header $card-ios-header-translucent-filter: saturate(180%) blur(30px) !default; diff --git a/core/src/components/card-header/card-header.md.scss b/core/src/components/card-header/card-header.md.scss index c37cb96e19..6e64c3a0aa 100644 --- a/core/src/components/card-header/card-header.md.scss +++ b/core/src/components/card-header/card-header.md.scss @@ -4,6 +4,6 @@ // Material Design Card Header // -------------------------------------------------- -.card-header-md { +:host { @include padding($card-md-header-padding-top, $card-md-header-padding-end, $card-md-header-padding-bottom, $card-md-header-padding-start); } diff --git a/core/src/components/card-header/card-header.scss b/core/src/components/card-header/card-header.scss index bf144d4a65..ee84f33106 100644 --- a/core/src/components/card-header/card-header.scss +++ b/core/src/components/card-header/card-header.scss @@ -3,7 +3,7 @@ // Card Header // -------------------------------------------------- -ion-card-header { +:host { position: relative; display: block; overflow: hidden; diff --git a/core/src/components/card-header/card-header.tsx b/core/src/components/card-header/card-header.tsx index bd5d6197b6..fb481526c4 100644 --- a/core/src/components/card-header/card-header.tsx +++ b/core/src/components/card-header/card-header.tsx @@ -1,7 +1,6 @@ import { Component, Prop } from '@stencil/core'; - import { Color, Mode } from '../../interface'; -import { createThemedClasses } from '../../utils/theme'; +import { createColorClasses } from '../../utils/theme'; @Component({ tag: 'ion-card-header', @@ -9,9 +8,7 @@ import { createThemedClasses } from '../../utils/theme'; ios: 'card-header.ios.scss', md: 'card-header.md.scss' }, - host: { - theme: 'card-header' - } + shadow: true }) export class CardHeader { /** @@ -31,16 +28,15 @@ export class CardHeader { @Prop() translucent = false; hostData() { - const themedClasses = this.translucent - ? createThemedClasses(this.mode, this.color, 'card-header-translucent') - : {}; - - const hostClasses = { - ...themedClasses - }; - return { - class: hostClasses + class: { + ...createColorClasses(this.color), + 'card-header-translucent': this.translucent, + } }; } + + render() { + return ; + } } diff --git a/core/src/components/card-subtitle/card-subtitle.ios.scss b/core/src/components/card-subtitle/card-subtitle.ios.scss index 933e2bec73..8cfc686fc4 100644 --- a/core/src/components/card-subtitle/card-subtitle.ios.scss +++ b/core/src/components/card-subtitle/card-subtitle.ios.scss @@ -4,7 +4,7 @@ // iOS Card Subtitle // -------------------------------------------------- -.card-subtitle-ios { +:host { @include margin($card-ios-subtitle-margin-top, $card-ios-subtitle-margin-end, $card-ios-subtitle-margin-bottom, $card-ios-subtitle-margin-start); @include padding($card-ios-subtitle-padding-top, $card-ios-subtitle-padding-end, $card-ios-subtitle-padding-bottom, $card-ios-subtitle-padding-start); @@ -12,33 +12,6 @@ font-weight: $card-ios-subtitle-font-weight; letter-spacing: $card-ios-subtitle-letter-spacing; text-transform: $card-ios-subtitle-text-transform; - color: $card-ios-subtitle-color; -} - - -// Generate iOS Card subtitle Colors -// -------------------------------------------------- - -@each $color-name, $color-value in $colors-ios { - $color-base: ion-color($colors-ios, $color-name, base, ios); - $color-contrast: ion-color($colors-ios, $color-name, contrast, ios); - - .card-ios-#{$color-name} { - - .card-subtitle-ios { - color: $color-contrast; - } - - @each $color-name, $color-value in $colors-ios { - $color-base: ion-color($colors-ios, $color-name, base, ios); - - .card-subtitle-ios-#{$color-name} { - color: $color-base; - } - } - } - - .card-subtitle-ios-#{$color-name} { - color: $color-base; - } + + --ion-color-base: #{$card-ios-subtitle-color}; } diff --git a/core/src/components/card-subtitle/card-subtitle.ios.vars.scss b/core/src/components/card-subtitle/card-subtitle.ios.vars.scss index ad4ff8b95f..b1a8606db9 100644 --- a/core/src/components/card-subtitle/card-subtitle.ios.vars.scss +++ b/core/src/components/card-subtitle/card-subtitle.ios.vars.scss @@ -40,4 +40,4 @@ $card-ios-subtitle-margin-bottom: 4px !default; $card-ios-subtitle-margin-start: $card-ios-subtitle-margin-end !default; /// @prop - Color of the card subtitle -$card-ios-subtitle-color: $text-ios-color-step-400 !default; +$card-ios-subtitle-color: $text-color-step-400 !default; diff --git a/core/src/components/card-subtitle/card-subtitle.md.scss b/core/src/components/card-subtitle/card-subtitle.md.scss index 3734335db7..7d021af556 100644 --- a/core/src/components/card-subtitle/card-subtitle.md.scss +++ b/core/src/components/card-subtitle/card-subtitle.md.scss @@ -4,38 +4,11 @@ // Material Design Card Subtitle // -------------------------------------------------- -.card-subtitle-md { +:host { @include margin($card-md-subtitle-margin-top, $card-md-subtitle-margin-end, $card-md-subtitle-margin-bottom, $card-md-subtitle-margin-start); @include padding($card-md-subtitle-padding-top, $card-md-subtitle-padding-end, $card-md-subtitle-padding-bottom, $card-md-subtitle-padding-start); font-size: $card-md-subtitle-font-size; - color: $card-md-subtitle-color; -} - - -// Generate Material Design Card subtitle Colors -// -------------------------------------------------- - -@each $color-name, $color-value in $colors-md { - $color-base: ion-color($colors-md, $color-name, base, md); - $color-contrast: ion-color($colors-md, $color-name, contrast, md); - - .card-md-#{$color-name} { - - .card-subtitle-md { - color: $color-contrast; - } - - @each $color-name, $color-value in $colors-md { - $color-base: ion-color($colors-md, $color-name, base, md); - - .card-subtitle-md-#{$color-name} { - color: $color-base; - } - } - } - - .card-subtitle-md-#{$color-name} { - color: $color-base; - } + + --ion-color-base: #{$card-md-subtitle-color}; } diff --git a/core/src/components/card-subtitle/card-subtitle.md.vars.scss b/core/src/components/card-subtitle/card-subtitle.md.vars.scss index 540de37efb..4221a30e83 100644 --- a/core/src/components/card-subtitle/card-subtitle.md.vars.scss +++ b/core/src/components/card-subtitle/card-subtitle.md.vars.scss @@ -31,4 +31,4 @@ $card-md-subtitle-margin-bottom: 8px !default; $card-md-subtitle-margin-start: $card-md-subtitle-margin-end !default; /// @prop - Color of the card subtitle -$card-md-subtitle-color: $text-md-color-step-450 !default; +$card-md-subtitle-color: $text-color-step-450 !default; diff --git a/core/src/components/card-subtitle/card-subtitle.scss b/core/src/components/card-subtitle/card-subtitle.scss index 805a651342..4c1b4b7b72 100644 --- a/core/src/components/card-subtitle/card-subtitle.scss +++ b/core/src/components/card-subtitle/card-subtitle.scss @@ -3,7 +3,9 @@ // Card Subtitle // -------------------------------------------------- -ion-card-subtitle { +:host { position: relative; display: block; + + color: #{current-color(base)}; } diff --git a/core/src/components/card-subtitle/card-subtitle.tsx b/core/src/components/card-subtitle/card-subtitle.tsx index d1581d5562..ae14bcb3fa 100644 --- a/core/src/components/card-subtitle/card-subtitle.tsx +++ b/core/src/components/card-subtitle/card-subtitle.tsx @@ -1,5 +1,6 @@ import { Component, Prop } from '@stencil/core'; import { Color, Mode } from '../../interface'; +import { createColorClasses } from '../../utils/theme'; @Component({ tag: 'ion-card-subtitle', @@ -7,9 +8,7 @@ import { Color, Mode } from '../../interface'; ios: 'card-subtitle.ios.scss', md: 'card-subtitle.md.scss' }, - host: { - theme: 'card-subtitle' - } + shadow: true }) export class CardSubtitle { /** @@ -25,8 +24,13 @@ export class CardSubtitle { hostData() { return { - role: 'heading', + class: createColorClasses(this.color), + 'role': 'heading', 'aria-level': '3' }; } + + render() { + return ; + } } diff --git a/core/src/components/card-title/card-title.ios.scss b/core/src/components/card-title/card-title.ios.scss index 4a92e8874f..2627430cb1 100644 --- a/core/src/components/card-title/card-title.ios.scss +++ b/core/src/components/card-title/card-title.ios.scss @@ -4,43 +4,14 @@ // iOS Card Title // -------------------------------------------------- -.card-title-ios { +:host { @include margin($card-ios-title-margin-top, $card-ios-title-margin-end, $card-ios-title-margin-bottom, $card-ios-title-margin-start); @include padding($card-ios-title-padding-top, $card-ios-title-padding-end, $card-ios-title-padding-bottom, $card-ios-title-padding-start); - display: block; - font-size: $card-ios-title-font-size; font-weight: $card-ios-title-font-weight; line-height: 1.2; - color: $card-ios-title-text-color; -} - - -// Generate iOS Card Title Colors -// -------------------------------------------------- - -@each $color-name, $color-value in $colors-ios { - $color-base: ion-color($colors-ios, $color-name, base, ios); - $color-contrast: ion-color($colors-ios, $color-name, contrast, ios); - - .card-ios-#{$color-name} { - - .card-title-ios { - color: $color-contrast; - } - - @each $color-name, $color-value in $colors-ios { - $color-base: ion-color($colors-ios, $color-name, base, ios); - - .card-title-ios-#{$color-name} { - color: $color-base; - } - } - } - - .card-title-ios-#{$color-name} { - color: $color-base; - } + + color: #{$card-ios-title-text-color}; } diff --git a/core/src/components/card-title/card-title.ios.vars.scss b/core/src/components/card-title/card-title.ios.vars.scss index efb5c869cc..1465a11106 100644 --- a/core/src/components/card-title/card-title.ios.vars.scss +++ b/core/src/components/card-title/card-title.ios.vars.scss @@ -34,4 +34,4 @@ $card-ios-title-margin-bottom: $card-ios-title-margin-top !default; $card-ios-title-margin-start: $card-ios-title-margin-top !default; /// @prop - Color of the card title -$card-ios-title-text-color: $text-ios-color !default; +$card-ios-title-text-color: $text-color !default; diff --git a/core/src/components/card-title/card-title.md.scss b/core/src/components/card-title/card-title.md.scss index c552e51789..fb324433af 100644 --- a/core/src/components/card-title/card-title.md.scss +++ b/core/src/components/card-title/card-title.md.scss @@ -4,42 +4,13 @@ // Material Design Card Title // -------------------------------------------------- -.card-title-md { +:host { @include margin($card-md-title-margin-top, $card-md-title-margin-end, $card-md-title-margin-bottom, $card-md-title-margin-start); @include padding($card-md-title-padding-top, $card-md-title-padding-end, $card-md-title-padding-bottom, $card-md-title-padding-start); - display: block; - font-size: $card-md-title-font-size; line-height: 1.2; - color: $card-md-title-text-color; -} - - -// Generate Material Design Card Title Colors -// -------------------------------------------------- - -@each $color-name, $color-value in $colors-md { - $color-base: ion-color($colors-md, $color-name, base, md); - $color-contrast: ion-color($colors-md, $color-name, contrast, md); - - .card-md-#{$color-name} { - - .card-title-md { - color: $color-contrast; - } - - @each $color-name, $color-value in $colors-md { - $color-base: ion-color($colors-md, $color-name, base, md); - - .card-title-md-#{$color-name} { - color: $color-base; - } - } - } - - .card-title-md-#{$color-name} { - color: $color-base; - } + + color: #{$card-md-title-text-color}; } diff --git a/core/src/components/card-title/card-title.md.vars.scss b/core/src/components/card-title/card-title.md.vars.scss index 3500080c53..f805ea9635 100644 --- a/core/src/components/card-title/card-title.md.vars.scss +++ b/core/src/components/card-title/card-title.md.vars.scss @@ -31,4 +31,4 @@ $card-md-title-margin-bottom: $card-md-title-margin-top !default; $card-md-title-margin-start: $card-md-title-margin-end !default; /// @prop - Color of the card title -$card-md-title-text-color: $text-md-color-step-150 !default; +$card-md-title-text-color: $text-color-step-150 !default; diff --git a/core/src/components/card-title/card-title.scss b/core/src/components/card-title/card-title.scss index 8adbb3154c..99b8c2fc2d 100644 --- a/core/src/components/card-title/card-title.scss +++ b/core/src/components/card-title/card-title.scss @@ -4,7 +4,11 @@ // Card Title // -------------------------------------------------- -ion-card-title { +:host { position: relative; display: block; } + +:host(.ion-color) { + color: #{current-color(base)} !important; +} diff --git a/core/src/components/card-title/card-title.tsx b/core/src/components/card-title/card-title.tsx index 6eb87c0655..0c2d2e6f93 100644 --- a/core/src/components/card-title/card-title.tsx +++ b/core/src/components/card-title/card-title.tsx @@ -1,5 +1,6 @@ import { Component, Prop } from '@stencil/core'; import { Color, Mode } from '../../interface'; +import { createColorClasses } from '../../utils/theme'; @Component({ tag: 'ion-card-title', @@ -7,9 +8,7 @@ import { Color, Mode } from '../../interface'; ios: 'card-title.ios.scss', md: 'card-title.md.scss' }, - host: { - theme: 'card-title' - } + shadow: true }) export class CardTitle { /** @@ -25,8 +24,13 @@ export class CardTitle { hostData() { return { - role: 'heading', + class: createColorClasses(this.color), + 'role': 'heading', 'aria-level': '2' }; } + + render() { + return ; + } } diff --git a/core/src/components/card/card.ios.scss b/core/src/components/card/card.ios.scss index fd7de7035f..73c0db4111 100755 --- a/core/src/components/card/card.ios.scss +++ b/core/src/components/card/card.ios.scss @@ -4,7 +4,7 @@ // iOS Card // -------------------------------------------------- -.card-ios { +:host { @include margin($card-ios-margin-top, $card-ios-margin-end, $card-ios-margin-bottom, $card-ios-margin-start); @include border-radius($card-ios-border-radius); @@ -12,91 +12,29 @@ font-family: $card-ios-font-family; font-size: $card-ios-font-size; - color: $card-ios-text-color; - background-color: $card-ios-background-color; box-shadow: $card-ios-box-shadow; transform: translateZ(0); + + --ion-color-base: var(--ion-item-background, transparent); + --ion-color-contrast: #{$card-ios-text-color}; } -.card-ios ion-list { +::slotted(*) ion-list { @include margin(null, null, 0, null); } -.card-ios > .item:last-child, -.card-ios > .item:last-child .item-inner, -.card-ios > .item-sliding:last-child .item { - border-bottom: 0; + +::slotted(*) .item { + --border-width: 0; + --inner-border-width: 0; } -.card-ios .item-ios .item-inner { - border: 0; -} -.card .note-ios { - font-size: 13px; -} - -.card-ios h1 { - @include margin(0, 0, 2px); - - font-size: 24px; - font-weight: normal; -} - -.card-ios h2 { - @include margin(2px, 0); - - font-size: 16px; - font-weight: normal; -} - -.card-ios h3, -.card-ios h4, -.card-ios h5, -.card-ios h6 { - @include margin(2px, 0); - - font-size: 14px; - font-weight: normal; -} - -.card-ios p { - @include margin(0, 0, 2px); - - font-size: 14px; - color: $card-ios-text-color; -} +// .card .note-ios { +// font-size: 13px; +// } // .card-ios + ion-card { // @include margin(0, null, null, null); // } - -// Generate iOS Card Colors -// -------------------------------------------------- - -@each $color-name, $color-value in $colors-ios { - $color-base: ion-color($colors-ios, $color-name, base, ios); - $color-contrast: ion-color($colors-ios, $color-name, contrast, ios); - - .card-ios .text-ios-#{$color-name} { - color: $color-base; - } - - .card-ios-#{$color-name} { - color: $color-contrast; - background-color: $color-base; - - p { - color: $color-contrast; - } - - @each $color-name, $color-value in $colors-ios { - $color-base: ion-color($colors-ios, $color-name, base, ios); - - .text-ios-#{$color-name} { - color: $color-base; - } - } - } -} diff --git a/core/src/components/card/card.ios.vars.scss b/core/src/components/card/card.ios.vars.scss index e24a6cc7b0..63073fa753 100755 --- a/core/src/components/card/card.ios.vars.scss +++ b/core/src/components/card/card.ios.vars.scss @@ -16,7 +16,7 @@ $card-ios-margin-bottom: 30px !default; $card-ios-margin-start: 20px !default; /// @prop - Background color of the card -$card-ios-background-color: $item-ios-background-color !default; +$card-ios-background-color: $item-background-color !default; /// @prop - Box shadow color of the card $card-ios-box-shadow-color: rgba(0, 0, 0, .12) !default; @@ -28,10 +28,10 @@ $card-ios-box-shadow: 0 4px 16px $card-ios-box-shadow-color !de $card-ios-border-radius: 8px !default; /// @prop - Font family of the card -$card-ios-font-family: $font-family-ios-base !default; +$card-ios-font-family: $font-family-base !default; /// @prop - Font size of the card $card-ios-font-size: 14px !default; /// @prop - Color of the card text -$card-ios-text-color: $text-ios-color-step-400 !default; +$card-ios-text-color: $text-color-step-400 !default; diff --git a/core/src/components/card/card.md.scss b/core/src/components/card/card.md.scss index 7916626a84..a65e9ce23f 100755 --- a/core/src/components/card/card.md.scss +++ b/core/src/components/card/card.md.scss @@ -4,7 +4,7 @@ // Material Design Card // -------------------------------------------------- -.card-md { +:host { @include margin($card-md-margin-top, $card-md-margin-end, $card-md-margin-bottom, $card-md-margin-start); @include border-radius($card-md-border-radius); @@ -12,102 +12,29 @@ font-family: $card-md-font-family; font-size: $card-md-font-size; - color: $card-md-text-color; - background-color: $card-md-background-color; box-shadow: $card-md-box-shadow; + + --ion-color-base: var(--ion-item-background, transparent); + --ion-color-contrast: #{$card-md-text-color}; } -.card-md ion-list { +::slotted(*) ion-list { @include margin(null, null, 0, null); } -.card-md > .item:last-child, -.card-md > .item:last-child .item-inner, -.card-md > .item-sliding:last-child .item { - border-bottom: 0; +::slotted(*) .item { + --border-width: 0; } -.card-md .item-md .item-inner { - border: 0; +::slotted(*) .item:last-child { + --border-width: 0; + --inner-border-width: 0; } .card .note-md { font-size: 13px; } -.card-md h1 { - @include margin(0, 0, 2px); - - font-size: 24px; - font-weight: normal; - color: $card-md-text-color; -} - -.card-md h2 { - @include margin(2px, 0); - - font-size: 16px; - font-weight: normal; - color: $card-md-text-color; -} - -.card-md h3, -.card-md h4, -.card-md h5, -.card-md h6 { - @include margin(2px, 0); - - font-size: 14px; - font-weight: normal; - color: $card-md-text-color; -} - -.card-md p { - @include margin(0, 0, 2px); - - font-size: 14px; - font-weight: normal; - line-height: 1.5; - color: $card-md-text-color; -} - -.card-md + ion-card { +:host + ion-card { @include margin(0, null, null, null); } - - -// Generate Material Design Card Colors -// -------------------------------------------------- - -@each $color-name, $color-value in $colors-md { - $color-base: ion-color($colors-md, $color-name, base, md); - $color-contrast: ion-color($colors-md, $color-name, contrast, md); - - .card-md .text-md-#{$color-name} { - color: $color-base; - } - - .card-md-#{$color-name} { - color: $color-contrast; - background-color: $color-base; - - h1, - h2, - h3, - h4, - h5, - h6, - p { - color: $color-contrast; - } - - @each $color-name, $color-value in $colors-md { - $color-base: ion-color($colors-md, $color-name, base, md); - - .text-md-#{$color-name} { - color: $color-base; - } - } - } - -} diff --git a/core/src/components/card/card.md.vars.scss b/core/src/components/card/card.md.vars.scss index 7d70786543..5d401a5f85 100755 --- a/core/src/components/card/card.md.vars.scss +++ b/core/src/components/card/card.md.vars.scss @@ -16,7 +16,7 @@ $card-md-margin-bottom: 10px !default; $card-md-margin-start: 10px !default; /// @prop - Background color of the card -$card-md-background-color: $item-md-background-color !default; +$card-md-background-color: $item-background-color !default; /// @prop - Box shadow of the card $card-md-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default; @@ -28,10 +28,10 @@ $card-md-border-radius: 2px !default; $card-md-font-size: 14px !default; /// @prop - Font family of the card -$card-md-font-family: $font-family-md-base !default; +$card-md-font-family: $font-family-base !default; /// @prop - Line height of the card $card-md-line-height: 1.5 !default; /// @prop - Color of the card text -$card-md-text-color: $text-md-color-step-150 !default; +$card-md-text-color: $text-color-step-150 !default; diff --git a/core/src/components/card/card.scss b/core/src/components/card/card.scss index 9fafbf0fe8..15e828a469 100755 --- a/core/src/components/card/card.scss +++ b/core/src/components/card/card.scss @@ -3,15 +3,25 @@ // Card // -------------------------------------------------- -ion-card { +:host { @include font-smoothing(); position: relative; display: block; overflow: hidden; + + color: #{current-color(contrast)}; + background: #{current-color(base)}; + + --ion-card-text: currentColor; } -ion-card img { +:host(.ion-color)::slotted(*) ion-card-title, +:host(.ion-color)::slotted(*) ion-card-subtitle { + color: currentColor; +} + +::slotted(*) img { display: block; width: 100%; diff --git a/core/src/components/card/card.tsx b/core/src/components/card/card.tsx index 54f5e6ec22..7febf24036 100644 --- a/core/src/components/card/card.tsx +++ b/core/src/components/card/card.tsx @@ -1,5 +1,6 @@ import { Component, Prop } from '@stencil/core'; import { Color, Mode } from '../../interface'; +import { createColorClasses } from '../../utils/theme'; @Component({ tag: 'ion-card', @@ -7,9 +8,7 @@ import { Color, Mode } from '../../interface'; ios: 'card.ios.scss', md: 'card.md.scss' }, - host: { - theme: 'card' - } + scoped: true }) export class Card { @@ -25,4 +24,9 @@ export class Card { */ @Prop() mode!: Mode; + hostData() { + return { + class: createColorClasses(this.color) + }; + } } diff --git a/core/src/components/card/test/basic/index.html b/core/src/components/card/test/basic/index.html index a4d42332d2..a4aaa8531e 100644 --- a/core/src/components/card/test/basic/index.html +++ b/core/src/components/card/test/basic/index.html @@ -6,6 +6,7 @@ Card - Basic + @@ -25,7 +26,8 @@ - Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the woods. Wash your spirit clean. + Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the woods. + Wash your spirit clean. @@ -69,6 +71,7 @@ .content { background: #e5e5e5; } + diff --git a/core/src/components/card/test/preview/index.html b/core/src/components/card/test/preview/index.html index 837a4589d6..40b5a3ef1f 100644 --- a/core/src/components/card/test/preview/index.html +++ b/core/src/components/card/test/preview/index.html @@ -6,71 +6,72 @@ Card + - - - Card - - + + + Card + + - - - - Card Subtitle - Card Title - + + + + Card Subtitle + Card Title + - - Keep close to Nature's heart... and break clear away, once in awhile, - and climb a mountain or spend a week in the woods. Wash your spirit clean. - - + + Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the woods. + Wash your spirit clean. + + - - - - ion-item in a card, icon left, button right - View - + + + + ion-item in a card, icon left, button right + View + - - This is content, without any paragraph or header tags, - within an ion-card-content element. - - + + This is content, without any paragraph or header tags, within an ion-card-content element. + + - - - - Card Link Item 1 .activated - + + + + Card Link Item 1 .activated + - - - Card Link Item 2 - + + + Card Link Item 2 + - - - Card Button Item 1 .activated - + + + Card Button Item 1 .activated + - - - Card Button Item 2 - - - + + + Card Button Item 2 + + + diff --git a/core/src/components/card/test/standalone/index.html b/core/src/components/card/test/standalone/index.html index bba685c5c4..828baf13f9 100644 --- a/core/src/components/card/test/standalone/index.html +++ b/core/src/components/card/test/standalone/index.html @@ -6,6 +6,7 @@ Card - Standalone + diff --git a/core/src/components/card/test/translucent/index.html b/core/src/components/card/test/translucent/index.html index 993839037a..230c596bd8 100644 --- a/core/src/components/card/test/translucent/index.html +++ b/core/src/components/card/test/translucent/index.html @@ -6,238 +6,239 @@ Card - Basic + - - - Card - Basic - - + + + Card - Basic + + - - - - This is just your basic card with some text to boot. Like it? Keep scrolling... - - + + + + This is just your basic card with some text to boot. Like it? Keep scrolling... + + - - - - Subtitle - - - Title - - + + + + Subtitle + + + Title + + - - The British use the term "header", but the American term "head-shot" the English simply refuse to adopt. - - + + The British use the term "header", but the American term "head-shot" the English simply refuse to adopt. + + - -
- -
- - - Subtitle - - - Title - - + +
+ +
+ + + Subtitle + + + Title + + - - - + + + - -
- -
- - - Subtitle - - - Title - - + +
+ +
+ + + Subtitle + + + Title + + - - The British use the term "header", but the American term "head-shot" the English simply refuse to adopt. - - + + The British use the term "header", but the American term "head-shot" the English simply refuse to adopt. + + - -
- -
+ +
+ +
- - - Subtitle - - - Title - - + + + Subtitle + + + Title + + - - The British use the term "header", but the American term "head-shot" the English simply refuse to adopt. - - + + The British use the term "header", but the American term "head-shot" the English simply refuse to adopt. + + - - - - Card Title Goes Here - -

- Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain. I am within a paragraph element. -

- + + + + Card Title Goes Here + +

+ Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain. I am within a paragraph element. +

+ - - - - - - Star - - - - - - Activated - - - - + + + + + + Star + + + + + + Activated + + + + - + - - - Explore Nearby - - - - - - Shopping - - - - - Hospital - - - - - Cafe - - - - - Dog Park - - - - - Pub - - - - - Space - - - - - - + + + Explore Nearby + + - - - -

Card With An Inset Picture

-

Isn't it beautiful

+ + Shopping -
+ + + Hospital + + + + + Cafe + + + + + Dog Park + + + + + Pub + + + + + Space + + + + + + + + + -
+ +

Card With An Inset Picture

+

Isn't it beautiful

+ - -

Hello. I am a paragraph.

- +
+ +
- - - - - - Favorite - - - - - - Listen - - - - - 11h ago - - - - - + +

Hello. I am a paragraph.

+ - + + + + + + Favorite + + + + + + Listen + + + + + 11h ago + + + + + -
- -
+ - - ion-card[no-margin] This card was breaking the border radius. - +
+ +
- - - - - - Favorite - - + + ion-card[no-margin] This card was breaking the border radius. + - - - - Listen - - - - - - Share - - - - + + + + + + Favorite + + - - + + + + Listen + + + + + + Share + + + + + + + diff --git a/core/src/components/checkbox/checkbox.ios.scss b/core/src/components/checkbox/checkbox.ios.scss index f7431959dd..fd3f63623c 100644 --- a/core/src/components/checkbox/checkbox.ios.scss +++ b/core/src/components/checkbox/checkbox.ios.scss @@ -4,51 +4,36 @@ // iOS Checkbox // -------------------------------------------------- -// iOS Checkbox Outer Circle: Unchecked -// ----------------------------------------- +:host { + --size: #{$checkbox-ios-icon-size}; -.checkbox-ios .checkbox-icon { - @include border-radius($checkbox-ios-icon-border-radius); + --border-radius: #{$checkbox-ios-icon-border-radius}; + --border-width: #{$checkbox-ios-icon-border-width}; + --border-style: #{$checkbox-ios-icon-border-style}; - position: relative; - - width: $checkbox-ios-icon-size; - height: $checkbox-ios-icon-size; - - border-width: $checkbox-ios-icon-border-width; - border-style: $checkbox-ios-icon-border-style; - border-color: $checkbox-ios-icon-border-color-off; - background-color: $checkbox-ios-background-color-off; - - contain: strict; + --unchecked-border-color: #{$checkbox-ios-icon-border-color-off}; + --unchecked-background: #{$checkbox-ios-background-color-off}; } - -// iOS Checkbox Outer Circle: Checked -// ----------------------------------------- - -.checkbox-ios .checkbox-checked { - border-color: $checkbox-ios-icon-border-color-on; - background-color: $checkbox-ios-background-color-on; -} - - // iOS Checkbox Inner Checkmark: Checked // ----------------------------------------- -.checkbox-ios .checkbox-checked .checkbox-inner { - @include position($checkbox-ios-checkmark-top, null, null, $checkbox-ios-checkmark-start); +.checkbox-inner { + @include position( + calc(var(--size) / 6), + null, null, + calc(var(--size) / 2.5 - 1px) + ); position: absolute; - width: $checkbox-ios-checkmark-width; - height: $checkbox-ios-checkmark-height; + width: calc(var(--size) / 6 + 1px); + height: calc(var(--size) / 2); border-width: $checkbox-ios-checkmark-border-width; border-top-width: 0; border-left-width: 0; border-style: $checkbox-ios-checkmark-border-style; - border-color: $checkbox-ios-checkmark-border-color; transform: rotate(45deg); } @@ -56,8 +41,8 @@ // iOS Checkbox: Disabled // ----------------------------------------- -.checkbox-ios.checkbox-disabled, -.item-ios.item-checkbox-disabled ion-label { +// TODO: .item-ios.item-checkbox-disabled ion-labe +:host(.checkbox-disabled) { opacity: $checkbox-ios-disabled-opacity; pointer-events: none; @@ -67,7 +52,7 @@ // iOS Checkbox Keyboard Focus // ----------------------------------------- -.checkbox-key .checkbox-icon::after { +:host(.checkbox-key) .checkbox-icon::after { @include border-radius(50%); @include position(-9px, null, null, -9px); @@ -89,39 +74,14 @@ // iOS Checkbox Within An Item // ----------------------------------------- -.item.item-ios .checkbox-ios { +// :host-context(.item) +:host(.in-item) { @include margin($checkbox-ios-item-start-margin-top, $checkbox-ios-item-start-margin-end, $checkbox-ios-item-start-margin-bottom, $checkbox-ios-item-start-margin-start); position: static; display: block; } -.item.item-ios .checkbox-ios[slot="end"] { +:host(.in-item[slot="end"]) { @include margin($checkbox-ios-item-end-margin-top, $checkbox-ios-item-end-margin-end, $checkbox-ios-item-end-margin-bottom, $checkbox-ios-item-end-margin-start); } - - -// iOS Checkbox Color Mixin -// -------------------------------------------------- - -@mixin checkbox-theme-ios($color-name) { - $color-base: ion-color($colors-ios, $color-name, base, ios); - $color-contrast: ion-color($colors-ios, $color-name, contrast, ios); - - .checkbox-ios-#{$color-name} .checkbox-checked { - border-color: $color-base; - background-color: $color-base; - } - - .checkbox-ios-#{$color-name} .checkbox-checked .checkbox-inner { - border-color: $color-contrast; - } -} - - -// Generate iOS Checkbox Colors -// -------------------------------------------------- - -@each $color-name, $color-value in $colors-ios { - @include checkbox-theme-ios($color-name); -} diff --git a/core/src/components/checkbox/checkbox.ios.vars.scss b/core/src/components/checkbox/checkbox.ios.vars.scss index dd545a066a..3887447254 100644 --- a/core/src/components/checkbox/checkbox.ios.vars.scss +++ b/core/src/components/checkbox/checkbox.ios.vars.scss @@ -6,13 +6,13 @@ // -------------------------------------------------- /// @prop - Background color of the checkbox when off -$checkbox-ios-background-color-off: $item-ios-background-color !default; +$checkbox-ios-background-color-off: $item-background-color !default; /// @prop - Background color of the checkbox when on -$checkbox-ios-background-color-on: ion-color($colors-ios, primary, base, ios) !default; +$checkbox-ios-background-color-on: ion-color(primary, base) !default; /// @prop - Background color of focus indicator for checkbox when focused -$checkbox-ios-background-color-focused: ion-color($colors-ios, primary, tint, ios) !default; +$checkbox-ios-background-color-focused: ion-color(primary, tint) !default; /// @prop - Size of the checkbox icon $checkbox-ios-icon-size: 24px !default; @@ -39,7 +39,7 @@ $checkbox-ios-checkmark-border-width: 1px !default; $checkbox-ios-checkmark-border-style: solid !default; /// @prop - Color of the checkmark border in the checkbox -$checkbox-ios-checkmark-border-color: ion-color($colors-ios, $checkbox-ios-background-color-on, contrast, ios) !default; +$checkbox-ios-checkmark-border-color: ion-color(primary, contrast) !default; /// @prop - Top of the checkmark in the checkbox $checkbox-ios-checkmark-top: $checkbox-ios-icon-size / 6 !default; diff --git a/core/src/components/checkbox/checkbox.md.scss b/core/src/components/checkbox/checkbox.md.scss index 717c51c348..3e65682c8d 100644 --- a/core/src/components/checkbox/checkbox.md.scss +++ b/core/src/components/checkbox/checkbox.md.scss @@ -4,55 +4,38 @@ // Material Design Checkbox // -------------------------------------------------- -// Material Design Checkbox Outer Square: Unchecked -// ----------------------------------------- +:host { + --size: #{$checkbox-md-icon-size}; -.checkbox-md .checkbox-icon { - @include border-radius($checkbox-md-icon-border-radius); + --border-radius: calc(var(--size) * .125); + --border-width: #{$checkbox-md-icon-border-width}; + --border-style: #{$checkbox-md-icon-border-style}; - position: relative; + --unchecked-border-color: #{$checkbox-md-icon-border-color-off}; + --unchecked-background: #{$checkbox-md-icon-background-color-off}; - width: $checkbox-md-icon-size; - height: $checkbox-md-icon-size; - - border-width: $checkbox-md-icon-border-width; - border-style: $checkbox-md-icon-border-style; - border-color: $checkbox-md-icon-border-color-off; - background-color: $checkbox-md-icon-background-color-off; - - transition-duration: $checkbox-md-transition-duration; - transition-property: background; - transition-timing-function: $checkbox-md-transition-easing; - - contain: strict; + --transition: #{background $checkbox-md-transition-duration $checkbox-md-transition-easing}; } - -// Material Design Checkbox Outer Square: Checked -// ----------------------------------------- - -.checkbox-md .checkbox-checked { - border-color: $checkbox-md-icon-border-color-on; - background-color: $checkbox-md-icon-background-color-on; -} - - // Material Design Checkbox Inner Checkmark: Checked // ----------------------------------------- -.checkbox-md .checkbox-checked .checkbox-inner { - @include position(0, null, null, 4px); +:host(.checkbox-checked) .checkbox-inner { + @include position( + calc(var(--size) * .05), + null, null, + calc(var(--size) * .3) + ); position: absolute; - width: 5px; - height: 10px; + width: calc(var(--size) * .3125); + height: calc(var(--size) * .625); - border-width: $checkbox-md-icon-checkmark-width; + border-width: calc(var(--size) * .125); border-top-width: 0; border-left-width: 0; border-style: $checkbox-md-icon-checkmark-style; - border-color: $checkbox-md-icon-checkmark-color; transform: rotate(45deg); } @@ -60,8 +43,10 @@ // Material Design Checkbox: Disabled // ----------------------------------------- -.checkbox-md.checkbox-disabled, -.item-md.item-checkbox-disabled ion-label { +// TODO +// .item-md.item-checkbox-disabled ion-label { + +:host(.checkbox-disabled) { opacity: $checkbox-md-disabled-opacity; pointer-events: none; @@ -71,7 +56,7 @@ // Material Design Checkbox Keyboard Focus // ----------------------------------------- -.checkbox-key .checkbox-icon::after { +:host(.checkbox-key) .checkbox-icon::after { @include border-radius(50%); @include position(-12px, null, null, -12px); @@ -93,43 +78,18 @@ // Material Design Checkbox Within An Item // ----------------------------------------- -.item.item-md .checkbox-md { +:host(.in-item) { @include margin($checkbox-md-item-start-margin-top, $checkbox-md-item-start-margin-end, $checkbox-md-item-start-margin-bottom, $checkbox-md-item-start-margin-start); position: static; display: block; } -.item.item-md .checkbox-md[slot="end"] { +:host(.in-item[slot="end"]) { @include margin($checkbox-md-item-end-margin-top, $checkbox-md-item-end-margin-end, $checkbox-md-item-end-margin-bottom, $checkbox-md-item-end-margin-start); } -.checkbox-md + .item-inner ion-label { - @include margin-horizontal(0, null); -} - - -// Material Design Checkbox Color Mixin -// -------------------------------------------------- - -@mixin checkbox-theme-md($color-name) { - $color-base: ion-color($colors-md, $color-name, base, md); - $color-contrast: ion-color($colors-md, $color-name, contrast, md); - - .checkbox-md-#{$color-name} .checkbox-checked { - border-color: $color-base; - background-color: $color-base; - } - - .checkbox-md-#{$color-name} .checkbox-checked .checkbox-inner { - border-color: $color-contrast; - } -} - - -// Generate Material Design Checkbox Colors -// -------------------------------------------------- - -@each $color-name, $color-value in $colors-md { - @include checkbox-theme-md($color-name); -} +// REVIEW +// .checkbox-md + .item-inner ion-label { +// @include margin-horizontal(0, null); +// } diff --git a/core/src/components/checkbox/checkbox.md.vars.scss b/core/src/components/checkbox/checkbox.md.vars.scss index 480e0665c4..89503447d0 100644 --- a/core/src/components/checkbox/checkbox.md.vars.scss +++ b/core/src/components/checkbox/checkbox.md.vars.scss @@ -9,13 +9,13 @@ $checkbox-md-disabled-opacity: .3 !default; /// @prop - Background color of the checkbox icon when off -$checkbox-md-icon-background-color-off: $item-md-background-color !default; +$checkbox-md-icon-background-color-off: $item-background-color !default; /// @prop - Background color of focus indicator for checkbox when focused -$checkbox-md-background-color-focused: ion-color($colors-md, primary, tint, md) !default; +$checkbox-md-background-color-focused: ion-color(primary, tint) !default; /// @prop - Background color of the checkbox icon when on -$checkbox-md-icon-background-color-on: ion-color($colors-md, primary, base, md) !default; +$checkbox-md-icon-background-color-on: ion-color(primary, base) !default; /// @prop - Size of the checkbox icon $checkbox-md-icon-size: 16px !default; @@ -27,7 +27,7 @@ $checkbox-md-icon-checkmark-width: 2px !default; $checkbox-md-icon-checkmark-style: solid !default; /// @prop - Color of the checkbox icon checkmark -$checkbox-md-icon-checkmark-color: ion-color($colors-md, $checkbox-md-icon-background-color-on, contrast, md) !default; +$checkbox-md-icon-checkmark-color: ion-color(primary, contrast) !default; /// @prop - Border width of the checkbox icon $checkbox-md-icon-border-width: 2px !default; @@ -42,7 +42,7 @@ $checkbox-md-icon-border-radius: 2px !default; $checkbox-md-icon-border-color-off: $border-md-color !default; /// @prop - Border color of the checkbox icon when on -$checkbox-md-icon-border-color-on: ion-color($colors-md, primary, base, md) !default; +$checkbox-md-icon-border-color-on: ion-color(primary, base) !default; /// @prop - Transition duration of the checkbox $checkbox-md-transition-duration: 280ms !default; diff --git a/core/src/components/checkbox/checkbox.scss b/core/src/components/checkbox/checkbox.scss index e0d2f71144..f139fef86f 100644 --- a/core/src/components/checkbox/checkbox.scss +++ b/core/src/components/checkbox/checkbox.scss @@ -3,24 +3,51 @@ // Checkbox // -------------------------------------------------- -ion-checkbox { +:host { + --ion-color-base: #{ion-color(primary, base)}; + --ion-color-contrast: #{ion-color(primary, contrast)}; + + --background: var(--unchecked-backgroud); + --border-color: var(--unchecked-border-color); + + --checked-border-color: #{current-color(base)}; + --checked-background: #{current-color(base)}; + position: relative; display: inline-block; } -ion-checkbox input { - @include position(0, null, null, 0); - @include margin(0); - - position: absolute; - - width: 100%; - height: 100%; - - border: 0; - background: transparent; - cursor: pointer; - - appearance: none; +:host(.checkbox-checked) { + --background: var(--checked-background); + --border-color: var(--checked-border-color); +} + +:host(.checkbox-checked) .checkbox-inner { + opacity: 1; +} + +input { + @include input-cover(); +} + +.checkbox-icon { + @include border-radius(var(--border-radius)); + + position: relative; + + width: var(--size); + height: var(--size); + + border-width: var(--border-width); + border-style: var(--border-style); + border-color: var(--border-color); + background-color: var(--background); + + contain: strict; +} + +.checkbox-inner { + border-color: #{current-color(contrast)}; + opacity: 0; } diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx index c999416281..490c38ddbd 100644 --- a/core/src/components/checkbox/checkbox.tsx +++ b/core/src/components/checkbox/checkbox.tsx @@ -1,6 +1,7 @@ import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core'; -import { CheckboxInput, CheckedInputChangeEvent, Color, CssClassMap, Mode, StyleEvent } from '../../interface'; +import { CheckboxInput, CheckedInputChangeEvent, Color, Mode, StyleEvent } from '../../interface'; import { deferEvent } from '../../utils/helpers'; +import { createColorClasses, hostContext } from '../../utils/theme'; @Component({ @@ -9,9 +10,7 @@ import { deferEvent } from '../../utils/helpers'; ios: 'checkbox.ios.scss', md: 'checkbox.md.scss' }, - host: { - theme: 'checkbox' - } + shadow: true }) export class Checkbox implements CheckboxInput { @@ -94,8 +93,8 @@ export class Checkbox implements CheckboxInput { @Watch('disabled') emitStyle() { this.ionStyle.emit({ - 'checkbox-disabled': this.disabled, 'checkbox-checked': this.checked, + 'interactive-disabled': this.disabled, }); } @@ -119,21 +118,19 @@ export class Checkbox implements CheckboxInput { hostData() { return { class: { + ...createColorClasses(this.color), + 'in-item': hostContext('.item', this.el), 'checkbox-checked': this.checked, 'checkbox-disabled': this.disabled, - 'checkbox-key': this.keyFocus + 'checkbox-key': this.keyFocus, + 'interactive': true } }; } render() { - const checkboxClasses: CssClassMap = { - 'checkbox-icon': true, - 'checkbox-checked': this.checked - }; - return [ -
+
, + Checkbox - Basic + + - - - Checkbox - Basic - - + + + Checkbox - Basic + + - - - Default - - + + + Default + + - - Primary - - + + Primary + + - - Secondary - - + + Secondary + + - - Tertiary - - + + Tertiary + + - - Success - - + + Success + + - - Warning - - + + Warning + + - - Danger - - + + Danger + + - - Light - - + + Light + + - - Medium - - + + Medium + + - - Dark - - + + Dark + + - - Unchecked by Default - - + + Unchecked by Default + + - - Disabled - - - + + Disabled + + + + - - - diff --git a/core/src/components/checkbox/test/preview/index.html b/core/src/components/checkbox/test/preview/index.html index 314c13c9bc..3f631c0658 100644 --- a/core/src/components/checkbox/test/preview/index.html +++ b/core/src/components/checkbox/test/preview/index.html @@ -1,85 +1,86 @@ + Checkbox + + - - - Checkbox - - + + + Checkbox + + - - - Default - - + + + Default + + - - Primary - - + + Primary + + - - Secondary - - + + Secondary + + - - Tertiary - - + + Tertiary + + - - Success - - + + Success + + - - Warning - - + + Warning + + - - Danger - - + + Danger + + - - Light - - + + Light + + - - Medium - - + + Medium + + - - Dark - - + + Dark + + - - Unchecked by Default - - + + Unchecked by Default + + - - Disabled - - - + + Disabled + + + + - - - diff --git a/core/src/components/checkbox/test/standalone/index.html b/core/src/components/checkbox/test/standalone/index.html index c263f80497..f67cce515c 100644 --- a/core/src/components/checkbox/test/standalone/index.html +++ b/core/src/components/checkbox/test/standalone/index.html @@ -6,6 +6,7 @@ Checkbox - Standalone + diff --git a/core/src/components/chip-button/chip-button.ios.scss b/core/src/components/chip-button/chip-button.ios.scss deleted file mode 100644 index 3669b68175..0000000000 --- a/core/src/components/chip-button/chip-button.ios.scss +++ /dev/null @@ -1,51 +0,0 @@ -@import "./chip-button"; -@import "./chip-button.ios.vars"; - -// iOS Chip Button -// -------------------------------------------------- - -.chip-button-ios { - color: $chip-button-ios-text-color; - background-color: $chip-button-ios-background-color; -} - - -// iOS Clear Chip Button -// -------------------------------------------------- - -.chip-button-clear-ios { - color: $chip-button-ios-clear-text-color; - background-color: $chip-button-ios-clear-background-color; -} - - -// Generate iOS Chip Button Colors -// -------------------------------------------------- - -@each $color-name, $color-value in $colors-ios { - $color-base: ion-color($colors-ios, $color-name, base, ios); - $color-contrast: ion-color($colors-ios, $color-name, contrast, ios); - - .chip-button-ios-#{$color-name} { - color: $color-contrast; - background-color: $color-base; - } - - .chip-ios-#{$color-name} .chip-button-ios { - color: $color-base; - background-color: $color-contrast; - } - - // Clear Chip Buttons - // -------------------------------------------------- - - .chip-button-clear-ios-#{$color-name} { - color: $color-base; - background-color: transparent; - } - - .chip-ios-#{$color-name} .chip-button-clear-ios { - color: $color-contrast; - background-color: transparent; - } -} diff --git a/core/src/components/chip-button/chip-button.ios.vars.scss b/core/src/components/chip-button/chip-button.ios.vars.scss deleted file mode 100644 index 6450995c60..0000000000 --- a/core/src/components/chip-button/chip-button.ios.vars.scss +++ /dev/null @@ -1,19 +0,0 @@ -@import "../../themes/ionic.globals.ios"; - -// iOS Chip Button -// -------------------------------------------------- - -/// @prop - Background color of the chip button -$chip-button-ios-background-color: ion-color($colors-ios, primary, base, ios) !default; - -/// @prop - Text color of the chip button -$chip-button-ios-text-color: ion-color($colors-ios, $chip-button-ios-background-color, contrast, ios) !default; - -/// @prop - Background color of the clear chip button -$chip-button-ios-clear-background-color: transparent !default; - -/// @prop - Text color of the clear chip button -$chip-button-ios-clear-text-color: ion-color($colors-ios, primary, base, ios) !default; - -/// @prop - Fill color of the icon in the clear chip button -$chip-button-ios-clear-icon-fill-color: ion-color($colors-ios, primary, base, ios) !default; diff --git a/core/src/components/chip-button/chip-button.md.scss b/core/src/components/chip-button/chip-button.md.scss deleted file mode 100644 index a519e2c2b1..0000000000 --- a/core/src/components/chip-button/chip-button.md.scss +++ /dev/null @@ -1,51 +0,0 @@ -@import "./chip-button"; -@import "./chip-button.md.vars"; - -// Material Design Chip Button -// -------------------------------------------------- - -.chip-button-md { - color: $chip-button-md-text-color; - background-color: $chip-button-md-background-color; -} - - -// Material Design Clear Chip Button -// -------------------------------------------------- - -.chip-button-clear-md { - color: $chip-button-md-clear-text-color; - background-color: $chip-button-md-clear-background-color; -} - - -// Generate Material Design Chip Button Colors -// -------------------------------------------------- - -@each $color-name, $color-value in $colors-md { - $color-base: ion-color($colors-md, $color-name, base, md); - $color-contrast: ion-color($colors-md, $color-name, contrast, md); - - .chip-button-md-#{$color-name} { - color: $color-contrast; - background-color: $color-base; - } - - .chip-md-#{$color-name} .chip-button-md { - color: $color-base; - background-color: $color-contrast; - } - - // Clear Chip Buttons - // -------------------------------------------------- - - .chip-button-clear-md-#{$color-name} { - color: $color-base; - background-color: transparent; - } - - .chip-md-#{$color-name} .chip-button-clear-md { - color: $color-contrast; - background-color: transparent; - } -} diff --git a/core/src/components/chip-button/chip-button.md.vars.scss b/core/src/components/chip-button/chip-button.md.vars.scss deleted file mode 100644 index b9d3ea1364..0000000000 --- a/core/src/components/chip-button/chip-button.md.vars.scss +++ /dev/null @@ -1,19 +0,0 @@ -@import "../../themes/ionic.globals.md"; - -// Material Design Chip Button -// -------------------------------------------------- - -/// @prop - Background color of the chip button -$chip-button-md-background-color: ion-color($colors-md, primary, base, md) !default; - -/// @prop - Text color of the chip button -$chip-button-md-text-color: ion-color($colors-md, $chip-button-md-background-color, contrast, md) !default; - -/// @prop - Background color of the clear chip button -$chip-button-md-clear-background-color: transparent !default; - -/// @prop - Text color of the clear chip button -$chip-button-md-clear-text-color: ion-color($colors-md, primary, base, md) !default; - -/// @prop - Fill color of the icon in the clear chip button -$chip-button-md-clear-icon-fill-color: ion-color($colors-md, primary, base, md) !default; diff --git a/core/src/components/chip-button/chip-button.scss b/core/src/components/chip-button/chip-button.scss index f38381cea3..36f279300e 100644 --- a/core/src/components/chip-button/chip-button.scss +++ b/core/src/components/chip-button/chip-button.scss @@ -3,21 +3,39 @@ // Chip Button // -------------------------------------------------- -.chip-button { +:host { + --background: var(--ion-color-base); + --color: var(--ion-color-contrast); + --size: #{$chip-button-size}; + --icon-size: 18px; + --ion-color-base: #{ion-color(primary, base)}; + --ion-color-contrast: #{ion-color(primary, contrast)}; +} + +:host(.chip-button-clear) { + --color: var(--ion-color-base); + --background: transparent; +} + +::slotted(ion-icon) { + font-size: var(--icon-size); +} + +.chip-button-native { @include border-radius($chip-button-border-radius); @include margin($chip-button-margin-top, $chip-button-margin-end, $chip-button-margin-bottom, $chip-button-margin-start); position: relative; - width: $chip-button-size; - height: $chip-button-size; + width: var(--size); + height: var(--size); border: 0; + outline: none; + color: var(--color); + background: var(--background); - &:active, - &:focus { - outline: none; - } + appearance: none; } .chip-button-inner { diff --git a/core/src/components/chip-button/chip-button.tsx b/core/src/components/chip-button/chip-button.tsx index e88815b004..1ebe7ed0d7 100644 --- a/core/src/components/chip-button/chip-button.tsx +++ b/core/src/components/chip-button/chip-button.tsx @@ -1,13 +1,11 @@ import { Component, Element, Prop } from '@stencil/core'; -import { Color, CssClassMap, Mode } from '../../interface'; -import { getButtonClassMap, getElementClassMap } from '../../utils/theme'; +import { Color, Mode } from '../../interface'; +import { createColorClasses } from '../../utils/theme'; @Component({ tag: 'ion-chip-button', - styleUrls: { - ios: 'chip-button.ios.scss', - md: 'chip-button.md.scss' - }, + styleUrl: 'chip-button.scss', + shadow: true }) export class ChipButton { @Element() el!: HTMLElement; @@ -32,7 +30,7 @@ export class ChipButton { /** * Set to `"clear"` for a transparent button style. */ - @Prop() fill?: string; + @Prop() fill = 'default'; /** * Contains a URL or a URL fragment that the hyperlink points to. @@ -40,29 +38,22 @@ export class ChipButton { */ @Prop() href?: string; - /** - * Get the classes for the style - * Chip buttons can only be clear or default (solid) - */ - private getStyleClassMap(buttonType: string): CssClassMap { - return getColorClassMap(this.color, buttonType, this.fill || 'default', this.mode); + + hostData() { + return { + class: { + ...createColorClasses(this.color), + [`chip-button-${this.fill}`]: true + } + }; } render() { - const buttonType = 'chip-button'; - - const hostClasses = getElementClassMap(this.el.classList); const TagType = this.href ? 'a' : 'button'; - const buttonClasses = { - ...hostClasses, - ...getButtonClassMap(buttonType, this.mode), - ...this.getStyleClassMap(buttonType), - }; - return ( @@ -73,19 +64,3 @@ export class ChipButton { ); } } - -/** - * Get the classes for the color - */ -function getColorClassMap(color: string | undefined, buttonType: string, style: string, mode: Mode): CssClassMap { - const className = (style === 'default') ? `${buttonType}` : `${buttonType}-${style}`; - - const map: CssClassMap = { - [className]: true, - [`${className}-${mode}`]: true - }; - if (color) { - map[`${className}-${mode}-${color}`] = true; - } - return map; -} diff --git a/core/src/components/chip-icon/chip-icon.scss b/core/src/components/chip-icon/chip-icon.scss new file mode 100644 index 0000000000..5b9a08ffc3 --- /dev/null +++ b/core/src/components/chip-icon/chip-icon.scss @@ -0,0 +1,19 @@ +@import "../../themes/ionic.globals"; + +:host { + align-items: center; + background-color: var(--ion-color-base); + border-radius: 50%; + display: inline-flex; + height: var(--size, 32px); + justify-content: center; + width: var(--size, 32px); + + --ion-color-base: #{ion-color(primary, base)}; + --ion-color-contrast: #{ion-color(primary, contrast)}; +} + +ion-icon { + color: var(--ion-color-contrast); + font-size: var(--icon-size, 18px); +} diff --git a/core/src/components/chip-icon/chip-icon.tsx b/core/src/components/chip-icon/chip-icon.tsx new file mode 100644 index 0000000000..7aa632329d --- /dev/null +++ b/core/src/components/chip-icon/chip-icon.tsx @@ -0,0 +1,40 @@ +import { Component, Prop } from '@stencil/core'; +import { Color, Mode } from '../../interface'; +import { createColorClasses } from '../../utils/theme'; + +@Component({ + tag: 'ion-chip-icon', + styleUrl: 'chip-icon.scss', + shadow: true +}) +export class ChipIcon { + /** + * The color to use. + * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. + */ + @Prop() color?: Color; + + /** + * The mode determines which platform styles to use. + * Possible values are: `"ios"` or `"md"`. + */ + @Prop() mode!: Mode; + + /** + * The icon to use. + * Possible values are the same as `"ion-icon"`. + */ + @Prop() name?: string; + + hostData() { + return { + class: { + ...createColorClasses(this.color) + } + }; + } + + render() { + return ; + } +} diff --git a/core/src/components/chip-icon/readme.md b/core/src/components/chip-icon/readme.md new file mode 100644 index 0000000000..93512bedb2 --- /dev/null +++ b/core/src/components/chip-icon/readme.md @@ -0,0 +1,63 @@ +# ion-chip-icon + + + + + + +## Properties + +#### color + +string + +The color to use. +Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. + + +#### mode + +string + +The mode determines which platform styles to use. +Possible values are: `"ios"` or `"md"`. + + +#### name + +string + +The icon to use. +Possible values are the same as `"ion-icon"`. + + +## Attributes + +#### color + +string + +The color to use. +Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. + + +#### mode + +string + +The mode determines which platform styles to use. +Possible values are: `"ios"` or `"md"`. + + +#### name + +string + +The icon to use. +Possible values are the same as `"ion-icon"`. + + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/chip/chip.ios.scss b/core/src/components/chip/chip.ios.scss index 2835ac65ab..a85c018d77 100644 --- a/core/src/components/chip/chip.ios.scss +++ b/core/src/components/chip/chip.ios.scss @@ -4,7 +4,7 @@ // iOS Chip // -------------------------------------------------- -.chip-ios { +:host { @include border-radius($chip-ios-border-radius); @include margin($chip-ios-margin-top, $chip-ios-margin-end, $chip-ios-margin-bottom, $chip-ios-margin-start); @@ -12,47 +12,23 @@ height: $chip-ios-height; font-family: $chip-ios-font-family; - font-size: $chip-ios-font-size; - color: $chip-ios-text-color; - background: $chip-ios-background-color; + + --ion-color-base: #{$chip-ios-background-color}; + --ion-color-contrast: #{$chip-ios-text-color}; } -.chip-ios > ion-label { +::slotted(*) ion-label { @include margin($chip-ios-label-margin-top, $chip-ios-label-margin-end, $chip-ios-label-margin-bottom, $chip-ios-label-margin-start); } -.chip-ios > ion-icon { +::slotted(ion-icon) { color: $chip-ios-icon-fill-color; background-color: $chip-ios-icon-background-color; } -.chip-ios ion-avatar { +::slotted(*) ion-avatar { width: $chip-ios-avatar-width; height: $chip-ios-avatar-height; } - - -// Generate iOS Chip Colors -// -------------------------------------------------- - -@each $color-name, $color-value in $colors-ios { - $color-base: ion-color($colors-ios, $color-name, base, ios); - $color-contrast: ion-color($colors-ios, $color-name, contrast, ios); - - .chip-ios-#{$color-name} { - color: $color-contrast; - background-color: $color-base; - } - - .chip-ios .icon-ios-#{$color-name} { - color: $color-contrast; - background-color: $color-base; - - svg { - fill: $color-contrast; - stroke: $color-contrast; - } - } -} diff --git a/core/src/components/chip/chip.ios.vars.scss b/core/src/components/chip/chip.ios.vars.scss index 382d0cb9b1..767795836d 100644 --- a/core/src/components/chip/chip.ios.vars.scss +++ b/core/src/components/chip/chip.ios.vars.scss @@ -22,19 +22,19 @@ $chip-ios-height: 32px !default; $chip-ios-border-radius: 16px !default; /// @prop - Font family of the chip -$chip-ios-font-family: $font-family-ios-base !default; +$chip-ios-font-family: $font-family-base !default; /// @prop - Font size of the chip $chip-ios-font-size: 13px !default; /// @prop - Text color of the chip -$chip-ios-text-color: $text-ios-color-step-150 !default; +$chip-ios-text-color: $text-color-step-150 !default; /// @prop - Background color alpha of the chip $chip-ios-background-color-alpha: .1 !default; /// @prop - Background color of the chip -$chip-ios-background-color: css-var($text-ios-color-value, text-ios-color, $chip-ios-background-color-alpha) !default; +$chip-ios-background-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), $chip-ios-background-color-alpha) !default; /// @prop - Margin top of the label in the chip $chip-ios-label-margin-top: 0 !default; @@ -49,10 +49,10 @@ $chip-ios-label-margin-bottom: $chip-ios-label-margin-top !default; $chip-ios-label-margin-start: $chip-ios-label-margin-end !default; /// @prop - Background color of the icon in the chip -$chip-ios-icon-background-color: ion-color($colors-ios, primary, base, ios) !default; +$chip-ios-icon-background-color: ion-color(primary, base) !default; /// @prop - Fill color of the icon in the chip -$chip-ios-icon-fill-color: ion-color($colors-ios, $chip-ios-icon-background-color, contrast, ios) !default; +$chip-ios-icon-fill-color: ion-color(primary, contrast) !default; /// @prop - Width of the avatar in the chip $chip-ios-avatar-width: 32px !default; diff --git a/core/src/components/chip/chip.md.scss b/core/src/components/chip/chip.md.scss index 614cdb2ff3..bf93239ada 100644 --- a/core/src/components/chip/chip.md.scss +++ b/core/src/components/chip/chip.md.scss @@ -4,7 +4,7 @@ // Material Design Chip // -------------------------------------------------- -.chip-md { +:host { @include border-radius($chip-md-border-radius); @include margin($chip-md-margin-top, $chip-md-margin-end, $chip-md-margin-bottom, $chip-md-margin-start); @@ -14,45 +14,21 @@ font-family: $chip-md-font-family; font-size: $chip-md-font-size; - color: $chip-md-text-color; - background: $chip-md-background-color; + --ion-color-base: #{$chip-md-background-color}; + --ion-color-contrast: #{$chip-md-text-color}; } -.chip-md > ion-label { +::slotted(*) ion-label { @include margin($chip-md-label-margin-top, $chip-md-label-margin-end, $chip-md-label-margin-bottom, $chip-md-label-margin-start); } -.chip-md > ion-icon { +::slotted(ion-icon) { color: $chip-md-icon-fill-color; background-color: $chip-md-icon-background-color; } -.chip-md ion-avatar { +::slotted(*) ion-avatar { width: $chip-md-avatar-width; height: $chip-md-avatar-height; } - - -// Generate Material Design Chip Colors -// -------------------------------------------------- - -@each $color-name, $color-value in $colors-md { - $color-base: ion-color($colors-md, $color-name, base, md); - $color-contrast: ion-color($colors-md, $color-name, contrast, md); - - .chip-md-#{$color-name} { - color: $color-contrast; - background-color: $color-base; - } - - .chip-md .icon-md-#{$color-name} { - color: $color-contrast; - background-color: $color-base; - - svg { - fill: $color-contrast; - stroke: $color-contrast; - } - } -} diff --git a/core/src/components/chip/chip.md.vars.scss b/core/src/components/chip/chip.md.vars.scss index c28a83b72f..91c4794e2a 100644 --- a/core/src/components/chip/chip.md.vars.scss +++ b/core/src/components/chip/chip.md.vars.scss @@ -22,19 +22,19 @@ $chip-md-height: 32px !default; $chip-md-border-radius: 16px !default; /// @prop - Font family of the chip -$chip-md-font-family: $font-family-md-base !default; +$chip-md-font-family: $font-family-base !default; /// @prop - Font size of the chip $chip-md-font-size: 13px !default; /// @prop - Text color of the chip -$chip-md-text-color: $text-md-color-step-150 !default; +$chip-md-text-color: $text-color-step-150 !default; /// @prop - Background color alpha of the chip $chip-md-background-color-alpha: .1 !default /// @prop - Background color of the chip -$chip-md-background-color: css-var($text-md-color-value, text-md-color, $chip-md-background-color-alpha) !default; +$chip-md-background-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), $chip-md-background-color-alpha) !default; /// @prop - Margin top of the label in the chip $chip-md-label-margin-top: 0 !default; @@ -49,10 +49,10 @@ $chip-md-label-margin-bottom: $chip-md-label-margin-top !default; $chip-md-label-margin-start: $chip-md-label-margin-end !default; /// @prop - Background color of the icon in the chip -$chip-md-icon-background-color: ion-color($colors-md, primary, base, md) !default; +$chip-md-icon-background-color: ion-color(primary, base) !default; /// @prop - Fill color of the icon in the chip -$chip-md-icon-fill-color: ion-color($colors-md, $chip-md-icon-background-color, contrast, md) !default; +$chip-md-icon-fill-color: ion-color(primary, contrast) !default; /// @prop - Width of the avatar in the chip $chip-md-avatar-width: 32px !default; diff --git a/core/src/components/chip/chip.scss b/core/src/components/chip/chip.scss index 096dafc541..fded1614fb 100644 --- a/core/src/components/chip/chip.scss +++ b/core/src/components/chip/chip.scss @@ -3,9 +3,12 @@ // Chip // -------------------------------------------------- -ion-chip { +:host { @include font-smoothing(); + background-color: var(--ion-color-base); + color: var(--ion-color-contrast); + box-sizing: border-box; display: inline-flex; @@ -14,20 +17,7 @@ ion-chip { font-weight: normal; vertical-align: middle; -} - -ion-chip > ion-icon { - @include border-radius($chip-icon-border-radius); - - display: inline-flex; - - align-items: center; - justify-content: center; - - width: $chip-icon-size; - height: $chip-icon-size; -} - -ion-chip ion-icon { - font-size: $chip-icon-font-size; + + --ion-color-base: #{ion-color(primary, base)}; + --ion-color-contrast: #{ion-color(primary, contrast)}; } diff --git a/core/src/components/chip/chip.tsx b/core/src/components/chip/chip.tsx index 09e2cf083a..ed2c49c732 100644 --- a/core/src/components/chip/chip.tsx +++ b/core/src/components/chip/chip.tsx @@ -1,5 +1,6 @@ import { Component, Prop } from '@stencil/core'; import { Color, Mode } from '../../interface'; +import { createColorClasses } from '../../utils/theme'; @Component({ @@ -8,9 +9,7 @@ import { Color, Mode } from '../../interface'; ios: 'chip.ios.scss', md: 'chip.md.scss' }, - host: { - theme: 'chip' - } + scoped: true }) export class Chip { /** @@ -24,4 +23,9 @@ export class Chip { */ @Prop() mode!: Mode; + hostData() { + return { + class: createColorClasses(this.color), + }; + } } diff --git a/core/src/components/chip/chip.vars.scss b/core/src/components/chip/chip.vars.scss index ec54462767..36e782759d 100644 --- a/core/src/components/chip/chip.vars.scss +++ b/core/src/components/chip/chip.vars.scss @@ -6,8 +6,8 @@ /// @prop - Border radius of the icon in the chip $chip-icon-border-radius: 50% !default; -/// @prop - Width and height of the icon in the chip -$chip-icon-size: 32px !default; +/// @prop - Size of the icon in the chip +$chip-icon-size: 18px !default; -/// @prop - Font size of the icon in the chip -$chip-icon-font-size: 18px !default; +/// @prop - Padding of the icon in the chip +$chip-icon-padding: 7px !default; diff --git a/core/src/components/chip/test/basic/index.html b/core/src/components/chip/test/basic/index.html index bf5621865f..f7afad2769 100644 --- a/core/src/components/chip/test/basic/index.html +++ b/core/src/components/chip/test/basic/index.html @@ -1,124 +1,127 @@ + Chip - Basic + + - - - Chip - Basic - - + + + Chip - Basic + + - -

Text Chips

+ +

Text Chips

- + + Default + + + + Secondary Label + + + + Another With Longer Text + + +

Color Chips

+ + + + Primary + + + + Secondary w/ Dark label + + + + Danger + + +

Icon Chips

+ + + + Default + + + + Secondary + + + +

Avatar Chips

+ + + + + + Default + + + + Right Avatar + + + + + +

Delete Chips

+ + + Default + + + + + + + + With Icon + + + + + + + + + + With Avatar + + + + + + + + Primary + + + + + + + Chip Item + + Default - - - - Secondary Label - - - - Another With Longer Text - - -

Color Chips

- - - - Primary - - - - Secondary w/ Dark label - - - - Danger - - -

Icon Chips

- - - - Default - - - - Secondary - - - -

Avatar Chips

- - - - - - Default - - - - Right Avatar - - - - - -

Delete Chips

- - - Default - + - - - - With Icon - - - - - - - - - - With Avatar - - - - - - - - Primary - - - - - - - Chip Item - - - Default - - - - - - + + + diff --git a/core/src/components/chip/test/preview/index.html b/core/src/components/chip/test/preview/index.html index 52c44d3e77..5cb5eb48f9 100644 --- a/core/src/components/chip/test/preview/index.html +++ b/core/src/components/chip/test/preview/index.html @@ -1,124 +1,127 @@ + Chip + + - - - Chip - - + + + Chip + + - -

Text Chips

+ +

Text Chips

- + + Default + + + + Secondary Label + + + + Another With Longer Text + + +

Color Chips

+ + + + Primary + + + + Secondary w/ Dark label + + + + Danger + + +

Icon Chips

+ + + + Default + + + + Secondary + + + +

Avatar Chips

+ + + + + + Default + + + + Right Avatar + + + + + +

Delete Chips

+ + + Default + + + + + + + + With Icon + + + + + + + + + + With Avatar + + + + + + + + Primary + + + + + + + Chip Item + + Default - - - - Secondary Label - - - - Another With Longer Text - - -

Color Chips

- - - - Primary - - - - Secondary w/ Dark label - - - - Danger - - -

Icon Chips

- - - - Default - - - - Secondary - - - -

Avatar Chips

- - - - - - Default - - - - Right Avatar - - - - - -

Delete Chips

- - - Default - + - - - - With Icon - - - - - - - - - - With Avatar - - - - - - - - Primary - - - - - - - Chip Item - - - Default - - - - - - + + + diff --git a/core/src/components/chip/test/standalone/index.html b/core/src/components/chip/test/standalone/index.html index 4a97912127..f97e6408b3 100644 --- a/core/src/components/chip/test/standalone/index.html +++ b/core/src/components/chip/test/standalone/index.html @@ -5,6 +5,7 @@ Chip - Standalone +

Text Chips

@@ -24,7 +25,7 @@

Color Chips

- + Primary @@ -39,13 +40,13 @@

Icon Chips

- + Default Secondary - +

Avatar Chips

@@ -74,7 +75,7 @@ - + With Icon @@ -92,9 +93,9 @@ - + Primary - + @@ -102,7 +103,7 @@ Chip Item - + Default diff --git a/core/src/components/col/col.scss b/core/src/components/col/col.scss new file mode 100644 index 0000000000..f8850d9b43 --- /dev/null +++ b/core/src/components/col/col.scss @@ -0,0 +1,19 @@ +@import "./col.vars"; + +// Column +// -------------------------------------------------- + +:host { + @include make-breakpoint-padding($grid-column-paddings); + @include margin(0); + + position: relative; + + box-sizing: border-box; + + flex-basis: 0; + flex-grow: 1; + width: 100%; + max-width: 100%; + min-height: 1px; // Prevent columns from collapsing when empty +} diff --git a/core/src/components/col/col.tsx b/core/src/components/col/col.tsx index 0d87080bbe..0c78f492a3 100644 --- a/core/src/components/col/col.tsx +++ b/core/src/components/col/col.tsx @@ -1,12 +1,13 @@ import { Component, Element, Listen, Prop } from '@stencil/core'; - import { isMatch } from '../../utils/media'; -const SUPPORTS_VARS: boolean = CSS.supports('--a', '0'); +const SUPPORTS_VARS = !!(CSS && CSS.supports && CSS.supports('--a', '0')); const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl']; @Component({ - tag: 'ion-col' + tag: 'ion-col', + styleUrl: 'col.scss', + shadow: true }) export class Col { [key: string]: any; @@ -153,17 +154,6 @@ export class Col { */ @Prop() sizeXl?: string; - hostData() { - return { - style: { - ...this.calculateOffset(), - ...this.calculatePull(), - ...this.calculatePush(), - ...this.calculateSize() - } - }; - } - @Listen('window:resize') onResize() { this.el.forceUpdate(); @@ -171,11 +161,11 @@ export class Col { // Loop through all of the breakpoints to see if the media query // matches and grab the column value from the relevant prop if so - getColumns(property: string) { + private getColumns(property: string) { let matched; for (const breakpoint of BREAKPOINTS) { - const matches = this.isMatch(breakpoint); + const matches = isMatch(breakpoint); // Grab the value of the property, if it exists and our // media query matches we return the value @@ -191,16 +181,18 @@ export class Col { return matched; } - calculateSize() { - let columns = this.getColumns('size'); + private calculateSize() { + const columns = this.getColumns('size'); // If size wasn't set for any breakpoint // or if the user set the size without a value // it means we need to stick with the default and return // e.g. - if (!columns || columns === '') return; + if (!columns || columns === '') { + return; + } - columns = SUPPORTS_VARS + const colSize = SUPPORTS_VARS // If CSS supports variables we should use the grid columns var ? `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)` // Convert the columns to a percentage by dividing by the total number @@ -208,17 +200,19 @@ export class Col { : ((columns / 12) * 100) + '%'; return { - 'flex': `0 0 ${columns}`, - 'width': `${columns}`, - 'max-width': `${columns}` + 'flex': `0 0 ${colSize}`, + 'width': `${colSize}`, + 'max-width': `${colSize}` }; } // Called by push, pull, and offset since they use the same calculations - calculatePosition(property: string, modifier: string) { + private calculatePosition(property: string, modifier: string) { const columns = this.getColumns(property); - if (!columns) return; + if (!columns) { + return; + } // If the number of columns passed are greater than 0 and less than // 12 we can position the column, else default to auto @@ -230,23 +224,34 @@ export class Col { : (columns > 0 && columns < 12) ? (columns / 12 * 100) + '%' : 'auto'; return { - [`${modifier}`]: amount + [modifier]: amount }; } - calculateOffset() { + private calculateOffset() { return this.calculatePosition('offset', 'margin-left'); } - calculatePull() { + private calculatePull() { return this.calculatePosition('pull', 'right'); } - calculatePush() { + private calculatePush() { return this.calculatePosition('push', 'left'); } - isMatch(bp: string) { - return bp ? isMatch(bp) : true; + hostData() { + return { + style: { + ...this.calculateOffset(), + ...this.calculatePull(), + ...this.calculatePush(), + ...this.calculateSize(), + } + }; + } + + render() { + return ; } } diff --git a/core/src/components/col/col.vars.scss b/core/src/components/col/col.vars.scss new file mode 100644 index 0000000000..c91c8a30f1 --- /dev/null +++ b/core/src/components/col/col.vars.scss @@ -0,0 +1,17 @@ +@import "../../themes/ionic.globals"; +@import "../grid/grid.mixins"; + +// Grid Column +// -------------------------------------------------- + +/// @prop - The padding for the grid column +$grid-column-padding: var(--ion-grid-column-padding, 5px) !default; + +/// @prop - The padding for the column at different breakpoints +$grid-column-paddings: ( + xs: var(--ion-grid-column-padding-xs, $grid-column-padding), + sm: var(--ion-grid-column-padding-sm, $grid-column-padding), + md: var(--ion-grid-column-padding-md, $grid-column-padding), + lg: var(--ion-grid-column-padding-lg, $grid-column-padding), + xl: var(--ion-grid-column-padding-xl, $grid-column-padding) +) !default; \ No newline at end of file diff --git a/core/src/components/content/content.ios.scss b/core/src/components/content/content.ios.scss new file mode 100644 index 0000000000..585100a00b --- /dev/null +++ b/core/src/components/content/content.ios.scss @@ -0,0 +1,15 @@ +@import "./content"; +@import "./content.ios.vars"; + +// iOS Content +// -------------------------------------------------- + +:host { + font-family: $content-ios-font-family; +} + +::slotted(hr) { + height: $hairlines-width; + + background-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), $content-ios-horizontal-rule-background-color-alpha); +} diff --git a/core/src/components/scroll/scroll.ios.vars.scss b/core/src/components/content/content.ios.vars.scss similarity index 76% rename from core/src/components/scroll/scroll.ios.vars.scss rename to core/src/components/content/content.ios.vars.scss index 3339ca6652..5f2f8378b1 100644 --- a/core/src/components/scroll/scroll.ios.vars.scss +++ b/core/src/components/content/content.ios.vars.scss @@ -4,10 +4,10 @@ // -------------------------------------------------- /// @prop - Font family of the content -$content-ios-font-family: $font-family-ios-base !default; +$content-ios-font-family: $font-family-base !default; /// @prop - Background color of the outer content -$content-ios-outer-background: $background-ios-color-step-50 !default; +$content-ios-outer-background: $background-color-step-50 !default; /// @prop - Alpha for the Horizontal Rule -$content-ios-horizontal-rule-background-color-alpha: .25 !default; +$content-ios-horizontal-rule-background-color-alpha: .12 !default; diff --git a/core/src/components/content/content.md.scss b/core/src/components/content/content.md.scss new file mode 100644 index 0000000000..e3b2bea751 --- /dev/null +++ b/core/src/components/content/content.md.scss @@ -0,0 +1,13 @@ +@import "./content"; +@import "./content.md.vars"; + +// Material Design Content +// -------------------------------------------------- + +:host { + font-family: $content-md-font-family; +} + +::slotted(hr) { + background-color: $background-color-step-50; +} diff --git a/core/src/components/scroll/scroll.md.vars.scss b/core/src/components/content/content.md.vars.scss similarity index 74% rename from core/src/components/scroll/scroll.md.vars.scss rename to core/src/components/content/content.md.vars.scss index 77f46fb029..3a965ae971 100644 --- a/core/src/components/scroll/scroll.md.vars.scss +++ b/core/src/components/content/content.md.vars.scss @@ -4,4 +4,4 @@ // -------------------------------------------------- /// @prop - Font family of the content -$content-md-font-family: $font-family-md-base !default; +$content-md-font-family: $font-family-base !default; diff --git a/core/src/components/content/content.scss b/core/src/components/content/content.scss index 54ed23e0ad..b277956ef7 100644 --- a/core/src/components/content/content.scss +++ b/core/src/components/content/content.scss @@ -1,22 +1,49 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/ionic.theme.default"; // Content // -------------------------------------------------- -ion-content { +:host { position: relative; display: block; flex: 1; width: 100%; + height: 100%; + + color: #{current-color(contrast)}; + background-color: #{current-color(base)}; contain: layout size style; margin: 0 !important; // scss-lint:disable all padding: 0 !important; // scss-lint:disable all - > .scroll-inner { - min-height: 100%; - } + --ion-color-base: #{$background-color}; + --ion-color-contrast: #{$text-color}; + + --padding-top: 0; + --padding-bottom: 0; + --padding-start: 0; + --padding-end: 0; + + --keyboard-offset: 0px; +} + +:host(.ion-color-outer), +:host(.outer-content) { + --ion-color-base: #{$background-color-step-50}; +} + +.scroll-inner { + @include padding( + var(--padding-top), + var(--padding-end), + calc(var(--padding-bottom) + var(--keyboard-offset)), + var(--padding-start) + ); + min-height: 100%; + box-sizing: border-box; + -webkit-margin-collapse: discard; } diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx index 0987c05ebd..fac47d0ea9 100644 --- a/core/src/components/content/content.tsx +++ b/core/src/components/content/content.tsx @@ -1,10 +1,15 @@ -import { Component, Element, Listen, Method, Prop } from '@stencil/core'; -import { Color, Config, Mode, QueueController } from '../../interface'; +import { Component, Element, Listen, Method, Prop, QueueApi } from '@stencil/core'; +import { Color, Config, Mode } from '../../interface'; +import { createColorClasses } from '../../utils/theme'; @Component({ tag: 'ion-content', - styleUrl: 'content.scss' + styleUrls: { + ios: 'content.ios.scss', + md: 'content.md.scss' + }, + shadow: true }) export class Content { @@ -14,12 +19,12 @@ export class Content { private scrollEl?: HTMLIonScrollElement; mode!: Mode; - color?: Color; + @Prop() color?: Color; @Element() el!: HTMLElement; @Prop({ context: 'config' }) config!: Config; - @Prop({ context: 'queue' }) queue!: QueueController; + @Prop({ context: 'queue' }) queue!: QueueApi; /** * If true, the content will scroll behind the headers @@ -35,8 +40,16 @@ export class Content { */ @Prop() forceOverscroll?: boolean; + /** + * By default `ion-content` uses an `ion-scroll` under the hood to implement scrolling, + * if you want to disable the content scrolling for a given page, set this property to `false`. + */ @Prop() scrollEnabled = true; + /** + * Because of performance reasons, ionScroll events are disabled by default, in order to enable them + * and start listening from (ionScroll), set this property to `true`. + */ @Prop() scrollEvents = false; @Listen('body:ionNavDidChange') @@ -52,55 +65,11 @@ export class Content { this.scrollEl = undefined as any; } - /** - * Scroll to the top of the content component. - * - * Duration of the scroll animation in milliseconds. Defaults to `300`. - * Returns a promise which is resolved when the scroll has completed. - */ @Method() - scrollToTop(duration = 300) { - if (!this.scrollEl) { - throw new Error('content is not scrollable'); - } - return this.scrollEl.scrollToTop(duration); + getScrollElement(): HTMLIonScrollElement { + return this.scrollEl!; } - /** - * Scroll to the bottom of the content component. - * - * Duration of the scroll animation in milliseconds. Defaults to `300`. - * Returns a promise which is resolved when the scroll has completed. - */ - @Method() - scrollToBottom(duration = 300) { - if (!this.scrollEl) { - throw new Error('content is not scrollable'); - } - return this.scrollEl.scrollToBottom(duration); - } - - /** - * Scroll by a specific X/Y distance - */ - @Method() - scrollByPoint(x: number, y: number, duration: number, done?: Function): Promise { - if (!this.scrollEl) { - throw new Error('content is not scrollable'); - } - return this.scrollEl.scrollByPoint(x, y, duration, done); - } - - /** - * Scroll to a specific X/Y coordinate in the content - */ - @Method() - scrollToPoint(x: number, y: number, duration: number, done?: Function): Promise { - if (!this.scrollEl) { - throw new Error('content is not scrollable'); - } - return this.scrollEl.scrollToPoint(x, y, duration, done); - } private resize() { if (!this.scrollEl) { @@ -137,9 +106,17 @@ export class Content { } } + hostData() { + return { + class: createColorClasses(this.color) + }; + } + render() { this.resize(); + const innerScroll =
; + return [ (this.scrollEnabled) ? - + { innerScroll } - :
, + : innerScroll, ]; } diff --git a/core/src/components/content/readme.md b/core/src/components/content/readme.md index 0622f060c9..77853d2464 100644 --- a/core/src/components/content/readme.md +++ b/core/src/components/content/readme.md @@ -9,6 +9,11 @@ view component. ## Properties +#### color + +string + + #### forceOverscroll boolean @@ -31,14 +36,25 @@ to transparent. boolean +By default `ion-content` uses an `ion-scroll` under the hood to implement scrolling, +if you want to disable the content scrolling for a given page, set this property to `false`. + #### scrollEvents boolean +Because of performance reasons, ionScroll events are disabled by default, in order to enable them +and start listening from (ionScroll), set this property to `true`. + ## Attributes +#### color + +string + + #### force-overscroll boolean @@ -61,38 +77,21 @@ to transparent. boolean +By default `ion-content` uses an `ion-scroll` under the hood to implement scrolling, +if you want to disable the content scrolling for a given page, set this property to `false`. + #### scroll-events boolean +Because of performance reasons, ionScroll events are disabled by default, in order to enable them +and start listening from (ionScroll), set this property to `true`. + ## Methods -#### scrollByPoint() - -Scroll by a specific X/Y distance - - -#### scrollToBottom() - -Scroll to the bottom of the content component. - -Duration of the scroll animation in milliseconds. Defaults to `300`. -Returns a promise which is resolved when the scroll has completed. - - -#### scrollToPoint() - -Scroll to a specific X/Y coordinate in the content - - -#### scrollToTop() - -Scroll to the top of the content component. - -Duration of the scroll animation in milliseconds. Defaults to `300`. -Returns a promise which is resolved when the scroll has completed. +#### getScrollElement() diff --git a/core/src/components/content/test/basic/index.html b/core/src/components/content/test/basic/index.html index 0962435be3..5a56b7ec44 100644 --- a/core/src/components/content/test/basic/index.html +++ b/core/src/components/content/test/basic/index.html @@ -1,59 +1,44 @@ + Content - Basic + + - - - - Content - Basic - - + + + + Content - Basic + + -
- - - Toggle content.fullscreen -

- Toggle header - Toggle footer - Toggle 2nd toolbar -

-

- Toggle bottom content - Toggle right content -

-

- Animate -

- - - - - - - - - - -
- - + -

- - - Update icon - -

+

+ + + Update icon + +

- + - + diff --git a/core/src/components/icon/test/items/index.html b/core/src/components/icon/test/items/index.html index e24b377de5..e5dde4d979 100644 --- a/core/src/components/icon/test/items/index.html +++ b/core/src/components/icon/test/items/index.html @@ -6,10 +6,12 @@ Icon - Items + @@ -17,155 +19,155 @@ - - - Icon - Items - - + + + Icon - Items + + - - + + - - - + + + dynamicColor name="home" - + - - - + + + name="home" is-active="true" - + - - - + + + dynamicProp is-active="false" - + - - - + + + dynamicAttr is-active="false" - + - - - + + + name="md-home" is-active="true" - + - - - + + + name="ios-home" is-active="true" - + - - - + + + name="ios-home" - + - - - + + + name="ios-home-outline" - + - - - + + + name="ios-home-outline" is-active="false" - + - - - + + + name="md-home" - + - - - + + + name="logo-twitter" - + - - - + + + ios="logo-apple" md="logo-android" - + - - - + + + ios="md-color-filter" md="ios-color-filter" - + - - - + + + ios="md-color-filter" md="ios-color-filter" is-active="false" - + - - - + + + name="null" - + - - - + + + name="home" hidden="true" - + - + - + setTimeout(function () { + clearInterval(interval); + }, 4000); + - + diff --git a/core/src/components/icon/test/preview/index.html b/core/src/components/icon/test/preview/index.html index b646622ed8..b7ad248313 100644 --- a/core/src/components/icon/test/preview/index.html +++ b/core/src/components/icon/test/preview/index.html @@ -6,179 +6,182 @@ Icon + - - - Icon - - + + + Icon + + - - - - - - + + + + + + name="home" - - + + - - - - + + + + name="home" - - + + - - - - + + + + id="dynamicHomeIcon" - - + + - - - - + + + + name="md-home" - - + + - - - - + + + + name="ios-home" - - + + - - - - + + + + name="ios-home" - - + + - - - - + + + + name="ios-star-outline" - - + + - - - - + + + + name="IOS-STAR-OUTLINE" - - + + - - - - + + + + name="md-home" - - + + - - - - + + + + name="logo-twitter" - - + + - - - - + + + + ios="logo-apple" md="logo-android" - - + + - - - - + + + + name="color-filter" - - + + - - - - + + + + ios="ios-color-filter" md="md-color-filter" - - + + - - - - + + + + ios="MD-COLOR-FILTER" md="IOS-COLOR-FILTER" - - + + - - - - + + + + name="null" - - + + - - - + + + ion-item w/ [detail="true"] attr. text text text text text text - - - + + + -

- - - Update icon - -

+

+ + + Update icon + +

- + - + diff --git a/core/src/components/icon/test/standalone/index.html b/core/src/components/icon/test/standalone/index.html index 6e46657b74..9124849c47 100644 --- a/core/src/components/icon/test/standalone/index.html +++ b/core/src/components/icon/test/standalone/index.html @@ -6,6 +6,7 @@ Icon - Standalone + diff --git a/core/src/components/img/img.scss b/core/src/components/img/img.scss index 7e0e9aed33..e9c13b84dc 100644 --- a/core/src/components/img/img.scss +++ b/core/src/components/img/img.scss @@ -1,9 +1,9 @@ -ion-img { +:host { display: block; } -ion-img > img { +img { width: 100%; height: 100%; diff --git a/core/src/components/img/img.tsx b/core/src/components/img/img.tsx index d8c71042b3..165e1067c1 100644 --- a/core/src/components/img/img.tsx +++ b/core/src/components/img/img.tsx @@ -3,7 +3,8 @@ import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@st @Component({ tag: 'ion-img', - styleUrl: 'img.scss' + styleUrl: 'img.scss', + shadow: true }) export class Img { diff --git a/core/src/components/img/test/basic/index.html b/core/src/components/img/test/basic/index.html index f8d9c11fc5..a20f57d4f8 100644 --- a/core/src/components/img/test/basic/index.html +++ b/core/src/components/img/test/basic/index.html @@ -1,39 +1,42 @@ + Floating Action Button - Basic + + - - - Img - Basic - - + + + Img - Basic + + - - - - - - - - - - - + + + + + + + + + + + - + - - - Footer - - + + + Footer + + + diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.ios.vars.scss b/core/src/components/infinite-scroll-content/infinite-scroll-content.ios.vars.scss index 28b4f24429..35c84a8776 100644 --- a/core/src/components/infinite-scroll-content/infinite-scroll-content.ios.vars.scss +++ b/core/src/components/infinite-scroll-content/infinite-scroll-content.ios.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Color of the infinite scroll loading indicator -$infinite-scroll-ios-loading-color: $text-ios-color-step-400 !default; +$infinite-scroll-ios-loading-color: $text-color-step-400 !default; /// @prop - Color of the infinite scroll loading indicator text $infinite-scroll-ios-loading-text-color: $infinite-scroll-ios-loading-color !default; diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.md.vars.scss b/core/src/components/infinite-scroll-content/infinite-scroll-content.md.vars.scss index a6e82de847..fb1b0d18ee 100644 --- a/core/src/components/infinite-scroll-content/infinite-scroll-content.md.vars.scss +++ b/core/src/components/infinite-scroll-content/infinite-scroll-content.md.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Color of the infinite scroll loading indicator -$infinite-scroll-md-loading-color: $text-md-color-step-400 !default; +$infinite-scroll-md-loading-color: $text-color-step-400 !default; /// @prop - Color of the infinite scroll loading indicator text $infinite-scroll-md-loading-text-color: $infinite-scroll-md-loading-color !default; diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.scss b/core/src/components/infinite-scroll-content/infinite-scroll-content.scss index afd3a9d7fd..16950c7a7a 100644 --- a/core/src/components/infinite-scroll-content/infinite-scroll-content.scss +++ b/core/src/components/infinite-scroll-content/infinite-scroll-content.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- ion-infinite-scroll-content { - @include text-align(center); + text-align: center; display: flex; diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx b/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx index ec555c49fa..73702f6ef5 100644 --- a/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx +++ b/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx @@ -1,26 +1,24 @@ import { Component, Prop } from '@stencil/core'; -import { Config } from '../../interface'; +import { Config, Mode } from '../../interface'; +import { createThemedClasses } from '../../utils/theme'; @Component({ tag: 'ion-infinite-scroll-content', styleUrls: { ios: 'infinite-scroll-content.ios.scss', md: 'infinite-scroll-content.md.scss' - }, - host: { - theme: 'infinite-scroll-content' } }) export class InfiniteScrollContent { - @Prop({ context: 'config' }) - config!: Config; + mode!: Mode; + + @Prop({ context: 'config' }) config!: Config; /** * An animated SVG spinner that shows while loading. */ - @Prop({ mutable: true }) - loadingSpinner?: string; + @Prop({ mutable: true }) loadingSpinner?: string; /** * Optional text to display while loading. @@ -36,6 +34,12 @@ export class InfiniteScrollContent { } } + hostData() { + return { + class: createThemedClasses(this.mode, 'infinite-scroll-content') + }; + } + render() { return (
diff --git a/core/src/components/infinite-scroll/infinite-scroll.tsx b/core/src/components/infinite-scroll/infinite-scroll.tsx index d9613203c3..45a87458fe 100644 --- a/core/src/components/infinite-scroll/infinite-scroll.tsx +++ b/core/src/components/infinite-scroll/infinite-scroll.tsx @@ -1,5 +1,4 @@ -import { Component, Element, Event, EventEmitter, EventListenerEnable, Listen, Method, Prop, State, Watch } from '@stencil/core'; -import { QueueController } from '../../interface'; +import { Component, Element, Event, EventEmitter, EventListenerEnable, Listen, Method, Prop, QueueApi, State, Watch } from '@stencil/core'; @Component({ tag: 'ion-infinite-scroll', @@ -9,14 +8,14 @@ export class InfiniteScroll { private thrPx = 0; private thrPc = 0; - private scrollEl?: HTMLIonScrollElement | null; + private scrollEl?: HTMLIonScrollElement; private didFire = false; private isBusy = false; @Element() el!: HTMLElement; @State() isLoading = false; - @Prop({ context: 'queue' }) queue!: QueueController; + @Prop({ context: 'queue' }) queue!: QueueApi; @Prop({ context: 'enableListener' }) enableListener!: EventListenerEnable; /** @@ -75,14 +74,13 @@ export class InfiniteScroll { */ @Event() ionInfinite!: EventEmitter; - async componentWillLoad() { - const scrollEl = this.el.closest('ion-scroll'); - if (scrollEl) { - this.scrollEl = await scrollEl.componentOnReady(); - } - } - componentDidLoad() { + async componentDidLoad() { + const contentEl = this.el.closest('ion-content'); + if (contentEl) { + await contentEl.componentOnReady(); + this.scrollEl = contentEl.getScrollElement(); + } this.thresholdChanged(this.threshold); this.enableScrollEvents(!this.disabled); if (this.position === 'top') { diff --git a/core/src/components/infinite-scroll/test/basic/index.html b/core/src/components/infinite-scroll/test/basic/index.html index d3b4c30dd6..3f3e2baa2f 100644 --- a/core/src/components/infinite-scroll/test/basic/index.html +++ b/core/src/components/infinite-scroll/test/basic/index.html @@ -6,35 +6,34 @@ Infinite Scroll - Basic + - - - Infinite Scroll - Basic - - + + + Infinite Scroll - Basic + + - + - - Toggle InfiniteScroll - + + Toggle InfiniteScroll + - + - + - - - - - + + + + + @@ -43,7 +42,7 @@ + diff --git a/core/src/components/infinite-scroll/test/preview/index.html b/core/src/components/infinite-scroll/test/preview/index.html index d318ac5d17..9f3c0e8831 100644 --- a/core/src/components/infinite-scroll/test/preview/index.html +++ b/core/src/components/infinite-scroll/test/preview/index.html @@ -6,35 +6,34 @@ Infinite Scroll + - - - Infinite Scroll - - + + + Infinite Scroll + + - + - - Toggle InfiniteScroll - + + Toggle InfiniteScroll + - + - + - - - - - + + + + + @@ -43,7 +42,7 @@ + diff --git a/core/src/components/infinite-scroll/test/standalone/index.html b/core/src/components/infinite-scroll/test/standalone/index.html index c7d89693e2..187166906c 100644 --- a/core/src/components/infinite-scroll/test/standalone/index.html +++ b/core/src/components/infinite-scroll/test/standalone/index.html @@ -6,6 +6,7 @@ Infinite Scroll - Standalone + diff --git a/core/src/components/input/input.ios.scss b/core/src/components/input/input.ios.scss index 8428bc7c16..7eeee53d16 100644 --- a/core/src/components/input/input.ios.scss +++ b/core/src/components/input/input.ios.scss @@ -1,131 +1,32 @@ @import "./input"; @import "./input.ios.vars"; -// iOS Input -// -------------------------------------------------- - -.native-input-ios { - @include placeholder($input-ios-placeholder-color); - @include margin($input-ios-margin-top, $input-ios-margin-end, $input-ios-margin-bottom, $input-ios-margin-start); - @include padding(0); - - width: calc(100% - #{($input-ios-margin-end + $input-ios-margin-start)}); - +:host { font-family: $input-ios-font-family; font-size: $input-ios-font-size; + + --padding-top: #{$input-ios-padding-top}; + --padding-end: #{$input-ios-padding-end}; + --padding-bottom: #{$input-ios-padding-bottom}; + --padding-start: #{$input-ios-padding-start}; + + --placeholder-color: #{$input-ios-placeholder-color}; } +.input-clear-icon { + @include svg-background-image($input-ios-input-clear-icon-svg); + + width: $input-ios-input-clear-icon-width; + height: $input-ios-input-clear-icon-width; + + background-size: $input-ios-input-clear-icon-size; +} // iOS Inset Input // -------------------------------------------------- -.input-ios .inset-input { - @include padding($input-ios-inset-padding-top, $input-ios-inset-padding-end, $input-ios-inset-padding-bottom, $input-ios-inset-padding-start); - @include margin($input-ios-inset-margin-top, $input-ios-inset-margin-end, $input-ios-inset-margin-bottom, $input-ios-inset-margin-start); -} - - -// iOS Highlighted Input -// -------------------------------------------------- - -// TODO this is angular specific scss - -// Input highlight mixin for focus, valid, and invalid states -@mixin ios-input-highlight($highlight-color) { - border-bottom-color: $highlight-color; -} - -// Show the focus highlight when the input has focus -@if ($input-ios-show-focus-highlight) { - // In order to get a 2px border we need to add an inset - // box-shadow 1px (this is to avoid the div resizing) - - .item-ios.item-input.item-input-has-focus .item-inner { - @include ios-input-highlight($input-ios-highlight-color); - } - - // The last item in a list has a border on the item, not the - // inner item, so add it to the item itself - .list-ios .item-input.item-input-has-focus:last-child { - @include ios-input-highlight($input-ios-highlight-color); - - .item-inner { - box-shadow: none; - } - } -} - -// Show the valid highlight when it has the .ng-valid class and a value -@if ($input-ios-show-valid-highlight) { - .item-ios.item-input.ng-valid.item-input-has-value:not(.item-input-has-focus) .item-inner { - @include ios-input-highlight($input-ios-highlight-color-valid); - } - - .list-ios .item-input.ng-valid.item-input-has-value:not(.item-input-has-focus):last-child { - @include ios-input-highlight($input-ios-highlight-color-valid); - - .item-inner { - box-shadow: none; - } - } -} - -// Show the invalid highlight when it has the invalid class and has been touched -@if ($input-ios-show-invalid-highlight) { - .item-ios.item-input.ng-invalid.ng-touched:not(.item-input-has-focus) .item-inner { - @include ios-input-highlight($input-ios-highlight-color-invalid); - } - - .list-ios .item-input.ng-invalid.ng-touched:not(.item-input-has-focus):last-child { - @include ios-input-highlight($input-ios-highlight-color-invalid); - - .item-inner { - box-shadow: none; - } - } -} - -// iOS Input After Label -// -------------------------------------------------- - -.label-ios + .input .native-input, -.label-ios + .input + .cloned-input { - @include margin-horizontal($input-ios-by-label-margin-start, null); -} - -// iOS Stacked & Floating Inputs -// -------------------------------------------------- - -.item-ios.item-label-stacked .native-input, -.item-ios.item-label-floating .native-input { - @include margin(8px, null, 8px, 0); - - width: calc(100% - #{$input-ios-margin-end}); -} - -.item-ios.item-label-stacked .label-ios + .input + .cloned-input, -.item-ios.item-label-floating .label-ios + .input + .cloned-input { - @include margin-horizontal(0, null); -} - - -// iOS Clear Input Icon -// -------------------------------------------------- - -.input-ios[clear-input] { - position: relative; -} - -.input-ios[clear-input] .native-input { - @include padding-horizontal(null, $input-ios-input-clear-padding-end); -} - -.input-ios .input-clear-icon { - @include position-horizontal(null, 0); - @include svg-background-image($input-ios-input-clear-icon-svg); - - width: $input-ios-input-clear-icon-width; - - background-color: transparent; - background-size: $input-ios-input-clear-icon-size; -} +// TODO: where is it apply +// :host(.inset-input) { +// @include padding($input-ios-inset-padding-top, $input-ios-inset-padding-end, $input-ios-inset-padding-bottom, $input-ios-inset-padding-start); +// @include margin($input-ios-inset-margin-top, $input-ios-inset-margin-end, $input-ios-inset-margin-bottom, $input-ios-inset-margin-start); +// } diff --git a/core/src/components/input/input.ios.vars.scss b/core/src/components/input/input.ios.vars.scss index 7d7e84b0ff..00fd72f296 100644 --- a/core/src/components/input/input.ios.vars.scss +++ b/core/src/components/input/input.ios.vars.scss @@ -6,22 +6,22 @@ // -------------------------------------------------- /// @prop - Font family of the input -$input-ios-font-family: $font-family-ios-base !default; +$input-ios-font-family: $font-family-base !default; /// @prop - Font size of the input $input-ios-font-size: inherit !default; /// @prop - Margin top of the input -$input-ios-margin-top: $item-ios-padding-top !default; +$input-ios-padding-top: $item-ios-padding-top !default; /// @prop - Margin end of the input -$input-ios-margin-end: ($item-ios-padding-end / 2) !default; +$input-ios-padding-end: ($item-ios-padding-end / 2) !default; /// @prop - Margin bottom of the input -$input-ios-margin-bottom: $item-ios-padding-bottom !default; +$input-ios-padding-bottom: $item-ios-padding-bottom !default; /// @prop - Margin start of the input -$input-ios-margin-start: 0 !default; +$input-ios-padding-start: 0px !default; /// @prop - Margin start of the input when it is after a label $input-ios-by-label-margin-start: $item-ios-padding-start !default; @@ -54,7 +54,7 @@ $input-ios-inset-margin-start: 0 !default; $input-ios-input-clear-icon-width: 30px !default; /// @prop - Color of the icon used to clear the input -$input-ios-input-clear-icon-color: $text-ios-color-step-400 !default; +$input-ios-input-clear-icon-color: $text-color-step-400 !default; /// @prop - Icon used to clear the input $input-ios-input-clear-icon-svg: "" !default; @@ -66,7 +66,7 @@ $input-ios-input-clear-icon-size: 18px !default; $input-ios-input-clear-padding-end: ($input-ios-input-clear-icon-width + $item-ios-padding-end) !default; /// @prop - Placeholder Text color of the input -$input-ios-placeholder-color: $placeholder-text-ios-color !default; +$input-ios-placeholder-color: $placeholder-text-color !default; /// @prop - Show the focus highlight when the input has focus $input-ios-show-focus-highlight: false !default; @@ -78,10 +78,10 @@ $input-ios-show-valid-highlight: $input-ios-show-focus-highlight !defau $input-ios-show-invalid-highlight: $input-ios-show-focus-highlight !default; /// @prop - Color of the input highlight -$input-ios-highlight-color: ion-color($colors-ios, primary, base, ios) !default; +$input-ios-highlight-color: ion-color(primary, base) !default; /// @prop - Color of the input highlight when valid -$input-ios-highlight-color-valid: ion-color($colors-ios, success, base, ios) !default; +$input-ios-highlight-color-valid: ion-color(success, base) !default; /// @prop - Color of the input highlight when invalid -$input-ios-highlight-color-invalid: ion-color($colors-ios, danger, base, ios) !default; +$input-ios-highlight-color-invalid: ion-color(danger, base) !default; diff --git a/core/src/components/input/input.md.scss b/core/src/components/input/input.md.scss index 13fc24ab42..9260608d7c 100644 --- a/core/src/components/input/input.md.scss +++ b/core/src/components/input/input.md.scss @@ -1,120 +1,36 @@ @import "./input"; @import "./input.md.vars"; + // Material Design Input // -------------------------------------------------- -.native-input-md { - @include placeholder($input-md-placeholder-color); - @include margin($input-md-margin-top, $input-md-margin-end, $input-md-margin-bottom, $input-md-margin-start); - @include padding(0); - - width: calc(100% - #{$input-md-margin-end} - #{$input-md-margin-start}); - +:host { font-family: $input-md-font-family; font-size: $input-md-font-size; + + --padding-top: #{$input-md-padding-top}; + --padding-end: #{$input-md-padding-end}; + --padding-bottom: #{$input-md-padding-bottom}; + --padding-start: #{$input-md-padding-start}; + + --placeholder-color: #{$input-md-placeholder-color}; } +.input-clear-icon { + @include svg-background-image($input-md-input-clear-icon-svg); + + width: $input-md-input-clear-icon-width; + height: $input-md-input-clear-icon-width; + + background-size: $input-md-input-clear-icon-size; +} + // Material Design Inset Input // -------------------------------------------------- -.input-md .inset-input { - @include padding($input-md-inset-padding-top, $input-md-inset-padding-end, $input-md-inset-padding-bottom, $input-md-inset-padding-start); - @include margin($input-md-inset-margin-top, $input-md-inset-margin-end, $input-md-inset-margin-bottom, $input-md-inset-margin-start); -} - - -// Material Design Highlighted Input -// -------------------------------------------------- - -// Input highlight mixin for focus, valid, and invalid states -@mixin md-input-highlight($highlight-color) { - border-bottom-color: $highlight-color; - box-shadow: inset 0 -1px 0 0 $highlight-color; -} - -// Show the focus highlight when the input has focus -@if ($input-md-show-focus-highlight) { - // In order to get a 2px border we need to add an inset - // box-shadow 1px (this is to avoid the div resizing) - - .item-md.item-input.item-input-has-focus .item-inner { - @include md-input-highlight($input-md-highlight-color); - } - - // The last item in a list has a border on the item, not the - // inner item, so add it to the item itself - .list-md .item-input.item-input-has-focus:last-child { - @include md-input-highlight($input-md-highlight-color); - - .item-inner { - box-shadow: none; - } - } -} - -// TODO this is angular specific scss - -// Show the valid highlight when it has the .ng-valid class and a value -@if ($input-md-show-valid-highlight) { - .item-md.item-input.ng-valid.item-input-has-value:not(.item-input-has-focus) .item-inner { - @include md-input-highlight($input-md-highlight-color-valid); - } - - .list-md .item-input.ng-valid.item-input-has-value:not(.item-input-has-focus):last-child { - @include md-input-highlight($input-md-highlight-color-valid); - - .item-inner { - box-shadow: none; - } - } -} - -// Show the invalid highlight when it has the invalid class and has been touched -@if ($input-md-show-invalid-highlight) { - .item-md.item-input.ng-invalid.ng-touched:not(.item-input-has-focus) .item-inner { - @include md-input-highlight($input-md-highlight-color-invalid); - } - - .list-md .item-input.ng-invalid.ng-touched:not(.item-input-has-focus):last-child { - @include md-input-highlight($input-md-highlight-color-invalid); - - .item-inner { - box-shadow: none; - } - } -} - - -// Material Design Stacked & Floating Inputs -// -------------------------------------------------- - -.item-label-stacked .native-input-md, -.item-label-floating .native-input-md { - @include margin(8px, null, 8px, 0); - - width: calc(100% - #{$input-md-margin-end}); -} - - -// Material Design Clear Input Icon -// -------------------------------------------------- - -.input-md[clear-input] { - position: relative; -} - -.input-md[clear-input] .native-input { - @include padding-horizontal(null, $input-md-input-clear-icon-width); -} - -.input-md .native-input-clear-icon { - @include position-horizontal(null, 0); - @include svg-background-image($input-md-input-clear-icon-svg); - - width: $input-md-input-clear-icon-width; - - background-color: transparent; - background-size: $input-md-input-clear-icon-size; -} +// .inset-input { +// @include padding($input-md-inset-padding-top, $input-md-inset-padding-end, $input-md-inset-padding-bottom, $input-md-inset-padding-start); +// @include margin($input-md-inset-margin-top, $input-md-inset-margin-end, $input-md-inset-margin-bottom, $input-md-inset-margin-start); +// } diff --git a/core/src/components/input/input.md.vars.scss b/core/src/components/input/input.md.vars.scss index 238d3b8364..29192b51a7 100644 --- a/core/src/components/input/input.md.vars.scss +++ b/core/src/components/input/input.md.vars.scss @@ -6,28 +6,28 @@ // -------------------------------------------------- /// @prop - Font family of the input -$input-md-font-family: $font-family-md-base !default; +$input-md-font-family: $font-family-base !default; /// @prop - Font size of the input $input-md-font-size: inherit !default; /// @prop - Margin top of the input -$input-md-margin-top: $item-md-padding-top !default; +$input-md-padding-top: $item-md-padding-top !default; /// @prop - Margin end of the input -$input-md-margin-end: ($item-md-padding-end / 2) !default; +$input-md-padding-end: ($item-md-padding-end / 2) !default; /// @prop - Margin bottom of the input -$input-md-margin-bottom: $item-md-padding-bottom !default; +$input-md-padding-bottom: $item-md-padding-bottom !default; /// @prop - Margin start of the input -$input-md-margin-start: ($item-md-padding-start / 2) !default; +$input-md-padding-start: ($item-md-padding-start / 2) !default; /// @prop - Width of the icon used to clear the input $input-md-input-clear-icon-width: 30px !default; /// @prop - Color of the icon used to clear the input -$input-md-input-clear-icon-color: $text-md-color-step-400 !default; +$input-md-input-clear-icon-color: $text-color-step-400 !default; /// @prop - Icon used to clear the input $input-md-input-clear-icon-svg: "" !default; @@ -36,7 +36,7 @@ $input-md-input-clear-icon-svg: ", -
- - - -
- - Toggle Disabled - - - - Toggle Readonly - -
+ + Default Label + + Clear Input - + + Floating + + + + + Type # + + + + + Password + + + + + Placeholder + + + + + Disabled + + + + + Readonly + + + + + Slot + + + + + Toggle + + + + + Type # +
+ + + +
+ + + +
+ + Toggle Disabled + + + + Toggle Readonly + +
+ + + Clear Input + + + + + - - - diff --git a/core/src/components/input/test/preview/index.html b/core/src/components/input/test/preview/index.html index 54d05399f8..16ec66ed50 100644 --- a/core/src/components/input/test/preview/index.html +++ b/core/src/components/input/test/preview/index.html @@ -1,98 +1,106 @@ + Input + + - - - Input - - + + + Input + + - - - - - + + + + + - - Default Label - - - - - Clear Input - - - - - Floating - - - - - Type # - - - - - Password - - - - - Placeholder - - - - - Disabled - - - - - Readonly - - - - - Slot - - - - - Toggle - - - - - Type # -
- - - -
- - Toggle Disabled - - - - Toggle Readonly - -
+ + Default Label + + Clear Input - + + Floating + + + + + Type # + + + + + Password + + + + + Placeholder + + + + + Disabled + + + + + Readonly + + + + + Slot + + + + + Toggle + + + + + Type # +
+ + + +
+ + + +
+ + Toggle Disabled + + + + Toggle Readonly + +
+ + + Clear Input + + + + + - - - diff --git a/core/src/components/input/test/standalone/index.html b/core/src/components/input/test/standalone/index.html index d5b8ecc36d..5995b08738 100644 --- a/core/src/components/input/test/standalone/index.html +++ b/core/src/components/input/test/standalone/index.html @@ -6,6 +6,7 @@ Input - Standalone + diff --git a/core/src/components/item-divider/item-divider.ios.scss b/core/src/components/item-divider/item-divider.ios.scss index bbcd25b4ad..4feaa75ef5 100644 --- a/core/src/components/item-divider/item-divider.ios.scss +++ b/core/src/components/item-divider/item-divider.ios.scss @@ -4,7 +4,7 @@ // iOS Item Divider // -------------------------------------------------- -.item-divider-ios { +:host { @include padding-horizontal($item-ios-divider-padding-start, null); @include safe-area-padding-horizontal($item-ios-divider-padding-start, null); @include border-radius(0); @@ -14,11 +14,11 @@ font-family: $item-ios-divider-font-family; font-size: $item-ios-divider-font-size; - color: $item-ios-divider-color; - background-color: $item-ios-divider-background; + --ion-color-base: #{$item-ios-divider-background}; + --ion-color-contrast: #{$item-ios-divider-color}; } -.item-divider-ios .item-divider-inner { +.item-divider-inner { @include padding-horizontal(null, $item-ios-divider-padding-end / 2); @media screen and (orientation: landscape) { @@ -30,16 +30,16 @@ // iOS Item Divider Slots // -------------------------------------------------- -.item-divider-ios [slot="start"] { +:host([slot="start"]) { @include margin($item-ios-slot-start-margin-top, $item-ios-slot-start-margin-end, $item-ios-slot-start-margin-bottom, $item-ios-slot-start-margin-start); } -.item-divider-ios [slot="end"] { +:host([slot="end"]) { @include margin($item-ios-slot-end-margin-top, $item-ios-slot-end-margin-end, $item-ios-slot-end-margin-bottom, $item-ios-slot-end-margin-start); } -.item-divider-ios ion-icon[slot="start"], -.item-divider-ios ion-icon[slot="end"] { +::slotted(ion-icon[slot="start"]), +::slotted(ion-icon[slot="end"]) { @include margin($item-ios-icon-slot-margin-top, $item-ios-icon-slot-margin-end, $item-ios-icon-slot-margin-bottom, $item-ios-icon-slot-margin-start); } @@ -47,24 +47,24 @@ // iOS Item Divider Content // -------------------------------------------------- -.item-divider-ios h1 { +::slotted(h1) { @include margin(0, 0, 2px); font-size: 24px; font-weight: normal; } -.item-divider-ios h2 { +::slotted(h2) { @include margin(0, 0, 2px); font-size: 17px; font-weight: normal; } -.item-divider-ios h3, -.item-divider-ios h4, -.item-divider-ios h5, -.item-divider-ios h6 { +::slotted(h3), +::slotted(h4), +::slotted(h5), +::slotted(h6) { @include margin(0, 0, 3px); font-size: 14px; @@ -72,7 +72,7 @@ line-height: normal; } -.item-divider-ios p { +::slotted(p) { @include margin($item-ios-paragraph-margin-top, $item-ios-paragraph-margin-end, $item-ios-paragraph-margin-bottom, $item-ios-paragraph-margin-start); overflow: inherit; @@ -83,34 +83,11 @@ color: $item-ios-paragraph-text-color; } -.item-divider-ios h2:last-child, -.item-divider-ios h3:last-child, -.item-divider-ios h4:last-child, -.item-divider-ios h5:last-child, -.item-divider-ios h6:last-child, -.item-divider-ios p:last-child { +::slotted(h2:last-child) +::slotted(h3:last-child), +::slotted(h4:last-child), +::slotted(h5:last-child), +::slotted(h6:last-child), +::slotted(p:last-child) { @include margin(null, null, 0, null); } - - -// Generate iOS Item Divider Colors -// -------------------------------------------------- - -@each $color-name, $color-value in $colors-ios { - $color-base: ion-color($colors-ios, $color-name, base, ios); - $color-contrast: ion-color($colors-ios, $color-name, contrast, ios); - $color-shade: ion-color($colors-ios, $color-name, tint, ios); - - .item-divider-ios-#{$color-name} { - color: $color-contrast; - background-color: $color-base; - - p { - color: $color-contrast; - } - - &.activated { - background-color: $color-shade; - } - } -} diff --git a/core/src/components/item-divider/item-divider.ios.vars.scss b/core/src/components/item-divider/item-divider.ios.vars.scss index cc91c5142f..06c3c69f67 100644 --- a/core/src/components/item-divider/item-divider.ios.vars.scss +++ b/core/src/components/item-divider/item-divider.ios.vars.scss @@ -6,16 +6,16 @@ // -------------------------------------------------- /// @prop - Font family of the item -$item-ios-divider-font-family: $font-family-ios-base !default; +$item-ios-divider-font-family: $font-family-base !default; /// @prop - Font size of the item $item-ios-divider-font-size: 17px !default; /// @prop - Background for the divider -$item-ios-divider-background: $background-ios-color-step-50 !default; +$item-ios-divider-background: $background-color-step-50 !default; /// @prop - Color for the divider -$item-ios-divider-color: $text-ios-color-step-150 !default; +$item-ios-divider-color: $text-color-step-150 !default; /// @prop - Padding start for the divider $item-ios-divider-padding-start: $item-ios-padding-start !default; diff --git a/core/src/components/item-divider/item-divider.md.scss b/core/src/components/item-divider/item-divider.md.scss index c044404623..350a39ed7f 100644 --- a/core/src/components/item-divider/item-divider.md.scss +++ b/core/src/components/item-divider/item-divider.md.scss @@ -4,7 +4,7 @@ // Material Design Item Divider // -------------------------------------------------- -.item-divider-md { +:host { @include padding-horizontal($item-md-divider-padding-start, null); border-bottom: $item-md-divider-border-bottom; @@ -12,11 +12,11 @@ font-family: $item-md-divider-font-family; font-size: $item-md-divider-font-size; - color: $item-md-divider-color; - background-color: $item-md-divider-background; + --ion-color-base: #{$item-md-divider-background}; + --ion-color-contrast: #{$item-md-divider-color}; } -.item-divider-md .item-divider-inner { +.item-divider-inner { @include padding-horizontal(null, ($item-md-divider-padding-end / 2)); } @@ -24,28 +24,29 @@ // Material Design Item Divider Slots // -------------------------------------------------- -.item-divider-md [slot="start"], -.item-divider-md [slot="end"] { +:host([slot="start"]), +:host([slot="end"]) { @include margin($item-md-slot-margin-top, $item-md-slot-margin-end, $item-md-slot-margin-bottom, $item-md-slot-margin-start); } -.item-divider-md ion-icon[slot="start"], -.item-divider-md ion-icon[slot="end"] { +::slotted(ion-icon[slot="start"]), +::slotted(ion-icon[slot="end"]) { @include margin($item-md-icon-slot-margin-top, $item-md-icon-slot-margin-end, $item-md-icon-slot-margin-bottom, $item-md-icon-slot-margin-start); } -.item-divider-md ion-icon[slot="start"] + .item-inner, -.item-divider-md ion-icon[slot="start"] + .item-interactive { - @include margin-horizontal($item-md-padding-start + ($item-md-padding-start / 2), null); -} +// TODO +// .item-divider-md ion-icon[slot="start"] + .item-inner, +// .item-divider-md ion-icon[slot="start"] + .item-interactive { +// @include margin-horizontal($item-md-padding-start + ($item-md-padding-start / 2), null); +// } -.item-divider-md ion-avatar[slot="start"], -.item-divider-md ion-thumbnail[slot="start"] { +::slotted(ion-avatar[slot="start"]), +::slotted(ion-thumbnail[slot="start"]) { @include margin(($item-md-padding-end / 2), $item-md-padding-end, ($item-md-padding-end / 2), 0); } -.item-divider-md ion-avatar[slot="end"], -.item-divider-md ion-thumbnail[slot="end"] { +::slotted(ion-avatar[slot="end"]), +::slotted(ion-thumbnail[slot="end"]) { @include margin(($item-md-padding-end / 2)); } @@ -53,24 +54,21 @@ // Material Design Item Divider Content // -------------------------------------------------- -.item-divider-md h1 { +::slotted(h1) { @include margin(0, 0, 2px); font-size: 24px; font-weight: normal; } -.item-divider-md h2 { +::slotted(h2) { @include margin(2px, 0); font-size: 16px; font-weight: normal; } -.item-divider-md h3, -.item-divider-md h4, -.item-divider-md h5, -.item-divider-md h6 { +::slotted(h3, h4, h5, h6) { @include margin(2px, 0); font-size: 14px; @@ -78,7 +76,7 @@ line-height: normal; } -.item-divider-md p { +::slotted(p) { @include margin(0, 0, 2px); overflow: inherit; @@ -88,26 +86,3 @@ text-overflow: inherit; color: $item-md-paragraph-text-color; } - - -// Generate Material Design Item Divider Colors -// -------------------------------------------------- - -@each $color-name, $color-value in $colors-md { - $color-base: ion-color($colors-md, $color-name, base, md); - $color-contrast: ion-color($colors-md, $color-name, contrast, md); - $color-shade: ion-color($colors-md, $color-name, tint, md); - - .item-divider-md-#{$color-name} { - color: $color-contrast; - background-color: $color-base; - - p { - color: $color-contrast; - } - - &.activated { - background-color: $color-shade; - } - } -} diff --git a/core/src/components/item-divider/item-divider.md.vars.scss b/core/src/components/item-divider/item-divider.md.vars.scss index 510960adba..17c1cc1abf 100644 --- a/core/src/components/item-divider/item-divider.md.vars.scss +++ b/core/src/components/item-divider/item-divider.md.vars.scss @@ -6,13 +6,13 @@ // -------------------------------------------------- /// @prop - Color for the divider -$item-md-divider-color: $text-md-color-step-600 !default; +$item-md-divider-color: $text-color-step-600 !default; /// @prop - Background for the divider -$item-md-divider-background: $background-md-color !default; +$item-md-divider-background: $background-color !default; /// @prop - Font family for the divider -$item-md-divider-font-family: $font-family-md-base !default; +$item-md-divider-font-family: $font-family-base !default; /// @prop - Font size for the divider $item-md-divider-font-size: 14px !default; diff --git a/core/src/components/item-divider/item-divider.scss b/core/src/components/item-divider/item-divider.scss index dbc29d666d..2cae1247c8 100644 --- a/core/src/components/item-divider/item-divider.scss +++ b/core/src/components/item-divider/item-divider.scss @@ -4,7 +4,7 @@ // Item Divider // -------------------------------------------------- -ion-item-divider { +:host { @include font-smoothing(); @include margin(0); @include padding(0); @@ -21,9 +21,12 @@ ion-item-divider { width: 100%; min-height: $item-divider-min-height; + + color: #{current-color(contrast)}; + background-color: #{current-color(base)}; } -ion-item-divider[sticky] { +:host([sticky]) { position: sticky; top: 0; } diff --git a/core/src/components/item-divider/item-divider.tsx b/core/src/components/item-divider/item-divider.tsx index d252486c64..eb8896433e 100644 --- a/core/src/components/item-divider/item-divider.tsx +++ b/core/src/components/item-divider/item-divider.tsx @@ -1,5 +1,6 @@ import { Component, Element, Prop } from '@stencil/core'; import { Color, Mode } from '../../interface'; +import { createColorClasses } from '../../utils/theme'; @Component({ tag: 'ion-item-divider', @@ -7,11 +8,10 @@ import { Color, Mode } from '../../interface'; ios: 'item-divider.ios.scss', md: 'item-divider.md.scss' }, - host: { - theme: 'item-divider' - } + shadow: true }) export class ItemDivider { + @Element() el!: HTMLElement; /** @@ -36,12 +36,18 @@ export class ItemDivider { } } + hostData() { + return { + class: createColorClasses(this.color) + }; + } + render() { return [ ,
- +
diff --git a/core/src/components/item-divider/test/standalone/index.html b/core/src/components/item-divider/test/standalone/index.html index a47338880f..7b43fbe1a2 100644 --- a/core/src/components/item-divider/test/standalone/index.html +++ b/core/src/components/item-divider/test/standalone/index.html @@ -6,6 +6,7 @@ Item Divider - Standalone + diff --git a/core/src/components/item-group/item-group.ios.scss b/core/src/components/item-group/item-group.ios.scss index df3032c763..ff5819ec11 100644 --- a/core/src/components/item-group/item-group.ios.scss +++ b/core/src/components/item-group/item-group.ios.scss @@ -5,11 +5,7 @@ // iOS Item Group // -------------------------------------------------- -.item-group-ios ion-item:first-child .item-inner { - border-top-width: 0; -} - -.item-group-ios ion-item:last-child .item-inner, -.item-group-ios ion-item-sliding:last-child .item .item-inner { - border: 0; +.item-group-ios ion-item:last-child, +.item-group-ios ion-item-sliding:last-child .item { + --border-width: 0; } diff --git a/core/src/components/item-group/item-group.md.scss b/core/src/components/item-group/item-group.md.scss index b826b156fd..0c3e16a2d9 100644 --- a/core/src/components/item-group/item-group.md.scss +++ b/core/src/components/item-group/item-group.md.scss @@ -5,11 +5,7 @@ // Material Design Item Group // -------------------------------------------------- -.item-group-md ion-item:first-child .item-inner { - border-top-width: 0; -} - -.item-group-md ion-item:last-child .item-inner, -.item-group-md ion-item-sliding:last-child .item .item-inner { - border: 0; +.item-group-md ion-item:last-child, +.item-group-md ion-item-sliding:last-child ion-item { + --border-width: 0; } diff --git a/core/src/components/item-group/item-group.tsx b/core/src/components/item-group/item-group.tsx index e407d2d1f8..7ee9e29154 100644 --- a/core/src/components/item-group/item-group.tsx +++ b/core/src/components/item-group/item-group.tsx @@ -1,4 +1,6 @@ import { Component } from '@stencil/core'; +import { Mode } from '../../interface'; +import { createThemedClasses } from '../../utils/theme'; @Component({ @@ -6,9 +8,15 @@ import { Component } from '@stencil/core'; styleUrls: { ios: 'item-group.ios.scss', md: 'item-group.md.scss' - }, - host: { - theme: 'item-group' } }) -export class ItemGroup {} +export class ItemGroup { + + mode!: Mode; + + hostData() { + return { + class: createThemedClasses(this.mode, 'item-group') + }; + } +} diff --git a/core/src/components/item-option/item-option.ios.scss b/core/src/components/item-option/item-option.ios.scss index 3bff01cb8a..988b649ba3 100644 --- a/core/src/components/item-option/item-option.ios.scss +++ b/core/src/components/item-option/item-option.ios.scss @@ -4,31 +4,17 @@ // iOS Item Option // -------------------------------------------------- -.item-option-ios { +:host { font-size: $item-option-button-ios-font-size; - color: $item-option-button-ios-text-color; - background-color: $item-option-button-ios-background-color; + + --ion-color-base: #{$item-option-button-ios-background-color}; + --ion-color-contrast: #{$item-option-button-ios-text-color}; } -.list-ios .item-options-end ion-item-option:last-child { +:host(.in-list.item-options-end:last-child) { @include safe-area-padding-horizontal(null, .7em); } -.list-ios .item-options-start ion-item-option:first-child { +:host(.in-list.item-options-start:first-child) { @include safe-area-padding-horizontal(.7em, null); } - - -// Generate iOS Option Button Colors -// -------------------------------------------------- - -@each $color-name, $color-value in $colors-ios { - $color-base: ion-color($colors-ios, $color-name, base, ios); - $color-contrast: ion-color($colors-ios, $color-name, contrast, ios); - $color-shade: ion-color($colors-ios, $color-name, tint, ios); - - .item-option-ios-#{$color-name} { - color: $color-contrast; - background-color: $color-base; - } -} diff --git a/core/src/components/item-option/item-option.ios.vars.scss b/core/src/components/item-option/item-option.ios.vars.scss index 84c4342b48..41ef80c0ad 100644 --- a/core/src/components/item-option/item-option.ios.vars.scss +++ b/core/src/components/item-option/item-option.ios.vars.scss @@ -7,10 +7,10 @@ $item-option-button-ios-font-size: 16px !default; /// @prop - Background color of the item option button -$item-option-button-ios-background-color: ion-color($colors-ios, primary, base, ios) !default; +$item-option-button-ios-background-color: ion-color(primary, base) !default; /// @prop - Text color of the item option button -$item-option-button-ios-text-color: ion-color($colors-ios, $item-option-button-ios-background-color, contrast, ios) !default; +$item-option-button-ios-text-color: ion-color(primary, contrast) !default; /// @prop - color of the item option button icon -$item-option-button-ios-icon-color: ion-color($colors-ios, $item-option-button-ios-background-color, contrast, ios) !default; +$item-option-button-ios-icon-color: ion-color(primary, contrast) !default; diff --git a/core/src/components/item-option/item-option.md.scss b/core/src/components/item-option/item-option.md.scss index 16402520c3..7416c5a4e9 100644 --- a/core/src/components/item-option/item-option.md.scss +++ b/core/src/components/item-option/item-option.md.scss @@ -4,28 +4,11 @@ // Material Design Item Option // -------------------------------------------------- -.item-option-md { +:host { font-size: $item-option-button-md-font-size; - color: $item-option-button-md-text-color; - background-color: $item-option-button-md-background-color; -} - -.item-option-md .item-option-button { font-weight: 500; text-transform: uppercase; -} - - -// Generate Material Design Option Button Colors -// -------------------------------------------------- - -@each $color-name, $color-value in $colors-md { - $color-base: ion-color($colors-md, $color-name, base, md); - $color-contrast: ion-color($colors-md, $color-name, contrast, md); - $color-shade: ion-color($colors-md, $color-name, tint, md); - - .item-option-md-#{$color-name} { - color: $color-contrast; - background-color: $color-base; - } + + --ion-color-base: #{$item-option-button-md-background-color}; + --ion-color-contrast: #{$item-option-button-md-text-color}; } diff --git a/core/src/components/item-option/item-option.md.vars.scss b/core/src/components/item-option/item-option.md.vars.scss index ac4f541e80..5e866e3eec 100644 --- a/core/src/components/item-option/item-option.md.vars.scss +++ b/core/src/components/item-option/item-option.md.vars.scss @@ -7,10 +7,10 @@ $item-option-button-md-font-size: 14px !default; /// @prop - Background color of the sliding option button -$item-option-button-md-background-color: ion-color($colors-md, primary, base, md) !default; +$item-option-button-md-background-color: ion-color(primary, base) !default; /// @prop - Text color of the sliding option button -$item-option-button-md-text-color: ion-color($colors-md, $item-option-button-md-background-color, contrast, md) !default; +$item-option-button-md-text-color: ion-color(primary, contrast) !default; /// @prop - color of the sliding option button icon -$item-option-button-md-icon-color: ion-color($colors-md, $item-option-button-md-background-color, contrast, md) !default; +$item-option-button-md-icon-color: ion-color(primary, contrast) !default; diff --git a/core/src/components/item-option/item-option.scss b/core/src/components/item-option/item-option.scss index 6b332473ef..908393f849 100644 --- a/core/src/components/item-option/item-option.scss +++ b/core/src/components/item-option/item-option.scss @@ -3,22 +3,28 @@ // Item Option // -------------------------------------------------- -.item-option-button { +:host { + color: #{current-color(contrast)}; +} + +.item-option-native { @include padding(0, .7em); width: 100%; height: 100%; border: 0; - font-size: 1em; - + outline: none; + font-family: inherit; + font-size: inherit; + font-weight: inherit; + letter-spacing: inherit; color: inherit; - background: none; - &:active, - &:focus { - outline: none; - } + background: #{current-color(base)}; + + appearance: none; + } .item-option-button-inner { @@ -32,10 +38,17 @@ width: 100%; height: 100%; + + font-family: inherit; + font-size: inherit; + font-weight: inherit; + letter-spacing: inherit; + } -.item-option-button [slot="icon-only"] { +::slotted([slot="icon-only"]) { @include padding(0); + @include margin(0, 10px); min-width: .9em; @@ -46,46 +59,10 @@ // Item Expandable Animation // -------------------------------------------------- -.item-option-expandable { +:host(.item-option-expandable) { flex-shrink: 0; transition-duration: 0; transition-property: none; transition-timing-function: cubic-bezier(.65, .05, .36, 1); } - -.item-sliding-active-swipe-right .item-options-end .item-option-expandable { - transition-duration: .6s; - transition-property: padding-left; - - @include multi-dir() { - // scss-lint:disable PropertySpelling - padding-left: 90%; - } - - @include ltr() { - order: 1; - } - - @include rtl() { - order: -1; - } -} - -.item-sliding-active-swipe-left .item-options-start .item-option-expandable { - transition-duration: .6s; - transition-property: padding-right; - - @include multi-dir() { - // scss-lint:disable PropertySpelling - padding-right: 90%; - } - - @include ltr() { - order: -1; - } - - @include rtl() { - order: 1; - } -} diff --git a/core/src/components/item-option/item-option.tsx b/core/src/components/item-option/item-option.tsx index bf4cd592a7..febb22857c 100644 --- a/core/src/components/item-option/item-option.tsx +++ b/core/src/components/item-option/item-option.tsx @@ -1,17 +1,19 @@ -import { Component, Prop } from '@stencil/core'; +import { Component, Element, Prop } from '@stencil/core'; import { Color, Mode } from '../../interface'; +import { createColorClasses } from '../../utils/theme'; @Component({ tag: 'ion-item-option', - host: { - theme: 'item-option' - }, styleUrls: { ios: 'item-option.ios.scss', md: 'item-option.md.scss' - } + }, + shadow: true }) export class ItemOption { + + @Element() el!: HTMLElement; + /** * The color to use for the option */ @@ -47,6 +49,7 @@ export class ItemOption { hostData() { return { class: { + ...createColorClasses(this.color), 'item-option-expandable': this.expandable } }; @@ -57,7 +60,7 @@ export class ItemOption { return ( - + diff --git a/core/src/components/item-options/item-options.scss b/core/src/components/item-options/item-options.scss index c11cf3235a..19d8561ae3 100644 --- a/core/src/components/item-options/item-options.scss +++ b/core/src/components/item-options/item-options.scss @@ -58,7 +58,7 @@ ion-item-options { .item-sliding-active-slide { @include rtl() { - &.item-sliding-active-options-left ion-item-options:not(.item-options-end) { + &.item-sliding-active-options-start ion-item-options:not(.item-options-end) { width: 100%; visibility: visible; @@ -69,8 +69,8 @@ ion-item-options { display: flex; } - &.item-sliding-active-options-left .item-options-start, - &.item-sliding-active-options-right ion-item-options:not(.item-options-start) { + &.item-sliding-active-options-start .item-options-start, + &.item-sliding-active-options-end ion-item-options:not(.item-options-start) { width: 100%; visibility: visible; diff --git a/core/src/components/item-options/item-options.tsx b/core/src/components/item-options/item-options.tsx index 7ca795ce55..86cf198d42 100644 --- a/core/src/components/item-options/item-options.tsx +++ b/core/src/components/item-options/item-options.tsx @@ -6,16 +6,14 @@ import { Method, Prop } from '@stencil/core'; -import { Side, isEndSide } from '../../utils/helpers'; +import { Side } from '../../interface'; +import { isEndSide } from '../../utils/helpers'; @Component({ tag: 'ion-item-options', styleUrls: { ios: 'item-options.ios.scss', md: 'item-options.md.scss' - }, - host: { - theme: 'item-options' } }) export class ItemOptions { @@ -51,10 +49,11 @@ export class ItemOptions { } hostData() { + const isEnd = this.isEndSide(); return { class: { - 'item-options-start': !this.isEndSide(), - 'item-options-end': this.isEndSide() + 'item-options-start': !isEnd, + 'item-options-end': isEnd } }; } diff --git a/core/src/components/item-sliding/item-sliding.ios.scss b/core/src/components/item-sliding/item-sliding.ios.scss deleted file mode 100644 index f2ad888239..0000000000 --- a/core/src/components/item-sliding/item-sliding.ios.scss +++ /dev/null @@ -1,9 +0,0 @@ -@import "./item-sliding"; -@import "./item-sliding.ios.vars"; - -// iOS Item Sliding -// -------------------------------------------------- - -.list-ios ion-item-sliding { - background-color: $item-ios-sliding-content-background; -} diff --git a/core/src/components/item-sliding/item-sliding.ios.vars.scss b/core/src/components/item-sliding/item-sliding.ios.vars.scss deleted file mode 100644 index d76362c3b7..0000000000 --- a/core/src/components/item-sliding/item-sliding.ios.vars.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import "../../themes/ionic.globals.ios"; - -// iOS Item Sliding -// -------------------------------------------------- - -/// @prop - Background for the sliding content -$item-ios-sliding-content-background: $item-ios-background-color !default; diff --git a/core/src/components/item-sliding/item-sliding.md.scss b/core/src/components/item-sliding/item-sliding.md.scss deleted file mode 100644 index 1b284c17db..0000000000 --- a/core/src/components/item-sliding/item-sliding.md.scss +++ /dev/null @@ -1,9 +0,0 @@ -@import "./item-sliding"; -@import "./item-sliding.md.vars"; - -// Material Design Item Sliding -// -------------------------------------------------- - -.list-md ion-item-sliding { - background-color: $item-md-sliding-content-background; -} diff --git a/core/src/components/item-sliding/item-sliding.md.vars.scss b/core/src/components/item-sliding/item-sliding.md.vars.scss deleted file mode 100644 index 11c21a04aa..0000000000 --- a/core/src/components/item-sliding/item-sliding.md.vars.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import "../../themes/ionic.globals.md"; - -// Material Design Item Sliding -// -------------------------------------------------- - -/// @prop - Background for the sliding content -$item-md-sliding-content-background: $item-md-background-color !default; diff --git a/core/src/components/item-sliding/item-sliding.scss b/core/src/components/item-sliding/item-sliding.scss index 8985799d8f..75ab7eb512 100644 --- a/core/src/components/item-sliding/item-sliding.scss +++ b/core/src/components/item-sliding/item-sliding.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "../../themes/ionic.theme.default"; // Item Sliding // -------------------------------------------------- @@ -11,17 +11,52 @@ ion-item-sliding { width: 100%; } -.item-sliding-active-slide { - ion-item, - ion-item.activated { - position: relative; - z-index: $z-index-item-options + 1; +.item-sliding-active-slide .item { + position: relative; + z-index: $z-index-item-options + 1; - opacity: 1; - transition: transform 500ms cubic-bezier(.36, .66, .04, 1); + background: $item-background-color; + opacity: 1; + transition: transform 500ms cubic-bezier(.36, .66, .04, 1); - pointer-events: none; + pointer-events: none; - will-change: transform; + will-change: transform; +} + + +.item-sliding-active-swipe-end .item-options-end .item-option-expandable { + transition-duration: .6s; + transition-property: padding-left; + + @include multi-dir() { + // scss-lint:disable PropertySpelling + padding-left: 90%; + } + + @include ltr() { + order: 1; + } + + @include rtl() { + order: -1; + } +} + +.item-sliding-active-swipe-start .item-options-start .item-option-expandable { + transition-duration: .6s; + transition-property: padding-right; + + @include multi-dir() { + // scss-lint:disable PropertySpelling + padding-right: 90%; + } + + @include ltr() { + order: -1; + } + + @include rtl() { + order: 1; } } diff --git a/core/src/components/item-sliding/item-sliding.tsx b/core/src/components/item-sliding/item-sliding.tsx index 9e761bac23..2516c3462c 100644 --- a/core/src/components/item-sliding/item-sliding.tsx +++ b/core/src/components/item-sliding/item-sliding.tsx @@ -7,30 +7,28 @@ const ELASTIC_FACTOR = 0.55; const enum ItemSide { None = 0, - Left = 1 << 0, - Right = 1 << 1, - Both = Left | Right + Start = 1 << 0, + End = 1 << 1, + Both = Start | End } const enum SlidingState { Disabled = 1 << 1, Enabled = 1 << 2, - Right = 1 << 3, - Left = 1 << 4, + End = 1 << 3, + Start = 1 << 4, - SwipeRight = 1 << 5, - SwipeLeft = 1 << 6, + SwipeEnd = 1 << 5, + SwipeStart = 1 << 6, } @Component({ tag: 'ion-item-sliding', - styleUrls: { - ios: 'item-sliding.ios.scss', - md: 'item-sliding.md.scss' - } + styleUrl: 'item-sliding.scss' }) export class ItemSliding { + private item: HTMLIonItemElement|null = null; private list: HTMLIonListElement|null = null; private openAmount = 0; @@ -120,10 +118,10 @@ export class ItemSliding { if (option.isEndSide()) { this.rightOptions = option; - sides |= ItemSide.Right; + sides |= ItemSide.End; } else { this.leftOptions = option; - sides |= ItemSide.Left; + sides |= ItemSide.Start; } } this.optsDirty = true; @@ -163,8 +161,8 @@ export class ItemSliding { let openAmount = this.initialOpenAmount - gesture.deltaX; switch (this.sides) { - case ItemSide.Right: openAmount = Math.max(0, openAmount); break; - case ItemSide.Left: openAmount = Math.min(0, openAmount); break; + case ItemSide.End: openAmount = Math.max(0, openAmount); break; + case ItemSide.Start: openAmount = Math.min(0, openAmount); break; case ItemSide.Both: break; case ItemSide.None: return; default: console.warn('invalid ItemSideFlags value', this.sides); break; @@ -201,9 +199,9 @@ export class ItemSliding { this.setOpenAmount(restingPoint, true); - if (this.state & SlidingState.SwipeRight && this.rightOptions) { + if (this.state & SlidingState.SwipeEnd && this.rightOptions) { this.rightOptions.fireSwipeEvent(); - } else if (this.state & SlidingState.SwipeLeft && this.leftOptions) { + } else if (this.state & SlidingState.SwipeStart && this.leftOptions) { this.leftOptions.fireSwipeEvent(); } } @@ -238,12 +236,12 @@ export class ItemSliding { if (openAmount > 0) { this.state = (openAmount >= (this.optsWidthRightSide + SWIPE_MARGIN)) - ? SlidingState.Right | SlidingState.SwipeRight - : SlidingState.Right; + ? SlidingState.End | SlidingState.SwipeEnd + : SlidingState.End; } else if (openAmount < 0) { this.state = (openAmount <= (-this.optsWidthLeftSide - SWIPE_MARGIN)) - ? SlidingState.Left | SlidingState.SwipeLeft - : SlidingState.Left; + ? SlidingState.Start | SlidingState.SwipeStart + : SlidingState.Start; } else { this.tmr = window.setTimeout(() => { this.state = SlidingState.Disabled; @@ -265,29 +263,27 @@ export class ItemSliding { class: { 'item-sliding': true, 'item-sliding-active-slide': (this.state !== SlidingState.Disabled), - 'item-sliding-active-options-right': !!(this.state & SlidingState.Right), - 'item-sliding-active-options-left': !!(this.state & SlidingState.Left), - 'item-sliding-active-swipe-right': !!(this.state & SlidingState.SwipeRight), - 'item-sliding-active-swipe-left': !!(this.state & SlidingState.SwipeLeft) + 'item-sliding-active-options-end': !!(this.state & SlidingState.End), + 'item-sliding-active-options-start': !!(this.state & SlidingState.Start), + 'item-sliding-active-swipe-end': !!(this.state & SlidingState.SwipeEnd), + 'item-sliding-active-swipe-start': !!(this.state & SlidingState.SwipeStart) } }; } render() { return ( - + ); diff --git a/core/src/components/item-sliding/test/basic/index.html b/core/src/components/item-sliding/test/basic/index.html index 7b4c689195..5570de674d 100644 --- a/core/src/components/item-sliding/test/basic/index.html +++ b/core/src/components/item-sliding/test/basic/index.html @@ -1,428 +1,429 @@ + Item Sliding - Basic + + - - - Item Sliding - Basic - - Dynamic - - - Reload - - - + + + Item Sliding - Basic + + Dynamic + + + Reload + + + - + -
- Toggle sliding - Toggle Dynamic Options - Close Opened Items -
+
+ Toggle sliding + Toggle Dynamic Options + Close Opened Items +
- -
- - - -

No Options

-

Should not error or swipe without options

- - - - - - - - One Line, dynamic option and text - - - - - - - - - - - - - - - - - - Two options, one dynamic option and text - - - - - - - - - - - - - - - - - - - - - - -

HubStruck Notifications

-

A new message from a repo in your network

-

Oceanic Next has joined your network

- - - 10:45 AM - - - - - - No close - - - - - - - - - - - - - - - - -

RIGHT side - no icons

-

Hey do you want to go to the game tonight?

- - - - Archive - Delete - - - - - - -

LEFT side - no icons

-

I think I figured out how to get more Mountain Dew

- - - - Archive - Delete - - - - - - - -

RIGHT/LEFT side - icons

-

I think I figured out how to get more Mountain Dew

- - - - - Unread - - - - - - Archive - - - Delete - - - - - - - -

RIGHT/LEFT side - icons (slot="start")

-

I think I figured out how to get more Mountain Dew

- - - - - Unread - - - - - - Archive - - - Delete - - - - - - - - - - One Line w/ Icon, div only text - - - - - Archive - - - - - - - - - - - - One Line w/ Avatar, div only text - - - - - More - - - Archive - - - Delete - - - - - - - - - One Line, dynamic icon-start option - - - - - - - - - - - - - - - - - - - - -

DOWNLOAD

-

Paragraph text.

- - - - - Archive - - - -
Download
- - - - - - - - - - - - - -

ion-item-sliding without options (no sliding)

-

Paragraph text.

- - - - - + +
+ + -

Normal ion-item (no sliding)

-

Paragraph text.

+

No Options

+

Should not error or swipe without options

 + - + + -

Normal button (no sliding)

+ One Line, dynamic option and text + + + + + + + + + + + + + + + + + + Two options, one dynamic option and text + + + + + + + + + + + + + + + + + + + + + + +

HubStruck Notifications

+

A new message from a repo in your network

+

Oceanic Next has joined your network

+ + + 10:45 AM + + + + + + No close + + + + + + + + + + + + + + + + +

RIGHT side - no icons

Hey do you want to go to the game tonight?

 -
+ + Archive + Delete + + - + + + +

LEFT side - no icons

+

I think I figured out how to get more Mountain Dew

+ + + + Archive + Delete + + - - - + + + diff --git a/core/src/components/item-sliding/test/lines/index.html b/core/src/components/item-sliding/test/lines/index.html index bf6afda097..bec0392699 100644 --- a/core/src/components/item-sliding/test/lines/index.html +++ b/core/src/components/item-sliding/test/lines/index.html @@ -6,6 +6,7 @@ Item Sliding - Lines + diff --git a/core/src/components/item-sliding/test/preview/index.html b/core/src/components/item-sliding/test/preview/index.html index 6864891bcd..aed840f80a 100644 --- a/core/src/components/item-sliding/test/preview/index.html +++ b/core/src/components/item-sliding/test/preview/index.html @@ -1,428 +1,429 @@ + Item Sliding + + - - - Item Sliding - - Dynamic - - - Reload - - - + + + Item Sliding + + Dynamic + + + Reload + + + - + -
- Toggle sliding - Toggle Dynamic Options - Close Opened Items -
+
+ Toggle sliding + Toggle Dynamic Options + Close Opened Items +
- -
- - - -

No Options

-

Should not error or swipe without options

- - - - - - - - One Line, dynamic option and text - - - - - - - - - - - - - - - - - - Two options, one dynamic option and text - - - - - - - - - - - - - - - - - - - - - - -

HubStruck Notifications

-

A new message from a repo in your network

-

Oceanic Next has joined your network

- - - 10:45 AM - - - - - - No close - - - - - - - - - - - - - - - - -

RIGHT side - no icons

-

Hey do you want to go to the game tonight?

- - - - Archive - Delete - - - - - - -

LEFT side - no icons

-

I think I figured out how to get more Mountain Dew

- - - - Archive - Delete - - - - - - - -

RIGHT/LEFT side - icons

-

I think I figured out how to get more Mountain Dew

- - - - - Unread - - - - - - Archive - - - Delete - - - - - - - -

RIGHT/LEFT side - icons (slot="start")

-

I think I figured out how to get more Mountain Dew

- - - - - Unread - - - - - - Archive - - - Delete - - - - - - - - - - One Line w/ Icon, div only text - - - - - Archive - - - - - - - - - - - - One Line w/ Avatar, div only text - - - - - More - - - Archive - - - Delete - - - - - - - - - One Line, dynamic icon-start option - - - - - - - - - - - - - - - - - - - - -

DOWNLOAD

-

Paragraph text.

- - - - - Archive - - - -
Download
- - - - - - - - - - - - - -

ion-item-sliding without options (no sliding)

-

Paragraph text.

- - - - - + +
+ + -

Normal ion-item (no sliding)

-

Paragraph text.

+

No Options

+

Should not error or swipe without options

 + - + + -

Normal button (no sliding)

+ One Line, dynamic option and text + + + + + + + + + + + + + + + + + + Two options, one dynamic option and text + + + + + + + + + + + + + + + + + + + + + + +

HubStruck Notifications

+

A new message from a repo in your network

+

Oceanic Next has joined your network

+ + + 10:45 AM + + + + + + No close + + + + + + + + + + + + + + + + +

RIGHT side - no icons

Hey do you want to go to the game tonight?

 -
+ + Archive + Delete + + - + + + +

LEFT side - no icons

+

I think I figured out how to get more Mountain Dew

+ + + + Archive + Delete + + - - - + + + diff --git a/core/src/components/item-sliding/test/standalone/index.html b/core/src/components/item-sliding/test/standalone/index.html index 729c6216ce..7ebad9aefe 100644 --- a/core/src/components/item-sliding/test/standalone/index.html +++ b/core/src/components/item-sliding/test/standalone/index.html @@ -6,6 +6,7 @@ Item Sliding - Standalone + diff --git a/core/src/components/item/item.ios.scss b/core/src/components/item/item.ios.scss index d044599ce6..c8cb9acf95 100644 --- a/core/src/components/item/item.ios.scss +++ b/core/src/components/item/item.ios.scss @@ -4,76 +4,30 @@ // iOS Item // -------------------------------------------------- -.item-ios { - @include padding-horizontal($item-ios-padding-start, null); - @include safe-area-padding-horizontal($item-ios-padding-start, null); - @include border-radius(0); - - position: relative; - +:host { font-family: $item-ios-font-family; font-size: $item-ios-font-size; - color: $item-ios-text-color; - background-color: $item-ios-background-color; - transition: background-color 200ms linear; + + --ion-color-base: var(--ion-item-background, transparent); + --ion-color-contrast: #{$item-ios-text-color}; + --ion-color-tint: #{$item-ios-background-color-active}; + --ion-color-shade: #{$item-ios-border-bottom-color}; + + --transition: background-color 200ms linear; + + --padding-start: #{$item-ios-padding-start}; + --inner-padding-end: #{$item-ios-padding-end / 2}; + --inner-border-width: #{0 0 $item-ios-border-bottom-width 0}; } -.item-ios.activated { - background-color: $item-ios-background-color-active; - transition-duration: 0ms; +:host(.activated) { + --transition: none; } -.item-ios h1 { - @include margin(0, 0, 2px); - - font-size: 24px; - font-weight: normal; -} - -.item-ios h2 { - @include margin(0, 0, 2px); - - font-size: 17px; - font-weight: normal; -} - -.item-ios h3, -.item-ios h4, -.item-ios h5, -.item-ios h6 { - @include margin(0, 0, 3px); - - font-size: 14px; - font-weight: normal; - line-height: normal; -} - -.item-ios p { - @include margin($item-ios-paragraph-margin-top, $item-ios-paragraph-margin-end, $item-ios-paragraph-margin-bottom, $item-ios-paragraph-margin-start); - - overflow: inherit; - - font-size: $item-ios-paragraph-font-size; - line-height: normal; - text-overflow: inherit; - color: $item-ios-paragraph-text-color; -} - -.item-ios h2:last-child, -.item-ios h3:last-child, -.item-ios h4:last-child, -.item-ios h5:last-child, -.item-ios h6:last-child, -.item-ios p:last-child { - @include margin(null, null, 0, null); -} - -.item-ios .item-inner { - @include padding-horizontal(null, $item-ios-padding-end / 2); - - @media screen and (orientation: landscape) { - @include safe-area-padding-horizontal(null, $item-ios-padding-end / 2); +@media screen and (orientation: landscape) { + .item-inner { + @include safe-area-padding-horizontal(var(--inner-padding-start), var(--inner-padding-end)); } } @@ -81,54 +35,48 @@ // iOS Item Lines // -------------------------------------------------- -.item-ios, -.item-ios .item-inner { - border-bottom-width: 0; - border-bottom-style: $item-ios-border-bottom-style; - border-bottom-color: $item-ios-border-bottom-color; -} - -// Default item has inset border bottom -.item-ios .item-inner { - border-bottom-width: $item-ios-border-bottom-width; -} - // Full lines - apply the border to the item // Inset lines - apply the border to the item inner -.item-ios-lines-full, -.item-ios-lines-inset .item-inner { - border-bottom-width: $item-ios-border-bottom-width; +:host(.item-lines-full) { + --border-width: #{0 0 $item-ios-border-bottom-width 0}; +} + +:host(.item-lines-inset) { + --inner-border-width: #{0 0 $item-ios-border-bottom-width 0}; } // Full lines - remove the border from the item inner (inset list items) // Inset lines - remove the border on the item (full list items) // No lines - remove the border on both (full / inset list items) -.item-ios-lines-inset, -.item-ios-lines-full .item-inner, -.item-ios-lines-none, -.item-ios-lines-none .item-inner { - border-bottom-width: 0; +:host(.item-lines-inset), +:host(.item-lines-none) { + --border-width: 0; +} + +:host(.item-lines-full), +:host(.item-lines-none) { + --inner-border-width: 0; } // iOS Item Slots // -------------------------------------------------- -.item-ios [slot="start"] { +::slotted(:not(.interactive)[slot="start"]) { @include margin($item-ios-slot-start-margin-top, $item-ios-slot-start-margin-end, $item-ios-slot-start-margin-bottom, $item-ios-slot-start-margin-start); } -.item-ios [slot="end"] { +::slotted(:not(.interactive)[slot="end"]) { @include margin($item-ios-slot-end-margin-top, $item-ios-slot-end-margin-end, $item-ios-slot-end-margin-bottom, $item-ios-slot-end-margin-start); } -.item-ios > ion-icon[slot="start"], -.item-ios > ion-icon[slot="end"] { +::slotted(ion-icon[slot="start"]), +::slotted(ion-icon[slot="end"]) { @include margin($item-ios-icon-slot-margin-top, $item-ios-icon-slot-margin-end, $item-ios-icon-slot-margin-bottom, $item-ios-icon-slot-margin-start); } -.item-ios.item-label-stacked [slot="end"], -.item-ios.item-label-floating [slot="end"] { +:host(.item-label-stacked) ::slotted([slot="end"]), +:host(.item-label-floating) ::slotted([slot="end"]) { @include margin($item-ios-label-slot-end-margin-top, $item-ios-label-slot-end-margin-end, $item-ios-label-slot-end-margin-bottom, $item-ios-label-slot-end-margin-start); } @@ -136,86 +84,110 @@ // iOS Item Button // -------------------------------------------------- -.item-ios .button-small-ios { - @include padding(0, .5em); - - height: 24px; - +::slotted(.button-small) { font-size: 13px; + + --padding-top: 0; + --padding-bottom: 0; + --padding-start: .5em; + --padding-end: .5em; + + --height: 24px; } -.item-ios .button-small-ios ion-icon[slot="icon-only"] { - @include padding(0, 1px); -} +// TODO +// .item-ios .button-small-ios ion-icon[slot="icon-only"] { +// @include padding(0, 1px); +// } // iOS Item Avatar & Thumbnail // -------------------------------------------------- -.item-ios ion-avatar { +::slotted(ion-avatar) { width: $item-ios-avatar-width; height: $item-ios-avatar-height; } -.item-ios ion-thumbnail { +::slotted(ion-thumbnail) { width: $item-ios-thumbnail-width; height: $item-ios-thumbnail-height; } -.item-ios ion-avatar[slot="end"], -.item-ios ion-thumbnail[slot="end"] { +::slotted(ion-avatar[slot="end"]), +::slotted(ion-thumbnail[slot="end"]) { @include margin(($item-ios-padding-end / 2)); } - // iOS Item Detail Push // -------------------------------------------------- -// Only show the forward arrow icon if true -.item-ios.item-detail-push .item-inner { - $safe-area-position: calc(#{$item-ios-padding-end - 2} + constant(safe-area-inset-right)); - $safe-area-position-env: calc(#{$item-ios-padding-end - 2} + env(safe-area-inset-right)); +.item-detail-icon { + font-size: 20px; - @include item-push-svg-url($item-ios-detail-push-color); - @include padding-horizontal(null, 32px); - @include background-position(end, $item-ios-padding-end - 2, center); - @include background-position(end, $safe-area-position, center); - @include background-position(end, $safe-area-position-env, center); - - background-repeat: no-repeat; - background-size: 14px 14px; + color: var(--detail-push-color); } -// Generate iOS Item and Item Divider Colors +// TODO: MOVE FROM RADIO +// iOS Radio Item Label: Checked +// ----------------------------------------- + +// :host(.item-radio-checked) ::slotted(ion-label) { +// color: $radio-ios-color-on; +// } + + +:host(.item-radio) ::slotted(ion-label), +:host(.item-toggle) ::slotted(ion-label) { + @include margin-horizontal(0, null); +} + + +// iOS Stacked & Floating Inputs // -------------------------------------------------- -@each $color-name, $color-value in $colors-ios { - $color-base: ion-color($colors-ios, $color-name, base, ios); - $color-contrast: ion-color($colors-ios, $color-name, contrast, ios); - $color-shade: ion-color($colors-ios, $color-name, shade, ios); - $color-tint: ion-color($colors-ios, $color-name, tint, ios); - - .item-ios-#{$color-name} { - border-bottom-color: $color-shade; - - color: $color-contrast; - background-color: $color-base; - - .item-inner { - border-bottom-color: $color-shade; - } - - p { - color: $color-contrast; - } - - &.activated { - background-color: $color-tint; - } - } - - .item-ios-#{$color-name}.item-detail-push .item-inner { - @include item-push-svg-url($color-shade); - } +:host(.item-label-stacked) ::slotted(ion-input), +:host(.item-label-floating) ::slotted(ion-input), +:host(.item-label-stacked) ::slotted(ion-textarea), +:host(.item-label-floating) ::slotted(ion-textarea) { + --padding-top: 8px; + --padding-bottom: 8px; + --padding-start: 0; } + + +// TODO +// .item-ios.item-label-stacked .label-ios + .input + .cloned-input, +// .item-ios.item-label-floating .label-ios + .input + .cloned-input { +// @include margin-horizontal(0, null); +// } + +// FROM TEXTAREA +// iOS Stacked & Floating Textarea +// -------------------------------------------------- + +// TODO +// .item-ios.item-label-stacked .label-ios + .input + .cloned-input, +// .item-ios.item-label-floating .label-ios + .input + .cloned-input { +// @include margin-horizontal(0, null); +// } + + +// iOS Input After Label +// -------------------------------------------------- + +// .label-ios + .input .native-input, +// .label-ios + .input + .cloned-input { +// @include margin-horizontal($input-ios-by-label-margin-start, null); +// } + +// iOS Textarea After Label +// -------------------------------------------------- + +// .label-ios + ion-textarea .native-textarea, +// .label-ios + .input + .cloned-input { +// @include margin-horizontal($textarea-ios-by-label-margin-start, null); + +// width: calc(100% - (#{$item-ios-padding-end} / 2) - #{$item-ios-padding-start}); +// } diff --git a/core/src/components/item/item.ios.vars.scss b/core/src/components/item/item.ios.vars.scss index 096e2d5721..e69bed6799 100644 --- a/core/src/components/item/item.ios.vars.scss +++ b/core/src/components/item/item.ios.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Font family of the item -$item-ios-font-family: $font-family-ios-base !default; +$item-ios-font-family: $font-family-base !default; /// @prop - Font size of the item $item-ios-font-size: 17px !default; @@ -25,7 +25,7 @@ $item-ios-paragraph-margin-start: $item-ios-paragraph-margin-end !def $item-ios-paragraph-font-size: 14px !default; /// @prop - Color of the item paragraph -$item-ios-paragraph-text-color: $text-ios-color-step-600 !default; +$item-ios-paragraph-text-color: $text-color-step-600 !default; /// @prop - Width of the avatar in the item $item-ios-avatar-width: 36px !default; @@ -43,13 +43,13 @@ $item-ios-thumbnail-height: $item-ios-thumbnail-width !default; $item-ios-detail-push-color: $item-ios-border-color !default; /// @prop - Padding top for the item content -$item-ios-padding-top: 11px !default; +$item-ios-padding-top: 10px !default; /// @prop - Padding end for the item content $item-ios-padding-end: 16px !default; /// @prop - Padding bottom for the item content -$item-ios-padding-bottom: 11px !default; +$item-ios-padding-bottom: 10px !default; /// @prop - Padding start for the item content $item-ios-padding-start: 16px !default; @@ -71,7 +71,7 @@ $item-ios-border-bottom: $item-ios-border-bottom-width $item // -------------------------------------------------- /// @prop - Margin top for the start slot -$item-ios-slot-start-margin-top: 8px !default; +$item-ios-slot-start-margin-top: 2px !default; /// @prop - Margin end for the start slot $item-ios-slot-start-margin-end: $item-ios-padding-end !default; @@ -95,19 +95,19 @@ $item-ios-slot-end-margin-bottom: $item-ios-slot-end-margin-top !defa $item-ios-slot-end-margin-start: $item-ios-slot-end-margin-end !default; /// @prop - Margin top for an icon in the start/end slot -$item-ios-icon-slot-margin-top: 9px !default; +$item-ios-icon-slot-margin-top: 7px !default; /// @prop - Margin end for an icon in the start/end slot $item-ios-icon-slot-margin-end: null !default; /// @prop - Margin bottom for an icon in the start/end slot -$item-ios-icon-slot-margin-bottom: 8px !default; +$item-ios-icon-slot-margin-bottom: 7px !default; /// @prop - Margin start for an icon in the start/end slot $item-ios-icon-slot-margin-start: 0 !default; /// @prop - Margin top for the end slot inside of a floating/stacked label -$item-ios-label-slot-end-margin-top: 6px !default; +$item-ios-label-slot-end-margin-top: 7px !default; /// @prop - Margin end for the end slot inside of a floating/stacked label $item-ios-label-slot-end-margin-end: null !default; diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss index 827cb083ac..74c248ae66 100644 --- a/core/src/components/item/item.md.scss +++ b/core/src/components/item/item.md.scss @@ -4,145 +4,97 @@ // Material Design Item // -------------------------------------------------- -.item-md { - @include padding-horizontal($item-md-padding-start, null); - - position: relative; - +:host { font-family: $item-md-font-family; font-size: $item-md-font-size; font-weight: normal; text-transform: none; - color: $item-md-text-color; - background-color: $item-md-background-color; - box-shadow: none; - transition: background-color 300ms cubic-bezier(.4, 0, .2, 1); + --ion-color-base: var(--ion-item-background, transparent); + --ion-color-contrast: #{$item-md-text-color}; + --ion-color-tint: #{$item-md-background-color-active}; + --ion-color-shade: #{$item-md-border-bottom-color}; + + --transition: background-color 300ms cubic-bezier(.4, 0, .2, 1); + + --padding-start: #{$item-md-padding-start}; + --inner-padding-end: #{$item-md-padding-end / 2}; + + --padding-start: #{$item-md-padding-start}; } -.item-md .item-inner { - @include padding-horizontal(null, ($item-md-padding-end / 2)); -} - -.item-md.activated { - background-color: $item-md-background-color-active; -} - -.item-md h1 { - @include margin(0, 0, 2px); - - font-size: 24px; - font-weight: normal; -} - -.item-md h2 { - @include margin(2px, 0); - - font-size: 16px; - font-weight: normal; -} - -.item-md h3, -.item-md h4, -.item-md h5, -.item-md h6 { - @include margin(2px, 0); - - font-size: 14px; - font-weight: normal; - line-height: normal; -} - -.item-md p { - @include margin(0, 0, 2px); - - overflow: inherit; - - font-size: 14px; - line-height: normal; - text-overflow: inherit; - color: $item-md-paragraph-text-color; -} - - // Material Design Item Lines // -------------------------------------------------- -// Default item has no border bottom -.item-md, -.item-md .item-inner { - border-bottom-width: 0; - border-bottom-style: $item-md-border-bottom-style; - border-bottom-color: $item-md-border-bottom-color; -} - // Default input items have a border -.item-md.item-interactive { - border-bottom-width: $item-md-border-bottom-width; +:host(.item-interactive) { + --border-width: #{0 0 $item-md-border-bottom-width 0}; } // Full lines - apply the border to the item // Inset lines - apply the border to the item inner -.item-md-lines-full, -.item-md-lines-inset .item-inner { - border-bottom-width: $item-md-border-bottom-width; +:host(.item-lines-full) { + --border-width: #{0 0 $item-md-border-bottom-width 0}; +} + +:host(.item-lines-inset) { + --inner-border-width: #{0 0 $item-md-border-bottom-width 0}; } // Full lines - remove the border from the item inner (inset list items) // Inset lines - remove the border on the item (full list items) // No lines - remove the border on both (full / inset list items) -.item-md-lines-inset, -.item-md-lines-full .item-inner, -.item-md-lines-none, -.item-md-lines-none .item-inner { - border-bottom-width: 0; +:host(.item-lines-inset), +:host(.item-lines-none) { + --border-width: 0; } +:host(.item-lines-full), +:host(.item-lines-none){ + --inner-border-width: 0; +} // Material Design Item Detail Push // -------------------------------------------------- -// Only show the forward arrow icon if true -.item-md.item-detail-push .item-inner { - @include item-push-svg-url($item-md-detail-push-color); - @include padding-horizontal(null, 32px); - @include background-position(end, $item-md-padding-end - 2, center); +.item-detail-icon { + font-size: 20px; - background-repeat: no-repeat; - background-size: 14px 14px; + color: var(--detail-push-color); } // Material Design Item Slots // -------------------------------------------------- -.item-md [slot="start"], -.item-md [slot="end"] { +::slotted(:not(.interactive)[slot="start"]), +::slotted(:not(.interactive)[slot="end"]) { @include margin($item-md-slot-margin-top, $item-md-slot-margin-end, $item-md-slot-margin-bottom, $item-md-slot-margin-start); } -.item-md > ion-icon[slot="start"], -.item-md > ion-icon[slot="end"] { +::slotted(ion-icon[slot="start"]), +::slotted(ion-icon[slot="end"]) { @include margin($item-md-icon-slot-margin-top, $item-md-icon-slot-margin-end, $item-md-icon-slot-margin-bottom, $item-md-icon-slot-margin-start); } -.item-md > ion-icon[slot="start"] + .item-inner, -.item-md > ion-icon[slot="start"] + .item-interactive { +// TODO +::slotted(ion-icon[slot="start"]) + .item-inner, +::slotted(ion-icon[slot="start"]) + .item-interactive { @include margin-horizontal($item-md-padding-start + ($item-md-padding-start / 2), null); } -.item-md ion-avatar[slot="start"], -.item-md ion-thumbnail[slot="start"] { +::slotted(ion-avatar[slot="start"]), +::slotted(ion-thumbnail[slot="start"]) { @include margin(($item-md-padding-end / 2), $item-md-padding-end, ($item-md-padding-end / 2), 0); } -.item-md ion-avatar[slot="end"], -.item-md ion-thumbnail[slot="end"] { +::slotted(ion-avatar[slot="end"]), +::slotted(ion-thumbnail[slot="end"]) { @include margin(($item-md-padding-end / 2)); } -.item-md.item-label-stacked [slot="end"], -.item-md.item-label-floating [slot="end"] { +:host(.item-label-stacked) ::slotted([slot="end"]), +:host(.item-label-floating) ::slotted([slot="end"]) { @include margin($item-md-label-slot-end-margin-top, $item-md-label-slot-end-margin-end, $item-md-label-slot-end-margin-bottom, $item-md-label-slot-end-margin-start); } @@ -150,23 +102,27 @@ // Material Design Item Button // -------------------------------------------------- -.item-md .button-small-md { - @include padding(0, .6em); - - height: 25px; - +::slotted(.button-small-md) { font-size: 12px; + + --padding-top: 0; + --padding-bottom: 0; + --padding-start: .6em; + --padding-end: .6em; + + --height: 25px; } -.item-md .button-small-md ion-icon[slot="icon-only"] { - @include padding(0); +// TODO, review +::slotted(.button-small-md) ion-icon[slot="icon-only"] { + @include padding(0); } // Material Design Item Avatar // -------------------------------------------------- -.item-md ion-avatar { +::slotted(ion-avatar) { width: $item-md-avatar-width; height: $item-md-avatar-height; } @@ -175,41 +131,40 @@ // Material Design Item Thumbnail // -------------------------------------------------- -.item-md ion-thumbnail { +::slotted(ion-thumbnail) { width: $item-md-thumbnail-width; height: $item-md-thumbnail-height; } +:host(.item-toggle) ::slotted(ion-label), +:host(.item-radio) ::slotted(ion-label) { + @include margin-horizontal(0, null); +} -// Generate Material Design Item and Item Divider Colors + +// Material Design Radio Item Label: Checked +// ----------------------------------------- + +// .item-radio-checked.item-md ion-label { +// color: $radio-md-color-on; +// } + + +// Material Design Stacked & Floating Inputs // -------------------------------------------------- -@each $color-name, $color-value in $colors-md { - $color-base: ion-color($colors-md, $color-name, base, md); - $color-contrast: ion-color($colors-md, $color-name, contrast, md); - $color-shade: ion-color($colors-md, $color-name, shade, md); - $color-tint: ion-color($colors-md, $color-name, tint, md); - - .item-md-#{$color-name} { - border-bottom-color: $color-shade; - - color: $color-contrast; - background-color: $color-base; - - .item-inner { - border-bottom-color: $color-shade; - } - - p { - color: $color-contrast; - } - - &.activated { - background-color: $color-tint; - } - } - - .item-md-#{$color-name}.item-detail-push .item-inner { - @include item-push-svg-url($color-shade); - } +// TODO: refactor +:host(.item-label-stacked) ::slotted(ion-input), +:host(.item-label-floating) ::slotted(ion-input), +:host(.item-label-stacked) ::slotted(ion-textarea), +:host(.item-label-floating) ::slotted(ion-textarea) { + --padding-top: 8px; + --padding-bottom: 8px; + --padding-start: 0; } + + +:host(:not(.item-label)) ::slotted(ion-input), +:host(:not(.item-label)) ::slotted(ion-textarea) { + --padding-start: 0; +} \ No newline at end of file diff --git a/core/src/components/item/item.md.vars.scss b/core/src/components/item/item.md.vars.scss index 677381093d..344034cb96 100644 --- a/core/src/components/item/item.md.vars.scss +++ b/core/src/components/item/item.md.vars.scss @@ -4,10 +4,10 @@ // -------------------------------------------------- /// @prop - Color of the item paragraph -$item-md-paragraph-text-color: $text-md-color-step-400 !default; +$item-md-paragraph-text-color: $text-color-step-400 !default; /// @prop - Font family of the item -$item-md-font-family: $font-family-md-base !default; +$item-md-font-family: $font-family-base !default; /// @prop - Font size of the item $item-md-font-size: 16px !default; @@ -28,13 +28,13 @@ $item-md-thumbnail-height: $item-md-thumbnail-width !default; $item-md-detail-push-color: $item-md-border-color !default; /// @prop - Padding top for the item content -$item-md-padding-top: 13px !default; +$item-md-padding-top: 11px !default; /// @prop - Padding end for the item content $item-md-padding-end: 16px !default; /// @prop - Padding bottom for the item content -$item-md-padding-bottom: 13px !default; +$item-md-padding-bottom: 11px !default; /// @prop - Padding start for the item content $item-md-padding-start: 16px !default; @@ -56,7 +56,7 @@ $item-md-border-bottom: $item-md-border-bottom-width $item-m // -------------------------------------------------- /// @prop - Margin top for the start/end slot -$item-md-slot-margin-top: 0 !default; +$item-md-slot-margin-top: 2px !default; /// @prop - Margin end for the start/end slot $item-md-slot-margin-end: ($item-md-padding-end / 2) !default; @@ -68,13 +68,13 @@ $item-md-slot-margin-bottom: $item-md-slot-margin-top !default; $item-md-slot-margin-start: 0 !default; /// @prop - Margin top for an icon in the start/end slot -$item-md-icon-slot-margin-top: 11px !default; +$item-md-icon-slot-margin-top: 3px !default; /// @prop - Margin end for an icon in the start/end slot $item-md-icon-slot-margin-end: null !default; /// @prop - Margin bottom for an icon in the start/end slot -$item-md-icon-slot-margin-bottom: 10px !default; +$item-md-icon-slot-margin-bottom: 2px !default; /// @prop - Margin start for an icon in the start/end slot $item-md-icon-slot-margin-start: 0 !default; diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss index 084949fe56..4ced74382d 100644 --- a/core/src/components/item/item.scss +++ b/core/src/components/item/item.scss @@ -3,18 +3,76 @@ // Item // -------------------------------------------------- -ion-item { +:host { @include font-smoothing(); display: block; + + text-decoration: none; + + color: #{current-color(contrast)}; + + box-sizing: border-box; + + --min-height: #{$item-min-height}; + --background: #{current-color(base)}; + --background-active: #{current-color(tint)}; + --color: #{current-color(contrast)}; + --detail-push-color: #{current-color(shade)}; + + --border-radius: 0; + --border-width: 0; + --border-style: solid; + --border-color: #{current-color(shade)}; + + --inner-border-width: 0; + + --padding-top: 0; + --padding-bottom: 0; + --padding-end: 0; + --padding-start: 0; + + --inner-padding-top: 0; + --inner-padding-bottom: 0; + --inner-padding-start: 0; + --inner-padding-end: 0; + + --box-shadow: none; + --inner-box-shadow: none; + + --highlight-color-focus: #{ion-color(primary, base)}; + --highlight-color-valid: #{ion-color(success, base)}; + --highlight-color-invalid: #{ion-color(danger, base)}; + + --highlight-height: 2px; } -.item { - @include border-radius(0); +:host(.activated) { + --background: var(--background-active); +} + +:host(.item-disabled) { + cursor: default; + opacity: .3; + + pointer-events: none; +} + + +.item-native { + @include padding( + var(--padding-top), + var(--padding-end), + var(--padding-bottom), + var(--padding-start) + ); + @include border-radius(var(--border-radius)); + @include margin(0); - @include padding(0); @include text-align(initial); + box-sizing: border-box; + position: relative; display: flex; overflow: hidden; @@ -22,20 +80,43 @@ ion-item { justify-content: space-between; width: 100%; - min-height: $item-min-height; + min-height: var(--min-height); + + border-width: var(--border-width); + border-style: var(--border-style); + border-color: var(--border-color); - border: 0; outline: none; - - font-weight: normal; - line-height: normal; - text-decoration: none; + font-family: inherit; + font-size: inherit; + font-weight: inherit; + text-decoration: inherit; + text-transform: inherit; color: inherit; + + background-color: var(--background); + box-shadow: var(--box-shadow); + transition: var(--transition); +} + +.item-state { + @include position(null, 0, 0, 0); + + position: absolute; + + height: var(--highlight-height); } .item-inner { @include margin(0); - @include padding(0); + @include padding( + var(--inner-padding-top), + var(--inner-padding-end), + var(--inner-padding-bottom), + var(--inner-padding-start) + ); + + box-sizing: border-box; display: flex; overflow: hidden; @@ -47,10 +128,15 @@ ion-item { min-height: inherit; - border: 0; + border-width: var(--inner-border-width); + border-style: var(--border-style); + border-color: var(--border-color); + + box-shadow: var(--inner-box-shadow); } .input-wrapper { + box-sizing: border-box; display: flex; overflow: hidden; @@ -62,39 +148,68 @@ ion-item { text-overflow: ellipsis; } -ion-item-group { - display: block; -} - -[vertical-align-top], -.input.item { +:host([vertical-align-top]), +:host(.item-input) { align-items: flex-start; } -.item-cover { - @include position(0, null, null, 0); - - position: absolute; - - width: 100%; - height: 100%; - - background: transparent; - cursor: pointer; -} - -.item > ion-icon, -.item-inner > ion-icon { +::slotted(ion-icon) { font-size: 1.6em; } -.item .button { - @include margin(0); +::slotted(ion-button) { + --margin-top: 0; + --margin-bottom: 0; + --margin-start: 0; + --margin-end: 0; + + z-index: 1; } -.item-disabled { - cursor: default; - opacity: .4; - pointer-events: none; +// FROM LABEL +:host(.item-label-stacked) .input-wrapper, +:host(.item-label-floating) .input-wrapper { + flex: 1; + flex-direction: column; +} + +:host(.item-label-stacked)::slotted(ion-select), +:host(.item-label-floating)::slotted(ion-select) { + align-self: stretch; + + max-width: 100%; +} + + + + +// TODO: FROM textarea + +:host(.item-textarea) { + align-items: stretch; +} + +// :host(.item-input-has-focus) a, +// :host(.item-input-has-focus) button, +// :host(.item-input-has-focus) textarea { +// pointer-events: auto; +// } + + +// FROM SELECT +:host(.item-multiple-inputs) ::slotted(ion-select) { + position: relative; +} + +:host(.item-label-stacked) ::slotted(ion-select), +:host(.item-label-floating) ::slotted(ion-select) { + max-width: 100%; +} + +// Item Reorder +// -------------------------------------------------- + +::slotted(ion-reorder[slot]) { + @include margin(0, null); } diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx index 991f81670a..c68ac6281c 100644 --- a/core/src/components/item/item.tsx +++ b/core/src/components/item/item.tsx @@ -1,17 +1,14 @@ import { Component, Element, Listen, Prop } from '@stencil/core'; import { Color, CssClassMap, Mode, RouterDirection } from '../../interface'; -import { - createThemedClasses, - getElementClassMap, - openURL -} from '../../utils/theme'; +import { createColorClasses, hostContext, openURL } from '../../utils/theme'; @Component({ tag: 'ion-item', styleUrls: { ios: 'item.ios.scss', md: 'item.md.scss' - } + }, + shadow: true }) export class Item { private itemStyles: { [key: string]: CssClassMap } = {}; @@ -43,6 +40,11 @@ export class Item { */ @Prop() detail?: boolean; + /** + * The icon to use when `detail` is set to `true`. Defaults to `"ios-arrow-forward"`. + */ + @Prop() detailIcon = 'ios-arrow-forward'; + /** * If true, the user cannot interact with the item. Defaults to `false`. */ @@ -59,12 +61,15 @@ export class Item { */ @Prop() lines?: 'full' | 'inset' | 'none'; + @Prop() state?: 'valid' | 'unvalid' | 'focus'; + /** * When using a router, it specifies the transition direction when navigating to * another page using `href`. */ @Prop() routerDirection?: RouterDirection; + @Listen('ionStyle') itemStyle(ev: UIEvent) { ev.stopPropagation(); @@ -101,47 +106,53 @@ export class Item { } } - render() { + private isClickable(): boolean { + return !!(this.href || this.el.onclick || this.button); + } + + hostData() { const childStyles = {}; for (const key in this.itemStyles) { Object.assign(childStyles, this.itemStyles[key]); } - const clickable = !!(this.href || this.el.onclick || this.button); - - const TagType = clickable ? (this.href ? 'a' : 'button') : 'div'; - - const attrs = - TagType === 'button' ? { type: 'button' } : { href: this.href }; - - const showDetail = - this.detail != null ? this.detail : this.mode === 'ios' && clickable; - - const themedClasses = { - ...childStyles, - ...createThemedClasses(this.mode, this.color, 'item'), - ...getElementClassMap(this.el.classList), - 'item-disabled': this.disabled, - 'item-detail-push': showDetail, - [`item-lines-${this.lines}`]: !!this.lines, - [`item-${this.mode}-lines-${this.lines}`]: !!this.lines + return { + 'tappable': this.isClickable(), + class: { + ...childStyles, + ...createColorClasses(this.color), + [`item-lines-${this.lines}`]: !!this.lines, + 'item-disabled': this.disabled, + 'in-list': hostContext('ion-list', this.el), + 'item': true + } }; + } + + render() { + const { href, detail, mode, win, state, detailIcon, el, routerDirection } = this; + + const clickable = this.isClickable(); + const TagType = clickable ? (href ? 'a' : 'button') : 'div'; + const attrs = TagType === 'button' ? { type: 'button' } : { href }; + const showDetail = detail != null ? detail : mode === 'ios' && clickable; return ( openURL(this.win, this.href, ev, this.routerDirection)} + class="item-native" + onClick={ev => openURL(win, href, ev, routerDirection)} >
- +
- + + { showDetail && }
- {clickable && - this.mode === 'md' && } + { state &&
} + { clickable && mode === 'md' && } ); } diff --git a/core/src/components/item/readme.md b/core/src/components/item/readme.md index 6f19896224..a3bef8a8bd 100644 --- a/core/src/components/item/readme.md +++ b/core/src/components/item/readme.md @@ -67,6 +67,13 @@ If true, a detail arrow will appear on the item. Defaults to `false` unless the is `ios` and an `href`, `onclick` or `button` property is present. +#### detailIcon + +string + +The icon to use when `detail` is set to `true`. Defaults to `"ios-arrow-forward"`. + + #### disabled boolean @@ -105,6 +112,11 @@ When using a router, it specifies the transition direction when navigating to another page using `href`. +#### state + +string + + ## Attributes #### button @@ -129,6 +141,13 @@ If true, a detail arrow will appear on the item. Defaults to `false` unless the is `ios` and an `href`, `onclick` or `button` property is present. +#### detail-icon + +string + +The icon to use when `detail` is set to `true`. Defaults to `"ios-arrow-forward"`. + + #### disabled boolean @@ -167,6 +186,11 @@ When using a router, it specifies the transition direction when navigating to another page using `href`. +#### state + +string + + ---------------------------------------------- diff --git a/core/src/components/item/test/basic/index.html b/core/src/components/item/test/basic/index.html index 3fd2ee66de..23b4cb78b9 100644 --- a/core/src/components/item/test/basic/index.html +++ b/core/src/components/item/test/basic/index.html @@ -6,109 +6,114 @@ Item - Basic + - - - Item - Basic - - - - - - - - List Header - - - - - Item - - - - - Item Divider - - - - - Item - - - + + + Item - Basic + + + + + + + List Header + + - Plain Ol' div with some text + Item - + + + Item Divider + + - Single line text that should have ellipses when it doesn't all fit in the item + Item + - - - Single line item with no lines - - + + + Plain Ol' div with some text + + - - - Multiline text that should wrap when it is too long to fit on one line in the item. Attribute on .item - - + + + Single line text that should have ellipses when it doesn't all fit in the item + + - - -

H1 Title Text

-

Paragraph line 1

- - + + + Single line item with no lines + + - - -

H2 Title Text

-

Paragraph line 1

- - + + + Multiline text that should wrap when it is too long to fit on one line in the item. Attribute on .item + + - - -

H3 Title Text

-

Paragraph line 1

-

Paragraph line 2 secondary

- - + + +

H1 Title Text

+

Paragraph line 1

+ + - - -

H4 Title Text

-

Paragraph line 1

-

Paragraph line 2

-

Paragraph line 3

- - + + +

H2 Title Text

+

Paragraph line 1

+ + - - - Item using inner ion-label - - + + + +

H3 Title Text

+ +

Paragraph line 1

+ +

Paragraph line 2 secondary

+ + + - + + +

H4 Title Text

+

Paragraph line 1

+

Paragraph line 2

+

Paragraph line 3

+ + - - - Footer - - + + + Item using inner ion-label + + + + + + + + Footer + + diff --git a/core/src/components/item/test/buttons/index.html b/core/src/components/item/test/buttons/index.html index dafbaeea9e..122c4b69a5 100644 --- a/core/src/components/item/test/buttons/index.html +++ b/core/src/components/item/test/buttons/index.html @@ -1,137 +1,141 @@ + Item - Buttons + + - - - Items as Links/Buttons - - + + + Items as Links/Buttons + + - - - a[ion-item] - + + + a[ion-item] + - - a[ion-item].activated - + + a[ion-item].activated + - - a[ion-item] secondary - + + a[ion-item] secondary + - - button[ion-item] - + + button[ion-item] + - - button[ion-item].activated - + + button[ion-item].activated + - - button[ion-item] danger - + + button[ion-item] danger + - - Default - Inner Buttons - Outline - + + Default + Inner Buttons + Outline + - - - - Left Icon + + + + Left Icon + + disabled left icon buttons + + + Left Icon + + + + + + Right Icon + + + right icon buttons + + Right Icon + + + + + + + + + icon only buttons default + + + + + + + ion-item disabled right icon/text button large + + + Refresh + + + + + + + Settings + + ion-item left fill="clear" button small + + + + ion-item right fill="clear" button + + Edit + + + + + + This is multiline text that has a long description of about how the text is really long and a + link. + + View + + + + + + + +

Avatar Start

+ + 260k + + + +
+ + - disabled left icon buttons - - - Left Icon + + - +
+ - - - Right Icon - - - right icon buttons - - Right Icon - - - - - - - - - icon only buttons default - - - - - - - ion-item disabled right icon/text button large - - - Refresh - - - - - - - Settings - - ion-item left fill="clear" button small - - - - ion-item right fill="clear" button - - Edit - - - - - - This is multiline text that has a - long description of about how the text is really long - and a link. - - View - - - - - - -

Avatar Start

 - 260k - - - -
- - - - - - -
- - - + @@ -151,4 +155,5 @@ } + diff --git a/core/src/components/item/test/colors/index.html b/core/src/components/item/test/colors/index.html index 986aa2455f..e3d6b7f484 100644 --- a/core/src/components/item/test/colors/index.html +++ b/core/src/components/item/test/colors/index.html @@ -1,114 +1,123 @@ + Item - Colors + + - - - Item Colors - - + + + Item Colors + + - - - - -

Heading

-

Paragraph

-

Secondary paragraph

 - - + + + + +

Heading

+

Paragraph

+ +

Secondary paragraph

+ + + - - -

Heading

-

Paragraph

- - + + +

Heading

+

Paragraph

+ + - - - a[ion-item] danger - - + + + a[ion-item] danger + + - - - a[ion-item].activated danger - - + + + a[ion-item].activated danger + + - - - button[ion-item] - - + + + button[ion-item] + + - - - button[ion-item].activated secondary - - + + + button[ion-item].activated secondary + + - - Dark - -

Heading

-

Normal paragraph

- - Outline - + + Dark + +

Heading

+

Normal paragraph

+ + Outline + - - - - Left Icon - - - left icon buttons -

Primary paragraph

 - - + + + + Left Icon + + + left icon buttons + +

Primary paragraph

+ + + - - - - Left Icon - - - disabled left icon buttons -

Primary paragraph

 - - + + + + Left Icon + + + disabled left icon buttons + +

Primary paragraph

+ + + - - - Right Icon - - - - right icon buttons - - - Right Icon - - - + + + Right Icon + + + + right icon buttons + + + Right Icon + + + - - - a ion-item disabled right icon/text button large -

Default paragraph

- - - - + + + a ion-item disabled right icon/text button large +

Default paragraph

+ + + + @@ -118,4 +127,5 @@ } + diff --git a/core/src/components/item/test/dividers/index.html b/core/src/components/item/test/dividers/index.html index d3e8caf9e6..ce0c629aed 100644 --- a/core/src/components/item/test/dividers/index.html +++ b/core/src/components/item/test/dividers/index.html @@ -6,146 +6,141 @@ Item - Dividers + - - - Item Divider - - + + + Item Divider + + - + + + + Divider by itself + + + + - Divider by itself + Divider in List - - - - Divider in List - - + + + Danger Divider in List + + + - - - Danger Divider in List - - - + + + + Divider in Item Group + + + + + Secondary Divider in Item Group + + + - - - - Divider in Item Group - - - - - Secondary Divider in Item Group - - - + + + + +

Secondary header

+ + Plain Ol' div with some text + + + - - - -

Secondary header

 - Plain Ol' div with some text - - - + + + + Item Divider + + Danger Span + + + button + - - - - Item Divider - - Danger Span - - - button - + + + Multiline text that should wrap when it is too long to fit on one line in the item. Attribute on .item + + + - - - Multiline text that should wrap when it is too long - to fit on one line in the item. Attribute on .item - - - + + + + + + + + - - - - - - - - + + Dark + +
Primary h5
+ + + - - Dark - -
Primary h5
- - - + + +

H1 Title Text

+ + + - - -

H1 Title Text

- - - + + + + + + Light + + + + - - - - - - Light - - - - + + Primary + + + + + - - Primary - - - - - - - - Secondary - - - - Column 1 - - - Column 2 - - - Column 3 - - - - - - + + Secondary + + + Column 1 + + + Column 2 + + + Column 3 + + + + diff --git a/core/src/components/item/test/groups/index.html b/core/src/components/item/test/groups/index.html index 22ddea39f1..c355bbd325 100644 --- a/core/src/components/item/test/groups/index.html +++ b/core/src/components/item/test/groups/index.html @@ -6,27 +6,28 @@ Item - Groups + - - - Item Groups - - - Reload - - - - + + + Item Groups + + + Reload + + + + - - - - - + + + + + @@ -237,11 +238,11 @@ "time": "4:00 PM", "talks": [ { - "name": "Breakfast", - "timestart": "05/17/2016 8:00", - "timeend": "05/17/2016 9:00", - "location": "Main hallway", - "category": "food" + "name": "Breakfast", + "timestart": "05/17/2016 8:00", + "timeend": "05/17/2016 9:00", + "location": "Main hallway", + "category": "food" } ] }, @@ -249,31 +250,31 @@ "time": "5:00 PM", "talks": [ { - "name": "Introduction to Appcamp.io", - "location": "Room 2203", - "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.", - "speaker": "Brandy Carnegie", - "timestart": "05/17/2016 9:00", - "timeend": "05/17/2016 9:30", - "category": "ionic" + "name": "Introduction to Appcamp.io", + "location": "Room 2203", + "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.", + "speaker": "Brandy Carnegie", + "timestart": "05/17/2016 9:00", + "timeend": "05/17/2016 9:30", + "category": "ionic" }, { - "name": "Getting started with Ionic", - "location": "Room 2202", - "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.", - "speaker": "Max Lynx", - "timestart": "05/17/2016 9:30", - "timeend": "05/17/2016 9:45", - "category": "ionic" + "name": "Getting started with Ionic", + "location": "Room 2202", + "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.", + "speaker": "Max Lynx", + "timestart": "05/17/2016 9:30", + "timeend": "05/17/2016 9:45", + "category": "ionic" }, { - "name": "Tooling for Ionic", - "location": "Room 2201", - "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.", - "speaker": "Josh Babari", - "timestart": "05/17/2016 9:45", - "timeend": "05/17/2016 10:00", - "category": "tooling" + "name": "Tooling for Ionic", + "location": "Room 2201", + "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.", + "speaker": "Josh Babari", + "timestart": "05/17/2016 9:45", + "timeend": "05/17/2016 10:00", + "category": "tooling" } ] }, @@ -281,31 +282,31 @@ "time": "6:00 PM", "talks": [ { - "name": "Getting started with Ionic", - "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.", - "location": "Room 2201", - "speaker": "Adam Badley", - "timestart": "05/17/2016 10:00", - "timeend": "05/17/2016 10:15", - "category": "ionic" + "name": "Getting started with Ionic", + "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.", + "location": "Room 2201", + "speaker": "Adam Badley", + "timestart": "05/17/2016 10:00", + "timeend": "05/17/2016 10:15", + "category": "ionic" }, { - "name": "The evolution of Ionicons", - "location": "Room 2202", - "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.", - "speaker": "Ben Sparrow", - "timestart": "05/17/2016 10:15", - "timeend": "05/17/2016 10:30", - "category": "design" + "name": "The evolution of Ionicons", + "location": "Room 2202", + "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.", + "speaker": "Ben Sparrow", + "timestart": "05/17/2016 10:15", + "timeend": "05/17/2016 10:30", + "category": "design" }, { - "name": "Ionic.io Services", - "location": "Room 2202", - "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.", - "speaker": "Eric Bobbington", - "timestart": "05/17/2016 10:30", - "timeend": "05/17/2016 11:00", - "category": "services" + "name": "Ionic.io Services", + "location": "Room 2202", + "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.", + "speaker": "Eric Bobbington", + "timestart": "05/17/2016 10:30", + "timeend": "05/17/2016 11:00", + "category": "services" } ] }, @@ -313,31 +314,31 @@ "time": "7:00 PM", "talks": [ { - "name": "Ionic Workshop", - "location": "Room 2201", - "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.", - "speaker": "Perry Governor", - "timestart": "05/17/2016 11:00", - "timeend": "05/17/2016 11:45", - "category": "workshop" + "name": "Ionic Workshop", + "location": "Room 2201", + "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.", + "speaker": "Perry Governor", + "timestart": "05/17/2016 11:00", + "timeend": "05/17/2016 11:45", + "category": "workshop" }, { - "name": "Community Interaction", - "location": "Room 2203", - "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.", - "speaker": "Mike Hurtington", - "timestart": "05/17/2016 11:45", - "timeend": "05/17/2016 11:50", - "category": "communication" + "name": "Community Interaction", + "location": "Room 2203", + "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.", + "speaker": "Mike Hurtington", + "timestart": "05/17/2016 11:45", + "timeend": "05/17/2016 11:50", + "category": "communication" }, { - "name": "Navigation in Ionic", - "location": "Room 2203", - "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.", - "speaker": "Tim Lanchester", - "timestart": "05/17/2016 11:50", - "timeend": "05/17/2016 12:00", - "category": "navigation" + "name": "Navigation in Ionic", + "location": "Room 2203", + "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.", + "speaker": "Tim Lanchester", + "timestart": "05/17/2016 11:50", + "timeend": "05/17/2016 12:00", + "category": "navigation" } ] }, @@ -345,12 +346,12 @@ "time": "8:00 PM", "talks": [ { - "name": "Lunch", - "timestart": "05/17/2016 12:00", - "timeend": "05/17/2016 13:00", - "location": "Auditorium", - "description": "Come grab lunch with all the Ionic fanatics and talk all things Ionic", - "category": "food" + "name": "Lunch", + "timestart": "05/17/2016 12:00", + "timeend": "05/17/2016 13:00", + "location": "Auditorium", + "description": "Come grab lunch with all the Ionic fanatics and talk all things Ionic", + "category": "food" } ] }, @@ -358,31 +359,31 @@ "time": "9:00 PM", "talks": [ { - "name": "Ionic in the Enterprise", - "location": "Room 2201", - "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.", - "speaker": "Brody Kiddington", - "timestart": "05/17/2016 13:00", - "timeend": "05/17/2016 13:15", - "category": "communication" + "name": "Ionic in the Enterprise", + "location": "Room 2201", + "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.", + "speaker": "Brody Kiddington", + "timestart": "05/17/2016 13:00", + "timeend": "05/17/2016 13:15", + "category": "communication" }, { - "name": "Ionic Worldwide", - "location": "Room 2201", - "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.", - "speaker": "Katie Kinder", - "timestart": "05/17/2016 13:15", - "timeend": "05/17/2016 13:30", - "category": "communication" + "name": "Ionic Worldwide", + "location": "Room 2201", + "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.", + "speaker": "Katie Kinder", + "timestart": "05/17/2016 13:15", + "timeend": "05/17/2016 13:30", + "category": "communication" }, { - "name": "The Ionic package service", - "location": "Room 2203", - "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.", - "speaker": "Dan Dalman", - "timestart": "05/17/2016 13:30", - "timeend": "05/17/2016 14:00", - "category": "services" + "name": "The Ionic package service", + "location": "Room 2203", + "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.", + "speaker": "Dan Dalman", + "timestart": "05/17/2016 13:30", + "timeend": "05/17/2016 14:00", + "category": "services" } ] }, @@ -390,31 +391,31 @@ "time": "10:00 PM", "talks": [ { - "name": "Push Notifications in Ionic", - "location": "Room 2202", - "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.", - "speaker": "Rudy Belfonte", - "timestart": "05/17/2016 14:00", - "timeend": "05/17/2016 14:30", - "category": "services" + "name": "Push Notifications in Ionic", + "location": "Room 2202", + "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.", + "speaker": "Rudy Belfonte", + "timestart": "05/17/2016 14:00", + "timeend": "05/17/2016 14:30", + "category": "services" }, { - "name": "Ionic Documentation", - "location": "Room 2202", - "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.", - "speaker": "Drew Rough", - "timestart": "05/17/2016 14:30", - "timeend": "05/17/2016 14:45", - "category": "documentation" + "name": "Ionic Documentation", + "location": "Room 2202", + "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.", + "speaker": "Drew Rough", + "timestart": "05/17/2016 14:30", + "timeend": "05/17/2016 14:45", + "category": "documentation" }, { - "name": "UX planning in Ionic", - "location": "Room 2203", - "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.", - "speaker": "Ben Sparrow", - "timestart": "05/17/2016 14:45", - "timeend": "05/17/2016 15:00", - "category": "design" + "name": "UX planning in Ionic", + "location": "Room 2203", + "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.", + "speaker": "Ben Sparrow", + "timestart": "05/17/2016 14:45", + "timeend": "05/17/2016 15:00", + "category": "design" } ] }, @@ -422,22 +423,22 @@ "time": "11:00 PM", "talks": [ { - "name": "Directives in Ionic", - "location": "Room 2201", - "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.", - "speaker": "Max Lynx", - "timestart": "05/17/2016 15:00", - "timeend": "05/17/2016 15:30", - "category": "angular" + "name": "Directives in Ionic", + "location": "Room 2201", + "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.", + "speaker": "Max Lynx", + "timestart": "05/17/2016 15:00", + "timeend": "05/17/2016 15:30", + "category": "angular" }, { - "name": "Mobile States", - "location": "Room 2202", - "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.", - "speaker": "Tim Lanchester", - "timestart": "05/17/2016 15:30", - "timeend": "05/17/2016 15:45", - "category": "navigation" + "name": "Mobile States", + "location": "Room 2202", + "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.", + "speaker": "Tim Lanchester", + "timestart": "05/17/2016 15:30", + "timeend": "05/17/2016 15:45", + "category": "navigation" } ] } @@ -480,7 +481,7 @@ `; } - html+= ``; + html += ``; list.innerHTML += html; } diff --git a/core/src/components/item/test/icons/heart-broken.svg b/core/src/components/item/test/icons/heart-broken.svg new file mode 100755 index 0000000000..adaf69857e --- /dev/null +++ b/core/src/components/item/test/icons/heart-broken.svg @@ -0,0 +1,5 @@ + + +heart-broken + + diff --git a/core/src/components/item/test/icons/index.html b/core/src/components/item/test/icons/index.html index f810ba3824..ec7a08257e 100644 --- a/core/src/components/item/test/icons/index.html +++ b/core/src/components/item/test/icons/index.html @@ -6,109 +6,122 @@ Item - Icons + - - - Item Icons - - + + + Item Icons + + - - - - ion-item [detail] attr - - + + + + ion-item [detail] attr + + - - - a[ion-item] w/ push detail - - + + + a[ion-item] w/ push detail + + - - - button[ion-item] w/ push detail - - + + + button[ion-item] w/ push detail + + - - - a[ion-item] w/ right side default icon - - - + + Detail with icon arrow down + - - - a[ion-item] w/ right side large icon - - - + + Detail with icon home + - - - a[ion-item] w/ right side small icon - - - + + Detail with custom icon svg + - - - - button[ion-item] w/ left side icon - - + + + a[ion-item] w/ right side default icon + + + - - - - button[ion-item][detail="false"] - - + + + a[ion-item] w/ right side large icon + + + - - - - ion-item w/ both side icons - - - + + + a[ion-item] w/ right side small icon + + + - - - a[ion-item] w/ two right side icons - - - - + + + + button[ion-item] w/ left side icon + + - - - - - button[ion-item] w/ two left side icons - - + + + + button[ion-item][detail="false"] + + - - - Red Balloons - - 99 - + + + + ion-item w/ both side icons + + + - - - Problems - - 99 - - + + + a[ion-item] w/ two right side icons + + + + + + + + + + button[ion-item] w/ two left side icons + + + + + + Red Balloons + + 99 + + + + + Problems + + 99 + + diff --git a/core/src/components/item/test/images/index.html b/core/src/components/item/test/images/index.html index 448938250e..da142e70f8 100644 --- a/core/src/components/item/test/images/index.html +++ b/core/src/components/item/test/images/index.html @@ -6,98 +6,94 @@ Item - Images + - - - Item Images - - + + + Item Images + + - - - - Plain Ol' div w/ some text, no images - - + + + + Plain Ol' div w/ some text, no images + + - - - - One Line w/ Icon, div only text - - + + + + One Line w/ Icon, div only text + + - - - -

Two Lines w/ Icon, H2 Header

-

Paragraph text.

- - + + + +

Two Lines w/ Icon, H2 Header

+

Paragraph text.

+ + - - - - - - One Line w/ Avatar, div only text - - + + + + + + One Line w/ Avatar, div only text + + - - - - - -

Two Lines w/ Avatar, H2 Header

-

Paragraph text.

- - + + + + + +

Two Lines w/ Avatar, H2 Header

+

Paragraph text.

+ + - - - - - -

Three Lines w/ Avatar, H2 Header

-

Paragraph text.

-

Paragraph text.

- - + + + + + +

Three Lines w/ Avatar, H2 Header

+

Paragraph text.

+

Paragraph text.

+ + - - - - - -

Two Lines w/ Thumbnail, H2 Header

-

Paragraph text.

- - + + + + + +

Two Lines w/ Thumbnail, H2 Header

+

Paragraph text.

+ + - - - - - -

Three Lines w/ Thumbnail, H2 Header

-

Paragraph text.

-

Paragraph text.

- - - + + + + + +

Three Lines w/ Thumbnail, H2 Header

+

Paragraph text.

+

Paragraph text.

+ + + - diff --git a/core/src/components/item/test/inputs/index.html b/core/src/components/item/test/inputs/index.html index 8d835411ec..d5e277f9fa 100644 --- a/core/src/components/item/test/inputs/index.html +++ b/core/src/components/item/test/inputs/index.html @@ -6,81 +6,82 @@ Item - Inputs + - - - Item inputs - - - - - - - + + + Item inputs + + + + + + + - - - - Simple item - + + + + Simple item + - - Item Button - + + Item Button + - - DateTime - - + + DateTime + + - - Select - - No Game Console - NES - Nintendo64 - PlayStation - Sega Genesis - Sega Saturn - SNES - - + + Select + + No Game Console + NES + Nintendo64 + PlayStation + Sega Genesis + Sega Saturn + SNES + + - - Toggle - - + + Toggle + + - - Input (text) - - + + Input (text) + + - - Input (placeholder) - - + + Input (placeholder) + + - - Checkbox - - + + Checkbox + + - - Toggle (left) - - + + Toggle (left) + + - - Range - - - - + + Range + + + + @@ -108,4 +109,5 @@ console.log('CLICK!', ev.target.tagName, ev.target.textContent.trim()); } + diff --git a/core/src/components/item/test/lines/index.html b/core/src/components/item/test/lines/index.html index 7c2a376562..ae8b040a42 100644 --- a/core/src/components/item/test/lines/index.html +++ b/core/src/components/item/test/lines/index.html @@ -6,206 +6,207 @@ Item - Lines + - - - Item Lines - - + + + Item Lines + + - - + + + + Item + + + + + Item Lines Inset + + + + + Item Lines Full + + + + + + Item + + + + + + + Item Lines Inset + + + + + + + Item Lines Full + + + + + + + Item Lines None + + + + + + List Full Lines Item - - - - Item Lines Inset - - - - - Item Lines Full - - - - Item - - - - - Item Lines Inset - + Item Inset + - + + + List Inset Lines + + + Item + - - Item Lines Full - + Item Full - - - - - Item Lines None - - - - - - List Full Lines - - Item - - - Item - - - Item Inset - - - - - - List Inset Lines - - - Item - - - Item Full - - - Item - - - - - - List No Lines - - - Item - - - Item Full - - - Item Inset - - - Item - - - Item - - - -

Colors

- - - + Item + - - - Item Lines Inset - - - - - Item Lines Full - - - - - + + + List No Lines + + Item - - - - - - Item Lines Inset - + + Item Full - - - - - Item Lines Full - + + Item Inset - - - - - Item Lines None - + + Item + + Item + + - - - List Full Lines - - Item - - - Item - - - Item Inset - - +

Colors

- - - List Inset Lines - - - Item - - - Item Full - - - Item - - + + + Item + - - - List No Lines - - - Item - - - Item Full - - - Item Inset - - - Item - - - Item - - - + + + Item Lines Inset + + + + + Item Lines Full + + + + + + Item + + + + + + + Item Lines Inset + + + + + + + Item Lines Full + + + + + + + Item Lines None + + + + + + List Full Lines + + Item + + + Item + + + Item Inset + + + + + + List Inset Lines + + + Item + + + Item Full + + + Item + + + + + + List No Lines + + + Item + + + Item Full + + + Item Inset + + + Item + + + Item + + + diff --git a/core/src/components/item/test/media/index.html b/core/src/components/item/test/media/index.html index 41e6bc9d03..c0d8150c10 100644 --- a/core/src/components/item/test/media/index.html +++ b/core/src/components/item/test/media/index.html @@ -6,89 +6,90 @@ Item - Media + - - - Item Media - - + + + Item Media + + - - - - - - - Media/Avatar left, button.item - - + + + + + + + Media/Avatar left, button.item + + - - - Media/Avatar right, a.item - - - - - + + + Media/Avatar right, a.item + + + + + - - - - - - Media/Avatar, right button - - View - + + + + + + Media/Avatar, right button + + View + - - - - - -

H2 Title Text

-

Paragraph text

- - + + + + + +

H2 Title Text

+

Paragraph text

+ + - - - Media/Thumbnail right side, a.item - - - - - + + + Media/Thumbnail right side, a.item + + + + + - - - - - -

H2 Title Text

-

Button on right

- - View - + + + + + +

H2 Title Text

+

Button on right

+ + View + - - - - - -

H3 Title Text

-

Icon on right

-

Vertically align top

-

button.item

- - - - + + + + + +

H3 Title Text

+

Icon on right

+

Vertically align top

+

button.item

+ + + + @@ -97,12 +98,6 @@ console.log('CLICK!', ev.target.tagName, ev.target.textContent.trim()); } - - diff --git a/core/src/components/item/test/preview/index.html b/core/src/components/item/test/preview/index.html index c04df396f0..636de952e4 100644 --- a/core/src/components/item/test/preview/index.html +++ b/core/src/components/item/test/preview/index.html @@ -6,109 +6,114 @@ Item + - - - Item - - - - - - - - List Header - - - - - Item - - - - - Item Divider - - - - - Item - - - + + + Item + + + + + + + List Header + + - Plain Ol' div with some text + Item - + + + Item Divider + + - Single line text that should have ellipses when it doesn't all fit in the item + Item + - - - Single line item with no lines - - + + + Plain Ol' div with some text + + - - - Multiline text that should wrap when it is too long to fit on one line in the item. Attribute on .item - - + + + Single line text that should have ellipses when it doesn't all fit in the item + + - - -

H1 Title Text

-

Paragraph line 1

- - + + + Single line item with no lines + + - - -

H2 Title Text

-

Paragraph line 1

- - + + + Multiline text that should wrap when it is too long to fit on one line in the item. Attribute on .item + + - - -

H3 Title Text

-

Paragraph line 1

-

Paragraph line 2 secondary

- - + + +

H1 Title Text

+

Paragraph line 1

+ + - - -

H4 Title Text

-

Paragraph line 1

-

Paragraph line 2

-

Paragraph line 3

- - + + +

H2 Title Text

+

Paragraph line 1

+ + - - - Item using inner ion-label - - + + + +

H3 Title Text

+ +

Paragraph line 1

+ +

Paragraph line 2 secondary

+ + + - + + +

H4 Title Text

+

Paragraph line 1

+

Paragraph line 2

+

Paragraph line 3

+ + - - - Footer - - + + + Item using inner ion-label + + + + + + + + Footer + + diff --git a/core/src/components/item/test/reorder/index.html b/core/src/components/item/test/reorder/index.html index 7b11be2c4c..ee0bb7c368 100644 --- a/core/src/components/item/test/reorder/index.html +++ b/core/src/components/item/test/reorder/index.html @@ -6,34 +6,35 @@ Item - Reorder + - - - Item Reorder - - Edit - - - - - - - + + + Item Reorder + + Edit + + + + + + + - - start - - + + start + + - - end - - - + + end + + + @@ -41,6 +42,7 @@ .item { background-color: inherit; } + + diff --git a/core/src/components/item/test/sliding/index.html b/core/src/components/item/test/sliding/index.html index 3b8364903e..985e2f8ffc 100644 --- a/core/src/components/item/test/sliding/index.html +++ b/core/src/components/item/test/sliding/index.html @@ -1,411 +1,412 @@ + Item Sliding - Basic + + - - - Item Sliding - Basic - - Dynamic - - - Reload - - - + + + Item Sliding - Basic + + Dynamic + + + Reload + + + - + -
- Toggle sliding - Toggle Dynamic Options - Close Opened Items -
+
+ Toggle sliding + Toggle Dynamic Options + Close Opened Items +
- -
- - - -

No Options

-

Should not error or swipe without options

- - - - - - - - One Line, dynamic option and text - - - - - - - - - - - - - - - - - - Two options, one dynamic option and text - - - - - - - - - - - - - - - - - - - - - - -

HubStruck Notifications

-

A new message from a repo in your network

-

Oceanic Next has joined your network

- - - 10:45 AM - - - - - - No close - - - - - - - - - - - - - - - - -

RIGHT side - no icons

-

Hey do you want to go to the game tonight?

- - - - Archive - Delete - - - - - - -

LEFT side - no icons

-

I think I figured out how to get more Mountain Dew

- - - - Archive - Delete - - - - - - - -

RIGHT/LEFT side - icons

-

I think I figured out how to get more Mountain Dew

- - - - - Unread - - - - - - Archive - - - Delete - - - - - - - -

RIGHT/LEFT side - icons (slot="start")

-

I think I figured out how to get more Mountain Dew

- - - - - Unread - - - - - - Archive - - - Delete - - - - - - - - - - One Line w/ Icon, div only text - - - - - Archive - - - - - - - - - - - - One Line w/ Avatar, div only text - - - - - More - - - Archive - - - Delete - - - - - - - - - One Line, dynamic icon-start option - - - - - - - - - - - - - - - - - - - - -

DOWNLOAD

-

Paragraph text.

- - - - - Archive - - - -
Download
- - - - - - - - - - - - - -

ion-item-sliding without options (no sliding)

-

Paragraph text.

- - - - - + +
+ + -

Normal ion-item (no sliding)

-

Paragraph text.

+

No Options

+

Should not error or swipe without options

 + - + + -

Normal button (no sliding)

+ One Line, dynamic option and text + + + + + + + + + + + + + + + + + + Two options, one dynamic option and text + + + + + + + + + + + + + + + + + + + + + + +

HubStruck Notifications

+

A new message from a repo in your network

+

Oceanic Next has joined your network

+ + + 10:45 AM + + + + + + No close + + + + + + + + + + + + + + + + +

RIGHT side - no icons

Hey do you want to go to the game tonight?

 -
+ + Archive + Delete + + - + + + +

LEFT side - no icons

+

I think I figured out how to get more Mountain Dew

+ + + + Archive + Delete + + - + - + + + diff --git a/core/src/components/item/test/standalone/index.html b/core/src/components/item/test/standalone/index.html index 46902708a5..619a680028 100644 --- a/core/src/components/item/test/standalone/index.html +++ b/core/src/components/item/test/standalone/index.html @@ -6,6 +6,7 @@ Item - Standalone + diff --git a/core/src/components/item/test/text/index.html b/core/src/components/item/test/text/index.html index a2561c253d..a55c7e16ce 100644 --- a/core/src/components/item/test/text/index.html +++ b/core/src/components/item/test/text/index.html @@ -6,113 +6,118 @@ Item - Text + - - - Item Text - - + + + Item Text + + - - - - - - List Header - - - - - Item - - - - - Item Divider - - - - - Item - - - + + + + + List Header + + - Plain Ol' div with some text + Item - + + + Item Divider + + - Single line text that should have ellipses when it doesn't all fit in the item + Item + - - - Single line item with no lines - - + + + Plain Ol' div with some text + + - - - Multiline text that should wrap when it is too long to fit on one line in the item. Attribute on .item - - + + + Single line text that should have ellipses when it doesn't all fit in the item + + - - -

H1 Title Text

-

Paragraph line 1

- - + + + Single line item with no lines + + - - -

H2 Title Text

-

Paragraph line 1

- - + + + Multiline text that should wrap when it is too long to fit on one line in the item. Attribute on .item + + - - -

H3 Title Text

 -

Paragraph line 1

-

Paragraph line 2 secondary

 - - + + +

H1 Title Text

+

Paragraph line 1

+ + - - -

H4 Title Text

-

Paragraph line 1

-

Paragraph line 2

-

Paragraph line 3

- - + + +

H2 Title Text

+

Paragraph line 1

+ + - - - Item using inner ion-label - - + + + +

H3 Title Text

+ +

Paragraph line 1

+ +

Paragraph line 2 secondary

+ + + - - - ion-label - -
- div -
- + + +

H4 Title Text

+

Paragraph line 1

+

Paragraph line 2

+

Paragraph line 3

+ + - + + + Item using inner ion-label + + + + + + ion-label + +
+ div +
+ + + diff --git a/core/src/components/item/usage/angular.md b/core/src/components/item/usage/angular.md index 5d9bf71f0f..a9207accd0 100644 --- a/core/src/components/item/usage/angular.md +++ b/core/src/components/item/usage/angular.md @@ -67,15 +67,15 @@ List Items - - + + Multiline text that should wrap when it is too long to fit on one line in the item. - - + +

H3 Primary Title

 diff --git a/core/src/components/item/usage/javascript.md b/core/src/components/item/usage/javascript.md index 5cece4fbe0..4bf4c47c79 100644 --- a/core/src/components/item/usage/javascript.md +++ b/core/src/components/item/usage/javascript.md @@ -67,15 +67,15 @@ List Items - - + + Multiline text that should wrap when it is too long to fit on one line in the item. - - + +

H3 Primary Title

 diff --git a/core/src/components/label/label.ios.scss b/core/src/components/label/label.ios.scss index 78e30eddb1..64a4386796 100644 --- a/core/src/components/label/label.ios.scss +++ b/core/src/components/label/label.ios.scss @@ -4,36 +4,28 @@ // iOS Label // -------------------------------------------------- -.label-ios { +:host { @include margin($label-ios-margin-top, $label-ios-margin-end, $label-ios-margin-bottom, $label-ios-margin-start); font-family: $label-ios-font-family; } -[text-wrap] .label-ios { +:host([text-wrap]) { font-size: $label-ios-text-wrap-font-size; line-height: $label-ios-text-wrap-line-height; } -// iOS Default Label Inside An Input/Select Item -// -------------------------------------------------- - -.item-interactive .label-ios { - color: $label-ios-text-color; -} - - // iOS Stacked & Floating Labels // -------------------------------------------------- -.label-ios-stacked { +:host(.label-stacked) { @include margin(null, null, 4px, null); font-size: 12px; } -.label-ios-floating { +:host(.label-floating) { @include margin(null, null, 0, null); @include transform(translate3d(0, 27px, 0)); @include transform-origin(start, top); @@ -41,25 +33,64 @@ transition: transform 150ms ease-in-out; } -.item-input-has-focus .label-ios-floating, -.item-input-has-value .label-ios-floating { - @include transform(translate3d(0, 0, 0), scale(.8)); -} - -.item-input-has-focus .label-ios-stacked, -.item-input-has-focus .label-ios-floating { +:host-context(.item-has-focus).label-stacked, +:host-context(.item-has-focus).label-floating { color: $label-ios-text-color-focused; } -// Generate iOS Label colors +// iOS Typography // -------------------------------------------------- -@each $color-name, $color-value in $colors-ios { - $color-base: ion-color($colors-ios, $color-name, base, ios); +::slotted(*) h1 { + @include margin(0, 0, 2px); - .label-ios-#{$color-name}, - .item-interactive .label-ios-#{$color-name} { - color: $color-base; - } + font-size: 24px; + font-weight: normal; +} + +::slotted(*) h2 { + @include margin(0, 0, 2px); + + font-size: 17px; + font-weight: normal; +} + +::slotted(*) h3, +::slotted(*) h4, +::slotted(*) h5, +::slotted(*) h6 { + @include margin(0, 0, 3px); + + font-size: 14px; + font-weight: normal; + line-height: normal; +} + +::slotted(*) p { + @include margin($item-ios-paragraph-margin-top, $item-ios-paragraph-margin-end, $item-ios-paragraph-margin-bottom, $item-ios-paragraph-margin-start); + + overflow: inherit; + + font-size: $item-ios-paragraph-font-size; + line-height: normal; + text-overflow: inherit; +} + +::slotted(p) { + color: #{$item-ios-paragraph-text-color}; +} + +:host-context(.ion-color)::slotted(p) { + color: inherit; +} + + +::slotted(*) h2:last-child, +::slotted(*) h3:last-child, +::slotted(*) h4:last-child, +::slotted(*) h5:last-child, +::slotted(*) h6:last-child, +::slotted(*) p:last-child { + @include margin(null, null, 0, null); } diff --git a/core/src/components/label/label.ios.vars.scss b/core/src/components/label/label.ios.vars.scss index 0fd5b7b8c7..602207a32e 100644 --- a/core/src/components/label/label.ios.vars.scss +++ b/core/src/components/label/label.ios.vars.scss @@ -6,7 +6,7 @@ // -------------------------------------------------- /// @prop - Font family of the label -$label-ios-font-family: $font-family-ios-base !default; +$label-ios-font-family: $font-family-base !default; /// @prop - Text color of the label by an input, select, or datetime $label-ios-text-color: null !default; @@ -31,3 +31,6 @@ $label-ios-text-wrap-font-size: 14px !default; /// @prop - Line height of the label when the text wraps $label-ios-text-wrap-line-height: 1.5 !default; + +/// @prop - Color of the item paragraph +$item-ios-paragraph-text-color: $text-color-step-600 !default; \ No newline at end of file diff --git a/core/src/components/label/label.md.scss b/core/src/components/label/label.md.scss index dd83b5d521..e4f4b0361f 100644 --- a/core/src/components/label/label.md.scss +++ b/core/src/components/label/label.md.scss @@ -4,13 +4,13 @@ // Material Design Label // -------------------------------------------------- -.label-md { +:host { @include margin($label-md-margin-top, $label-md-margin-end, $label-md-margin-bottom, $label-md-margin-start); font-family: $label-md-font-family; } -[text-wrap] .label-md { +:host([text-wrap]) { font-size: $label-md-text-wrap-font-size; line-height: $label-md-text-wrap-line-height; } @@ -19,49 +19,78 @@ // Material Design Default Label Inside An Input/Select Item // -------------------------------------------------- -.item-interactive .label-md { - color: $label-md-text-color; +// TODO, takes high priority +:host-context(.item-interactive) { + --ion-color-base: #{$label-md-text-color}; } // Material Design Stacked & Floating Labels // -------------------------------------------------- -.label-md-stacked { +:host(.label-stacked) { font-size: 12px; } -.label-md-floating { +:host(.label-floating) { @include transform(translate3d(0, 27px, 0)); @include transform-origin(start, top); transition: transform 150ms ease-in-out; } -.label-md-stacked, -.label-md-floating { +:host(.label-stacked), +:host(.label-floating) { @include margin(null, null, 0, 0); } -.item-input-has-focus .label-md-stacked, -.item-input-has-focus .label-md-floating { +:host-context(.item-has-focus).label-stacked, +:host-context(.item-has-focus).label-floating { color: $label-md-text-color-focused; } -.item-input-has-focus .label-md-floating, -.item-input-has-value .label-md-floating { - @include transform(translate3d(0, 0, 0), scale(.8)); -} - - -// Generate Material Design Label colors +// MD Typography // -------------------------------------------------- -@each $color-name, $color-value in $colors-md { - $color-base: ion-color($colors-md, $color-name, base, md); +::slotted(*) h1 { + @include margin(0, 0, 2px); - .label-md-#{$color-name}, - .item-interactive .label-md-#{$color-name} { - color: $color-base; - } + font-size: 24px; + font-weight: normal; +} + +::slotted(*) h2 { + @include margin(2px, 0); + + font-size: 16px; + font-weight: normal; +} + +::slotted(*) h3, +::slotted(*) h4, +::slotted(*) h5, +::slotted(*) h6 { + @include margin(2px, 0); + + font-size: 14px; + font-weight: normal; + line-height: normal; +} + +::slotted(*) p { + @include margin(0, 0, 2px); + + overflow: inherit; + + font-size: 14px; + line-height: normal; + text-overflow: inherit; +} + +::slotted(p) { + color: #{$item-md-paragraph-text-color}; +} + +:host-context(.ion-color)::slotted(p) { + color: inherit; } diff --git a/core/src/components/label/label.md.vars.scss b/core/src/components/label/label.md.vars.scss index 4f273299f0..a12e3b5338 100644 --- a/core/src/components/label/label.md.vars.scss +++ b/core/src/components/label/label.md.vars.scss @@ -6,13 +6,13 @@ // -------------------------------------------------- /// @prop - Font family of the label -$label-md-font-family: $font-family-md-base !default; +$label-md-font-family: $font-family-base !default; /// @prop - Text color of the label by an input, select, or datetime -$label-md-text-color: $text-md-color-step-600 !default; +$label-md-text-color: $text-color-step-600 !default; /// @prop - Text color of the stacked/floating label when it is focused -$label-md-text-color-focused: ion-color($colors-md, primary, base, md) !default; +$label-md-text-color-focused: ion-color(primary, base) !default; /// @prop - Margin top of the label $label-md-margin-top: $item-md-padding-top !default; @@ -31,3 +31,6 @@ $label-md-text-wrap-font-size: 14px !default; /// @prop - Line height of the label when the text wraps $label-md-text-wrap-line-height: 1.5 !default; + +/// @prop - Color of the item paragraph +$item-md-paragraph-text-color: $text-color-step-400 !default; diff --git a/core/src/components/label/label.scss b/core/src/components/label/label.scss index c0f3af9df4..362b727cd2 100644 --- a/core/src/components/label/label.scss +++ b/core/src/components/label/label.scss @@ -4,7 +4,7 @@ // Label // -------------------------------------------------- -ion-label { +:host { @include margin(0); display: block; @@ -15,9 +15,26 @@ ion-label { font-size: inherit; text-overflow: ellipsis; white-space: nowrap; + + box-sizing: border-box; + + color: #{current-color(base)}; + + --ion-color-base: currentColor; } -.item-input ion-label { +:host([text-wrap]) { + white-space: normal; +} + +:host-context(.item-interactive-disabled) { + cursor: default; + opacity: .3; + + pointer-events: none; +} + +:host-context(.item-input) { flex: initial; max-width: 200px; @@ -25,15 +42,11 @@ ion-label { pointer-events: none; } -[text-wrap] ion-label { - white-space: normal; -} - -// Stacked & Floating Inputs +// Fixed Inputs // -------------------------------------------------- -.label-fixed { +:host(.label-fixed) { flex: 0 0 100px; width: 100px; @@ -41,28 +54,20 @@ ion-label { max-width: 200px; } -.item-label-stacked ion-label, -.item-label-floating ion-label { +// Stacked & Floating Inputs +// -------------------------------------------------- + +:host(.label-stacked), +:host(.label-floating) { + @include margin(null, null, 0, null); + align-self: stretch; width: auto; max-width: 100%; } -.label-stacked , -.label-floating { - @include margin(null, null, 0, null); -} - -.item-label-stacked .input-wrapper, -.item-label-floating .input-wrapper { - flex: 1; - flex-direction: column; -} - -.item-label-stacked ion-select, -.item-label-floating ion-select { - align-self: stretch; - - max-width: 100%; +:host-context(.item-has-focus).label-floating, +:host-context(.item-has-value).label-floating { + @include transform(translate3d(0, 0, 0), scale(.8)); } diff --git a/core/src/components/label/label.tsx b/core/src/components/label/label.tsx index 80f470f54b..4d70f19eee 100644 --- a/core/src/components/label/label.tsx +++ b/core/src/components/label/label.tsx @@ -8,6 +8,7 @@ import { Watch } from '@stencil/core'; import { Color, Mode, StyleEvent } from '../../interface'; +import { createColorClasses } from '../../utils/theme'; @Component({ tag: 'ion-label', @@ -15,9 +16,7 @@ import { Color, Mode, StyleEvent } from '../../interface'; ios: 'label.ios.scss', md: 'label.md.scss' }, - host: { - theme: 'label' - } + scoped: true }) export class Label { @Element() el!: HTMLElement; @@ -56,7 +55,8 @@ export class Label { @Watch('position') positionChanged() { const position = this.position; - return this.ionStyle.emit({ + this.ionStyle.emit({ + 'label': true, [`label-${position}`]: !!position }); } @@ -65,8 +65,8 @@ export class Label { const position = this.position; return { class: { + ...createColorClasses(this.color), [`label-${position}`]: !!position, - [`label-${this.mode}-${position}`]: !!position } }; } diff --git a/core/src/components/label/test/basic/index.html b/core/src/components/label/test/basic/index.html index 7c17ce6d9c..d0b566cafc 100644 --- a/core/src/components/label/test/basic/index.html +++ b/core/src/components/label/test/basic/index.html @@ -1,52 +1,48 @@ + Label - Basic + + - - - Label - Basic - - - - - - - Default - - - - Wrap label this label just goes on and on and on - - - - Fixed - - - - Floating - - - - Stacked - - - - - - - + + + Label - Basic + + + + + + Default + + + + Wrap label this label just goes on and on and on + + + + Fixed + + + + Floating + + + + Stacked + + + + + diff --git a/core/src/components/label/test/preview/index.html b/core/src/components/label/test/preview/index.html index 9e0f55c0ad..b30c17bebc 100644 --- a/core/src/components/label/test/preview/index.html +++ b/core/src/components/label/test/preview/index.html @@ -1,52 +1,48 @@ + Label + + - - - Label - - - - - - - Default - - - - Wrap label this label just goes on and on and on - - - - Fixed - - - - Floating - - - - Stacked - - - - - - - + + + Label + + + + + + Default + + + + Wrap label this label just goes on and on and on + + + + Fixed + + + + Floating + + + + Stacked + + + + + diff --git a/core/src/components/label/test/standalone/index.html b/core/src/components/label/test/standalone/index.html index c928c3ce3d..8058461fe0 100644 --- a/core/src/components/label/test/standalone/index.html +++ b/core/src/components/label/test/standalone/index.html @@ -6,6 +6,7 @@ Label - Standalone + diff --git a/core/src/components/label/usage/javascript.md b/core/src/components/label/usage/javascript.md index 1f5e493227..3469a73c1a 100644 --- a/core/src/components/label/usage/javascript.md +++ b/core/src/components/label/usage/javascript.md @@ -4,8 +4,8 @@ Default - - Wrap label this label just goes on and on and on + + Wrap label this label just goes on and on and on diff --git a/core/src/components/list-header/list-header.ios.scss b/core/src/components/list-header/list-header.ios.scss index 390e903bc2..557f4018c9 100644 --- a/core/src/components/list-header/list-header.ios.scss +++ b/core/src/components/list-header/list-header.ios.scss @@ -4,7 +4,7 @@ // iOS List Header // -------------------------------------------------- -.list-header-ios { +:host { @include padding-horizontal($list-ios-header-padding-start, null); position: relative; @@ -13,20 +13,7 @@ font-weight: $list-ios-header-font-weight; letter-spacing: $list-ios-header-letter-spacing; text-transform: $list-ios-header-text-transform; - color: $list-ios-header-color; - background: $list-ios-header-background-color; -} - - -// Generate iOS List Header Colors -// -------------------------------------------------- - -@each $color-name, $color-value in $colors-ios { - $color-base: ion-color($colors-ios, $color-name, base, ios); - $color-contrast: ion-color($colors-ios, $color-name, contrast, ios); - - .list-header-ios-#{$color-name} { - color: $color-contrast; - background-color: $color-base; - } + + --ion-color-base: #{$list-ios-header-background-color}; + --ion-color-contrast: #{$list-ios-header-color}; } diff --git a/core/src/components/list-header/list-header.ios.vars.scss b/core/src/components/list-header/list-header.ios.vars.scss index 073518eb10..2a07e98992 100644 --- a/core/src/components/list-header/list-header.ios.vars.scss +++ b/core/src/components/list-header/list-header.ios.vars.scss @@ -21,7 +21,7 @@ $list-ios-header-letter-spacing: 1px !default; $list-ios-header-text-transform: uppercase !default; /// @prop - Text color of the header in a list -$list-ios-header-color: $text-ios-color-step-150 !default; +$list-ios-header-color: $text-color-step-150 !default; /// @prop - Background color of the header in a list $list-ios-header-background-color: transparent !default; diff --git a/core/src/components/list-header/list-header.md.scss b/core/src/components/list-header/list-header.md.scss index e73868499a..6a32026cc0 100644 --- a/core/src/components/list-header/list-header.md.scss +++ b/core/src/components/list-header/list-header.md.scss @@ -4,26 +4,14 @@ // Material Design List Header // -------------------------------------------------- -.list-header-md { +:host { @include padding-horizontal($list-md-header-padding-start, null); @include margin(null, null, $list-md-header-margin-bottom, null); min-height: $list-md-header-min-height; font-size: $list-md-header-font-size; - color: $list-md-header-color; -} - - -// Generate Material Design List Header Colors -// -------------------------------------------------- - -@each $color-name, $color-value in $colors-md { - $color-base: ion-color($colors-md, $color-name, base, md); - $color-contrast: ion-color($colors-md, $color-name, contrast, md); - - .list-header-md-#{$color-name} { - color: $color-contrast; - background-color: $color-base; - } + + --ion-color-base: transparent; + --ion-color-contrast: #{$list-md-header-color}; } diff --git a/core/src/components/list-header/list-header.md.vars.scss b/core/src/components/list-header/list-header.md.vars.scss index 56da90410e..9f8eaf06d3 100644 --- a/core/src/components/list-header/list-header.md.vars.scss +++ b/core/src/components/list-header/list-header.md.vars.scss @@ -18,4 +18,4 @@ $list-md-header-min-height: 45px !default; $list-md-header-font-size: 14px !default; /// @prop - Text color of the header in a list -$list-md-header-color: $text-md-color-step-400 !default; +$list-md-header-color: $text-color-step-400 !default; diff --git a/core/src/components/list-header/list-header.scss b/core/src/components/list-header/list-header.scss index e9af75f0f8..1617ced1ce 100644 --- a/core/src/components/list-header/list-header.scss +++ b/core/src/components/list-header/list-header.scss @@ -4,7 +4,7 @@ // List Header // -------------------------------------------------- -ion-list-header { +:host { @include font-smoothing(); @include margin(0); @include padding(0); @@ -17,4 +17,7 @@ ion-list-header { width: 100%; min-height: 40px; + + color: #{current-color(contrast)}; + background: #{current-color(base)}; } diff --git a/core/src/components/list-header/list-header.tsx b/core/src/components/list-header/list-header.tsx index d52507fb97..411b4c5869 100644 --- a/core/src/components/list-header/list-header.tsx +++ b/core/src/components/list-header/list-header.tsx @@ -1,5 +1,6 @@ import { Component, Prop } from '@stencil/core'; import { Color, Mode } from '../../interface'; +import { createColorClasses } from '../../utils/theme'; @Component({ tag: 'ion-list-header', @@ -7,9 +8,7 @@ import { Color, Mode } from '../../interface'; ios: 'list-header.ios.scss', md: 'list-header.md.scss' }, - host: { - theme: 'list-header' - } + shadow: true }) export class ListHeader { /** @@ -22,4 +21,14 @@ export class ListHeader { * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; + + hostData() { + return { + class: createColorClasses(this.color) + }; + } + + render() { + return ; + } } diff --git a/core/src/components/list/list.ios.scss b/core/src/components/list/list.ios.scss index 739343d1e2..e731bf5f51 100644 --- a/core/src/components/list/list.ios.scss +++ b/core/src/components/list/list.ios.scss @@ -8,43 +8,36 @@ @include margin(-1px, $list-ios-margin-end, $list-ios-margin-bottom, $list-ios-margin-start); } -.list-ios:not([inset]) + .list-ios:not([inset]) ion-list-header { - @include margin(-$list-ios-margin-top, null, null, null); - @include padding(0, null, null, null); +.list-ios:not(.list-inset) .item:last-child { + --inner-border-width: 0; + --border-width: #{0 0 $list-ios-item-border-bottom-width 0}; } +// .list-ios:not(.list-inset) + .list-ios:not(.list-inset) ion-list-header { +// @include margin(-$list-ios-margin-top, null, null, null); +// @include padding(0, null, null, null); +// } // iOS Inset List // -------------------------------------------------- -.list-ios[inset] { +.list-ios.list-inset { @include margin($list-inset-ios-margin-top, $list-inset-ios-margin-end, $list-inset-ios-margin-bottom, $list-inset-ios-margin-start); @include border-radius($list-inset-ios-border-radius); } -.list-ios[inset] ion-list-header { - background-color: $item-ios-background-color; +.list-ios.list-inset ion-item { + --border-width: 0 0 1px 0; + --inner-border-width: 0; } -.list-ios[inset] .item { - border-bottom: 1px solid $item-ios-border-color; +.list-ios.list-inset ion-item:last-child { + --border-width: 0; + --inner-border-width: 0; } -.list-ios[inset] .item-inner { - border-bottom: 0; -} -.list-ios[inset] > ion-item:first-child .item, -.list-ios[inset] > ion-item-sliding:first-child .item { - border-top: 0; -} - -.list-ios[inset] > ion-item:last-child .item, -.list-ios[inset] > ion-item-sliding:last-child .item { - border-bottom: 0; -} - -.list-ios[inset] + ion-list[inset] { +.list-ios.list-inset + ion-list.list-inset { @include margin(0, null, null, null); } @@ -52,38 +45,41 @@ // iOS No Lines List // -------------------------------------------------- -.list-ios-lines-none .item-ios, -.list-ios-lines-none .item-ios .item-inner { - border-bottom-width: 0; +.list-ios-lines-none .item { + --border-width: 0; + --inner-border-width: 0; } - // iOS Full Lines List // -------------------------------------------------- -.list-ios-lines-full .item-ios, -.list-ios .item-ios-lines-full { - border-bottom-width: $list-ios-item-border-bottom-width; +.list-ios-lines-full .item, +.list-ios .item-lines-full { + --border-width: #{0 0 $list-ios-item-border-bottom-width 0}; } -.list-ios-lines-full .item-ios .item-inner { - border-bottom-width: 0; +.list-ios-lines-full .item { + --inner-border-width: 0; } // iOS Inset Lines List // -------------------------------------------------- -.list-ios-lines-inset .item-ios .item-inner, -.list-ios .item-ios-lines-inset .item-inner { - border-bottom-width: $list-ios-item-border-bottom-width; +.list-ios-lines-inset .item, +.list-ios .item-lines-inset { + --inner-border-width: #{0 0 $list-ios-item-border-bottom-width 0}; } + // Remove the border from items in lists // if they are explicitly styled by the item // to be different than the list -.list-ios .item-ios-lines-full .item-inner, -.list-ios .item-ios-lines-inset { - border-bottom-width: 0; +.list-ios .item-lines-inset { + --border-width: 0; +} + +.list-ios .item-lines-full { + --inner-border-width: 0; } diff --git a/core/src/components/list/list.md.scss b/core/src/components/list/list.md.scss index 864582397a..ebcd5811e2 100644 --- a/core/src/components/list/list.md.scss +++ b/core/src/components/list/list.md.scss @@ -8,10 +8,6 @@ @include margin(-1px, $list-md-margin-end, $list-md-margin-bottom, $list-md-margin-start); } -.list-md + .list ion-list-header { - @include margin(-$list-md-margin-top, null, null, null); -} - .list-md > .input:last-child::after { @include position-horizontal(0, null); } @@ -19,66 +15,64 @@ // Material Design Inset List // -------------------------------------------------- -.list-md[inset] { +.list-md.list-inset { @include margin($list-inset-md-margin-top, $list-inset-md-margin-end, $list-inset-md-margin-bottom, $list-inset-md-margin-start); @include border-radius($list-inset-md-border-radius); } -.list-md[inset] ion-item:first-child .item-md { - @include border-radius($list-inset-md-border-radius, $list-inset-md-border-radius, null, null); - - border-top-width: 0; +.list-md.list-inset ion-item:first-child { + --border-radius: #{$list-inset-md-border-radius $list-inset-md-border-radius 0 0}; + --border-width: 0; } -.list-md[inset] ion-item:last-child .item-md { - @include border-radius(null, null, $list-inset-md-border-radius, $list-inset-md-border-radius); - - border-bottom-width: 0; +.list-md.list-inset ion-item:last-child { + --border-radius: #{0 0 $list-inset-md-border-radius, $list-inset-md-border-radius}; + --border-width: 0; } -.list-md[inset] .item-interactive { - @include padding-horizontal(0); +.list-md.list-inset .item-interactive { + --padding-start: 0; + --padding-end: 0; } -.list-md[inset] + ion-list[inset] { +.list-md.list-inset + ion-list.list-inset { @include margin(0, null, null, null); } -.list-md[inset] ion-list-header { - background-color: $item-md-background-color; -} // Material Design No Lines List // -------------------------------------------------- -.list-md-lines-none .item-md, -.list-md-lines-none .item-md .item-inner { - border-bottom-width: 0; +.list-md-lines-none .item { + --border-width: 0; + --inner-border-width: 0; } - // Material Design Full Lines List // -------------------------------------------------- -.list-md-lines-full .item-md, -.list-md .item-md-lines-full { - border-bottom-width: $list-md-item-border-bottom-width; +.list-md-lines-full .item, +.list-md .item-lines-full { + --border-width: #{0 0 $list-md-item-border-bottom-width 0}; } // Material Design Inset Lines List // -------------------------------------------------- -.list-md-lines-inset .item-md .item-inner, -.list-md .item-md-lines-inset .item-inner { - border-bottom-width: $list-md-item-border-bottom-width; +.list-md-lines-inset .item, +.list-md .item-lines-inset { + --inner-border-width: #{0 0 $list-md-item-border-bottom-width 0}; } // Remove the border from items in lists // if they are explicitly styled by the item // to be different than the list -.list-md .item-md-lines-full .item-inner, -.list-md .item-md-lines-inset { - border-bottom-width: 0; -} \ No newline at end of file +.list-md .item-lines-full { + --inner-border-width: 0; +} + +.list-md .item-lines-inset { + --border-width: 0; +} diff --git a/core/src/components/list/list.scss b/core/src/components/list/list.scss index 7e554a360e..4a47ab4895 100644 --- a/core/src/components/list/list.scss +++ b/core/src/components/list/list.scss @@ -1,4 +1,5 @@ @import "../../themes/ionic.globals"; +@import "../../themes/ionic.theme.default"; // List @@ -13,9 +14,11 @@ ion-list { contain: content; list-style-type: none; + + background: $item-background-color; } -ion-list[inset] { +ion-list.list-inset { overflow: hidden; transform: translateZ(0); diff --git a/core/src/components/list/list.tsx b/core/src/components/list/list.tsx index af7e0dfd40..0045998dbb 100644 --- a/core/src/components/list/list.tsx +++ b/core/src/components/list/list.tsx @@ -1,25 +1,29 @@ import { Component, Method, Prop } from '@stencil/core'; import { Mode } from '../../interface'; +import { createThemedClasses } from '../../utils/theme'; @Component({ tag: 'ion-list', styleUrls: { ios: 'list.ios.scss', md: 'list.md.scss' - }, - host: { - theme: 'list' } }) export class List { - private mode!: Mode; private openItem?: HTMLIonItemSlidingElement; + mode!: Mode; + /** * How the bottom border should be displayed on all items. */ @Prop() lines?: 'full' | 'inset' | 'none'; + /** + * How the bottom border should be displayed on all items. + */ + @Prop() inset = false; + /** * Get the [Item Sliding](../../item-sliding/ItemSliding) that is currently opene. */ @@ -53,7 +57,9 @@ export class List { hostData() { return { class: { + ...createThemedClasses(this.mode, 'list'), [`list-lines-${this.lines}`]: !!this.lines, + 'list-inset': this.inset, [`list-${this.mode}-lines-${this.lines}`]: !!this.lines } }; diff --git a/core/src/components/list/readme.md b/core/src/components/list/readme.md index 6fae5624ad..19c7887e15 100644 --- a/core/src/components/list/readme.md +++ b/core/src/components/list/readme.md @@ -13,6 +13,13 @@ reorder items within the list, and deleting items. ## Properties +#### inset + +boolean + +How the bottom border should be displayed on all items. + + #### lines string @@ -22,6 +29,13 @@ How the bottom border should be displayed on all items. ## Attributes +#### inset + +boolean + +How the bottom border should be displayed on all items. + + #### lines string diff --git a/core/src/components/list/test/basic/index.html b/core/src/components/list/test/basic/index.html index 0a86411da4..f2bb1781a2 100644 --- a/core/src/components/list/test/basic/index.html +++ b/core/src/components/list/test/basic/index.html @@ -1,44 +1,47 @@ + List - Basic + + - - - List - Basic - - + + + List - Basic + + - - - Pokémon Yellow - Super Metroid - Mega Man X - The Legend of Zelda - Pac-Man - Super Mario World - Street Fighter II - Half Life - Portal - Final Fantasy VII - Star Fox - Tetris - Donkey Kong III - Goldeneye 007 - Doom - Fallout - GTA - Halo - - + + + Pokémon Yellow + Super Metroid + Mega Man X + The Legend of Zelda + Pac-Man + Super Mario World + Street Fighter II + Half Life + Portal + Final Fantasy VII + Star Fox + Tetris + Donkey Kong III + Goldeneye 007 + Doom + Fallout + GTA + Halo + + - + diff --git a/core/src/components/list/test/inset/index.html b/core/src/components/list/test/inset/index.html index 24ebc7dbdd..c6c4558d7a 100644 --- a/core/src/components/list/test/inset/index.html +++ b/core/src/components/list/test/inset/index.html @@ -1,70 +1,73 @@ + List - Basic + + - - - List - Inset - - + + + List - Inset + + - - - - Normal Input - - + + + + Normal Input + + - - Stacked Input - - + + Stacked Input + + - - Normal Select - - 1 - 2 - 3 - - + + Normal Select + + 1 + 2 + 3 + + - - Stacked Select - - 1 - 2 - 3 - - + + Stacked Select + + 1 + 2 + 3 + + - - Normal Datetime - - + + Normal Datetime + + - - Stacked Datetime - - + + Stacked Datetime + + - - + + - + diff --git a/core/src/components/list/test/lines/e2e.js b/core/src/components/list/test/lines/e2e.js new file mode 100644 index 0000000000..8c52e3a8ea --- /dev/null +++ b/core/src/components/list/test/lines/e2e.js @@ -0,0 +1,19 @@ +'use strict'; + +const { By, until } = require('selenium-webdriver'); +const { register, Page, platforms } = require('../../../../../scripts/e2e'); + +class E2ETestPage extends Page { + constructor(driver, platform) { + super(driver, `http://localhost:3333/src/components/list/test/basic?ionic:mode=${platform}`); + } +} + +platforms.forEach(platform => { + describe('list/basic', () => { + register('should init', driver => { + const page = new E2ETestPage(driver, platform); + return page.navigate('#content'); + }); + }); +}); diff --git a/core/src/components/list/test/lines/index.html b/core/src/components/list/test/lines/index.html new file mode 100644 index 0000000000..c9a21f5142 --- /dev/null +++ b/core/src/components/list/test/lines/index.html @@ -0,0 +1,61 @@ + + + + + + List - Basic + + + + + + + + + + + List - Basic + + + + + + Lines: full + Pokémon Yellow + Super Metroid + Mega Man X + The Legend of Zelda + Pac-Man + + + + Lines: inset + Super Mario World + Street Fighter II + Half Life + Portal + + + + Lines: none + Star Fox + Tetris + Donkey Kong III + Goldeneye 007 + + + + Lines: Default + Fallout + GTA + Halo + Doom + Final Fantasy VII + + + + + + + + diff --git a/core/src/components/list/test/preview/index.html b/core/src/components/list/test/preview/index.html index 93fee3683b..fb01e75d54 100644 --- a/core/src/components/list/test/preview/index.html +++ b/core/src/components/list/test/preview/index.html @@ -1,44 +1,47 @@ + List + + - - - List - - + + + List + + - - - Pokémon Yellow - Super Metroid - Mega Man X - The Legend of Zelda - Pac-Man - Super Mario World - Street Fighter II - Half Life - Portal - Final Fantasy VII - Star Fox - Tetris - Donkey Kong III - Goldeneye 007 - Doom - Fallout - GTA - Halo - - + + + Pokémon Yellow + Super Metroid + Mega Man X + The Legend of Zelda + Pac-Man + Super Mario World + Street Fighter II + Half Life + Portal + Final Fantasy VII + Star Fox + Tetris + Donkey Kong III + Goldeneye 007 + Doom + Fallout + GTA + Halo + + - + diff --git a/core/src/components/list/test/standalone/index.html b/core/src/components/list/test/standalone/index.html index 9f1f4edc78..3a5207e273 100644 --- a/core/src/components/list/test/standalone/index.html +++ b/core/src/components/list/test/standalone/index.html @@ -6,6 +6,7 @@ List - Standalone + diff --git a/core/src/components/loading-controller/loading-controller.tsx b/core/src/components/loading-controller/loading-controller.tsx index cde8cbe859..f73eddb908 100644 --- a/core/src/components/loading-controller/loading-controller.tsx +++ b/core/src/components/loading-controller/loading-controller.tsx @@ -32,7 +32,7 @@ export class LoadingController implements OverlayController { * Create a loading overlay with loading options. */ @Method() - create(opts?: LoadingOptions): Promise { + create(opts?: LoadingOptions): Promise { return createOverlay(this.doc.createElement('ion-loading'), opts); } diff --git a/core/src/components/loading/loading.ios.vars.scss b/core/src/components/loading/loading.ios.vars.scss index 7684cc98dc..14f97fa6fe 100644 --- a/core/src/components/loading/loading.ios.vars.scss +++ b/core/src/components/loading/loading.ios.vars.scss @@ -4,10 +4,10 @@ // -------------------------------------------------- /// @prop - Font family of the loading wrapper -$loading-ios-font-family: $font-family-ios-base !default; +$loading-ios-font-family: $font-family-base !default; /// @prop - Font size of the loading wrapper -$loading-ios-font-size: $font-size-ios-base !default; +$loading-ios-font-size: 14px !default; /// @prop - Padding top of the loading wrapper $loading-ios-padding-top: 24px !default; @@ -31,22 +31,22 @@ $loading-ios-max-height: 90% !default; $loading-ios-border-radius: 8px !default; /// @prop - Text color of the loading wrapper -$loading-ios-text-color: $text-ios-color !default; +$loading-ios-text-color: $text-color !default; /// @prop - Background of the loading wrapper -$loading-ios-background-color: $background-ios-color-step-50 !default; +$loading-ios-background-color: $background-color-step-50 !default; /// @prop - Background color alpha of the translucent loading wrapper $loading-ios-translucent-background-color-alpha: .8 !default; /// @prop - Background color of the translucent loading wrapper -$loading-ios-translucent-background-color: css-var($background-ios-color-value, background-ios-color, $loading-ios-translucent-background-color-alpha) !default; +$loading-ios-translucent-background-color: rgba(var(--ion-background-color-rgb, $background-color-rgb), $loading-ios-translucent-background-color-alpha) !default; /// @prop - Font weight of the loading content $loading-ios-content-font-weight: bold !default; /// @prop - Color of the loading spinner -$loading-ios-spinner-color: $text-ios-color-step-400 !default; +$loading-ios-spinner-color: $text-color-step-400 !default; /// @prop - Color of the ios loading spinner $loading-ios-spinner-lines-color: $loading-ios-spinner-color !default; diff --git a/core/src/components/loading/loading.md.vars.scss b/core/src/components/loading/loading.md.vars.scss index 153150e567..f1c272e3ce 100644 --- a/core/src/components/loading/loading.md.vars.scss +++ b/core/src/components/loading/loading.md.vars.scss @@ -4,10 +4,10 @@ // -------------------------------------------------- /// @prop - Font family of the loading wrapper -$loading-md-font-family: $font-family-md-base !default; +$loading-md-font-family: $font-family-base !default; /// @prop - Font size of the loading wrapper -$loading-md-font-size: $font-size-md-base !default; +$loading-md-font-size: 14px !default; /// @prop - Padding top of the loading wrapper $loading-md-padding-top: 24px !default; @@ -31,10 +31,10 @@ $loading-md-max-height: 90% !default; $loading-md-border-radius: 2px !default; /// @prop - Text color of the loading wrapper -$loading-md-text-color: $text-md-color-step-150 !default; +$loading-md-text-color: $text-color-step-150 !default; /// @prop - Background of the loading wrapper -$loading-md-background: $background-md-color-step-50 !default; +$loading-md-background: $background-color-step-50 !default; /// @prop - Box shadow color of the loading wrapper $loading-md-box-shadow-color: rgba(0, 0, 0, .4) !default; @@ -43,7 +43,7 @@ $loading-md-box-shadow-color: rgba(0, 0, 0, .4) !default; $loading-md-box-shadow: 0 16px 20px $loading-md-box-shadow-color !default; /// @prop - Color of the loading spinner -$loading-md-spinner-color: ion-color($colors-md, primary, base, md) !default; +$loading-md-spinner-color: ion-color(primary, base) !default; /// @prop - Color of the lines loading spinner $loading-md-spinner-lines-color: $loading-md-spinner-color !default; diff --git a/core/src/components/loading/loading.tsx b/core/src/components/loading/loading.tsx index cbb91a0622..3f065caa46 100644 --- a/core/src/components/loading/loading.tsx +++ b/core/src/components/loading/loading.tsx @@ -1,6 +1,6 @@ import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core'; -import { Animation, AnimationBuilder, Color, Config, Mode } from '../../interface'; -import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, present } from '../../utils/overlays'; +import { Animation, AnimationBuilder, Color, Config, Mode, OverlayEventDetail, OverlayInterface } from '../../interface'; +import { BACKDROP, dismiss, eventMethod, present } from '../../utils/overlays'; import { createThemedClasses, getClassMap } from '../../utils/theme'; import { iosEnterAnimation } from './animations/ios.enter'; @@ -14,9 +14,6 @@ import { mdLeaveAnimation } from './animations/md.leave'; styleUrls: { ios: 'loading.ios.scss', md: 'loading.md.scss' - }, - host: { - theme: 'loading' } }) export class Loading implements OverlayInterface { @@ -81,7 +78,7 @@ export class Loading implements OverlayInterface { * The name of the spinner to display. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, * `"bubbles"`, `"circles"`, `"crescent"`. */ - @Prop() spinner?: string; + @Prop({mutable: true}) spinner?: string; /** * If true, the loading indicator will be translucent. Defaults to `false`. @@ -188,7 +185,7 @@ export class Loading implements OverlayInterface { hostData() { const themedClasses = this.translucent - ? createThemedClasses(this.mode, this.color, 'loading-translucent') + ? createThemedClasses(this.mode, 'loading-translucent') : {}; return { @@ -196,6 +193,7 @@ export class Loading implements OverlayInterface { zIndex: 20000 + this.overlayId }, class: { + ...createThemedClasses(this.mode, 'loading'), ...themedClasses, ...getClassMap(this.cssClass) } diff --git a/core/src/components/loading/test/basic/index.html b/core/src/components/loading/test/basic/index.html index 7129176419..d5246ad530 100644 --- a/core/src/components/loading/test/basic/index.html +++ b/core/src/components/loading/test/basic/index.html @@ -6,6 +6,7 @@ Loading - Basic + diff --git a/core/src/components/loading/test/preview/index.html b/core/src/components/loading/test/preview/index.html index 48c0644b63..9f92ae5bf3 100644 --- a/core/src/components/loading/test/preview/index.html +++ b/core/src/components/loading/test/preview/index.html @@ -6,6 +6,7 @@ Loading + diff --git a/core/src/components/loading/test/standalone/index.html b/core/src/components/loading/test/standalone/index.html index ddcdb3371b..37b05ef84e 100644 --- a/core/src/components/loading/test/standalone/index.html +++ b/core/src/components/loading/test/standalone/index.html @@ -6,6 +6,7 @@ Loading - Standalone + diff --git a/core/src/components/menu-button/menu-button.ios.scss b/core/src/components/menu-button/menu-button.ios.scss index 1766f89205..41c5a43819 100644 --- a/core/src/components/menu-button/menu-button.ios.scss +++ b/core/src/components/menu-button/menu-button.ios.scss @@ -4,7 +4,7 @@ // iOS Menu Button // -------------------------------------------------- -.menu-button-ios .menu-button-inner { +.menu-button-inner { @include padding(0); @include margin(2px, 0, 0, 0); @@ -27,7 +27,7 @@ } } -.menu-button-ios ion-icon { +ion-icon { @include padding(0); @include margin(0, -3px, 0, 0); diff --git a/core/src/components/menu-button/menu-button.ios.vars.scss b/core/src/components/menu-button/menu-button.ios.vars.scss index d157a36c13..13483851bc 100644 --- a/core/src/components/menu-button/menu-button.ios.vars.scss +++ b/core/src/components/menu-button/menu-button.ios.vars.scss @@ -7,4 +7,4 @@ $menu-button-ios-button-z-index: $z-index-toolbar-buttons !default; /// @prop - Text color of the Menu button -$menu-button-ios-color: ion-color($colors-ios, primary, base, ios) !default; +$menu-button-ios-color: ion-color(primary, base) !default; diff --git a/core/src/components/menu-button/menu-button.md.scss b/core/src/components/menu-button/menu-button.md.scss index 7b04d2d504..6fa188d7de 100644 --- a/core/src/components/menu-button/menu-button.md.scss +++ b/core/src/components/menu-button/menu-button.md.scss @@ -4,7 +4,7 @@ // MD Menu Button // -------------------------------------------------- -.menu-button-md .menu-button-inner { +.menu-button-inner { @include margin(2px, 6px, 0, 0); @include padding(0, 5px); @@ -25,11 +25,11 @@ } } -.menu-button-md ion-icon { +ion-icon { @include padding-horizontal(null, 0.3em); @include margin(0); @include padding(0, 6px); - @include text-align(start); + text-align: start; font-size: 24px; font-weight: normal; diff --git a/core/src/components/menu-button/menu-button.scss b/core/src/components/menu-button/menu-button.scss index c8f7c99931..42d0643abc 100644 --- a/core/src/components/menu-button/menu-button.scss +++ b/core/src/components/menu-button/menu-button.scss @@ -3,14 +3,22 @@ // Menu Button // -------------------------------------------------- -.menu-button button { +:host { + pointer-events: all; +} + +button { @include font-smoothing(); - @include text-align(center); - @include appearance(none); + text-align: center; + + margin: 0; + padding: 0; position: relative; z-index: 0; - display: inline-flex; + display: flex; + color: inherit; + flex-flow: row nowrap; flex-shrink: 0; align-items: center; @@ -24,13 +32,13 @@ text-overflow: ellipsis; text-transform: none; + background: transparent; + white-space: nowrap; cursor: pointer; - vertical-align: top; // the better option for most scenarios - vertical-align: -webkit-baseline-middle; // the best for those that support it - - transition: background-color, opacity 100ms linear; font-kerning: none; user-select: none; + + appearance: none; } diff --git a/core/src/components/menu-button/menu-button.tsx b/core/src/components/menu-button/menu-button.tsx index deed5e5c23..885c6584a9 100644 --- a/core/src/components/menu-button/menu-button.tsx +++ b/core/src/components/menu-button/menu-button.tsx @@ -1,5 +1,5 @@ import { Component, Prop } from '@stencil/core'; -import { Config } from '../../interface'; +import { Config, Mode } from '../../interface'; @Component({ tag: 'ion-menu-button', @@ -7,13 +7,13 @@ import { Config } from '../../interface'; ios: 'menu-button.ios.scss', md: 'menu-button.md.scss' }, - host: { - theme: 'menu-button' - } + shadow: true }) export class MenuButton { - @Prop({ context: 'config' }) - config!: Config; + + mode!: Mode; + + @Prop({ context: 'config' }) config!: Config; /** * Optional property that maps to a Menu's `menuId` prop. Can also be `left` or `right` for the menu side. This is used to find the correct menu to toggle @@ -29,11 +29,11 @@ export class MenuButton { const menuIcon = this.config.get('menuIcon', 'menu'); return ( - + ); } diff --git a/core/src/components/menu-controller/animations/overlay.ts b/core/src/components/menu-controller/animations/overlay.ts index 3109a111fb..f91eb87f4b 100644 --- a/core/src/components/menu-controller/animations/overlay.ts +++ b/core/src/components/menu-controller/animations/overlay.ts @@ -30,8 +30,6 @@ export function menuOverlayAnimation(Animation: Animation, _: HTMLElement, menu: .addElement(menu.backdropEl) .fromTo('opacity', 0.01, 0.3); - - return baseAnimation(Animation).then(animation => { return animation.add(menuAni) .add(backdropAni); diff --git a/core/src/components/menu-toggle/menu-toggle.scss b/core/src/components/menu-toggle/menu-toggle.scss deleted file mode 100644 index c4526a0534..0000000000 --- a/core/src/components/menu-toggle/menu-toggle.scss +++ /dev/null @@ -1,4 +0,0 @@ - -ion-menu-toggle.menu-toggle-hidden { - display: none; -} diff --git a/core/src/components/menu-toggle/menu-toggle.tsx b/core/src/components/menu-toggle/menu-toggle.tsx index 962c5d9d8d..373fd900e2 100644 --- a/core/src/components/menu-toggle/menu-toggle.tsx +++ b/core/src/components/menu-toggle/menu-toggle.tsx @@ -2,7 +2,6 @@ import { Component, Listen, Prop, State } from '@stencil/core'; @Component({ tag: 'ion-menu-toggle', - styleUrl: 'menu-toggle.scss' }) export class MenuToggle { @Prop({ context: 'document' }) @@ -26,7 +25,7 @@ export class MenuToggle { this.updateVisibility(); } - @Listen('child:click') + @Listen('click') async onClick() { const menuCtrl = await getMenuController(this.doc); if (menuCtrl) { @@ -55,19 +54,15 @@ export class MenuToggle { hostData() { const hidden = this.autoHide && !this.visible; return { - class: { - 'menu-toggle-hidden': hidden - } + 'hidden': hidden }; } } -function getMenuController( - doc: Document -): Promise { +function getMenuController(doc: Document): Promise { const menuControllerElement = doc.querySelector('ion-menu-controller'); if (!menuControllerElement) { - return Promise.resolve(null); + return Promise.resolve(undefined); } return menuControllerElement.componentOnReady(); } diff --git a/core/src/components/menu-toggle/test/basic/index.html b/core/src/components/menu-toggle/test/basic/index.html index fef91159ab..cb2c92cec3 100644 --- a/core/src/components/menu-toggle/test/basic/index.html +++ b/core/src/components/menu-toggle/test/basic/index.html @@ -6,6 +6,7 @@ Menu Toggle - Basic + @@ -71,14 +72,14 @@ -
- Menu Button Will Open Default -
- Menu Button Will Open start + Menu Button Will Open Default
- Menu Button Will Open end + Menu Button Will Open start +
+
+ Menu Button Will Open end
@@ -107,6 +108,9 @@ } + diff --git a/core/src/components/menu-toggle/test/button/index.html b/core/src/components/menu-toggle/test/button/index.html index 58e4df9e22..918bdab306 100644 --- a/core/src/components/menu-toggle/test/button/index.html +++ b/core/src/components/menu-toggle/test/button/index.html @@ -6,6 +6,7 @@ Menu - Button + @@ -62,4 +63,5 @@ + diff --git a/core/src/components/menu-toggle/test/list/index.html b/core/src/components/menu-toggle/test/list/index.html index 16009704c4..2844bbe48e 100644 --- a/core/src/components/menu-toggle/test/list/index.html +++ b/core/src/components/menu-toggle/test/list/index.html @@ -6,6 +6,7 @@ Menu - List + @@ -42,17 +43,17 @@ - - - No Menu Toggle - - + + + No Menu Toggle + + - List Item + List Item @@ -60,7 +61,7 @@ - List Item + List Item @@ -68,7 +69,7 @@ - List Item + List Item @@ -76,7 +77,7 @@ - List Item + List Item @@ -84,7 +85,7 @@ - List Item + List Item @@ -92,7 +93,7 @@ - List Item + List Item @@ -100,7 +101,7 @@ - List Item + List Item @@ -108,7 +109,7 @@ - List Item + List Item @@ -116,7 +117,7 @@ - List Item + List Item @@ -124,7 +125,7 @@ - List Item + List Item @@ -132,7 +133,7 @@ - List Item + List Item @@ -140,7 +141,7 @@ - List Item + List Item @@ -148,7 +149,7 @@ - List Item + List Item @@ -156,7 +157,7 @@ - List Item + List Item @@ -164,7 +165,7 @@ - List Item + List Item @@ -172,7 +173,7 @@ - List Item + List Item @@ -180,7 +181,7 @@ - List Item + List Item @@ -188,7 +189,7 @@ - List Item + List Item @@ -196,7 +197,7 @@ - List Item + List Item @@ -204,7 +205,7 @@ - List Item + List Item @@ -212,7 +213,7 @@ - List Item + List Item @@ -220,7 +221,7 @@ - List Item + List Item @@ -228,7 +229,7 @@ - List Item + List Item @@ -237,4 +238,5 @@ + diff --git a/core/src/components/menu-toggle/test/preview/index.html b/core/src/components/menu-toggle/test/preview/index.html index 5a772cd212..067c62cb13 100644 --- a/core/src/components/menu-toggle/test/preview/index.html +++ b/core/src/components/menu-toggle/test/preview/index.html @@ -6,6 +6,7 @@ Menu Toggle + @@ -71,14 +72,14 @@ -
- Menu Button Will Open Default -
- Menu Button Will Open start + Menu Button Will Open Default
- Menu Button Will Open end + Menu Button Will Open start +
+
+ Menu Button Will Open end
@@ -107,6 +108,9 @@ } + diff --git a/core/src/components/menu/menu.ios.scss b/core/src/components/menu/menu.ios.scss index 19e627360c..dae8225761 100644 --- a/core/src/components/menu/menu.ios.scss +++ b/core/src/components/menu/menu.ios.scss @@ -4,14 +4,27 @@ // iOS Menu // -------------------------------------------------- -.menu-ios .menu-inner { +.menu-inner { background: $menu-ios-background; } -.app-ios .menu-type-overlay .menu-inner { +:host(.menu-type-overlay) .menu-inner { box-shadow: $menu-ios-box-shadow-overlay; } + +// iOS Menu Push +// -------------------------------------------------- + +:host(.menu-type-push) { + z-index: $z-index-menu-overlay; +} + +:host(.menu-type-push) .show-backdrop { + display: block; +} + +// TODO: review // iOS Menu Content // -------------------------------------------------- @@ -19,17 +32,6 @@ box-shadow: $menu-ios-box-shadow-reveal; } -.app-ios .menu-content-push { +.menu-content-push { box-shadow: $menu-ios-box-shadow-push; -} - -// iOS Menu Push -// -------------------------------------------------- - -.app-ios .menu-type-push { - z-index: $z-index-menu-overlay; -} - -.app-ios .menu-type-push .show-backdrop { - display: block; -} +} \ No newline at end of file diff --git a/core/src/components/menu/menu.ios.vars.scss b/core/src/components/menu/menu.ios.vars.scss index 6f194cdfb4..3c8ff8ce72 100644 --- a/core/src/components/menu/menu.ios.vars.scss +++ b/core/src/components/menu/menu.ios.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Background of the menu -$menu-ios-background: $background-ios-color !default; +$menu-ios-background: $background-color !default; /// @prop - Box shadow color of the menu $menu-ios-box-shadow-color: rgba(0, 0, 0, .08) !default; diff --git a/core/src/components/menu/menu.md.scss b/core/src/components/menu/menu.md.scss index 29160dc4c5..442fa80673 100644 --- a/core/src/components/menu/menu.md.scss +++ b/core/src/components/menu/menu.md.scss @@ -4,14 +4,15 @@ // Material Design Menu // -------------------------------------------------- -.menu-md .menu-inner { +.menu-inner { background: $menu-md-background; } -.menu-md.menu-type-overlay .menu-inner { +:host(.menu-type-overlay) .menu-inner { box-shadow: $menu-md-box-shadow; } +// TODO: review // MD Menu Content // -------------------------------------------------- diff --git a/core/src/components/menu/menu.md.vars.scss b/core/src/components/menu/menu.md.vars.scss index fe6b18314a..d86148b86f 100644 --- a/core/src/components/menu/menu.md.vars.scss +++ b/core/src/components/menu/menu.md.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Background of the menu -$menu-md-background: $background-md-color !default; +$menu-md-background: $background-color !default; /// @prop - Box shadow color of the menu $menu-md-box-shadow-color: rgba(0, 0, 0, .25) !default; diff --git a/core/src/components/menu/menu.scss b/core/src/components/menu/menu.scss index 8c90b1f93e..e6cf55824e 100644 --- a/core/src/components/menu/menu.scss +++ b/core/src/components/menu/menu.scss @@ -3,7 +3,7 @@ // Menu // -------------------------------------------------- -ion-menu { +:host { @include position(0, 0, 0, 0); position: absolute; @@ -13,7 +13,7 @@ ion-menu { contain: strict; } -ion-menu.show-menu { +:host(.show-menu) { display: block; } @@ -35,7 +35,7 @@ ion-menu.show-menu { contain: strict; } -.menu-side-left > .menu-inner { +:host(.menu-side-start) .menu-inner { @include multi-dir() { // scss-lint:disable PropertySpelling right: auto; @@ -43,7 +43,7 @@ ion-menu.show-menu { } } -.menu-side-right > .menu-inner { +:host(.menu-side-end) .menu-inner { @include multi-dir() { // scss-lint:disable PropertySpelling right: 0; @@ -51,7 +51,7 @@ ion-menu.show-menu { } } -ion-menu ion-backdrop { +ion-backdrop { z-index: -1; display: none; @@ -92,11 +92,11 @@ ion-menu ion-backdrop { // The content slides over to reveal the menu underneath. // The menu itself, which is under the content, does not move. -ion-menu.menu-type-reveal { +:host(.menu-type-reveal) { z-index: 0; } -ion-menu.menu-type-reveal.show-menu .menu-inner { +:host(.menu-type-reveal.show-menu) .menu-inner { @include transform(translate3d(0, 0, 0)); } @@ -106,12 +106,31 @@ ion-menu.menu-type-reveal.show-menu .menu-inner { // The menu slides over the content. The content // itself, which is under the menu, does not move. -ion-menu.menu-type-overlay { +:host(.menu-type-overlay) { z-index: $z-index-menu-overlay; } -ion-menu.menu-type-overlay .show-backdrop { +:host(.menu-type-overlay) .show-backdrop { display: block; cursor: pointer; } + + +// Menu Split Pane +// -------------------------------------------------- + +:host(.menu-pane-visible) .menu-inner { + @include position-horizontal(0, 0); + + // scss-lint:disable ImportantRule + width: auto; + + box-shadow: none !important; + transform: none !important; +} + +:host(.menu-pane-visible) ion-backdrop { + // scss-lint:disable ImportantRule + display: hidden !important; +} diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx index 4fd009448e..a6cf36e678 100644 --- a/core/src/components/menu/menu.tsx +++ b/core/src/components/menu/menu.tsx @@ -12,13 +12,13 @@ import { } from '@stencil/core'; import { Animation, - Color, Config, GestureDetail, MenuChangeEventDetail, - Mode + Mode, + Side } from '../../interface'; -import { Side, assert, isEndSide } from '../../utils/helpers'; +import { assert, isEndSide } from '../../utils/helpers'; @Component({ tag: 'ion-menu', @@ -26,38 +26,33 @@ import { Side, assert, isEndSide } from '../../utils/helpers'; ios: 'menu.ios.scss', md: 'menu.md.scss' }, - host: { - theme: 'menu' - } + shadow: true }) export class Menu { + private animation?: Animation; - private isPane = false; private _isOpen = false; private lastOnEnd = 0; mode!: Mode; - color?: Color; + isAnimating = false; width!: number; // TOOD backdropEl?: HTMLElement; menuInnerEl?: HTMLElement; contentEl?: HTMLElement; - menuCtrl?: HTMLIonMenuControllerElement | null; + menuCtrl?: HTMLIonMenuControllerElement; @Element() el!: HTMLIonMenuElement; + @State() isPaneVisible = false; @State() isEndSide = false; @Prop({ context: 'config' }) config!: Config; - @Prop({ context: 'isServer' }) isServer!: boolean; - @Prop({ connect: 'ion-menu-controller' }) lazyMenuCtrl!: HTMLIonMenuControllerElement; - @Prop({ context: 'enableListener' }) enableListener!: EventListenerEnable; - @Prop({ context: 'window' }) win!: Window; /** @@ -121,12 +116,6 @@ export class Menu { protected swipeEnabledChanged() { this.updateState(); } - - /** - * If true, the menu will persist on child pages. - */ - @Prop() persistent = false; - /** * The edge threshold for dragging the menu open. * If a drag/swipe happens over this value, the menu is not triggered. @@ -187,10 +176,11 @@ export class Menu { let isEnabled = !this.disabled; if (isEnabled === true || typeof isEnabled === 'undefined') { const menus = this.menuCtrl!.getMenus(); - isEnabled = !menus.some(m => { + isEnabled = !menus.some((m: any) => { return m.side === this.side && !m.disabled; }); } + // register this menu with the app's menu controller this.menuCtrl!._register(this); this.ionMenuChange.emit({ disabled: !isEnabled, open: this._isOpen }); @@ -208,15 +198,15 @@ export class Menu { } @Listen('body:ionSplitPaneVisible') - splitPaneChanged(ev: CustomEvent) { - this.isPane = (ev.target as any).isPane(this.el); + onSplitPaneChanged(ev: CustomEvent) { + this.isPaneVisible = (ev.target as HTMLIonSplitPaneElement).isPane(this.el); this.updateState(); } @Listen('body:click', { enabled: false, capture: true }) - onBackdropClick(ev: UIEvent) { - const el = ev.target as HTMLElement; - if (!el.closest('.menu-inner') && this.lastOnEnd < ev.timeStamp - 100) { + onBackdropClick(ev: any) { + const path = ev.path; + if (path && !path.includes(this.menuInnerEl) && this.lastOnEnd < ev.timeStamp - 100) { ev.preventDefault(); ev.stopPropagation(); this.close(); @@ -264,7 +254,7 @@ export class Menu { @Method() isActive(): boolean { - return !this.disabled && !this.isPane; + return !this.disabled && !this.isPaneVisible; } private async loadAnimation(): Promise { @@ -451,26 +441,31 @@ export class Menu { } hostData() { - const isEndSide = this.isEndSide; + const { isEndSide, type, disabled, isPaneVisible } = this; return { role: 'complementary', class: { - [`menu-type-${this.type}`]: true, - 'menu-enabled': !this.disabled, - 'menu-side-right': isEndSide, - 'menu-side-left': !isEndSide + [`menu-type-${type}`]: true, + 'menu-enabled': !disabled, + 'menu-side-end': isEndSide, + 'menu-side-start': !isEndSide, + 'menu-pane-visible': isPaneVisible } }; } render() { return [ -
(this.menuInnerEl = el)}> - +
this.menuInnerEl = el} + onClick={this.onBackdropClick.bind(this)} + > +
, (this.backdropEl = el)} + ref={el => this.backdropEl = el} class="menu-backdrop" tappable={false} stopPropagation={false} diff --git a/core/src/components/menu/readme.md b/core/src/components/menu/readme.md index d174e68749..c332e3eecf 100644 --- a/core/src/components/menu/readme.md +++ b/core/src/components/menu/readme.md @@ -42,13 +42,6 @@ string An id for the menu. -#### persistent - -boolean - -If true, the menu will persist on child pages. - - #### side string @@ -102,13 +95,6 @@ string An id for the menu. -#### persistent - -boolean - -If true, the menu will persist on child pages. - - #### side string diff --git a/core/src/components/menu/test/basic/e2e.js b/core/src/components/menu/test/basic/e2e.js index 660c1ed7ff..bfc32892d7 100644 --- a/core/src/components/menu/test/basic/e2e.js +++ b/core/src/components/menu/test/basic/e2e.js @@ -7,13 +7,6 @@ class E2ETestPage extends Page { constructor(driver, platform) { super(driver, `http://localhost:3333/src/components/menu/test/basic?ionic:mode=${platform}`); } - - async present(buttonId) { - await this.navigate('#left'); - this.driver.findElement(By.id(buttonId)).click(); - await this.driver.wait(until.elementLocated(By.css('.menu-inner'))); - return await this.driver.wait(until.elementIsVisible(this.driver.findElement(By.css('.menu-inner')))); - } } platforms.forEach(platform => { @@ -25,7 +18,7 @@ platforms.forEach(platform => { register('should Open start menu', driver => { const page = new E2ETestPage(driver, platform); - return page.present('left'); + return page.present('#left', { waitFor: '.menu-inner' }); }); }); }); diff --git a/core/src/components/menu/test/basic/index.html b/core/src/components/menu/test/basic/index.html index 8c73e8bfeb..0c2dc55723 100644 --- a/core/src/components/menu/test/basic/index.html +++ b/core/src/components/menu/test/basic/index.html @@ -6,6 +6,7 @@ Menu - Basic + @@ -126,4 +128,5 @@ } + diff --git a/core/src/components/menu/test/preview/index.html b/core/src/components/menu/test/preview/index.html index bf36b74173..20d5f800b7 100644 --- a/core/src/components/menu/test/preview/index.html +++ b/core/src/components/menu/test/preview/index.html @@ -6,6 +6,7 @@ Menu + @@ -126,4 +128,5 @@ } + diff --git a/core/src/components/menu/test/standalone/index.html b/core/src/components/menu/test/standalone/index.html index 54efedce5e..c789fdd4b2 100644 --- a/core/src/components/menu/test/standalone/index.html +++ b/core/src/components/menu/test/standalone/index.html @@ -6,6 +6,7 @@ Menu - Standalone + diff --git a/core/src/components/modal-controller/modal-controller.tsx b/core/src/components/modal-controller/modal-controller.tsx index e4561aa10b..09c2155ae7 100644 --- a/core/src/components/modal-controller/modal-controller.tsx +++ b/core/src/components/modal-controller/modal-controller.tsx @@ -32,7 +32,7 @@ export class ModalController implements OverlayController { * Create a modal overlay with modal options. */ @Method() - create(opts?: ModalOptions): Promise { + create(opts?: ModalOptions): Promise { return createOverlay(this.doc.createElement('ion-modal'), opts); } diff --git a/core/src/components/modal/modal.ios.vars.scss b/core/src/components/modal/modal.ios.vars.scss index b6dcd56489..d228b75d63 100644 --- a/core/src/components/modal/modal.ios.vars.scss +++ b/core/src/components/modal/modal.ios.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Background color for the modal -$modal-ios-background-color: $background-ios-color !default; +$modal-ios-background-color: $background-color !default; /// @prop - Border radius for the modal $modal-ios-border-radius: 10px !default; diff --git a/core/src/components/modal/modal.md.vars.scss b/core/src/components/modal/modal.md.vars.scss index 4791342a96..b75d2331a8 100644 --- a/core/src/components/modal/modal.md.vars.scss +++ b/core/src/components/modal/modal.md.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Background color for the modal -$modal-md-background-color: $background-md-color !default; +$modal-md-background-color: $background-color !default; /// @prop - Box shadow color of the alert $modal-inset-box-shadow-color: rgba(0, 0, 0, .4) !default; diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx index bebf9b2630..e29adae5e1 100644 --- a/core/src/components/modal/modal.tsx +++ b/core/src/components/modal/modal.tsx @@ -1,8 +1,8 @@ import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core'; -import { Animation, AnimationBuilder, Color, ComponentProps, ComponentRef, Config, FrameworkDelegate, Mode } from '../../interface'; +import { Animation, AnimationBuilder, ComponentProps, ComponentRef, Config, FrameworkDelegate, Mode, OverlayEventDetail, OverlayInterface } from '../../interface'; import { attachComponent, detachComponent } from '../../utils/framework-delegate'; -import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, present } from '../../utils/overlays'; +import { BACKDROP, dismiss, eventMethod, present } from '../../utils/overlays'; import { createThemedClasses, getClassMap } from '../../utils/theme'; import { iosEnterAnimation } from './animations/ios.enter'; @@ -16,9 +16,6 @@ import { mdLeaveAnimation } from './animations/md.leave'; styleUrls: { ios: 'modal.ios.scss', md: 'modal.md.scss' - }, - host: { - theme: 'modal' } }) export class Modal implements OverlayInterface { @@ -27,6 +24,7 @@ export class Modal implements OverlayInterface { animation: Animation|undefined; presented = false; + mode!: Mode; @Element() el!: HTMLElement; @@ -37,20 +35,6 @@ export class Modal implements OverlayInterface { @Prop() delegate?: FrameworkDelegate; @Prop() keyboardClose = true; - /** - * The color to use from your Sass `$colors` map. - * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. - * For more information, see [Theming your App](/docs/theming/theming-your-app). - */ - @Prop() color?: Color; - - /** - * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. - * For more information, see [Platform Styles](/docs/theming/platform-specific-styles). - */ - @Prop() mode!: Mode; - /** * Animation to use when the modal is presented. */ @@ -212,7 +196,10 @@ export class Modal implements OverlayInterface { hostData() { return { 'no-router': true, - class: getClassMap(this.cssClass), + class: { + ...createThemedClasses(this.mode, 'modal'), + ...getClassMap(this.cssClass) + }, style: { zIndex: 20000 + this.overlayId, } @@ -220,7 +207,7 @@ export class Modal implements OverlayInterface { } render() { - const dialogClasses = createThemedClasses(this.mode, this.color, 'modal-wrapper'); + const dialogClasses = createThemedClasses(this.mode, 'modal-wrapper'); return [ , diff --git a/core/src/components/modal/readme.md b/core/src/components/modal/readme.md index 31e76600ed..62416277be 100644 --- a/core/src/components/modal/readme.md +++ b/core/src/components/modal/readme.md @@ -14,15 +14,6 @@ Modals can be created using a [Modal Controller](../../modal-controller/ModalCon ## Properties -#### color - -string - -The color to use from your Sass `$colors` map. -Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. -For more information, see [Theming your App](/docs/theming/theming-your-app). - - #### component string @@ -76,15 +67,6 @@ AnimationBuilder Animation to use when the modal is dismissed. -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. -For more information, see [Platform Styles](/docs/theming/platform-specific-styles). - - #### overlayId number @@ -106,15 +88,6 @@ If true, the modal will animate. Defaults to `true`. ## Attributes -#### color - -string - -The color to use from your Sass `$colors` map. -Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. -For more information, see [Theming your App](/docs/theming/theming-your-app). - - #### component string @@ -168,15 +141,6 @@ boolean Animation to use when the modal is dismissed. -#### mode - -string - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. -For more information, see [Platform Styles](/docs/theming/platform-specific-styles). - - #### overlay-id number diff --git a/core/src/components/modal/test/basic/index.html b/core/src/components/modal/test/basic/index.html index 7791920de0..6beccc942a 100644 --- a/core/src/components/modal/test/basic/index.html +++ b/core/src/components/modal/test/basic/index.html @@ -6,29 +6,30 @@ Modal - Basic + - - - Modal - Basic - - + + + Modal - Basic + + - - -

- Present modal -

- + + +

+ Present modal +

+ + diff --git a/core/src/components/modal/test/host-elements/index.html b/core/src/components/modal/test/host-elements/index.html index b570bcda50..a476dd983b 100644 --- a/core/src/components/modal/test/host-elements/index.html +++ b/core/src/components/modal/test/host-elements/index.html @@ -6,29 +6,30 @@ Modal - Host Elements + - - - Modal - Host Elements - - + + + Modal - Host Elements + + - - -

- Present modal -

- + + +

+ Present modal +

+ + diff --git a/core/src/components/modal/test/preview/index.html b/core/src/components/modal/test/preview/index.html index e25977481b..984af2ab88 100644 --- a/core/src/components/modal/test/preview/index.html +++ b/core/src/components/modal/test/preview/index.html @@ -6,29 +6,30 @@ Modal + - - - Modal - - + + + Modal + + - - -

- Present modal -

- + + +

+ Present modal +

+ + diff --git a/core/src/components/modal/test/standalone/index.html b/core/src/components/modal/test/standalone/index.html index 89fe6d7078..be6e45ddb4 100644 --- a/core/src/components/modal/test/standalone/index.html +++ b/core/src/components/modal/test/standalone/index.html @@ -6,6 +6,7 @@ Modal - Standalone + diff --git a/core/src/components/nav-pop/nav-pop.tsx b/core/src/components/nav-pop/nav-pop.tsx index 9a73dc88fd..56b24d5d58 100644 --- a/core/src/components/nav-pop/nav-pop.tsx +++ b/core/src/components/nav-pop/nav-pop.tsx @@ -10,7 +10,7 @@ export class NavPop { @Listen('child:click') pop(): Promise { const nav = this.el.closest('ion-nav'); - if (nav) { + if (nav && !nav.isAnimating()) { return nav.pop(); } return Promise.resolve(null); diff --git a/core/src/components/nav-pop/test/basic/index.html b/core/src/components/nav-pop/test/basic/index.html index becac11b31..dfe41a3fb1 100644 --- a/core/src/components/nav-pop/test/basic/index.html +++ b/core/src/components/nav-pop/test/basic/index.html @@ -1,28 +1,32 @@ + Nav Pop + + + f:last-of-type { + background: yellow; + } + + + diff --git a/core/src/components/nav-pop/test/preview/index.html b/core/src/components/nav-pop/test/preview/index.html index becac11b31..dfe41a3fb1 100644 --- a/core/src/components/nav-pop/test/preview/index.html +++ b/core/src/components/nav-pop/test/preview/index.html @@ -1,28 +1,32 @@ + Nav Pop + + + f:last-of-type { + background: yellow; + } + + + diff --git a/core/src/components/nav-push/nav-push.tsx b/core/src/components/nav-push/nav-push.tsx index 34d49075a5..39d6758efc 100644 --- a/core/src/components/nav-push/nav-push.tsx +++ b/core/src/components/nav-push/nav-push.tsx @@ -21,7 +21,7 @@ export class NavPush { push(): Promise { const nav = this.el.closest('ion-nav'); const toPush = this.component; - if (nav && toPush) { + if (nav && toPush && !nav.isAnimating()) { return nav.push(toPush, this.componentProps); } return Promise.resolve(null); diff --git a/core/src/components/nav-push/test/basic/index.html b/core/src/components/nav-push/test/basic/index.html index 4f590507b8..3560d12481 100644 --- a/core/src/components/nav-push/test/basic/index.html +++ b/core/src/components/nav-push/test/basic/index.html @@ -1,28 +1,32 @@ + Nav Push + + + f:last-of-type { + background: yellow; + } + + + diff --git a/core/src/components/nav-push/test/preview/index.html b/core/src/components/nav-push/test/preview/index.html index 4f590507b8..3560d12481 100644 --- a/core/src/components/nav-push/test/preview/index.html +++ b/core/src/components/nav-push/test/preview/index.html @@ -1,28 +1,32 @@ + Nav Push + + + f:last-of-type { + background: yellow; + } + + + diff --git a/core/src/components/nav-set-root/test/basic/index.html b/core/src/components/nav-set-root/test/basic/index.html index 68209ed8d8..15d0f1942c 100644 --- a/core/src/components/nav-set-root/test/basic/index.html +++ b/core/src/components/nav-set-root/test/basic/index.html @@ -1,11 +1,14 @@ + Nav Set Root + + @@ -71,4 +74,5 @@ customElements.define('page-two', SecondPage); customElements.define('page-three', ThirdPage); + diff --git a/core/src/components/nav-set-root/test/preview/index.html b/core/src/components/nav-set-root/test/preview/index.html index 68209ed8d8..15d0f1942c 100644 --- a/core/src/components/nav-set-root/test/preview/index.html +++ b/core/src/components/nav-set-root/test/preview/index.html @@ -1,11 +1,14 @@ + Nav Set Root + + @@ -71,4 +74,5 @@ customElements.define('page-two', SecondPage); customElements.define('page-three', ThirdPage); + diff --git a/core/src/components/nav/nav-interface.ts b/core/src/components/nav/nav-interface.ts index 82aa07cfed..de70e99837 100644 --- a/core/src/components/nav/nav-interface.ts +++ b/core/src/components/nav/nav-interface.ts @@ -1,5 +1,4 @@ -import { Animation, AnimationBuilder, ComponentRef, FrameworkDelegate, Mode } from '../../interface'; -import { ViewController } from './view-controller'; +import { Animation, AnimationBuilder, ComponentRef, FrameworkDelegate, Mode, ViewController } from '../../interface'; export { Nav } from './nav'; diff --git a/core/src/components/nav/nav.scss b/core/src/components/nav/nav.scss new file mode 100644 index 0000000000..bbfd8ae3b8 --- /dev/null +++ b/core/src/components/nav/nav.scss @@ -0,0 +1,19 @@ +@import "../../themes/ionic.globals"; + +.nav-decor { + display: none; +} + +:host(.show-decor) .nav-decor { + @include position(0, 0, 0, 0); + + // when ios pages transition, the leaving page grays out + // this is the black square behind all pages so they gray out + position: absolute; + z-index: 0; + display: block; + + background: #000; + + pointer-events: none; +} diff --git a/core/src/components/nav/nav.tsx b/core/src/components/nav/nav.tsx index d65372a281..44e610d50f 100644 --- a/core/src/components/nav/nav.tsx +++ b/core/src/components/nav/nav.tsx @@ -1,13 +1,14 @@ -import { Build, Component, Element, Event, EventEmitter, Method, Prop, Watch } from '@stencil/core'; +import { Build, Component, Element, Event, EventEmitter, Method, Prop, QueueApi, Watch } from '@stencil/core'; import { ViewLifecycle } from '../..'; -import { Animation, ComponentProps, Config, FrameworkDelegate, GestureDetail, Mode, NavComponent, NavOptions, NavOutlet, NavResult, QueueController, RouteID, RouteWrite, TransitionDoneFn, TransitionInstruction } from '../../interface'; +import { Animation, ComponentProps, Config, FrameworkDelegate, GestureDetail, Mode, NavComponent, NavOptions, NavOutlet, NavResult, RouteID, RouteWrite, TransitionDoneFn, TransitionInstruction, ViewController } from '../../interface'; import { assert } from '../../utils/helpers'; import { TransitionOptions, lifecycle, transition } from '../../utils/transition'; -import { RouterIntent } from '../router/utils/constants'; -import { ViewController, ViewState, convertToViews, matches } from './view-controller'; +import { ViewState, convertToViews, matches } from './view-controller'; @Component({ - tag: 'ion-nav' + tag: 'ion-nav', + styleUrl: 'nav.scss', + shadow: true }) export class Nav implements NavOutlet { private transInstr: TransitionInstruction[] = []; @@ -21,7 +22,7 @@ export class Nav implements NavOutlet { @Element() el!: HTMLElement; - @Prop({ context: 'queue' }) queue!: QueueController; + @Prop({ context: 'queue' }) queue!: QueueApi; @Prop({ context: 'config' }) config!: Config; @@ -202,7 +203,7 @@ export class Nav implements NavOutlet { removeCount: -1, opts: opts }; - if (indexOrViewCtrl instanceof ViewController) { + if (typeof indexOrViewCtrl === 'object' && (indexOrViewCtrl as ViewController).component) { config.removeView = indexOrViewCtrl; config.removeStart = 1; } else if (typeof indexOrViewCtrl === 'number') { @@ -299,7 +300,7 @@ export class Nav implements NavOutlet { setRouteId( id: string, params: any, - direction: RouterIntent + direction: number ): Promise { const active = this.getActive(); if (matches(active, id, params)) { @@ -405,6 +406,11 @@ export class Nav implements NavOutlet { /** * Returns the length of navigation stack */ + @Method() + isAnimating() { + return this.isTransitioning; + } + @Method() length() { return this.views.length; @@ -753,6 +759,7 @@ export class Nav implements NavOutlet { showGoBack: this.canGoBack(enteringView), animationCtrl: this.animationCtrl, progressCallback, + queue: this.queue, window: this.win, baseEl: this.el, enteringEl, @@ -933,7 +940,7 @@ export class Nav implements NavOutlet { /> ), this.mode === 'ios' &&
, - + ]; } } diff --git a/core/src/components/nav/readme.md b/core/src/components/nav/readme.md index f8ac0cbf1a..3dcab2b8f0 100644 --- a/core/src/components/nav/readme.md +++ b/core/src/components/nav/readme.md @@ -129,11 +129,14 @@ Inserts a component into the nav stack at the specified index. This is useful if Inserts an array of components into the nav stack at the specified index. The last component in the array will become instantiated as a view, and animate in to become the active view. -#### length() +#### isAnimating() Returns the length of navigation stack +#### length() + + #### pop() Call to navigate back from a current component. Similar to push(), you can also pass navigation options. diff --git a/core/src/components/nav/test/basic/index.html b/core/src/components/nav/test/basic/index.html index bf7ad1c1de..e60f746126 100644 --- a/core/src/components/nav/test/basic/index.html +++ b/core/src/components/nav/test/basic/index.html @@ -1,10 +1,12 @@ + Nav + + + diff --git a/core/src/components/nav/test/host-elements/index.html b/core/src/components/nav/test/host-elements/index.html index b10dd8328b..d622073c8e 100644 --- a/core/src/components/nav/test/host-elements/index.html +++ b/core/src/components/nav/test/host-elements/index.html @@ -1,11 +1,14 @@ + Nav + + @@ -88,4 +91,5 @@ customElements.define('page-three', PageThree); + diff --git a/core/src/components/nav/test/nav-controller.spec.ts b/core/src/components/nav/test/nav-controller.spec.ts index 75f5c61426..d37834512b 100644 --- a/core/src/components/nav/test/nav-controller.spec.ts +++ b/core/src/components/nav/test/nav-controller.spec.ts @@ -953,6 +953,7 @@ describe('NavController', () => { nav.animated = false; nav.el = win.document.createElement('ion-nav'); nav.win = win; + nav.queue = { write: (fn: any) => fn(), read: (fn: any) => fn()}; nav.ionNavDidChange = {emit: function() { return; } }; nav.ionNavWillChange = {emit: function() { return; } }; diff --git a/core/src/components/nav/test/preview/index.html b/core/src/components/nav/test/preview/index.html index bf7ad1c1de..b68aca30d4 100644 --- a/core/src/components/nav/test/preview/index.html +++ b/core/src/components/nav/test/preview/index.html @@ -1,10 +1,12 @@ + Nav + + + diff --git a/core/src/components/nav/test/routing/index.html b/core/src/components/nav/test/routing/index.html index 38160b8371..ad5c720d6e 100644 --- a/core/src/components/nav/test/routing/index.html +++ b/core/src/components/nav/test/routing/index.html @@ -1,13 +1,16 @@ + Nav + + @@ -38,10 +41,12 @@ f:last-of-type { background: yellow; } + + diff --git a/core/src/components/nav/test/set-root/index.html b/core/src/components/nav/test/set-root/index.html index 823c9ed9b6..b3e5efa16d 100644 --- a/core/src/components/nav/test/set-root/index.html +++ b/core/src/components/nav/test/set-root/index.html @@ -1,11 +1,14 @@ + Nav + + @@ -98,7 +101,7 @@ setInterval(() => { if (nav.root === 'page-one') { nav.root = 'page-two'; - } else if ( nav.root === 'page-two') { + } else if (nav.root === 'page-two') { nav.root = 'page-three'; } else { nav.root = 'page-one'; @@ -107,4 +110,5 @@ } + diff --git a/core/src/components/nav/test/simple-nested-navs/index.html b/core/src/components/nav/test/simple-nested-navs/index.html index 999e411d8b..f903269b83 100644 --- a/core/src/components/nav/test/simple-nested-navs/index.html +++ b/core/src/components/nav/test/simple-nested-navs/index.html @@ -1,15 +1,17 @@ + Simple Nested Navs + + + + diff --git a/core/src/components/note/note.ios.scss b/core/src/components/note/note.ios.scss index f0d18f62e2..16aab402b3 100644 --- a/core/src/components/note/note.ios.scss +++ b/core/src/components/note/note.ios.scss @@ -1,22 +1,11 @@ @import "./note.ios.vars"; +@import "./note"; // iOS Note // -------------------------------------------------- -.note-ios { +:host { font-family: $note-ios-font-family; - color: $note-ios-color; -} - - -// Generate iOS Note Colors -// -------------------------------------------------- - -@each $color-name, $color-value in $colors-ios { - $color-base: ion-color($colors-ios, $color-name, base, ios); - - .note-ios-#{$color-name} { - color: $color-base; - } + --ion-color-base: #{$note-ios-color}; } diff --git a/core/src/components/note/note.ios.vars.scss b/core/src/components/note/note.ios.vars.scss index 2e2ea2a51e..c967b798a6 100644 --- a/core/src/components/note/note.ios.vars.scss +++ b/core/src/components/note/note.ios.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Font family of the note -$note-ios-font-family: $font-family-ios-base !default; +$note-ios-font-family: $font-family-base !default; /// @prop - Text color of the note -$note-ios-color: $text-ios-color-step-650 !default; +$note-ios-color: $text-color-step-650 !default; diff --git a/core/src/components/note/note.md.scss b/core/src/components/note/note.md.scss index 5a1432faf7..cc64464699 100644 --- a/core/src/components/note/note.md.scss +++ b/core/src/components/note/note.md.scss @@ -1,22 +1,11 @@ @import "./note.md.vars"; +@import "./note"; // Material Design Note // -------------------------------------------------- -.note-md { +:host { font-family: $note-md-font-family; - color: $note-md-color; -} - - -// Generate Material Design Note Colors -// -------------------------------------------------- - -@each $color-name, $color-value in $colors-md { - $color-base: ion-color($colors-md, $color-name, base, md); - - .note-md-#{$color-name} { - color: $color-base; - } + --ion-color-base: #{$note-md-color}; } diff --git a/core/src/components/note/note.md.vars.scss b/core/src/components/note/note.md.vars.scss index 60f6def267..52bd390a44 100644 --- a/core/src/components/note/note.md.vars.scss +++ b/core/src/components/note/note.md.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Font family of the note -$note-md-font-family: $font-family-md-base !default; +$note-md-font-family: $font-family-base !default; /// @prop - Text color of the note -$note-md-color: $text-md-color-step-800 !default; +$note-md-color: $text-color-step-800 !default; diff --git a/core/src/components/note/note.scss b/core/src/components/note/note.scss new file mode 100644 index 0000000000..e29d6b7242 --- /dev/null +++ b/core/src/components/note/note.scss @@ -0,0 +1,8 @@ +@import "./note.ios.vars"; + +// iOS Note +// -------------------------------------------------- + +:host { + color: #{current-color(base)}; +} diff --git a/core/src/components/note/note.tsx b/core/src/components/note/note.tsx index 0c990a1bc4..65ba8c19fc 100644 --- a/core/src/components/note/note.tsx +++ b/core/src/components/note/note.tsx @@ -1,5 +1,6 @@ import { Component, Prop } from '@stencil/core'; import { Color, Mode } from '../../interface'; +import { createColorClasses } from '../../utils/theme'; @Component({ tag: 'ion-note', @@ -7,9 +8,7 @@ import { Color, Mode } from '../../interface'; ios: 'note.ios.scss', md: 'note.md.scss' }, - host: { - theme: 'note' - } + shadow: true }) export class Note { /** @@ -23,4 +22,17 @@ export class Note { * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; + + hostData() { + return { + class: { + ...createColorClasses(this.color) + } + }; + } + + render() { + return ; + } + } diff --git a/core/src/components/note/test/basic/index.html b/core/src/components/note/test/basic/index.html index c1a5a23c26..6f6abb7dce 100644 --- a/core/src/components/note/test/basic/index.html +++ b/core/src/components/note/test/basic/index.html @@ -6,129 +6,130 @@ Note - Basic + - - - Note - Basic - - + + + Note - Basic + + - - - Notes Right - - Default Note - 99 - + + + Notes Right + + Default Note + 99 + - - Primary Note - 99 - + + Primary Note + 99 + - - Secondary Note - 99 - + + Secondary Note + 99 + - - Tertiary Note - 99 - + + Tertiary Note + 99 + - - Success Note - 99 - + + Success Note + 99 + - - Warning Note - 99 - + + Warning Note + 99 + - - Danger Note - 99 - + + Danger Note + 99 + - - Light Note - 99 - + + Light Note + 99 + - - Medium Note - 99 - + + Medium Note + 99 + - - Dark Note - 99 - + + Dark Note + 99 + - - primary - Dynamic Note Color (toggle) - - + + primary + Dynamic Note Color (toggle) + + - - Notes Left - - Default Note - 99 - + + Notes Left + + Default Note + 99 + - - Primary Note - 99 - + + Primary Note + 99 + - - Secondary Note - 99 - + + Secondary Note + 99 + - - Tertiary Note - 99 - + + Tertiary Note + 99 + - - Success Note - 99 - + + Success Note + 99 + - - Warning Note - 99 - + + Warning Note + 99 + - - Danger Note - 99 - + + Danger Note + 99 + - - Light Note - 99 - + + Light Note + 99 + - - Medium Note - 99 - + + Medium Note + 99 + - - Dark Note - 99 - - - + + Dark Note + 99 + + + @@ -143,4 +144,5 @@ } + diff --git a/core/src/components/note/test/preview/index.html b/core/src/components/note/test/preview/index.html index 2af305be8f..1042ee2e9c 100644 --- a/core/src/components/note/test/preview/index.html +++ b/core/src/components/note/test/preview/index.html @@ -6,129 +6,130 @@ Note + - - - Note - - + + + Note + + - - - Notes Right - - Default Note - 99 - + + + Notes Right + + Default Note + 99 + - - Primary Note - 99 - + + Primary Note + 99 + - - Secondary Note - 99 - + + Secondary Note + 99 + - - Tertiary Note - 99 - + + Tertiary Note + 99 + - - Success Note - 99 - + + Success Note + 99 + - - Warning Note - 99 - + + Warning Note + 99 + - - Danger Note - 99 - + + Danger Note + 99 + - - Light Note - 99 - + + Light Note + 99 + - - Medium Note - 99 - + + Medium Note + 99 + - - Dark Note - 99 - + + Dark Note + 99 + - - primary - Dynamic Note Color (toggle) - - + + primary + Dynamic Note Color (toggle) + + - - Notes Left - - Default Note - 99 - + + Notes Left + + Default Note + 99 + - - Primary Note - 99 - + + Primary Note + 99 + - - Secondary Note - 99 - + + Secondary Note + 99 + - - Tertiary Note - 99 - + + Tertiary Note + 99 + - - Success Note - 99 - + + Success Note + 99 + - - Warning Note - 99 - + + Warning Note + 99 + - - Danger Note - 99 - + + Danger Note + 99 + - - Light Note - 99 - + + Light Note + 99 + - - Medium Note - 99 - + + Medium Note + 99 + - - Dark Note - 99 - - - + + Dark Note + 99 + + + @@ -143,4 +144,5 @@ } + diff --git a/core/src/components/note/test/standalone/index.html b/core/src/components/note/test/standalone/index.html index d510842ad1..fa9cb01bfc 100644 --- a/core/src/components/note/test/standalone/index.html +++ b/core/src/components/note/test/standalone/index.html @@ -6,6 +6,7 @@ Note - Standalone + diff --git a/core/src/components/picker-column/picker-column.tsx b/core/src/components/picker-column/picker-column.tsx index 5ab82604b7..41fb26d200 100644 --- a/core/src/components/picker-column/picker-column.tsx +++ b/core/src/components/picker-column/picker-column.tsx @@ -1,15 +1,13 @@ -import { Component, Element, Prop } from '@stencil/core'; -import { GestureDetail, Mode, PickerColumn, PickerColumnOption, QueueController } from '../../interface'; +import { Component, Element, Prop, QueueApi } from '@stencil/core'; +import { GestureDetail, Mode, PickerColumn, PickerColumnOption } from '../../interface'; import { hapticSelectionChanged } from '../../utils'; import { clamp } from '../../utils/helpers'; +import { createThemedClasses } from '../../utils/theme'; /** @hidden */ @Component({ - tag: 'ion-picker-column', - host: { - theme: 'picker-col' - } + tag: 'ion-picker-column' }) export class PickerColumnCmp { mode!: Mode; @@ -29,7 +27,7 @@ export class PickerColumnCmp { @Element() el!: HTMLElement; - @Prop({ context: 'queue' }) queue!: QueueController; + @Prop({ context: 'queue' }) queue!: QueueApi; @Prop() col!: PickerColumn; @@ -383,6 +381,8 @@ export class PickerColumnCmp { hostData() { return { class: { + ...createThemedClasses(this.mode, 'picker-col'), + 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, diff --git a/core/src/components/picker-controller/picker-controller.tsx b/core/src/components/picker-controller/picker-controller.tsx index b20c125cc3..5eb593ba18 100644 --- a/core/src/components/picker-controller/picker-controller.tsx +++ b/core/src/components/picker-controller/picker-controller.tsx @@ -33,7 +33,7 @@ export class PickerController implements OverlayController { * Create a picker overlay with picker options. */ @Method() - create(opts?: PickerOptions): Promise { + create(opts?: PickerOptions): Promise { return createOverlay(this.doc.createElement('ion-picker'), opts); } diff --git a/core/src/components/picker/picker.ios.scss b/core/src/components/picker/picker.ios.scss index 4b1f8eea68..c1aa4ed39f 100644 --- a/core/src/components/picker/picker.ios.scss +++ b/core/src/components/picker/picker.ios.scss @@ -27,7 +27,7 @@ } .picker-ios .picker-toolbar-button { - @include text-align(end); + text-align: end; flex: 1; } @@ -37,7 +37,7 @@ } .picker-ios .picker-toolbar-button:first-child { - @include text-align(start); + text-align: start; font-weight: normal; } diff --git a/core/src/components/picker/picker.ios.vars.scss b/core/src/components/picker/picker.ios.vars.scss index 7e3901cf89..2e7e86c17a 100644 --- a/core/src/components/picker/picker.ios.vars.scss +++ b/core/src/components/picker/picker.ios.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Font family of the picker -$picker-ios-font-family: $font-family-ios-base !default; +$picker-ios-font-family: $font-family-base !default; /// @prop - Height of the picker wrapper $picker-ios-height: 260px !default; @@ -13,7 +13,7 @@ $picker-ios-height: 260px !default; $picker-ios-border-color: $item-ios-border-color !default; /// @prop - Background Color of the picker wrapper -$picker-ios-background-color: $background-ios-color !default; +$picker-ios-background-color: $background-color !default; /// @prop - Top Background Color of the picker wrapper gradient $picker-ios-top-background-color: $picker-ios-background-color !default; @@ -22,7 +22,7 @@ $picker-ios-top-background-color: $picker-ios-background-color ! $picker-ios-bottom-background-color-alpha: .8 !default; /// @prop - Bottom Background Color of the picker wrapper gradient -$picker-ios-bottom-background-color: css-var($background-ios-color-value, background-ios-color, $picker-ios-bottom-background-color-alpha) !default; +$picker-ios-bottom-background-color: rgba(var(--ion-background-color-rgb, $background-color-rgb), $picker-ios-bottom-background-color-alpha) !default; /// @prop - Height of the picker toolbar $picker-ios-toolbar-height: 44px !default; @@ -34,7 +34,7 @@ $picker-ios-toolbar-background-color: $picker-ios-top-background-col $picker-ios-button-height: $picker-ios-toolbar-height !default; /// @prop - Text color of the picker button -$picker-ios-button-text-color: ion-color($colors-ios, primary, base, ios) !default; +$picker-ios-button-text-color: ion-color(primary, base) !default; /// @prop - Background of the picker button $picker-ios-button-background-color: transparent !default; diff --git a/core/src/components/picker/picker.md.vars.scss b/core/src/components/picker/picker.md.vars.scss index a7ccb0df3d..9cb59da409 100644 --- a/core/src/components/picker/picker.md.vars.scss +++ b/core/src/components/picker/picker.md.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Font family of the picker -$picker-md-font-family: $font-family-md-base !default; +$picker-md-font-family: $font-family-base !default; /// @prop - Height of the picker wrapper $picker-md-height: 260px !default; @@ -13,7 +13,7 @@ $picker-md-height: 260px !default; $picker-md-border-color: $item-md-border-color !default; /// @prop - Background Color of the picker wrapper -$picker-md-background-color: $background-md-color !default; +$picker-md-background-color: $background-color !default; /// @prop - Top Background Color of the picker wrapper gradient $picker-md-top-background-color: $picker-md-background-color !default; @@ -22,7 +22,7 @@ $picker-md-top-background-color: $picker-md-background-color $picker-md-bottom-background-color-alpha: .8 !default; /// @prop - Bottom Background Color of the picker wrapper gradient -$picker-md-bottom-background-color: css-var($background-md-color-value, background-md-color, $picker-md-bottom-background-color-alpha) !default; +$picker-md-bottom-background-color: rgba(var(--ion-background-color-rgb, $background-color-rgb), $picker-md-bottom-background-color-alpha) !default; /// @prop - Height of the picker toolbar $picker-md-toolbar-height: 44px !default; @@ -34,7 +34,7 @@ $picker-md-toolbar-background-color: $picker-md-top-background-co $picker-md-button-height: $picker-md-toolbar-height !default; /// @prop - Text color of the picker button -$picker-md-button-text-color: ion-color($colors-md, primary, base, md) !default; +$picker-md-button-text-color: ion-color(primary, base) !default; /// @prop - Background of the picker button $picker-md-button-background-color: transparent !default; @@ -79,4 +79,4 @@ $picker-md-option-height: 42px !default; $picker-md-option-offset-y: (($picker-md-height - $picker-md-toolbar-height) / 2) - ($picker-md-option-height / 2) - 10 !default; /// @prop - Text color of the selected picker option -$picker-md-option-selected-color: ion-color($colors-md, primary, base, md) !default; +$picker-md-option-selected-color: ion-color(primary, base) !default; diff --git a/core/src/components/picker/picker.scss b/core/src/components/picker/picker.scss index 4ebe325d0f..ab561e6f71 100644 --- a/core/src/components/picker/picker.scss +++ b/core/src/components/picker/picker.scss @@ -85,7 +85,7 @@ ion-picker { } .picker-prefix { - @include text-align(end); + text-align: end; position: relative; @@ -98,7 +98,7 @@ ion-picker { } .picker-suffix { - @include text-align(start); + text-align: start; position: relative; @@ -113,7 +113,7 @@ ion-picker { // contain property is supported by Chrome .picker-opt { @include position(0, null, null, 0); - @include text-align(center); + text-align: center; position: absolute; diff --git a/core/src/components/picker/picker.tsx b/core/src/components/picker/picker.tsx index 5fd937f66a..55e58f0a49 100644 --- a/core/src/components/picker/picker.tsx +++ b/core/src/components/picker/picker.tsx @@ -1,31 +1,8 @@ -import { - Component, - Element, - Event, - EventEmitter, - Listen, - Method, - Prop, - State -} from '@stencil/core'; -import { - Animation, - AnimationBuilder, - Config, - CssClassMap, - Mode, - PickerButton, - PickerColumn -} from '../../interface'; +import { Component, Element, Event, EventEmitter, Listen, Method, Prop, State } from '@stencil/core'; +import { Animation, AnimationBuilder, Config, CssClassMap, Mode, OverlayEventDetail, OverlayInterface, PickerButton, PickerColumn } from '../../interface'; -import { - OverlayEventDetail, - OverlayInterface, - dismiss, - eventMethod, - present -} from '../../utils/overlays'; -import { getClassMap } from '../../utils/theme'; +import { dismiss, eventMethod, present } from '../../utils/overlays'; +import { createThemedClasses, getClassMap } from '../../utils/theme'; import { iosEnterAnimation } from './animations/ios.enter'; import { iosLeaveAnimation } from './animations/ios.leave'; @@ -35,9 +12,6 @@ import { iosLeaveAnimation } from './animations/ios.leave'; styleUrls: { ios: 'picker.ios.scss', md: 'picker.md.scss' - }, - host: { - theme: 'picker' } }) export class Picker implements OverlayInterface { @@ -305,6 +279,9 @@ export class Picker implements OverlayInterface { hostData() { return { + class: { + ...createThemedClasses(this.mode, 'picker'), + }, style: { zIndex: 20000 + this.overlayId } diff --git a/core/src/components/popover-controller/popover-controller.tsx b/core/src/components/popover-controller/popover-controller.tsx index 9c4eeb31c0..1f699d35e7 100644 --- a/core/src/components/popover-controller/popover-controller.tsx +++ b/core/src/components/popover-controller/popover-controller.tsx @@ -31,7 +31,7 @@ export class PopoverController implements OverlayController { * Create a popover overlay with popover options. */ @Method() - create(opts?: PopoverOptions): Promise { + create(opts?: PopoverOptions): Promise { return createOverlay(this.doc.createElement('ion-popover'), opts); } diff --git a/core/src/components/popover/popover.ios.vars.scss b/core/src/components/popover/popover.ios.vars.scss index 70966d8188..78c9dbc163 100644 --- a/core/src/components/popover/popover.ios.vars.scss +++ b/core/src/components/popover/popover.ios.vars.scss @@ -22,16 +22,16 @@ $popover-ios-max-height: 90% !default; $popover-ios-border-radius: 10px !default; /// @prop - Text color of the popover content -$popover-ios-text-color: $text-ios-color !default; +$popover-ios-text-color: $text-color !default; /// @prop - Background of the popover content -$popover-ios-background-color: $background-ios-color !default; +$popover-ios-background-color: $background-color !default; /// @prop - Background color alpha of the popover content $popover-ios-translucent-background-color-alpha: .8 !default; /// @prop - Background color of the popover content -$popover-ios-translucent-background-color: css-var($background-ios-color-value, background-ios-color, $popover-ios-translucent-background-color-alpha) !default; +$popover-ios-translucent-background-color: rgba(var(--ion-background-color-rgb, $background-color-rgb), $popover-ios-translucent-background-color-alpha) !default; /// @prop - Background of the popover arrow $popover-ios-arrow-background-color: $popover-ios-background-color !default; diff --git a/core/src/components/popover/popover.md.vars.scss b/core/src/components/popover/popover.md.vars.scss index 44318754c6..2c17d8b856 100644 --- a/core/src/components/popover/popover.md.vars.scss +++ b/core/src/components/popover/popover.md.vars.scss @@ -19,10 +19,10 @@ $popover-md-max-height: 90% !default; $popover-md-border-radius: 2px !default; /// @prop - Text color of the popover content -$popover-md-text-color: $text-md-color !default; +$popover-md-text-color: $text-color !default; /// @prop - Background of the popover content -$popover-md-background: $background-md-color !default; +$popover-md-background: $background-color !default; /// @prop - Box shadow color of the popover content $popover-md-box-shadow-color: rgba(0, 0, 0, .3) !default; diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx index 71b87b723b..6555ad47b5 100644 --- a/core/src/components/popover/popover.tsx +++ b/core/src/components/popover/popover.tsx @@ -1,8 +1,8 @@ import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core'; -import { Animation, AnimationBuilder, Color, ComponentProps, ComponentRef, Config, FrameworkDelegate, Mode } from '../../interface'; +import { Animation, AnimationBuilder, Color, ComponentProps, ComponentRef, Config, FrameworkDelegate, Mode, OverlayEventDetail, OverlayInterface } from '../../interface'; import { attachComponent, detachComponent } from '../../utils/framework-delegate'; -import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, present } from '../../utils/overlays'; +import { BACKDROP, dismiss, eventMethod, present } from '../../utils/overlays'; import { createThemedClasses, getClassMap } from '../../utils/theme'; import { iosEnterAnimation } from './animations/ios.enter'; @@ -16,9 +16,6 @@ import { mdLeaveAnimation } from './animations/md.leave'; styleUrls: { ios: 'popover.ios.scss', md: 'popover.md.scss' - }, - host: { - theme: 'popover' } }) export class Popover implements OverlayInterface { @@ -218,7 +215,7 @@ export class Popover implements OverlayInterface { } hostData() { - const themedClasses = this.translucent ? createThemedClasses(this.mode, this.color, 'popover-translucent') : {}; + const themedClasses = this.translucent ? createThemedClasses(this.mode, 'popover-translucent') : {}; return { style: { @@ -226,6 +223,7 @@ export class Popover implements OverlayInterface { }, 'no-router': true, class: { + ...createThemedClasses(this.mode, 'popover'), ...themedClasses, ...getClassMap(this.cssClass), } @@ -233,7 +231,7 @@ export class Popover implements OverlayInterface { } render() { - const wrapperClasses = createThemedClasses(this.mode, this.color, 'popover-wrapper'); + const wrapperClasses = createThemedClasses(this.mode, 'popover-wrapper'); return [ , diff --git a/core/src/components/popover/test/basic/index.html b/core/src/components/popover/test/basic/index.html index a55909b7fd..ab6ce8a8be 100644 --- a/core/src/components/popover/test/basic/index.html +++ b/core/src/components/popover/test/basic/index.html @@ -6,41 +6,42 @@ Popover - Basic + - - - - - - - - Popover - Basic - - + + + + + + + + Popover - Basic + + - - Show Popover - Show Translucent Popover - Show Long List Popover - No Event Popover + + Show Popover + Show Translucent Popover + Show Long List Popover + No Event Popover - - + + - - - - - - - - Popover - - + + + + + + + + Popover + + + - - - - - - - - Popover - - + + + + + + + + Popover + + - - Show Popover - Show Translucent Popover - Show Long List Popover - No Event Popover + + Show Popover + Show Translucent Popover + Show Long List Popover + No Event Popover - - + + - - - - - - - - Popover - - + + + + + + + + Popover + + + diff --git a/core/src/components/radio-group/test/basic/index.html b/core/src/components/radio-group/test/basic/index.html index d062c90655..97d1f3c354 100644 --- a/core/src/components/radio-group/test/basic/index.html +++ b/core/src/components/radio-group/test/basic/index.html @@ -1,51 +1,60 @@ + Radio Group - Basic + + - - - Radio Group - Basic - - + + + Radio Group - Basic + + - - - - Luckiest Man On Earth - + + + + Luckiest Man On Earth + - - Biff - - + + Biff + + + + - - Griff - - + + Griff + + + + - - Buford - - + + Buford + + + + - - George - - + + George + + - + - Toggle Disabled - + Toggle Disabled + + + - - - Radio Group - Form - - + + + Radio Group - Form + + - -
+ + - + - + - - Luckiest Man On Earth - + + Luckiest Man On Earth + - - Biff - - + + Biff + + + + - - Griff - - + + Griff + + + + - - Buford - - + + Buford + + + + - - George - - + + George + + - - Submit - + + Submit + - + - + - + -

- Value: -

+

+ Value: + +

-

- Changes: 0 -

+

+ Changes: + 0 +

-
+ + + - - - Radio Group - - + + + Radio Group + + - - - - Luckiest Man On Earth - + + + + Luckiest Man On Earth + - - Biff - - + + Biff + + + + - - Griff - - + + Griff + + + + - - Buford - - + + Buford + + + + - - George - - + + George + + - + - Toggle Disabled - + Toggle Disabled + + diff --git a/core/src/components/radio/radio.ios.scss b/core/src/components/radio/radio.ios.scss index d82d02d91d..bc1f8416bf 100644 --- a/core/src/components/radio/radio.ios.scss +++ b/core/src/components/radio/radio.ios.scss @@ -4,24 +4,21 @@ // iOS Radio // -------------------------------------------------- -// iOS Radio Circle: Unchecked -// ----------------------------------------- +:host { + --width: #{$radio-ios-icon-width}; + --height: #{$radio-ios-icon-height}; +} -.radio-ios .radio-icon { - position: relative; - display: block; - width: $radio-ios-icon-width; - height: $radio-ios-icon-height; - - contain: strict; +.item-radio.item-ios ion-label { + @include margin-horizontal(0, null); } // iOS Radio Checkmark: Checked // ----------------------------------------- -.radio-ios.radio-checked .radio-inner { +:host(.radio-checked) .radio-inner { @include position(4px, null, null, 7px); position: absolute; @@ -40,9 +37,7 @@ // iOS Radio: Disabled // ----------------------------------------- - -.radio-ios.radio-disabled, -.item-ios.item-radio-disabled ion-label { +:host(.radio-disabled) { opacity: $radio-ios-disabled-opacity; pointer-events: none; @@ -52,7 +47,7 @@ // iOS Radio: Keyboard Focus // ----------------------------------------- -.radio-key .radio-icon::after { +:host(.radio-key) .radio-icon::after { @include border-radius(50%); @include position(-8px, null, null, -9px); @@ -74,53 +69,13 @@ // iOS Radio Within An Item // ----------------------------------------- -.item-ios .radio-ios { +:host(.in-item) { @include margin($radio-ios-item-end-margin-top, $radio-ios-item-end-margin-end, $radio-ios-item-end-margin-bottom, $radio-ios-item-end-margin-start); position: static; display: block; - - &[slot="start"] { - @include margin($radio-ios-item-start-margin-top, $radio-ios-item-start-margin-end, $radio-ios-item-start-margin-bottom, $radio-ios-item-start-margin-start); - } } -.item-radio.item-ios ion-label { - @include margin-horizontal(0, null); -} - - -// iOS Radio Item Label: Checked -// ----------------------------------------- - -.item-radio-checked.item-ios ion-label { - color: $radio-ios-color-on; -} - - -// iOS Radio Color Mixin -// -------------------------------------------------- - -@mixin radio-theme-ios($color-name) { - $color-base: ion-color($colors-ios, $color-name, base, ios); - - .item-radio-ios-#{$color-name}.item-radio-checked ion-label { - color: $color-base; - } - - .radio-ios-#{$color-name}.radio-checked { - color: $color-base; - } - - .radio-ios-#{$color-name}.radio-checked .radio-inner { - border-color: $color-base; - } -} - - -// Generate iOS Radio Colors -// -------------------------------------------------- - -@each $color-name, $color-value in $colors-ios { - @include radio-theme-ios($color-name); +:host(.in-item[slot="start"]) { + @include margin($radio-ios-item-start-margin-top, $radio-ios-item-start-margin-end, $radio-ios-item-start-margin-bottom, $radio-ios-item-start-margin-start); } diff --git a/core/src/components/radio/radio.ios.vars.scss b/core/src/components/radio/radio.ios.vars.scss index 39fb3fc225..fece9f99df 100644 --- a/core/src/components/radio/radio.ios.vars.scss +++ b/core/src/components/radio/radio.ios.vars.scss @@ -6,10 +6,10 @@ // -------------------------------------------------- /// @prop - Color of the checked radio -$radio-ios-color-on: ion-color($colors-ios, primary, base, ios) !default; +$radio-ios-color-on: current-color(base) !default; /// @prop - Background color of focus indicator for radio when focused -$radio-ios-background-color-focused: ion-color($colors-ios, primary, tint, ios) !default; +$radio-ios-background-color-focused: ion-color(primary, tint) !default; /// @prop - Width of the radio icon $radio-ios-icon-width: 16px !default; diff --git a/core/src/components/radio/radio.md.scss b/core/src/components/radio/radio.md.scss index 6fd690fa4c..1df1936644 100644 --- a/core/src/components/radio/radio.md.scss +++ b/core/src/components/radio/radio.md.scss @@ -4,32 +4,29 @@ // Material Design Radio // -------------------------------------------------- +:host { + --width: #{$radio-md-icon-width}; + --height: #{$radio-md-icon-height}; +} + // Material Design Radio Outer Circle: Unchecked // ----------------------------------------- -.radio-md .radio-icon { +.radio-icon { @include position(0, null, null, 0); @include margin(0); @include border-radius($radio-md-icon-border-radius); - position: relative; - display: block; - - width: $radio-md-icon-width; - height: $radio-md-icon-height; - border-width: $radio-md-icon-border-width; border-style: $radio-md-icon-border-style; border-color: $radio-md-color-off; - - contain: layout size style; } // Material Design Radio Inner Circle: Unchecked // ----------------------------------------- -.radio-md .radio-inner { +.radio-inner { @include position($radio-md-icon-border-width, null, null, $radio-md-icon-border-width); @include border-radius(50%); @@ -47,7 +44,7 @@ // Material Design Radio Outer Circle: Checked // ----------------------------------------- -.radio-md.radio-checked .radio-icon { +:host(.radio-checked) .radio-icon { border-color: $radio-md-color-on; } @@ -55,7 +52,7 @@ // Material Design Radio Inner Circle: Checked // ----------------------------------------- -.radio-md.radio-checked .radio-inner { +:host(.radio-checked) .radio-inner { transform: scale3d(1, 1, 1); } @@ -63,8 +60,8 @@ // Material Design Radio: Disabled // ----------------------------------------- -.radio-md.radio-disabled, -.item-md.item-radio-disabled ion-label { +// .item-md.item-radio-disabled ion-label { +:host(.radio-disabled) { opacity: $radio-md-disabled-opacity; pointer-events: none; @@ -74,7 +71,7 @@ // Material Design Radio: Keyboard Focus // ----------------------------------------- -.radio-key .radio-icon::after { +:host(.radio-key) .radio-icon::after { @include border-radius(50%); @include position(-12px, null, null, -12px); @@ -96,53 +93,13 @@ // Material Design Radio Within An Item // ----------------------------------------- -.item-md .radio-md { +:host(.in-item) { @include margin($radio-md-item-end-margin-top, $radio-md-item-end-margin-end, $radio-md-item-end-margin-bottom, $radio-md-item-end-margin-start); position: static; display: block; - - &[slot="start"] { - @include margin($radio-md-item-start-margin-top, $radio-md-item-start-margin-end, $radio-md-item-start-margin-bottom, $radio-md-item-start-margin-start); - } } -.item-radio.item-md ion-label { - @include margin-horizontal(0, null); -} - - -// Material Design Radio Item Label: Checked -// ----------------------------------------- - -.item-radio-checked.item-md ion-label { - color: $radio-md-color-on; -} - - -// Material Design Radio Color Mixin -// -------------------------------------------------- - -@mixin radio-theme-md($color-name) { - $color-base: ion-color($colors-md, $color-name, base, md); - - .item-radio-md-#{$color-name}.item-radio-checked ion-label { - color: $color-base; - } - - .radio-md-#{$color-name}.radio-checked .radio-icon { - border-color: $color-base; - } - - .radio-md-#{$color-name} .radio-inner { - background-color: $color-base; - } -} - - -// Generate Material Design Radio Colors -// -------------------------------------------------- - -@each $color-name, $color-value in $colors-md { - @include radio-theme-md($color-name); +:host(.in-item[slot="start"]) { + @include margin($radio-md-item-start-margin-top, $radio-md-item-start-margin-end, $radio-md-item-start-margin-bottom, $radio-md-item-start-margin-start); } diff --git a/core/src/components/radio/radio.md.vars.scss b/core/src/components/radio/radio.md.vars.scss index d45c5cd89a..98df607b2e 100644 --- a/core/src/components/radio/radio.md.vars.scss +++ b/core/src/components/radio/radio.md.vars.scss @@ -6,13 +6,13 @@ // -------------------------------------------------- /// @prop - Color of the checked radio -$radio-md-color-on: ion-color($colors-md, primary, base, md) !default; +$radio-md-color-on: current-color(base) !default; /// @prop - Background color of focus indicator for radio when focused -$radio-md-background-color-focused: ion-color($colors-md, primary, tint, md) !default; +$radio-md-background-color-focused: ion-color(primary, tint) !default; /// @prop - Color of the unchecked radio -$radio-md-color-off: $text-md-color-step-600 !default; +$radio-md-color-off: $text-color-step-600 !default; /// @prop - Width of the radio icon $radio-md-icon-width: 16px !default; diff --git a/core/src/components/radio/radio.scss b/core/src/components/radio/radio.scss index 9a40e5ac3d..5c9c3ac2ff 100644 --- a/core/src/components/radio/radio.scss +++ b/core/src/components/radio/radio.scss @@ -3,35 +3,31 @@ // Radio // -------------------------------------------------- -ion-radio { +:host { + --ion-color-base: #{ion-color(primary, base)}; + box-sizing: border-box; position: relative; display: inline-block; } -ion-radio input { - @include position(0, null, null, 0); - @include margin(0); +.radio-icon { + position: relative; + display: block; - position: absolute; - - width: 100%; - height: 100%; - - border: 0; - background: transparent; - cursor: pointer; + width: var(--width); + height: var(--height); - appearance: none; - - &:active, - &:focus { - outline: none; - } + contain: layout size style; } -ion-radio .radio-icon { +input { + @include input-cover(); +} + +.radio-icon, +.radio-inner { box-sizing: border-box; } diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx index b9027be26c..5af5e26e05 100644 --- a/core/src/components/radio/radio.tsx +++ b/core/src/components/radio/radio.tsx @@ -1,7 +1,7 @@ -import { Component, Event, EventEmitter, Prop, State, Watch } from '@stencil/core'; +import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core'; import { CheckedInputChangeEvent, Color, Mode, RadioButtonInput, StyleEvent } from '../../interface'; import { deferEvent } from '../../utils/helpers'; -import { createThemedClasses } from '../../utils/theme'; +import { createColorClasses, hostContext } from '../../utils/theme'; @Component({ @@ -10,9 +10,7 @@ import { createThemedClasses } from '../../utils/theme'; ios: 'radio.ios.scss', md: 'radio.md.scss' }, - host: { - theme: 'radio' - } + shadow: true }) export class Radio implements RadioButtonInput { @@ -21,6 +19,8 @@ export class Radio implements RadioButtonInput { @State() keyFocus = false; + @Element() el!: HTMLElement; + /** * The color to use from your Sass `$colors` map. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. @@ -141,9 +141,8 @@ export class Radio implements RadioButtonInput { emitStyle() { this.ionStyle.emit({ - ...createThemedClasses(this.mode, this.color, 'radio'), 'radio-checked': this.checked, - 'radio-disabled': this.disabled + 'interactive-disabled': this.disabled, }); } @@ -171,7 +170,10 @@ export class Radio implements RadioButtonInput { hostData() { return { - 'class': { + class: { + ...createColorClasses(this.color), + 'in-item': hostContext('.item', this.el), + 'interactive': true, 'radio-checked': this.checked, 'radio-disabled': this.disabled, 'radio-key': this.keyFocus diff --git a/core/src/components/radio/test/basic/index.html b/core/src/components/radio/test/basic/index.html index 3d4a6672db..840ce83ea0 100644 --- a/core/src/components/radio/test/basic/index.html +++ b/core/src/components/radio/test/basic/index.html @@ -1,140 +1,145 @@ + Radio - Basic + + - - - Radio - Basic - - - - - - - - Fruits (Group w/ values) - - - Apple - - - - - Grape, checked, disabled - - - - - Cherry - - - - - - - Extra Pizza Topping (Group w/ no values) - - - Pepperoni - - - - - Sausage - - - - - - - Veggies (Group w/ allow empty) - - - Carrot - - - - - Tomato - - - - - Broccoli - - - + + + Radio - Basic + + + + + + + Fruits (Group w/ values) + - Checked - Disabled - Print - Color - - - - 

-
-        
-          
-            No Radio Group
-          
-          
-            Kiwi, (ionChange) Secondary color
-            
+            Apple
+            
           
 
           
-            Strawberry, (ionChange) checked="true"
-            
+            Grape, checked, disabled
+            
           
 
           
-            Checkbox right, checked, really long text that should ellipsis
-            
+            Cherry
+            
+          
+        
+
+        
+          
+            Extra Pizza Topping (Group w/ no values)
+          
+          
+            Pepperoni
+            
           
 
           
-            Checkbox right side
-            
+            Sausage
+            
+          
+        
+
+        
+          
+            Veggies (Group w/ allow empty)
+          
+          
+            Carrot
+            
           
 
           
-            Button w/ right side default icon, really long text that should ellipsis
-            
+            Tomato
+            
           
 
-        
-
-        

-          
-          Stand-alone checkbox: 
-        

+          
+            Broccoli
+            
+          
+        
 
         
-          Checkbox / Toggle
-          
-          
+          Checked
+          Disabled
+          Print
+          Color
         
+      
+
+      

+
+      
+        
+          No Radio Group
+        
         
-          Checked
-          
-          
-        
-        
-          Disabled
-          
-          
+          Kiwi, (ionChange) Secondary color
+          
         
 
-      
+        
+          Strawberry, (ionChange) checked="true"
+          
+        
+
+        
+          Checkbox right, checked, really long text that should ellipsis
+          
+        
+
+        
+          Checkbox right side
+          
+        
+
+        
+          Button w/ right side default icon, really long text that should ellipsis
+          
+        
+
+      
+
+      

+        
+        Stand-alone checkbox:
+        
+      

+
+      
+        Checkbox / Toggle
+        
+        
+      
+      
+        Checked
+        
+        
+      
+      
+        Disabled
+        
+        
+      
+
+    
 
     
+  
 
+
 
   
 
-      
-        
-          Radio
-        
-      
-
-      
-        
-          
-            
-              Fruits (Group w/ values)
-            
-            
-              Apple
-              
-            
-
-            
-              Grape, checked, disabled
-              
-            
-
-            
-              Cherry
-              
-            
-          
-
-          
-            
-              Extra Pizza Topping (Group w/ no values)
-            
-            
-              Pepperoni
-              
-            
-
-            
-              Sausage
-              
-            
-          
-
-          
-            
-              Veggies (Group w/ allow empty)
-            
-            
-              Carrot
-              
-            
-
-            
-              Tomato
-              
-            
-
-            
-              Broccoli
-              
-            
-          
+    
+      
+        Radio
+      
+    
 
+    
+      
+        
+          
+            Fruits (Group w/ values)
+          
           
-            Checked
-            Disabled
-            Print
-            Color
-          
-        
-
-        

-
-        
-          
-            No Radio Group
-          
-          
-            Kiwi, (ionChange) Secondary color
-            
+            Apple
+            
           
 
           
-            Strawberry, (ionChange) checked="true"
-            
+            Grape, checked, disabled
+            
           
 
           
-            Checkbox right, checked, really long text that should ellipsis
-            
+            Cherry
+            
+          
+        
+
+        
+          
+            Extra Pizza Topping (Group w/ no values)
+          
+          
+            Pepperoni
+            
           
 
           
-            Checkbox right side
-            
+            Sausage
+            
+          
+        
+
+        
+          
+            Veggies (Group w/ allow empty)
+          
+          
+            Carrot
+            
           
 
           
-            Button w/ right side default icon, really long text that should ellipsis
-            
+            Tomato
+            
           
 
-        
-
-        

-          
-          Stand-alone checkbox: 
-        

+          
+            Broccoli
+            
+          
+        
 
         
-          Checkbox / Toggle
-          
-          
+          Checked
+          Disabled
+          Print
+          Color
         
+      
+
+      

+
+      
+        
+          No Radio Group
+        
         
-          Checked
-          
-          
-        
-        
-          Disabled
-          
-          
+          Kiwi, (ionChange) Secondary color
+          
         
 
-      
+        
+          Strawberry, (ionChange) checked="true"
+          
+        
+
+        
+          Checkbox right, checked, really long text that should ellipsis
+          
+        
+
+        
+          Checkbox right side
+          
+        
+
+        
+          Button w/ right side default icon, really long text that should ellipsis
+          
+        
+
+      
+
+      

+        
+        Stand-alone checkbox:
+        
+      

+
+      
+        Checkbox / Toggle
+        
+        
+      
+      
+        Checked
+        
+        
+      
+      
+        Disabled
+        
+        
+      
+
+    
 
     
+  
 
 
 
diff --git a/core/src/components/range-knob/range-knob.tsx b/core/src/components/range-knob/range-knob.tsx
index d6dafe3927..b22f84f327 100644
--- a/core/src/components/range-knob/range-knob.tsx
+++ b/core/src/components/range-knob/range-knob.tsx
@@ -3,7 +3,7 @@ import { Knob } from '../../interface';
 
 /** @hidden */
 @Component({
-  tag: `ion-range-knob`
+  tag: 'ion-range-knob'
 })
 export class RangeKnob {
 
diff --git a/core/src/components/range-knob/readme.md b/core/src/components/range-knob/readme.md
index d2f7021d1d..599bc2014c 100644
--- a/core/src/components/range-knob/readme.md
+++ b/core/src/components/range-knob/readme.md
@@ -15,7 +15,7 @@ boolean
 
 #### knob
 
-number
+string
 
 
 #### labelId
@@ -62,7 +62,7 @@ boolean
 
 #### knob
 
-number
+string
 
 
 #### label-id
diff --git a/core/src/components/range/range-interface.ts b/core/src/components/range/range-interface.ts
index 443ac0b6cf..5b03d88c21 100644
--- a/core/src/components/range/range-interface.ts
+++ b/core/src/components/range/range-interface.ts
@@ -1,9 +1,4 @@
-
-export const enum Knob {
-  None,
-  A,
-  B
-}
+export type Knob = 'A' | 'B' | undefined;
 
 export type RangeValue = number | {lower: number, upper: number};
 
diff --git a/core/src/components/range/range.ios.scss b/core/src/components/range/range.ios.scss
index 2b1ce206c2..db9bda6048 100644
--- a/core/src/components/range/range.ios.scss
+++ b/core/src/components/range/range.ios.scss
@@ -4,29 +4,29 @@
 // iOS Range
 // --------------------------------------------------
 
-.range-ios {
+:host {
   @include padding($range-ios-padding-vertical, $range-ios-padding-horizontal);
 
   font-family: $range-ios-font-family;
 }
 
-.range-ios [range-left] {
-  @include margin(0, 20px, 0, 0);
-}
+// .range-ios [range-left] {
+//   @include margin(0, 20px, 0, 0);
+// }
 
-.range-ios [range-right] {
-  @include margin(0, 0, 0, 20px);
-}
+// .range-ios [range-right] {
+//   @include margin(0, 0, 0, 20px);
+// }
 
-.range-ios.range-has-pin {
+:host(.range-has-pin) {
   @include padding($range-ios-padding-vertical + $range-ios-pin-font-size, null, null, null);
 }
 
-.range-ios .range-slider {
+.range-slider {
   height: $range-ios-slider-height;
 }
 
-.range-ios .range-bar {
+.range-bar {
   @include position(($range-ios-slider-height / 2), null, null, 0);
   @include border-radius(1px);
 
@@ -40,15 +40,15 @@
   pointer-events: none;
 }
 
-.range-ios.range-pressed .range-bar-active {
+:host(.range-pressed) .range-bar-active {
   will-change: left, right;
 }
 
-.range-ios.range-pressed .range-knob-handle {
+:host(.range-pressed) .range-knob-handle {
   will-change: left;
 }
 
-.range-ios .range-bar-active {
+.range-bar-active {
   bottom: 0;
 
   width: auto;
@@ -56,10 +56,10 @@
   background: $range-ios-bar-active-background-color;
 }
 
-.range-ios .range-knob-handle {
+.range-knob-handle {
   @include position(($range-ios-slider-height / 2), null, null, 0);
   @include margin(-($range-ios-hit-height / 2), null, null, -($range-ios-hit-width / 2));
-  @include text-align(center);
+  text-align: center;
 
   position: absolute;
 
@@ -67,7 +67,7 @@
   height: $range-ios-hit-height;
 }
 
-.range-ios .range-knob {
+.range-knob {
   @include position(($range-ios-hit-height / 2) - ($range-ios-knob-height / 2) + ($range-ios-bar-height / 2) - .5px,
           null, null, ($range-ios-hit-width / 2) - ($range-ios-knob-width / 2));
   @include border-radius($range-ios-knob-border-radius);
@@ -84,7 +84,7 @@
   pointer-events: none;
 }
 
-.range-ios .range-tick {
+.range-tick {
   @include margin-horizontal(-($range-ios-tick-width / 2), null);
   @include border-radius($range-ios-tick-border-radius);
 
@@ -99,12 +99,12 @@
   pointer-events: none;
 }
 
-.range-ios .range-tick-active {
+.range-tick-active {
   background: $range-ios-tick-active-background-color;
 }
 
-.range-ios .range-pin {
-  @include text-align(center);
+.range-pin {
+  text-align: center;
   @include border-radius(50px);
   @include transform(translate3d(0, 28px, 0), scale(.01));
   @include padding($range-ios-pin-padding-top, $range-ios-pin-padding-end, $range-ios-pin-padding-bottom, $range-ios-pin-padding-start);
@@ -124,25 +124,10 @@
   transition: transform 120ms ease;
 }
 
-.range-ios .range-knob-pressed .range-pin {
+.range-knob-pressed .range-pin {
   @include transform(translate3d(0, 0, 0), scale(1));
 }
 
-.range-ios.range-disabled {
+:host(.range-disabled) {
   opacity: .5;
 }
-
-
-// Generate iOS Range Colors
-// --------------------------------------------------
-
-@each $color-name, $color-value in $colors-ios {
-  $color-base: ion-color($colors-ios, $color-name, base, ios);
-
-  .range-ios-#{$color-name} {
-    .range-bar-active,
-    .range-tick-active {
-      background: $color-base;
-    }
-  }
-}
diff --git a/core/src/components/range/range.ios.vars.scss b/core/src/components/range/range.ios.vars.scss
index e81df75cda..0a52d34bff 100644
--- a/core/src/components/range/range.ios.vars.scss
+++ b/core/src/components/range/range.ios.vars.scss
@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Padding top/bottom of the range
-$range-ios-font-family:                       $font-family-ios-base !default;
+$range-ios-font-family:                       $font-family-base !default;
 
 /// @prop - Padding top/bottom of the range
 $range-ios-padding-vertical:                  8px !default;
@@ -25,10 +25,10 @@ $range-ios-hit-height:                        $range-ios-slider-height !default;
 $range-ios-bar-height:                        1px !default;
 
 /// @prop - Background of the range bar
-$range-ios-bar-background-color:              $background-ios-color-step-250 !default;
+$range-ios-bar-background-color:              $background-color-step-250 !default;
 
 /// @prop - Background of the active range bar
-$range-ios-bar-active-background-color:       ion-color($colors-ios, primary, base, ios) !default;
+$range-ios-bar-active-background-color:       current-color(base) !default;
 
 /// @prop - Width of the range knob
 $range-ios-knob-width:                        28px !default;
@@ -43,7 +43,7 @@ $range-ios-knob-box-shadow:                   0 3px 1px rgba(0, 0, 0, .1), 0 4px
 $range-ios-knob-border-radius:                50% !default;
 
 /// @prop - Background of the range knob
-$range-ios-knob-background-color:             $background-ios-color !default;
+$range-ios-knob-background-color:             $background-color !default;
 
 /// @prop - Width of the range tick
 $range-ios-tick-width:                        $range-ios-bar-height !default;
@@ -64,7 +64,7 @@ $range-ios-tick-active-background-color:      $range-ios-bar-active-background-c
 $range-ios-pin-background-color:              transparent !default;
 
 /// @prop - Color of the range pin
-$range-ios-pin-color:                         $text-ios-color !default;
+$range-ios-pin-color:                         $text-color !default;
 
 /// @prop - Font size of the range pin
 $range-ios-pin-font-size:                     12px !default;
diff --git a/core/src/components/range/range.md.scss b/core/src/components/range/range.md.scss
index 726fdbb65f..3faa68fdc4 100644
--- a/core/src/components/range/range.md.scss
+++ b/core/src/components/range/range.md.scss
@@ -4,29 +4,30 @@
 // Material Design Range
 // --------------------------------------------------
 
-.range-md {
+:host {
   @include padding($range-md-padding-vertical, $range-md-padding-horizontal);
 
   font-family: $range-md-font-family;
 }
 
-.range-md [slot="range-start"] {
-  @include margin(0, 12px, 0, 0);
-}
+// TODO: REVIEW
+// .range-md [slot="range-start"] {
+//   @include margin(0, 12px, 0, 0);
+// }
 
-.range-md [slot="range-end"] {
-  @include margin(0, 0, 0, 12px);
-}
+// .range-md [slot="range-end"] {
+//   @include margin(0, 0, 0, 12px);
+// }
 
-.range-md.range-has-pin {
+:host(.range-has-pin) {
   @include padding($range-md-padding-vertical + $range-md-pin-font-size + $range-md-pin-padding-vertical, null, null, null);
 }
 
-.range-md .range-slider {
+.range-slider {
   height: $range-md-slider-height;
 }
 
-.range-md .range-bar {
+.range-bar {
   @include position(($range-md-slider-height / 2), null, null, 0);
 
   position: absolute;
@@ -39,15 +40,15 @@
   pointer-events: none;
 }
 
-.range-md.range-pressed .range-bar-active {
+:host(.range-pressed) .range-bar-active {
   will-change: left, right;
 }
 
-.range-md.range-pressed .range-knob-handle {
+:host(.range-pressed) .range-knob-handle {
   will-change: left;
 }
 
-.range-md .range-bar-active {
+.range-bar-active {
   bottom: 0;
 
   width: auto;
@@ -55,10 +56,10 @@
   background: $range-md-bar-active-background-color;
 }
 
-.range-md .range-knob-handle {
+.range-knob-handle {
   @include position(($range-md-slider-height / 2), null, null, 0);
   @include margin(-($range-md-hit-height / 2), null, null, -($range-md-hit-width / 2));
-  @include text-align(center);
+  text-align: center;
 
   position: absolute;
 
@@ -66,7 +67,7 @@
   height: $range-md-hit-height;
 }
 
-.range-md .range-knob {
+.range-knob {
   @include position(($range-md-hit-height / 2) - ($range-md-knob-height / 2) + ($range-md-bar-height / 2),
           null, null, ($range-md-hit-width / 2) - ($range-md-knob-width / 2));
   @include border-radius(50%);
@@ -88,7 +89,7 @@
   pointer-events: none;
 }
 
-.range-md .range-tick {
+.range-tick {
   @include margin-horizontal(-($range-md-tick-width / 2), null);
   @include border-radius($range-md-tick-border-radius);
 
@@ -106,13 +107,13 @@
   pointer-events: none;
 }
 
-.range-md .range-tick-active {
+.range-tick-active {
   background: $range-md-tick-active-background-color;
 }
 
-.range-md .range-pin {
+.range-pin {
   @include padding($range-md-pin-padding-vertical, $range-md-pin-padding-horizontal);
-  @include text-align(center);
+  text-align: center;
   @include border-radius(50%);
   @include transform(translate3d(0, 28px, 0), scale(.01));
 
@@ -151,16 +152,16 @@
   }
 }
 
-.range-md .range-knob-pressed .range-pin {
+.range-knob-pressed .range-pin {
   @include transform(translate3d(0, 0, 0), scale(1));
 }
 
-.range-md:not(.range-has-pin) .range-knob-pressed .range-knob {
+:host(:not(.range-has-pin)) .range-knob-pressed .range-knob {
   transform: scale(1);
 }
 
 @mixin md-range-min() {
-  .range-md .range-knob-min.range-knob-min {
+  .range-knob-min.range-knob-min {
     .range-knob {
       border: $range-md-knob-min-border;
       background: $range-md-knob-min-background-color;
@@ -168,7 +169,7 @@
 
     .range-pin,
     .range-pin::before {
-      color: ion-color($colors-md, primary, contrast, md);
+      color: ion-color(primary, contrast);
       background: $range-md-pin-min-background-color;
     }
   }
@@ -176,33 +177,12 @@
 
 @include md-range-min();
 
-.range-md.range-disabled {
-  .range-bar-active {
-    background-color: $range-md-bar-background-color;
-  }
-
-  .range-knob {
-    outline: 5px solid #fff;
-    background-color: $range-md-bar-background-color;
-    transform: scale(.55);
-  }
+:host(.range-disabled) .range-bar-active {
+  background-color: $range-md-bar-background-color;
 }
 
-
-// Generate Material Design Range Colors
-// --------------------------------------------------
-
-@each $color-name, $color-value in $colors-md {
-  $color-base: ion-color($colors-md, $color-name, base, md);
-
-  .range-md-#{$color-name} {
-    @include md-range-min();
-
-    .range-bar-active,
-    .range-knob,
-    .range-pin,
-    .range-pin::before {
-      background: $color-base;
-    }
-  }
+:host(.range-disabled) .range-knob {
+  outline: 5px solid #fff;
+  background-color: $range-md-bar-background-color;
+  transform: scale(.55);
 }
diff --git a/core/src/components/range/range.md.vars.scss b/core/src/components/range/range.md.vars.scss
index 7fac28c5e4..f209b2d43e 100644
--- a/core/src/components/range/range.md.vars.scss
+++ b/core/src/components/range/range.md.vars.scss
@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Font family of the range
-$range-md-font-family:                       $font-family-md-base !default;
+$range-md-font-family:                       $font-family-base !default;
 
 /// @prop - Padding top/bottom of the range
 $range-md-padding-vertical:                  8px !default;
@@ -25,10 +25,10 @@ $range-md-hit-height:                        $range-md-slider-height !default;
 $range-md-bar-height:                        2px !default;
 
 /// @prop - Background of the range bar
-$range-md-bar-background-color:              $background-md-color-step-250 !default;
+$range-md-bar-background-color:              $background-color-step-250 !default;
 
 /// @prop - Background of the active range bar
-$range-md-bar-active-background-color:       ion-color($colors-md, primary, base, md) !default;
+$range-md-bar-active-background-color:       current-color(base) !default;
 
 /// @prop - Width of the range knob
 $range-md-knob-width:                        18px !default;
@@ -40,7 +40,7 @@ $range-md-knob-height:                       $range-md-knob-width !default;
 $range-md-knob-background-color:             $range-md-bar-active-background-color !default;
 
 /// @prop - Background of the range knob when the value is the minimum
-$range-md-knob-min-background-color:         $background-md-color !default;
+$range-md-knob-min-background-color:         $background-color !default;
 
 /// @prop - Border of the range knob when the value is the minimum
 $range-md-knob-min-border:                   2px solid $range-md-bar-background-color !default;
@@ -55,7 +55,7 @@ $range-md-tick-height:                       $range-md-tick-width !default;
 $range-md-tick-border-radius:                50% !default;
 
 /// @prop - Background of the range tick
-$range-md-tick-background-color:             $background-md-color !default;
+$range-md-tick-background-color:             $background-color !default;
 
 /// @prop - Background of the active range tick
 $range-md-tick-active-background-color:      $range-md-tick-background-color !default;
@@ -64,7 +64,7 @@ $range-md-tick-active-background-color:      $range-md-tick-background-color !de
 $range-md-pin-background-color:              $range-md-bar-active-background-color !default;
 
 /// @prop - Color of the range pin
-$range-md-pin-color:                         ion-color($colors-md, $range-md-bar-active-background-color, contrast, md) !default;
+$range-md-pin-color:                         ion-color(primary, contrast) !default;
 
 /// @prop - Font size of the range pin
 $range-md-pin-font-size:                     12px !default;
diff --git a/core/src/components/range/range.scss b/core/src/components/range/range.scss
index eb3e751ca8..8e7893f63a 100644
--- a/core/src/components/range/range.scss
+++ b/core/src/components/range/range.scss
@@ -3,45 +3,28 @@
 // Range
 // --------------------------------------------------
 
-.item ion-range .item-inner {
-  overflow: visible;
+:host {
+  --ion-color-base: #{ion-color(primary, base)};
+  --ion-color-contrast: #{ion-color(primary, contrast)};
 
-  width: 100%;
-}
-
-.item ion-range .input-wrapper {
-  overflow: visible;
-
-  flex-direction: column;
-
-  width: 100%;
-}
-
-.item ion-range {
-  width: 100%;
-}
-
-.item ion-range ion-label {
-  align-self: center;
-}
-
-ion-range {
   position: relative;
   display: flex;
 
+  flex: 1;
+
   align-items: center;
 }
 
-ion-range ion-label {
+::slotted(ion-label) {
   flex: initial;
 }
 
-ion-range ion-icon {
+::slotted(ion-icon[slot]) {
   font-size: 24px;
 }
 
-ion-range ion-gesture,
-ion-range .range-slider {
+ion-gesture,
+.range-slider {
   position: relative;
 
   flex: 1;
@@ -59,3 +42,29 @@ ion-range .range-slider {
     outline: none;
   }
 }
+
+// Range in Item
+// ----------------------------
+
+// .item ion-range .item-inner {
+//   overflow: visible;
+
+//   width: 100%;
+// }
+
+// .item ion-range .input-wrapper {
+//   overflow: visible;
+
+//   flex-direction: column;
+
+//   width: 100%;
+// }
+
+:host(.in-item) {
+  width: 100%;
+}
+
+
+:host(.in-item) ::slotted(ion-label) {
+  align-self: center;
+}
diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
index 0dc8054d82..0dc6d91d2f 100644
--- a/core/src/components/range/range.tsx
+++ b/core/src/components/range/range.tsx
@@ -17,6 +17,7 @@ import {
   StyleEvent
 } from '../../interface';
 import { clamp, debounceEvent, deferEvent } from '../../utils/helpers';
+import { createColorClasses, hostContext } from '../../utils/theme';
 import { Knob, RangeEventDetail, RangeValue } from './range-interface';
 
 @Component({
@@ -25,20 +26,20 @@ import { Knob, RangeEventDetail, RangeValue } from './range-interface';
     ios: 'range.ios.scss',
     md: 'range.md.scss'
   },
-  host: {
-    theme: 'range'
-  }
+  shadow: true
 })
 export class Range implements BaseInput {
+
   private noUpdate = false;
   private rect!: ClientRect;
   private hasFocus = false;
+  private rangeSlider?: HTMLElement;
 
   @Element() el!: HTMLStencilElement;
 
   @State() private ratioA = 0;
   @State() private ratioB = 0;
-  @State() private pressedKnob = Knob.None;
+  @State() private pressedKnob: Knob;
 
   /**
    * The color to use from your Sass `$colors` map.
@@ -159,7 +160,7 @@ export class Range implements BaseInput {
     if (!ev.detail.isIncrease) {
       step *= -1;
     }
-    if (ev.detail.knob === Knob.A) {
+    if (ev.detail.knob === 'A') {
       this.ratioA += step;
     } else {
       this.ratioB += step;
@@ -186,7 +187,7 @@ export class Range implements BaseInput {
 
   private emitStyle() {
     this.ionStyle.emit({
-      'range-disabled': this.disabled
+      'interactive-disabled': this.disabled
     });
   }
 
@@ -209,8 +210,7 @@ export class Range implements BaseInput {
   private onDragStart(detail: GestureDetail) {
     this.fireFocus();
 
-    const el = this.el.querySelector('.range-slider')!;
-    const rect = (this.rect = el.getBoundingClientRect() as any);
+    const rect = this.rect = this.rangeSlider!.getBoundingClientRect() as any;
     const currentX = detail.currentX;
 
     // figure out which knob they started closer to
@@ -218,8 +218,8 @@ export class Range implements BaseInput {
     this.pressedKnob =
       !this.dualKnobs ||
       Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio)
-        ? Knob.A
-        : Knob.B;
+        ? 'A'
+        : 'B';
 
     // update the active knob's position
     this.update(currentX);
@@ -231,7 +231,7 @@ export class Range implements BaseInput {
 
   private onDragEnd(detail: GestureDetail) {
     this.update(detail.currentX);
-    this.pressedKnob = Knob.None;
+    this.pressedKnob = undefined;
     this.fireBlur();
   }
 
@@ -247,7 +247,7 @@ export class Range implements BaseInput {
     }
 
     // update which knob is pressed
-    if (this.pressedKnob === Knob.A) {
+    if (this.pressedKnob === 'A') {
       this.ratioA = ratio;
     } else {
       this.ratioB = ratio;
@@ -307,8 +307,10 @@ export class Range implements BaseInput {
   hostData() {
     return {
       class: {
+        ...createColorClasses(this.color),
+        'in-item': hostContext('.item', this.el),
         'range-disabled': this.disabled,
-        'range-pressed': this.pressedKnob !== Knob.None,
+        'range-pressed': this.pressedKnob !== undefined,
         'range-has-pin': this.pin
       }
     };
@@ -345,7 +347,7 @@ export class Range implements BaseInput {
         direction="x"
         threshold={0}
       >
-        

+        
 this.rangeSlider = el}>
           {ticks.map(t => (
             

           Range - Basic
   
   
+  
 
 
 
   
 
-      
-        
-          Range - Basic
-        
-      
+    
+      
+        Range - Basic
+      
+    
 
-      
-        
-          
-            Range color
-          
-          
-            
-          
-          
-            
-          
-          
-            
-          
-          
-            
-              
-              
-            
-            
-              
-              
-            
-          
-        
+    
+      
+        
+          Range color
+        
+        
+          
+        
+        
+          
+        
+        
+          
+        
+        
+          
+            
+            
+          
+          
+            
+            
+          
+        
+      
 
-        
-          
-            Dynamic Value
-          
-          
-            
-            

-          
-          
-            
-            

-          
-          
-            
-            

-          
-          
-            Increase Values
-          
-        
+      
+        
+          Dynamic Value
+        
+        
+          
+          

+        
+        
+          
+          

+        
+        
+          
+          

+        
+        
+          Increase Values
+        
+      
 
-        
-          
-            Mode
-          
-          
-            
-          
-          
-            
-          
-        
+      
+        
+          Mode
+        
+        
+          
+        
+        
+          
+        
+      
 
-        
-          
-            Options
-          
-          
-            
-          
-          
-            
-          
-          
-            
-          
-          
-            
-          
-          
-            
-          
-        
+      
+        
+          Options
+        
+        
+          
+        
+        
+          
+        
+        
+          
+        
+        
+          
+        
+        
+          
+        
+      
 
-        Test
-      
+      Test
+    
 
   
 
@@ -114,12 +115,12 @@
       el.value = (i + 1) * 10;
       updateRangeResult(el);
 
-      el.addEventListener('ionChange', function(ev) {
+      el.addEventListener('ionChange', function (ev) {
         updateRangeResult(ev.target);
       });
     }
 
-    progressValue.addEventListener('ionChange', function(ev) {
+    progressValue.addEventListener('ionChange', function (ev) {
       console.log(ev.detail.value);
       brightnessValue.value = ev.detail.value;
       contrastValue.value = ev.target.value;
@@ -133,7 +134,7 @@
 
     function increaseRangeValues() {
       for (var i = 0; i < ranges.length; i++) {
-        var el = document.getElementById(ranges[i]);
+        var el = ranges[i];
         var newValue = el.value + 10;
 
         if (newValue > 100) {
@@ -150,16 +151,16 @@
       lower: 33,
       upper: 60
     }
-    knob.addEventListener('ionFocus', function(ev) {
+    knob.addEventListener('ionFocus', function (ev) {
       console.log('focus', ev)
     })
-    knob.addEventListener('ionBlur', function(ev) {
+    knob.addEventListener('ionBlur', function (ev) {
       console.log('blur', ev)
     })
-    knob.addEventListener('ionChange', function(ev) {
+    knob.addEventListener('ionChange', function (ev) {
       console.log('change', ev)
     })
-    debounceRange.addEventListener('ionChange', function(ev) {
+    debounceRange.addEventListener('ionChange', function (ev) {
       console.log('change', ev)
     })
 
diff --git a/core/src/components/range/test/preview/index.html b/core/src/components/range/test/preview/index.html
index a48ac3ea85..3220199337 100644
--- a/core/src/components/range/test/preview/index.html
+++ b/core/src/components/range/test/preview/index.html
@@ -6,99 +6,100 @@
   Range
   
   
+  
 
 
 
   
 
-      
-        
-          Range
-        
-      
+    
+      
+        Range
+      
+    
 
-      
-        
-          
-            Range color
-          
-          
-            
-          
-          
-            
-          
-          
-            
-          
-          
-            
-              
-              
-            
-            
-              
-              
-            
-          
-        
+    
+      
+        
+          Range color
+        
+        
+          
+        
+        
+          
+        
+        
+          
+        
+        
+          
+            
+            
+          
+          
+            
+            
+          
+        
+      
 
-        
-          
-            Dynamic Value
-          
-          
-            
-            

-          
-          
-            
-            

-          
-          
-            
-            

-          
-          
-            Increase Values
-          
-        
+      
+        
+          Dynamic Value
+        
+        
+          
+          

+        
+        
+          
+          

+        
+        
+          
+          

+        
+        
+          Increase Values
+        
+      
 
-        
-          
-            Mode
-          
-          
-            
-          
-          
-            
-          
-        
+      
+        
+          Mode
+        
+        
+          
+        
+        
+          
+        
+      
 
-        
-          
-            Options
-          
-          
-            
-          
-          
-            
-          
-          
-            
-          
-          
-            
-          
-          
-            
-          
-        
+      
+        
+          Options
+        
+        
+          
+        
+        
+          
+        
+        
+          
+        
+        
+          
+        
+        
+          
+        
+      
 
-        Test
-      
+      Test
+    
 
   
 
@@ -110,7 +111,7 @@
       el.value = (i + 1) * 10;
       updateRangeResult(el);
 
-      el.addEventListener('ionChange', function(ev) {
+      el.addEventListener('ionChange', function (ev) {
         updateRangeResult(ev.currentTarget);
       });
     }
@@ -139,16 +140,16 @@
       lower: 33,
       upper: 60
     }
-    knob.addEventListener('ionFocus', function(ev) {
+    knob.addEventListener('ionFocus', function (ev) {
       console.log('focus', ev)
     })
-    knob.addEventListener('ionBlur', function(ev) {
+    knob.addEventListener('ionBlur', function (ev) {
       console.log('blur', ev)
     })
-    knob.addEventListener('ionChange', function(ev) {
+    knob.addEventListener('ionChange', function (ev) {
       console.log('change', ev)
     })
-    debounceRange.addEventListener('ionChange', function(ev) {
+    debounceRange.addEventListener('ionChange', function (ev) {
       console.log('change', ev)
     })
 
diff --git a/core/src/components/range/test/standalone/index.html b/core/src/components/range/test/standalone/index.html
index 8c7a29f3f9..5803717f3a 100644
--- a/core/src/components/range/test/standalone/index.html
+++ b/core/src/components/range/test/standalone/index.html
@@ -6,6 +6,7 @@
   Range - Standalone
   
   
+  
 
 
 
diff --git a/core/src/components/refresher/refresher.ios.vars.scss b/core/src/components/refresher/refresher.ios.vars.scss
index f328e941c2..5f98c15b18 100644
--- a/core/src/components/refresher/refresher.ios.vars.scss
+++ b/core/src/components/refresher/refresher.ios.vars.scss
@@ -1,7 +1,7 @@
 @import "../../themes/ionic.globals.ios";
 
 /// @prop - Color of the refresher icon
-$refresher-ios-icon-color:         $text-ios-color !default;
+$refresher-ios-icon-color:         $text-color !default;
 
 /// @prop - Text color of the refresher content
-$refresher-ios-text-color:         $text-ios-color !default;
+$refresher-ios-text-color:         $text-color !default;
diff --git a/core/src/components/refresher/refresher.md.vars.scss b/core/src/components/refresher/refresher.md.vars.scss
index 7e1f4f08b5..87e74088f6 100644
--- a/core/src/components/refresher/refresher.md.vars.scss
+++ b/core/src/components/refresher/refresher.md.vars.scss
@@ -1,7 +1,7 @@
 @import "../../themes/ionic.globals.md";
 
 /// @prop - Color of the refresher icon
-$refresher-md-icon-color:         $text-md-color !default;
+$refresher-md-icon-color:         $text-color !default;
 
 /// @prop - Text color of the refresher content
-$refresher-md-text-color:         $text-md-color !default;
+$refresher-md-text-color:         $text-color !default;
diff --git a/core/src/components/refresher/refresher.scss b/core/src/components/refresher/refresher.scss
index 80db4c809f..ef9e47d8b8 100644
--- a/core/src/components/refresher/refresher.scss
+++ b/core/src/components/refresher/refresher.scss
@@ -39,7 +39,7 @@ ion-refresher-content {
 
 .refresher-pulling-icon,
 .refresher-refreshing-icon {
-  @include text-align(center);
+  text-align: center;
   @include transform-origin(center);
 
   font-size: $refresher-icon-font-size;
@@ -48,7 +48,7 @@ ion-refresher-content {
 
 .refresher-pulling-text,
 .refresher-refreshing-text {
-  @include text-align(center);
+  text-align: center;
 
   font-size: $refresher-text-font-size;
 }
diff --git a/core/src/components/refresher/refresher.tsx b/core/src/components/refresher/refresher.tsx
index 2226c2e1f7..5fba30f9a6 100644
--- a/core/src/components/refresher/refresher.tsx
+++ b/core/src/components/refresher/refresher.tsx
@@ -1,5 +1,6 @@
-import { Component, Element, Event, EventEmitter, Method, Prop, State } from '@stencil/core';
-import { GestureDetail, QueueController } from '../../interface';
+import { Component, Element, Event, EventEmitter, Method, Prop, QueueApi, State } from '@stencil/core';
+import { GestureDetail, Mode } from '../../interface';
+import { createThemedClasses } from '../../utils/theme';
 
 const enum RefresherState {
   Inactive = 1 << 0,
@@ -17,9 +18,6 @@ const enum RefresherState {
   styleUrls: {
     ios: 'refresher.ios.scss',
     md: 'refresher.md.scss'
-  },
-  host: {
-    theme: 'refresher'
   }
 })
 export class Refresher {
@@ -27,9 +25,11 @@ export class Refresher {
   private appliedStyles = false;
   private didStart = false;
   private progress = 0;
-  private scrollEl: HTMLElement | null = null;
+  private scrollEl?: HTMLIonScrollElement;
 
-  @Prop({ context: 'queue' }) queue!: QueueController;
+  mode!: Mode;
+
+  @Prop({ context: 'queue' }) queue!: QueueApi;
 
   /**
    * The current state which the refresher is in. The refresher's states include:
@@ -93,7 +93,7 @@ export class Refresher {
    */
   @Event() ionStart!: EventEmitter;
 
-  componentDidLoad() {
+  async componentDidLoad() {
     if (this.el.getAttribute('slot') !== 'fixed') {
       console.error('Make sure you use: ');
       return;
@@ -103,14 +103,17 @@ export class Refresher {
       console.error('ion-refresher is not attached');
       return;
     }
-    this.scrollEl = parentElement.querySelector('ion-scroll') as HTMLElement;
-    if (!this.scrollEl) {
+    const contentEl = parentElement.querySelector('ion-content');
+    if (contentEl) {
+      await contentEl.componentOnReady();
+      this.scrollEl = contentEl.getScrollElement();
+    } else {
       console.error('ion-refresher didn\'t attached, make sure if parent is a ion-content');
     }
   }
 
   componentDidUnload() {
-    this.scrollEl = null;
+    this.scrollEl = undefined;
   }
 
   /**
@@ -333,6 +336,8 @@ export class Refresher {
   hostData() {
     return {
       class: {
+        ...createThemedClasses(this.mode, 'refresher'),
+
         'refresher-active': this.state !== RefresherState.Inactive,
         'refresher-pulling': this.state === RefresherState.Pulling,
         'refresher-ready': this.state === RefresherState.Ready,
diff --git a/core/src/components/refresher/test/basic/index.html b/core/src/components/refresher/test/basic/index.html
index 0080733d96..9031fb6887 100644
--- a/core/src/components/refresher/test/basic/index.html
+++ b/core/src/components/refresher/test/basic/index.html
@@ -6,30 +6,28 @@
   Refresher - Basic
   
   
+  
 
 
 
   
 
 
-      
-        
-          Pull To Refresh
-        
-      
+    
+      
+        Pull To Refresh
+      
+    
 
-      
-        
-          
-          
-        
+    
+      
+        
+        
+      
 
-        
+      
 
-      
+    
 
 
 
@@ -39,11 +37,11 @@
   
 
+
 
diff --git a/core/src/components/refresher/test/preview/index.html b/core/src/components/refresher/test/preview/index.html
index 6cf1a0efdb..317458fe1a 100644
--- a/core/src/components/refresher/test/preview/index.html
+++ b/core/src/components/refresher/test/preview/index.html
@@ -6,30 +6,28 @@
   Refresher
   
   
+  
 
 
 
   
 
 
-      
-        
-          Pull To Refresh
-        
-      
+    
+      
+        Pull To Refresh
+      
+    
 
-      
-        
-          
-          
-        
+    
+      
+        
+        
+      
 
-        
+      
 
-      
+    
 
 
 
@@ -39,11 +37,11 @@
   
 
+
 
diff --git a/core/src/components/reorder-group/reorder-group.scss b/core/src/components/reorder-group/reorder-group.scss
index acd4246657..aa58881743 100644
--- a/core/src/components/reorder-group/reorder-group.scss
+++ b/core/src/components/reorder-group/reorder-group.scss
@@ -12,3 +12,32 @@
 
   will-change: transform;
 }
+
+.reorder-enabled ion-reorder {
+  display: block;
+
+  cursor: grab;
+
+  pointer-events: all;
+  touch-action: none;
+}
+
+.reorder-selected,
+.reorder-selected ion-reorder {
+  cursor: grabbing;
+}
+
+.reorder-selected {
+  position: relative;
+  z-index: $z-index-reorder-selected;
+
+  box-shadow: 0 0 10px rgba(0, 0, 0, .4);
+  opacity: .8;
+
+  // scss-lint:disable ImportantRule
+  transition: none !important;
+}
+
+.reorder-visible ion-reorder .reorder-icon {
+  @include transform(translate3d(0, 0, 0));
+}
diff --git a/core/src/components/reorder-group/reorder-group.tsx b/core/src/components/reorder-group/reorder-group.tsx
index 98950dc7c8..9edd7d9c23 100644
--- a/core/src/components/reorder-group/reorder-group.tsx
+++ b/core/src/components/reorder-group/reorder-group.tsx
@@ -1,14 +1,12 @@
-import { Component, Element, Prop, State, Watch } from '@stencil/core';
-import { GestureDetail, QueueController } from '../../interface';
+import { Component, Element, Prop, QueueApi, State } from '@stencil/core';
+import { GestureDetail, Mode } from '../../interface';
 import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart} from '../../utils/haptic';
+import { createThemedClasses } from '../../utils/theme';
 
 
 @Component({
   tag: 'ion-reorder-group',
-  styleUrl: 'reorder-group.scss',
-  host: {
-    theme: 'reorder-group'
-  }
+  styleUrl: 'reorder-group.scss'
 })
 export class ReorderGroup {
 
@@ -17,7 +15,7 @@ export class ReorderGroup {
   private lastToIndex!: number;
   private cachedHeights: number[] = [];
   private containerEl!: HTMLElement;
-  private scrollEl: HTMLElement|null = null;
+  private scrollEl?: HTMLIonScrollElement;
 
   private scrollElTop = 0;
   private scrollElBottom = 0;
@@ -26,37 +24,25 @@ export class ReorderGroup {
   private containerTop = 0;
   private containerBottom = 0;
 
-  @State() enabled = false;
-  @State() iconVisible = false;
+  mode!: Mode;
+
   @State() activated = false;
 
   @Element() el!: HTMLElement;
 
-  @Prop({ context: 'queue' }) queue!: QueueController;
+  @Prop({ context: 'queue' }) queue!: QueueApi;
 
   /**
    * If true, the reorder will be hidden. Defaults to `true`.
    */
   @Prop() disabled = true;
 
-  @Watch('disabled')
-  protected disabledChanged(disabled: boolean) {
-    if (!disabled) {
-      this.enabled = true;
-      this.queue.read(() => {
-        this.iconVisible = true;
-      });
-    } else {
-      this.iconVisible = false;
-      setTimeout(() => this.enabled = false, 400);
-    }
-  }
-
-  componentDidLoad() {
+  async componentDidLoad() {
     this.containerEl = this.el.querySelector('ion-gesture')!;
-    this.scrollEl = this.el.closest('ion-scroll');
-    if (!this.disabled) {
-      this.disabledChanged(false);
+    const contentEl = this.el.closest('ion-content');
+    if (contentEl) {
+      await contentEl.componentOnReady();
+      this.scrollEl = contentEl.getScrollElement();
     }
   }
 
@@ -241,29 +227,29 @@ export class ReorderGroup {
   hostData() {
     return {
       class: {
-        'reorder-enabled': this.enabled,
+        ...createThemedClasses(this.mode, 'reorder-group'),
+
+        'reorder-enabled': !this.disabled,
         'reorder-list-active': this.activated,
-        'reorder-visible': this.iconVisible
       }
     };
   }
 
   render() {
     return (
-      
+      
         
       
     );
diff --git a/core/src/components/reorder/reorder.ios.scss b/core/src/components/reorder/reorder.ios.scss
index b6b2d3e8ae..a26ff1df3f 100644
--- a/core/src/components/reorder/reorder.ios.scss
+++ b/core/src/components/reorder/reorder.ios.scss
@@ -4,7 +4,7 @@
 // iOS Reorder
 // --------------------------------------------------
 
-.reorder-ios .reorder-icon {
+.reorder-icon {
   font-size: $reorder-ios-icon-font-size;
-  opacity: $reorder-ios-icon-font-size;
+  opacity: $reorder-ios-icon-opacity;
 }
diff --git a/core/src/components/reorder/reorder.ios.vars.scss b/core/src/components/reorder/reorder.ios.vars.scss
index 07f7daba25..dd798ef68d 100644
--- a/core/src/components/reorder/reorder.ios.vars.scss
+++ b/core/src/components/reorder/reorder.ios.vars.scss
@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Font size of the reorder icon
-$reorder-ios-icon-font-size:      2em !default;
+$reorder-ios-icon-font-size:      34px !default;
 
 /// @prop - Opacity of the reorder icon
 $reorder-ios-icon-opacity:        .4 !default;
diff --git a/core/src/components/reorder/reorder.md.scss b/core/src/components/reorder/reorder.md.scss
index ff7ed86502..15f05a312a 100644
--- a/core/src/components/reorder/reorder.md.scss
+++ b/core/src/components/reorder/reorder.md.scss
@@ -4,7 +4,7 @@
 // Material Design Reorder
 // --------------------------------------------------
 
-.reorder-md .reorder-icon {
+.reorder-icon {
   font-size: $reorder-md-icon-font-size;
   opacity: $reorder-md-icon-opacity;
 }
diff --git a/core/src/components/reorder/reorder.md.vars.scss b/core/src/components/reorder/reorder.md.vars.scss
index 4ea09014e7..4cc47c86f0 100644
--- a/core/src/components/reorder/reorder.md.vars.scss
+++ b/core/src/components/reorder/reorder.md.vars.scss
@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Font size of the reorder icon
-$reorder-md-icon-font-size:      1.8em !default;
+$reorder-md-icon-font-size:      31px !default;
 
 /// @prop - Opacity of the reorder icon
 $reorder-md-icon-opacity:        .3 !default;
diff --git a/core/src/components/reorder/reorder.scss b/core/src/components/reorder/reorder.scss
index ba0ebdad50..450a33b34d 100644
--- a/core/src/components/reorder/reorder.scss
+++ b/core/src/components/reorder/reorder.scss
@@ -3,35 +3,12 @@
 // Reorder
 // --------------------------------------------------
 
-.reorder[slot] {
+:host([slot]) {
   display: none;
 
   line-height: 0;
-}
 
-.reorder-enabled .reorder {
-  display: block;
-
-  cursor: grab;
-
-  pointer-events: all;
-  touch-action: none;
-}
-
-.reorder-selected,
-.reorder-selected .reorder {
-  cursor: grabbing;
-}
-
-.reorder-selected {
-  position: relative;
-  z-index: $z-index-reorder-selected;
-
-  box-shadow: 0 0 10px rgba(0, 0, 0, .4);
-  opacity: .8;
-
-  // scss-lint:disable ImportantRule
-  transition: none !important;
+  z-index: 100;
 }
 
 
@@ -39,29 +16,7 @@
 // --------------------------------------------------
 
 .reorder-icon {
-  @include transform(translate3d($reorder-initial-transform, 0, 0));
-
   display: block;
 
-  font-size: 1.3em;
-  transition: transform 140ms ease-in;
-}
-
-.reorder-icon svg {
-  min-width: 1em;
-}
-
-.reorder[slot="start"] .reorder-icon {
-  @include transform(translate3d(-$reorder-initial-transform, 0, 0));
-}
-
-.reorder-visible .reorder .reorder-icon {
-  @include transform(translate3d(0, 0, 0));
-}
-
-// Item Reorder
-// --------------------------------------------------
-
-.item .reorder[slot] {
-  @include margin(0, null);
+  font-size: 22px;
 }
diff --git a/core/src/components/reorder/reorder.tsx b/core/src/components/reorder/reorder.tsx
index 02bb28c4b2..3807f74c7c 100644
--- a/core/src/components/reorder/reorder.tsx
+++ b/core/src/components/reorder/reorder.tsx
@@ -1,4 +1,5 @@
 import { Component } from '@stencil/core';
+import { Mode } from '../../interface';
 
 @Component({
   tag: 'ion-reorder',
@@ -6,12 +7,12 @@ import { Component } from '@stencil/core';
     ios: 'reorder.ios.scss',
     md: 'reorder.md.scss',
   },
-  host: {
-    theme: 'reorder'
-  }
+  shadow: true
 })
 export class Reorder {
 
+  mode!: Mode;
+
   render() {
     return (
       
diff --git a/core/src/components/reorder/test/basic/index.html b/core/src/components/reorder/test/basic/index.html
index 9f3e7b3745..5d78e83b7b 100644
--- a/core/src/components/reorder/test/basic/index.html
+++ b/core/src/components/reorder/test/basic/index.html
@@ -6,106 +6,107 @@
   Reorder - Basic
   
   
+  
 
 
 
   
 
-      
-        
-          Reorder - Basic
-          
-            Toggle
-          
-        
-      
+    
+      
+        Reorder - Basic
+        
+          Toggle
+        
+      
+    
 
-      
-        
-          
+    
+      
+        
 
-            
-              
-                Item 1 (default ion-reorder)
-              
-              
-            
+          
+            
+              Item 1 (default ion-reorder)
+            
+            
+          
 
-            
-              
-                Item 2 (default ion-reorder)
-              
-              
-            
+          
+            
+              Item 2 (default ion-reorder)
+            
+            
+          
 
-            
-              
-                Item 3 (default ion-reorder slot="start")
-              
-              
-            
+          
+            
+              Item 3 (default ion-reorder slot="start")
+            
+            
+          
 
-            
-              
-                Item 4 (default ion-reorder slot="start")
-              
-              
-            
+          
+            
+              Item 4 (default ion-reorder slot="start")
+            
+            
+          
 
-            
-              
-                Item 5 (custom ion-reorder)
-              
-              
-                
-              
-            
-
-            
-              
-                Item 6 (custom ion-reorder)
-              
-              
-                
-              
-            
-
-            
-              
-                Item 7 (custom ion-reorder slot="start")
-              
-              
-                
-              
-            
-
-            
-              
-                
-                  Item 8 (the whole item can be dragged)
-                
-                
+          
+            
+              Item 5 (custom ion-reorder)
+            
+            
+              
             
+          
 
-            
-              
-                
-                  Item 9 (the whole item can be dragged)
-                
-                
+          
+            
+              Item 6 (custom ion-reorder)
+            
+            
+              
             
+          
 
-            
-              
-                
-                  Item 10 (the whole item can be dragged)
-                
-                
+          
+            
+              Item 7 (custom ion-reorder slot="start")
+            
+            
+              
             
+          
 
-          
-        
-      
+          
+            
+              
+                Item 8 (the whole item can be dragged)
+              
+            
+          
+
+          
+            
+              
+                Item 9 (the whole item can be dragged)
+              
+            
+          
+
+          
+            
+              
+                Item 10 (the whole item can be dragged)
+              
+            
+          
+
+        
+      
+    
 
   
 
diff --git a/core/src/components/reorder/test/preview/index.html b/core/src/components/reorder/test/preview/index.html
index 63ddd8a4b6..13e552a34c 100644
--- a/core/src/components/reorder/test/preview/index.html
+++ b/core/src/components/reorder/test/preview/index.html
@@ -6,106 +6,107 @@
   Reorder
   
   
+  
 
 
 
   
 
-      
-        
-          Reorder
-          
-            Toggle
-          
-        
-      
+    
+      
+        Reorder
+        
+          Toggle
+        
+      
+    
 
-      
-        
-          
+    
+      
+        
 
-            
-              
-                Item 1 (default ion-reorder)
-              
-              
-            
+          
+            
+              Item 1 (default ion-reorder)
+            
+            
+          
 
-            
-              
-                Item 2 (default ion-reorder)
-              
-              
-            
+          
+            
+              Item 2 (default ion-reorder)
+            
+            
+          
 
-            
-              
-                Item 3 (default ion-reorder slot="start")
-              
-              
-            
+          
+            
+              Item 3 (default ion-reorder slot="start")
+            
+            
+          
 
-            
-              
-                Item 4 (default ion-reorder slot="start")
-              
-              
-            
+          
+            
+              Item 4 (default ion-reorder slot="start")
+            
+            
+          
 
-            
-              
-                Item 5 (custom ion-reorder)
-              
-              
-                
-              
-            
-
-            
-              
-                Item 6 (custom ion-reorder)
-              
-              
-                
-              
-            
-
-            
-              
-                Item 7 (custom ion-reorder slot="start")
-              
-              
-                
-              
-            
-
-            
-              
-                
-                  Item 8 (the whole item can be dragged)
-                
-                
+          
+            
+              Item 5 (custom ion-reorder)
+            
+            
+              
             
+          
 
-            
-              
-                
-                  Item 9 (the whole item can be dragged)
-                
-                
+          
+            
+              Item 6 (custom ion-reorder)
+            
+            
+              
             
+          
 
-            
-              
-                
-                  Item 10 (the whole item can be dragged)
-                
-                
+          
+            
+              Item 7 (custom ion-reorder slot="start")
+            
+            
+              
             
+          
 
-          
-        
-      
+          
+            
+              
+                Item 8 (the whole item can be dragged)
+              
+            
+          
+
+          
+            
+              
+                Item 9 (the whole item can be dragged)
+              
+            
+          
+
+          
+            
+              
+                Item 10 (the whole item can be dragged)
+              
+            
+          
+
+        
+      
+    
 
   
 
diff --git a/core/src/components/reorder/test/standalone/index.html b/core/src/components/reorder/test/standalone/index.html
index b1bade1b07..60756261dc 100644
--- a/core/src/components/reorder/test/standalone/index.html
+++ b/core/src/components/reorder/test/standalone/index.html
@@ -6,6 +6,7 @@
   Reorder - Standalone
   
   
+  
 
 
 
diff --git a/core/src/components/ripple-effect/readme.md b/core/src/components/ripple-effect/readme.md
index 8195b50181..bac0e8391a 100644
--- a/core/src/components/ripple-effect/readme.md
+++ b/core/src/components/ripple-effect/readme.md
@@ -8,6 +8,11 @@ The ripple effect component adds the [Material Design ink ripple interaction eff
 
 ## Properties
 
+#### parent
+
+string
+
+
 #### tapClick
 
 boolean
@@ -17,6 +22,11 @@ If true, the ripple effect will listen to any click events and animate
 
 ## Attributes
 
+#### parent
+
+string
+
+
 #### tap-click
 
 boolean
diff --git a/core/src/components/ripple-effect/ripple-effect.scss b/core/src/components/ripple-effect/ripple-effect.scss
index 0ce706fd1e..ed7db0f93b 100644
--- a/core/src/components/ripple-effect/ripple-effect.scss
+++ b/core/src/components/ripple-effect/ripple-effect.scss
@@ -1,13 +1,10 @@
 @import "../../themes/ionic.globals";
-@import "../../themes/ionic.theme.default";
 
 
 // Material Design Ripple Effect
 // --------------------------------------------------
-// Only Material uses the button effect, so by default
-// it's display none, and .md sets to display block.
 
-ion-ripple-effect {
+:host {
   @include position(0, 0, 0, 0);
 
   position: absolute;
@@ -19,7 +16,7 @@ ion-ripple-effect {
   @include border-radius(50%);
   position: absolute;
 
-  background-color: $ripple-background-color;
+  background-color: currentColor;
   opacity: 0;
 
   will-change: transform, opacity;
@@ -28,6 +25,8 @@ ion-ripple-effect {
   animation-duration: 200ms;
   animation-timing-function: ease-out;
 
+  color: inherit;
+
   contain: strict;
 }
 
diff --git a/core/src/components/ripple-effect/ripple-effect.tsx b/core/src/components/ripple-effect/ripple-effect.tsx
index e949d4305e..8c43025d9b 100644
--- a/core/src/components/ripple-effect/ripple-effect.tsx
+++ b/core/src/components/ripple-effect/ripple-effect.tsx
@@ -1,30 +1,32 @@
-import { Component, Element, EventListenerEnable, Listen, Method, Prop, Watch } from '@stencil/core';
-import { QueueController } from '../../interface';
+import { Component, Element, EventListenerEnable, Listen, Method, Prop, QueueApi, Watch } from '@stencil/core';
 import { now } from '../../utils/helpers';
 
 @Component({
   tag: 'ion-ripple-effect',
   styleUrl: 'ripple-effect.scss',
+  shadow: true
 })
 export class RippleEffect {
 
   private lastClick = -10000;
   @Element() el!: HTMLElement;
 
-  @Prop({context: 'queue'}) queue!: QueueController;
-  @Prop({context: 'enableListener'}) enableListener!: EventListenerEnable;
+  @Prop({ context: 'queue' }) queue!: QueueApi;
+  @Prop({ context: 'enableListener' }) enableListener!: EventListenerEnable;
   @Prop({ context: 'document' }) doc!: Document;
 
+  @Prop() parent?: HTMLElement | string = 'parent';
+
   /** If true, the ripple effect will listen to any click events and animate */
   @Prop() tapClick = false;
   @Watch('tapClick')
   tapClickChanged(tapClick: boolean) {
-    this.enableListener(this, 'parent:ionActivated', tapClick);
+    this.enableListener(this, 'ionActivated', tapClick, this.parent);
     this.enableListener(this, 'touchstart', !tapClick);
     this.enableListener(this, 'mousedown', !tapClick);
   }
 
-  @Listen('parent:ionActivated', {enabled: false})
+  @Listen('ionActivated', {enabled: false})
   ionActivated(ev: CustomEvent) {
     this.addRipple(ev.detail.x, ev.detail.y);
   }
@@ -74,10 +76,15 @@ export class RippleEffect {
       style.height = size + 'px';
       style.animationDuration = duration + 'ms';
 
-      this.el.appendChild(div);
+      const container = this.el.shadowRoot || this.el;
+      container.appendChild(div);
       setTimeout(() => div.remove(), duration + 50);
     });
   }
+
+  render() {
+    return null;
+  }
 }
 
 const RIPPLE_FACTOR = 35;
diff --git a/core/src/components/ripple-effect/test/basic/index.html b/core/src/components/ripple-effect/test/basic/index.html
index 0b34cdd588..c20129d1c3 100644
--- a/core/src/components/ripple-effect/test/basic/index.html
+++ b/core/src/components/ripple-effect/test/basic/index.html
@@ -1,10 +1,12 @@
 
 
+
 
   
   Button Effect - Basic
   
   
+  
 
   
 
+
 
   
 
-        
-          
-            Button Effect - Basic
-          
-        
+    
+      
+        Button Effect - Basic
+      
+    
 
-        
-          

-            Small
-          

-          

-            Large
-          

-          

-            Large
-          

-          

-            Large
-          

-          

-            
-            This is just a div + effect behind
-            Nested button
-          

-          

-            This is just a div + effect on top
-            Nested button
-            
-          

+    
+      

+        Small
+      

+      

+        Large
+      

+      

+        Large
+      

+      

+        Large
+      

+      

+        
+        This is just a div + effect behind
+        Nested button
+      

+      

+        This is just a div + effect on top
+        Nested button
+        
+      

 
-          

-            This is just a div + effect
-            
-          

+      

+        This is just a div + effect
+        
+      

 
-          
-            This is just a a + effect on top
-            Nested button
-            
-          
+      
+        This is just a a + effect on top
+        Nested button
+        
+      
 
-          
-        
+      
+    
 
   
   
 
+
 
diff --git a/core/src/components/ripple-effect/test/preview/index.html b/core/src/components/ripple-effect/test/preview/index.html
index e7de5d795a..5330bb3a6e 100644
--- a/core/src/components/ripple-effect/test/preview/index.html
+++ b/core/src/components/ripple-effect/test/preview/index.html
@@ -1,10 +1,12 @@
 
 
+
 
   
   Button Effect
   
   
+  
 
   
 
+
 
   
 
-        
-          
-            Button Effect
-          
-        
+    
+      
+        Button Effect
+      
+    
 
-        
-          

-            Small
-          

-          

-            Large
-          

-          

-            Large
-          

-          

-            Large
-          

-          

-            
-            This is just a div + effect behind
-            Nested button
-          

-          

-            This is just a div + effect on top
-            Nested button
-            
-          

+    
+      

+        Small
+      

+      

+        Large
+      

+      

+        Large
+      

+      

+        Large
+      

+      

+        
+        This is just a div + effect behind
+        Nested button
+      

+      

+        This is just a div + effect on top
+        Nested button
+        
+      

 
-          

-            This is just a div + effect
-            
-          

-        
+      

+        This is just a div + effect
+        
+      

+    
 
   
   
 
+
 
diff --git a/core/src/components/router-outlet/route-outlet.scss b/core/src/components/router-outlet/route-outlet.scss
new file mode 100644
index 0000000000..bbfd8ae3b8
--- /dev/null
+++ b/core/src/components/router-outlet/route-outlet.scss
@@ -0,0 +1,19 @@
+@import "../../themes/ionic.globals";
+
+.nav-decor {
+  display: none;
+}
+
+:host(.show-decor) .nav-decor {
+  @include position(0, 0, 0, 0);
+
+  // when ios pages transition, the leaving page grays out
+  // this is the black square behind all pages so they gray out
+  position: absolute;
+  z-index: 0;
+  display: block;
+
+  background: #000;
+
+  pointer-events: none;
+}
diff --git a/core/src/components/router-outlet/route-outlet.tsx b/core/src/components/router-outlet/route-outlet.tsx
index 4928e0fbf5..c191118a28 100644
--- a/core/src/components/router-outlet/route-outlet.tsx
+++ b/core/src/components/router-outlet/route-outlet.tsx
@@ -1,11 +1,13 @@
-import { Component, Element, Event, EventEmitter, Method, Prop } from '@stencil/core';
+import { Component, Element, Event, EventEmitter, Method, Prop, QueueApi } from '@stencil/core';
 import { AnimationBuilder, ComponentProps, ComponentRef, Config, FrameworkDelegate, Mode, NavOutlet, RouteID, RouteWrite, RouterOutletOptions } from '../../interface';
 import { transition } from '../../utils';
 import { attachComponent, detachComponent } from '../../utils/framework-delegate';
 
 
 @Component({
-  tag: 'ion-router-outlet'
+  tag: 'ion-router-outlet',
+  styleUrl: 'route-outlet.scss',
+  shadow: true
 })
 export class RouterOutlet implements NavOutlet {
 
@@ -20,6 +22,7 @@ export class RouterOutlet implements NavOutlet {
   @Prop({ context: 'config' }) config!: Config;
   @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement;
   @Prop({ context: 'window' }) win!: Window;
+  @Prop({ context: 'queue' }) queue!: QueueApi;
 
   @Prop({ mutable: true }) animated?: boolean;
   @Prop() animationBuilder?: AnimationBuilder;
@@ -79,14 +82,16 @@ export class RouterOutlet implements NavOutlet {
 
     opts = opts || {};
 
+    const { mode, queue, animated, animationCtrl, win, el} = this;
     await transition({
-      mode: this.mode,
-      animated: this.animated,
-      animationCtrl: this.animationCtrl,
-      window: this.win,
+      mode,
+      queue,
+      animated,
+      animationCtrl,
+      window: win,
       enteringEl: enteringEl,
       leavingEl: leavingEl,
-      baseEl: this.el,
+      baseEl: el,
 
       ...opts
     });
@@ -123,7 +128,7 @@ export class RouterOutlet implements NavOutlet {
   render() {
     return [
       this.mode === 'ios' && 
,
-      
+      
     ];
   }
 }
diff --git a/core/src/components/router-outlet/test/basic/index.html b/core/src/components/router-outlet/test/basic/index.html
index 84e6ee1dbd..594e01b332 100644
--- a/core/src/components/router-outlet/test/basic/index.html
+++ b/core/src/components/router-outlet/test/basic/index.html
@@ -1,10 +1,12 @@
 
 
+
 
   
   Nav
   
   
+  
   
 
+
 
   
     
@@ -75,4 +78,5 @@
     
   
 
+
 
diff --git a/core/src/components/router/router.tsx b/core/src/components/router/router.tsx
index f4fdba0ce2..68fad90cab 100644
--- a/core/src/components/router/router.tsx
+++ b/core/src/components/router/router.tsx
@@ -1,5 +1,5 @@
-import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
-import { Config, QueueController, RouteChain, RouterDirection, RouterEventDetail } from '../../interface';
+import { Component, Element, Event, EventEmitter, Listen, Method, Prop, QueueApi } from '@stencil/core';
+import { Config, RouteChain, RouterDirection, RouterEventDetail } from '../../interface';
 import { debounce } from '../../utils/helpers';
 import { RouterIntent } from './utils/constants';
 import { printRedirects, printRoutes } from './utils/debug';
@@ -22,7 +22,7 @@ export class Router {
   @Element() el!: HTMLElement;
 
   @Prop({ context: 'config' }) config!: Config;
-  @Prop({ context: 'queue' }) queue!: QueueController;
+  @Prop({ context: 'queue' }) queue!: QueueApi;
   @Prop({ context: 'window' }) win!: Window;
 
   /**
@@ -100,7 +100,7 @@ export class Router {
 
   /** @hidden */
   @Method()
-  async navChanged(intent: RouterIntent): Promise {
+  async navChanged(intent: number): Promise {
     if (this.busy) {
       return false;
     }
@@ -155,7 +155,6 @@ export class Router {
     }
   }
 
-
   private async writeNavStateRoot(path: string[]|null, intent: RouterIntent): Promise {
     if (this.busy) {
       return false;
diff --git a/core/src/components/router/test/basic/index.html b/core/src/components/router/test/basic/index.html
index 8cc1b4c15b..551c3c7d73 100644
--- a/core/src/components/router/test/basic/index.html
+++ b/core/src/components/router/test/basic/index.html
@@ -1,10 +1,12 @@
 
 
+
 
   
   Nav
   
   
+  
   
 
+
 
 
   
@@ -211,10 +214,12 @@
     f:last-of-type {
       background: yellow;
     }
+
   
 
 
 
+
 
diff --git a/core/src/components/router/test/preview/index.html b/core/src/components/router/test/preview/index.html
index 0f71671103..4e10bb6fa8 100644
--- a/core/src/components/router/test/preview/index.html
+++ b/core/src/components/router/test/preview/index.html
@@ -1,10 +1,12 @@
 
 
+
 
   
   Nav
   
   
+  
   
 
+
 
 
   
@@ -127,7 +130,7 @@
 
       
 
-      
+      
         inline tab 4
       
 
@@ -147,10 +150,12 @@
     f:last-of-type {
       background: yellow;
     }
+
   
 
 
 
+
 
diff --git a/core/src/components/router/utils/dom.ts b/core/src/components/router/utils/dom.ts
index e878412471..669e03c6f3 100644
--- a/core/src/components/router/utils/dom.ts
+++ b/core/src/components/router/utils/dom.ts
@@ -1,7 +1,13 @@
 import { NavOutletElement, RouteChain, RouteID } from '../../../interface';
 import { RouterIntent } from './constants';
 
-export async function writeNavState(root: HTMLElement | undefined, chain: RouteChain, intent: RouterIntent, index: number, changed = false): Promise {
+export async function writeNavState(
+  root: HTMLElement | undefined,
+  chain: RouteChain,
+  intent: RouterIntent,
+  index: number,
+  changed = false
+): Promise {
   try {
     // find next navigation outlet in the DOM
     const outlet = searchNavNode(root);
diff --git a/core/src/components/router/utils/interface.ts b/core/src/components/router/utils/interface.ts
index 01c41d58a0..ff0ffdd40d 100644
--- a/core/src/components/router/utils/interface.ts
+++ b/core/src/components/router/utils/interface.ts
@@ -1,18 +1,16 @@
-import * as c from './constants';
+
 
 export interface NavOutlet {
-  setRouteId(id: string, data: any, direction: c.RouterIntent): Promise;
-  getRouteId(): RouteID|undefined;
+  setRouteId(id: string, data: any, direction: number): Promise;
+  getRouteId(): RouteID | undefined;
 }
 
 export interface RouterEventDetail {
-  from: string|null;
-  redirectedFrom: string|null;
+  from: string | null;
+  redirectedFrom: string | null;
   to: string;
 }
 
-export type RouterDirection = 'forward' | 'back' | 'root';
-
 export interface RouteRedirect {
   from: string[];
   to?: string[];
@@ -30,8 +28,6 @@ export interface RouteID {
   params?: any;
 }
 
-export type NavOutletElement = NavOutlet & HTMLStencilElement;
-
 export interface RouteEntry {
   id: string;
   path: string[];
@@ -42,5 +38,7 @@ export interface RouteNode extends RouteEntry {
   children: RouteTree;
 }
 
+export type RouterDirection = 'forward' | 'back' | 'root';
+export type NavOutletElement = NavOutlet & HTMLStencilElement;
 export type RouteChain = RouteEntry[];
 export type RouteTree = RouteNode[];
diff --git a/core/src/components/router/utils/path.ts b/core/src/components/router/utils/path.ts
index ca6537dc6f..a07cb4db55 100644
--- a/core/src/components/router/utils/path.ts
+++ b/core/src/components/router/utils/path.ts
@@ -9,7 +9,7 @@ export function generatePath(segments: string[]): string {
   return '/' + path;
 }
 
-export function chainToPath(chain: RouteChain): string[]|null {
+export function chainToPath(chain: RouteChain): string[] | null {
   const path = [];
   for (const route of chain) {
     for (const segment of route.path) {
diff --git a/core/src/components/row/row.scss b/core/src/components/row/row.scss
new file mode 100644
index 0000000000..21e901367d
--- /dev/null
+++ b/core/src/components/row/row.scss
@@ -0,0 +1,9 @@
+@import "./row.vars";
+
+// Row
+// --------------------------------------------------
+
+:host {
+  display: flex;
+  flex-wrap: wrap;
+}
diff --git a/core/src/components/row/row.tsx b/core/src/components/row/row.tsx
index 5a8dee2932..0eec720342 100644
--- a/core/src/components/row/row.tsx
+++ b/core/src/components/row/row.tsx
@@ -1,7 +1,12 @@
 import { Component } from '@stencil/core';
 
-
 @Component({
-  tag: 'ion-row'
+  tag: 'ion-row',
+  styleUrl: 'row.scss',
+  shadow: true
 })
-export class Row {}
+export class Row {
+  render() {
+    return ;
+  }
+}
diff --git a/core/src/components/row/row.vars.scss b/core/src/components/row/row.vars.scss
new file mode 100644
index 0000000000..63c075fdbe
--- /dev/null
+++ b/core/src/components/row/row.vars.scss
@@ -0,0 +1,5 @@
+@import "../../themes/ionic.globals";
+@import "../grid/grid.mixins";
+
+// Row
+// --------------------------------------------------
diff --git a/core/src/components/scroll/readme.md b/core/src/components/scroll/readme.md
index e2ed7fcc99..20cb569348 100644
--- a/core/src/components/scroll/readme.md
+++ b/core/src/components/scroll/readme.md
@@ -28,7 +28,7 @@ The mode for component.
 
 boolean
 
-If true, the component will emit scroll events
+If true, the component will emit scroll events.
 
 
 ## Attributes
@@ -53,7 +53,7 @@ The mode for component.
 
 boolean
 
-If true, the component will emit scroll events
+If true, the component will emit scroll events.
 
 
 ## Events
diff --git a/core/src/components/scroll/scroll-interface.ts b/core/src/components/scroll/scroll-interface.ts
new file mode 100644
index 0000000000..6345461baf
--- /dev/null
+++ b/core/src/components/scroll/scroll-interface.ts
@@ -0,0 +1,15 @@
+import { GestureDetail } from '../../interface';
+
+export interface ScrollBaseDetail {
+  isScrolling: boolean;
+}
+
+export interface ScrollDetail extends GestureDetail, ScrollBaseDetail {
+  positions: number[];
+  scrollTop: number;
+  scrollLeft: number;
+}
+
+export interface ScrollCallback {
+  (detail?: ScrollDetail): boolean|void;
+}
diff --git a/core/src/components/scroll/scroll.ios.scss b/core/src/components/scroll/scroll.ios.scss
deleted file mode 100644
index 9c8c579cbf..0000000000
--- a/core/src/components/scroll/scroll.ios.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@import "./scroll";
-@import "./scroll.ios.vars";
-
-// iOS Content
-// --------------------------------------------------
-
-.outer-content .scroll-ios {
-  background: $content-ios-outer-background;
-}
-
-.scroll-ios {
-  font-family: $content-ios-font-family;
-
-  color: $text-ios-color;
-  background-color: $background-ios-color;
-}
-
-.scroll-ios hr {
-  height: $hairlines-width;
-
-  background-color: css-var($background-ios-color-value, background-ios-color, $content-ios-horizontal-rule-background-color-alpha);
-}
diff --git a/core/src/components/scroll/scroll.md.scss b/core/src/components/scroll/scroll.md.scss
deleted file mode 100644
index 62210c56ba..0000000000
--- a/core/src/components/scroll/scroll.md.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@import "./scroll";
-@import "./scroll.md.vars";
-
-// Material Design Content
-// --------------------------------------------------
-
-.scroll-md {
-  font-family: $content-md-font-family;
-
-  color: $text-md-color;
-  background-color: $background-md-color;
-
-  hr {
-    background-color: $background-md-color-step-50;
-  }
-}
diff --git a/core/src/components/scroll/scroll.scss b/core/src/components/scroll/scroll.scss
index 11171fec5c..b54234cfc9 100644
--- a/core/src/components/scroll/scroll.scss
+++ b/core/src/components/scroll/scroll.scss
@@ -1,6 +1,6 @@
 @import "../../themes/ionic.globals";
 
-ion-scroll {
+:host {
   @include position(0, 0, 0, 0);
 
   position: absolute;
@@ -8,48 +8,27 @@ ion-scroll {
   display: block;
 
   overflow-x: hidden;
-  overflow-y: scroll;
+  overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   will-change: scroll-position;
 
   contain: size style layout;
-
-  .focus-input {
-    @include margin(0);
-    @include padding(0);
-
-    position: absolute;
-
-    width: 0;
-    height: 0;
-
-    border: 0;
-    background: none;
-    opacity: 0;
-
-    appearance: none;
-  }
-
-
-  &.overscroll::before,
-  &.overscroll::after {
-    position: absolute;
-
-    width: 1px;
-    height: 1px;
-
-    content: "";
-  }
-
-  &.overscroll::before {
-    bottom: -1px;
-  }
-
-  &.overscroll::after {
-    top: -1px;
-  }
-
-  > .scroll-inner {
-    min-height: 100%;
-  }
+}
+
+:host(.overscroll)::before,
+:host(.overscroll)::after {
+  position: absolute;
+
+  width: 1px;
+  height: 1px;
+
+  content: "";
+}
+
+:host(.overscroll)::before {
+  bottom: -1px;
+}
+
+:host(.overscroll)::after {
+  top: -1px;
 }
diff --git a/core/src/components/scroll/scroll.tsx b/core/src/components/scroll/scroll.tsx
index 843cdfefff..acbe29ec6d 100644
--- a/core/src/components/scroll/scroll.tsx
+++ b/core/src/components/scroll/scroll.tsx
@@ -1,15 +1,11 @@
-import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
-import { Config, GestureDetail, Mode, QueueController } from '../../interface';
+import { Component, Element, Event, EventEmitter, Listen, Method, Prop, QueueApi } from '@stencil/core';
+import { Config, Mode, ScrollBaseDetail, ScrollDetail } from '../../interface';
+import { createThemedClasses } from '../../utils/theme';
 
 @Component({
   tag: 'ion-scroll',
-  styleUrls: {
-    ios: 'scroll.ios.scss',
-    md: 'scroll.md.scss'
-  },
-  host: {
-    theme: 'scroll'
-  }
+  styleUrl: 'scroll.scss',
+  shadow: true
 })
 export class Scroll {
 
@@ -21,8 +17,8 @@ export class Scroll {
 
   @Element() el!: HTMLElement;
 
-  @Prop({ context: 'config'}) config!: Config;
-  @Prop({ context: 'queue' }) queue!: QueueController;
+  @Prop({ context: 'config' }) config!: Config;
+  @Prop({ context: 'queue' }) queue!: QueueApi;
   @Prop({ context: 'window' }) win!: Window;
 
   /** The mode for component. */
@@ -36,7 +32,7 @@ export class Scroll {
    */
   @Prop({ mutable: true }) forceOverscroll?: boolean;
 
-  /** If true, the component will emit scroll events */
+  /** If true, the component will emit scroll events. */
   @Prop() scrollEvents = false;
 
   /**
@@ -48,7 +44,7 @@ export class Scroll {
    * Emitted while scrolling. This event is disabled by default.
    * Look at the property: `scrollEvents`
    */
-  @Event({bubbles: false}) ionScroll!: EventEmitter;
+  @Event() ionScroll!: EventEmitter;
 
   /**
    * Emitted when the scroll has ended.
@@ -105,7 +101,7 @@ export class Scroll {
       this.queue.read(timeStamp => {
         this.queued = false;
         this.detail.event = ev;
-        updateScrollDetail(this.detail, this.el, timeStamp, didStart);
+        updateScrollDetail(this.detail, this.el, timeStamp!, didStart);
         this.ionScroll.emit(this.detail);
       });
     }
@@ -196,7 +192,8 @@ export class Scroll {
       if (easedT < 1) {
         // do not use DomController here
         // must use nativeRaf in order to fire in the next frame
-        self.queue.read(step);
+        // TODO: remove as any
+        self.queue.read(step as any);
 
       } else {
         stopScroll = true;
@@ -212,8 +209,9 @@ export class Scroll {
     // chill out for a frame first
     this.queue.write(() => {
       this.queue.write(timeStamp => {
-        startTime = timeStamp;
-        step(timeStamp);
+        // TODO: review stencilt type of timeStamp
+        startTime = timeStamp!;
+        step(timeStamp!);
       });
     });
 
@@ -251,18 +249,14 @@ export class Scroll {
   hostData() {
     return {
       class: {
+        ...createThemedClasses(this.mode, 'scroll'),
         overscroll: this.forceOverscroll
       }
     };
   }
 
   render() {
-    return [
-      // scroll-inner is used to keep custom user padding
-      

-        
-      

-    ];
+    return ;
   }
 }
 
@@ -316,17 +310,3 @@ function updateScrollDetail(
     detail.velocityY = 0;
   }
 }
-
-export interface ScrollDetail extends GestureDetail, ScrollBaseDetail {
-  positions: number[];
-  scrollTop: number;
-  scrollLeft: number;
-}
-
-export interface ScrollBaseDetail {
-  isScrolling: boolean;
-}
-
-export interface ScrollCallback {
-  (detail?: ScrollDetail): boolean|void;
-}
diff --git a/core/src/components/searchbar/readme.md b/core/src/components/searchbar/readme.md
index a7ceb2dd78..a82324cf85 100644
--- a/core/src/components/searchbar/readme.md
+++ b/core/src/components/searchbar/readme.md
@@ -32,20 +32,32 @@ string
 Set the input's autocorrect property. Values: `"on"`, `"off"`. Default `"off"`.
 
 
+#### cancelButtonIcon
+
+string
+
+Set the cancel button icon. Only applies to `md` mode. Defaults to `"md-arrow-back"`.
+
+
 #### cancelButtonText
 
 string
 
-Set the the cancel button text. Default: `"Cancel"`.
+Set the the cancel button text. Only applies to `ios` mode. Default: `"Cancel"`.
+
+
+#### clearIcon
+
+string
+
+Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close"` for `md`.
 
 
 #### color
 
 string
 
-The color to use from your Sass `$colors` map.
-Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-For more information, see [Theming your App](/docs/theming/theming-your-app).
+The color the searchbar should be.
 
 
 #### debounce
@@ -61,7 +73,6 @@ string
 
 The mode determines which platform styles to use.
 Possible values are: `"ios"` or `"md"`.
-For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
 
 
 #### placeholder
@@ -71,6 +82,13 @@ string
 Set the input's placeholder. Default `"Search"`.
 
 
+#### searchIcon
+
+string
+
+The icon to use as the search icon. Defaults to `"search"`.
+
+
 #### showCancelButton
 
 boolean
@@ -122,20 +140,32 @@ string
 Set the input's autocorrect property. Values: `"on"`, `"off"`. Default `"off"`.
 
 
+#### cancel-button-icon
+
+string
+
+Set the cancel button icon. Only applies to `md` mode. Defaults to `"md-arrow-back"`.
+
+
 #### cancel-button-text
 
 string
 
-Set the the cancel button text. Default: `"Cancel"`.
+Set the the cancel button text. Only applies to `ios` mode. Default: `"Cancel"`.
+
+
+#### clear-icon
+
+string
+
+Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close"` for `md`.
 
 
 #### color
 
 string
 
-The color to use from your Sass `$colors` map.
-Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-For more information, see [Theming your App](/docs/theming/theming-your-app).
+The color the searchbar should be.
 
 
 #### debounce
@@ -151,7 +181,6 @@ string
 
 The mode determines which platform styles to use.
 Possible values are: `"ios"` or `"md"`.
-For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
 
 
 #### placeholder
@@ -161,6 +190,13 @@ string
 Set the input's placeholder. Default `"Search"`.
 
 
+#### search-icon
+
+string
+
+The icon to use as the search icon. Defaults to `"search"`.
+
+
 #### show-cancel-button
 
 boolean
diff --git a/core/src/components/searchbar/searchbar.ios.scss b/core/src/components/searchbar/searchbar.ios.scss
index a2d6d818e4..b08c7726ee 100644
--- a/core/src/components/searchbar/searchbar.ios.scss
+++ b/core/src/components/searchbar/searchbar.ios.scss
@@ -4,7 +4,7 @@
 // iOS Searchbar
 // --------------------------------------------------
 
-.searchbar-ios {
+:host {
   @include padding($searchbar-ios-padding-top, $searchbar-ios-padding-end, $searchbar-ios-padding-bottom, $searchbar-ios-padding-start);
 
   height: $searchbar-ios-input-height + $searchbar-ios-padding-top + $searchbar-ios-padding-bottom;
@@ -14,39 +14,26 @@
   contain: strict;
 }
 
-.searchbar-ios .searchbar-input-container {
+.searchbar-input-container {
   height: $searchbar-ios-input-height;
 
   contain: strict;
 }
 
 
-// Searchbar Mixin for Icons
-// -----------------------------------------
-
-@mixin ios-searchbar-icon($svg-icon, $fg-color) {
-  $svg: str-replace($svg-icon, "fg-color", $fg-color);
-
-  @include svg-background-image($svg, true);
-}
-
-
 // Searchbar Search Icon
 // -----------------------------------------
 
-.searchbar-search-icon-ios {
-  @include background-position(center);
-  @include ios-searchbar-icon($searchbar-ios-input-search-icon-svg, $searchbar-ios-input-search-icon-color);
+.searchbar-search-icon {
   @include margin-horizontal(calc(50% - 60px), null);
-  @include position(0, null, null, 9px);
+  @include position(0, null, null, 8px);
 
   position: absolute;
 
-  width: $searchbar-ios-input-search-icon-size + 1;
+  width: $searchbar-ios-input-search-icon-size;
   height: 100%;
 
-  background-repeat: no-repeat;
-  background-size: $searchbar-ios-input-search-icon-size;
+  color: $searchbar-ios-input-search-icon-color;
 
   contain: strict;
 }
@@ -55,7 +42,7 @@
 // Searchbar Input Field
 // -----------------------------------------
 
-.searchbar-ios .searchbar-input {
+.searchbar-input {
   @include placeholder($searchbar-ios-input-placeholder-color);
   @include padding(0, 28px);
   @include border-radius($searchbar-ios-input-border-radius);
@@ -75,9 +62,8 @@
 // Searchbar Clear Input Icon
 // -----------------------------------------
 
-.searchbar-ios .searchbar-clear-icon {
+.searchbar-clear-button {
   @include position(0, 0, null, null);
-  @include ios-searchbar-icon($searchbar-ios-input-clear-icon-svg, $searchbar-ios-input-clear-icon-color);
   @include background-position(center);
 
   position: absolute;
@@ -85,17 +71,22 @@
   width: 30px;
   height: 100%;
 
+  color: $searchbar-ios-input-clear-icon-color;
+
   border: 0;
   background-color: transparent;
-  background-repeat: no-repeat;
-  background-size: $searchbar-ios-input-clear-icon-size;
+}
+
+.searchbar-clear-icon {
+  width: $searchbar-ios-input-clear-icon-size;
+  height: 100%;
 }
 
 
 // Searchbar Cancel
 // -----------------------------------------
 
-.searchbar-cancel-button-ios {
+.searchbar-cancel-button {
   @include padding(0, 0, 0, 8px);
 
   display: none;
@@ -103,23 +94,26 @@
   flex-shrink: 0;
 
   border: 0;
+  outline: none;
   font-size: $searchbar-ios-cancel-button-font-size;
 
   color: $searchbar-ios-cancel-button-color;
   background-color: $searchbar-ios-cancel-button-background-color;
 
   cursor: pointer;
+
+  appearance: none;
 }
 
 
 // Searchbar Left Aligned (iOS Only)
 // -----------------------------------------
 
-.searchbar-left-aligned .searchbar-search-icon-ios {
+:host(.searchbar-left-aligned) .searchbar-search-icon {
   @include margin-horizontal(0, null);
 }
 
-.searchbar-ios.searchbar-left-aligned .searchbar-input {
+:host(.searchbar-left-aligned) .searchbar-input {
   @include padding-horizontal(30px, null);
 }
 
@@ -127,23 +121,23 @@
 // Searchbar Has Focus & Animated
 // -----------------------------------------
 
-.searchbar-show-cancel.searchbar-has-focus .searchbar-cancel-button-ios,
-.searchbar-show-cancel.searchbar-animated .searchbar-cancel-button-ios {
+:host(.searchbar-show-cancel.searchbar-has-focus) .searchbar-cancel-button,
+:host(.searchbar-show-cancel.searchbar-animated) .searchbar-cancel-button {
   display: block;
 }
 
-.searchbar-animated .searchbar-search-icon-ios,
-.searchbar-ios.searchbar-animated .searchbar-input {
+:host(.searchbar-animated) .searchbar-search-icon,
+:host(.searchbar-animated) .searchbar-input {
   transition: $searchbar-ios-input-transition;
 }
 
-.searchbar-animated.searchbar-has-focus .searchbar-cancel-button-ios {
+:host(.searchbar-animated.searchbar-has-focus) .searchbar-cancel-button {
   opacity: 1;
 
   pointer-events: auto;
 }
 
-.searchbar-animated .searchbar-cancel-button-ios {
+:host(.searchbar-animated) .searchbar-cancel-button {
   @include margin-horizontal(null, -100%);
   @include transform(translate3d(0, 0, 0));
 
@@ -154,39 +148,36 @@
 }
 
 
-// Generate Default Search Bar Colors
-// --------------------------------------------------
-@each $color-name, $color-value in $colors-ios {
-  $color-base: ion-color($colors-ios, $color-name, base, ios);
-  $color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
-  $color-contrast-alpha: ion-color($colors-ios, $color-name, contrast, ios, $searchbar-ios-input-background-color-alpha);
-  $color-tint: ion-color($colors-ios, $color-name, tint, ios);
+// Searchbar Color
+// -----------------------------------------
 
-  .searchbar-ios-#{$color-name} .searchbar-cancel-button-ios {
-    color: $color-base;
-  }
-
-  .searchbar-ios-#{$color-name} .searchbar-cancel-button-ios:hover {
-    color: $color-tint;
-  }
-
-  .toolbar-ios-#{$color-name} .searchbar-search-icon-ios {
-    @include ios-searchbar-icon($searchbar-ios-input-search-icon-svg, $color-contrast);
-    opacity: $searchbar-ios-input-icon-opacity;
-  }
-
-  .toolbar-ios-#{$color-name} .searchbar-ios .searchbar-input {
-    @include placeholder($color-contrast, $opacity: .5);
-    color: $color-contrast;
-    background: $color-contrast-alpha;
-  }
-
-  .toolbar-ios-#{$color-name} .searchbar-ios .searchbar-clear-icon {
-    @include ios-searchbar-icon($searchbar-ios-input-clear-icon-svg, $color-contrast);
-    opacity: $searchbar-ios-input-icon-opacity;
-  }
-
-  .toolbar-ios-#{$color-name} .searchbar-ios .searchbar-cancel-button-ios {
-    color: $color-contrast;
-  }
+:host(.ion-color) .searchbar-cancel-button {
+  color: #{current-color(base)};
+}
+
+:host(.ion-color) .searchbar-cancel-button:hover {
+  color: #{current-color(tint)};
+}
+
+// Searchbar in Toolbar Color
+// -----------------------------------------
+
+:host-context(.toolbar.ion-color) .searchbar-cancel-button {
+  color: currentColor;
+}
+
+:host-context(.toolbar.ion-color) .searchbar-search-icon {
+  color: currentColor;
+  opacity: $searchbar-ios-input-icon-opacity;
+}
+
+:host-context(.toolbar.ion-color) .searchbar-input {
+  @include placeholder(currentColor, $opacity: .5);
+  color: currentColor;
+  background: rgba(var(--ion-color-contrast-rgb), $searchbar-ios-input-background-color-alpha);
+}
+
+:host-context(.toolbar.ion-color) .searchbar-clear-button {
+  color: currentColor;
+  opacity: $searchbar-ios-input-icon-opacity;
 }
diff --git a/core/src/components/searchbar/searchbar.ios.vars.scss b/core/src/components/searchbar/searchbar.ios.vars.scss
index 1e31593c51..1eab9933f4 100644
--- a/core/src/components/searchbar/searchbar.ios.vars.scss
+++ b/core/src/components/searchbar/searchbar.ios.vars.scss
@@ -16,25 +16,22 @@ $searchbar-ios-padding-bottom:                    $searchbar-ios-padding-top !de
 $searchbar-ios-padding-start:                     $searchbar-ios-padding-end !default;
 
 /// @prop - Font family of the searchbar
-$searchbar-ios-font-family:                       $font-family-ios-base !default;
+$searchbar-ios-font-family:                       $font-family-base !default;
 
 /// @prop - Font size of the searchbar cancel button
 $searchbar-ios-cancel-button-font-size:           16px !default;
 
 /// @prop - Color of the searchbar cancel button
-$searchbar-ios-cancel-button-color:               ion-color($colors-ios, primary, base, ios) !default;
+$searchbar-ios-cancel-button-color:               ion-color(primary, base) !default;
 
 /// @prop - Background color of the searchbar cancel button
 $searchbar-ios-cancel-button-background-color:    transparent !default;
 
-/// @prop - Color of the searchbar input search icon
-$searchbar-ios-input-search-icon-color:           $text-ios-color-step-400 !default;
-
-/// @prop - Svg for the searchbar input search icon
-$searchbar-ios-input-search-icon-svg:             "" !default;
-
 /// @prop - Size of the searchbar input search icon
-$searchbar-ios-input-search-icon-size:            13px !default;
+$searchbar-ios-input-search-icon-size:            16px !default;
+
+/// @prop - Color of the searchbar input search icon
+$searchbar-ios-input-search-icon-color:           $text-color-step-400 !default;
 
 /// @prop - Height of the searchbar input
 $searchbar-ios-input-height:                      36px !default;
@@ -43,16 +40,16 @@ $searchbar-ios-input-height:                      36px !default;
 $searchbar-ios-input-border-radius:               10px !default;
 
 /// @prop - Color of the searchbar input placeholder
-$searchbar-ios-input-placeholder-color:           $text-ios-color-step-400 !default;
+$searchbar-ios-input-placeholder-color:           $text-color-step-400 !default;
 
 /// @prop - Color of the searchbar input text
-$searchbar-ios-input-text-color:                  $text-ios-color !default;
+$searchbar-ios-input-text-color:                  $text-color !default;
 
 /// @prop - Background color alpha of the searchbar input
 $searchbar-ios-input-background-color-alpha:      .07 !default;
 
 /// @prop - Background color of the searchbar input
-$searchbar-ios-input-background-color:            css-var($text-ios-color-value, text-ios-color, $searchbar-ios-input-background-color-alpha) !default;
+$searchbar-ios-input-background-color:            rgba(var(--ion-text-color-rgb, $text-color-rgb), $searchbar-ios-input-background-color-alpha) !default;
 
 /// @prop - Transition of the searchbar input
 $searchbar-ios-input-transition:                  all 300ms ease !default;
@@ -64,10 +61,7 @@ $searchbar-ios-cancel-transition:                 all 300ms ease !default;
 $searchbar-ios-input-icon-opacity:                .5 !default;
 
 /// @prop - Color of the searchbar input clear icon
-$searchbar-ios-input-clear-icon-color:            $text-ios-color-step-400 !default;
-
-/// @prop - Svg for the searchbar input clear icon
-$searchbar-ios-input-clear-icon-svg:              "" !default;
+$searchbar-ios-input-clear-icon-color:            $text-color-step-400 !default;
 
 /// @prop - Size of the searchbar input clear icon
 $searchbar-ios-input-clear-icon-size:             18px !default;
diff --git a/core/src/components/searchbar/searchbar.md.scss b/core/src/components/searchbar/searchbar.md.scss
index 6d3be9ac8e..ea99bfe04c 100644
--- a/core/src/components/searchbar/searchbar.md.scss
+++ b/core/src/components/searchbar/searchbar.md.scss
@@ -4,7 +4,7 @@
 // Material Design Searchbar
 // --------------------------------------------------
 
-.searchbar-md {
+:host {
   @include padding($searchbar-md-padding-top, $searchbar-md-padding-end, $searchbar-md-padding-bottom, $searchbar-md-padding-start);
 
   font-family: $searchbar-md-font-family;
@@ -16,9 +16,10 @@
 // Searchbar Search Icon
 // -----------------------------------------
 
-.searchbar-search-icon-md {
+.searchbar-search-icon {
   @include position(11px, null, null, 16px);
-  @include svg-background-image($searchbar-md-input-search-icon-svg, true);
+
+  color: $searchbar-md-input-search-icon-color;
 
   width: $searchbar-md-input-search-icon-size + 1;
   height: $searchbar-md-input-search-icon-size + 1;
@@ -28,7 +29,7 @@
 // Searchbar Cancel Icon
 // -----------------------------------------
 
-.searchbar-cancel-button-md {
+.searchbar-cancel-button {
   @include position(0, null, null, 10px);
   @include margin(0);
 
@@ -46,16 +47,13 @@
 // Searchbar Search & Cancel Icon
 // -----------------------------------------
 
-.searchbar-search-icon-md,
-.searchbar-cancel-button-md {
+.searchbar-search-icon,
+.searchbar-cancel-button {
   position: absolute;
-
-  background-repeat: no-repeat;
-  background-size: $searchbar-md-input-search-icon-size;
 }
 
-.searchbar-search-icon-md.activated,
-.searchbar-cancel-button-md.activated {
+.searchbar-search-icon.activated,
+.searchbar-cancel-button.activated {
   background-color: transparent;
 }
 
@@ -63,7 +61,7 @@
 // Searchbar Input Field
 // -----------------------------------------
 
-.searchbar-md .searchbar-input {
+.searchbar-input {
   @include placeholder($searchbar-md-input-placeholder-color);
   @include padding(6px, 55px);
   @include border-radius($searchbar-md-input-border-radius);
@@ -85,36 +83,38 @@
 // Searchbar Clear Input Icon
 // -----------------------------------------
 
-.searchbar-md .searchbar-clear-icon {
+.searchbar-clear-button {
   @include position(0, 13px, null, null);
-  @include svg-background-image($searchbar-md-input-clear-icon-svg);
   @include padding(0);
-  @include background-position(center);
 
   position: absolute;
 
-  width: $searchbar-md-input-clear-icon-size;
   height: 100%;
 
   border: 0;
   background-color: transparent;
-  background-repeat: no-repeat;
-  background-size: $searchbar-md-input-clear-icon-size;
 }
 
-.searchbar-md .searchbar-clear-icon.activated {
+.searchbar-clear-button.activated {
   background-color: transparent;
 }
 
+.searchbar-clear-icon {
+  width: $searchbar-md-input-clear-icon-size;
+  height: 100%;
+
+  color: $searchbar-md-input-clear-icon-color;
+}
+
 
 // Searchbar Focused
 // -----------------------------------------
 
-.searchbar-has-focus.searchbar-show-cancel .searchbar-search-icon-md {
+:host(.searchbar-has-focus.searchbar-show-cancel) .searchbar-search-icon {
   display: none;
 }
 
-.searchbar-has-focus.searchbar-show-cancel .searchbar-cancel-button-md {
+:host(.searchbar-has-focus.searchbar-show-cancel) .searchbar-cancel-button {
   display: inline-flex;
 }
 
@@ -122,6 +122,6 @@
 // Searchbar in Toolbar
 // -----------------------------------------
 
-.toolbar .searchbar-md {
+:host-context(.toolbar) {
   @include padding(3px);
 }
diff --git a/core/src/components/searchbar/searchbar.md.vars.scss b/core/src/components/searchbar/searchbar.md.vars.scss
index 1a5a901fd5..169c52ed49 100644
--- a/core/src/components/searchbar/searchbar.md.vars.scss
+++ b/core/src/components/searchbar/searchbar.md.vars.scss
@@ -16,13 +16,13 @@ $searchbar-md-padding-bottom:                    $searchbar-md-padding-top !defa
 $searchbar-md-padding-start:                     $searchbar-md-padding-end !default;
 
 /// @prop - Font family of the searchbar
-$searchbar-md-font-family:                       $font-family-md-base !default;
+$searchbar-md-font-family:                       $font-family-base !default;
 
 /// @prop - Background of the searchbar
 $searchbar-md-background:                        inherit !default;
 
 /// @prop - Color of the searchbar cancel button
-$searchbar-md-cancel-button-color:               $text-md-color-step-100 !default;
+$searchbar-md-cancel-button-color:               $text-color-step-100 !default;
 
 /// @prop - Background color of the searchbar cancel button
 $searchbar-md-cancel-button-background-color:    transparent !default;
@@ -31,10 +31,7 @@ $searchbar-md-cancel-button-background-color:    transparent !default;
 $searchbar-md-cancel-button-font-size:           1.8em !default;
 
 /// @prop - Color of the searchbar input search icon
-$searchbar-md-input-search-icon-color:           $text-md-color-step-400 !default;
-
-/// @prop - Svg for the searchbar input search icon
-$searchbar-md-input-search-icon-svg:             "" !default;
+$searchbar-md-input-search-icon-color:           $text-color-step-400 !default;
 
 /// @prop - Size of the searchbar input search icon
 $searchbar-md-input-search-icon-size:            20px !default;
@@ -49,22 +46,19 @@ $searchbar-md-input-line-height:                 30px !default;
 $searchbar-md-input-box-shadow:                  0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
 
 /// @prop - Color of the searchbar input placeholder
-$searchbar-md-input-placeholder-color:           $placeholder-text-md-color !default;
+$searchbar-md-input-placeholder-color:           $placeholder-text-color !default;
 
 /// @prop - Color of the searchbar input text
-$searchbar-md-input-text-color:                  $text-md-color-step-150 !default;
+$searchbar-md-input-text-color:                  $text-color-step-150 !default;
 
 /// @prop - Background of the searchbar input
-$searchbar-md-input-background-color:            $background-md-color !default;
+$searchbar-md-input-background-color:            $background-color !default;
 
 /// @prop - Border radius of the searchbar input
 $searchbar-md-input-border-radius:               2px !default;
 
 /// @prop - Color of the searchbar input clear icon
-$searchbar-md-input-clear-icon-color:            $text-md-color-step-400 !default;
-
-/// @prop - Svg for the searchbar input clear icon
-$searchbar-md-input-clear-icon-svg:              "" !default;
+$searchbar-md-input-clear-icon-color:            $text-color-step-400 !default;
 
 /// @prop - Size of the searchbar input clear icon
 $searchbar-md-input-clear-icon-size:             22px !default;
diff --git a/core/src/components/searchbar/searchbar.scss b/core/src/components/searchbar/searchbar.scss
index b52390ee81..0ab0c34034 100644
--- a/core/src/components/searchbar/searchbar.scss
+++ b/core/src/components/searchbar/searchbar.scss
@@ -3,7 +3,7 @@
 // Searchbar
 // --------------------------------------------------
 
-ion-searchbar {
+:host {
   @include font-smoothing();
 
   box-sizing: border-box;
@@ -31,8 +31,6 @@ ion-searchbar {
 }
 
 .searchbar-input {
-  @include appearance(none);
-
   box-sizing: border-box;
 
   display: block;
@@ -40,27 +38,29 @@ ion-searchbar {
   width: 100%;
 
   border: 0;
+  outline: none;
   font-family: inherit;
 
-  &:active,
-  &:focus {
-    outline: none;
-  }
+  appearance: none;
 
   &::-webkit-search-cancel-button {
     display: none;
   }
 }
 
-.searchbar-clear-icon {
+.searchbar-clear-button {
   @include margin(0);
   @include padding(0);
 
   display: none;
 
   min-height: 0;
+
+  outline: none;
+
+  appearance: none;
 }
 
-.searchbar-has-value.searchbar-has-focus .searchbar-clear-icon {
+:host(.searchbar-has-value.searchbar-has-focus) .searchbar-clear-button {
   display: block;
 }
diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx
index 27adfdb47f..66bf4bed5f 100644
--- a/core/src/components/searchbar/searchbar.tsx
+++ b/core/src/components/searchbar/searchbar.tsx
@@ -2,7 +2,7 @@ import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@st
 
 import { Color, InputChangeEvent, Mode } from '../../interface';
 import { debounceEvent } from '../../utils/helpers';
-import { createThemedClasses } from '../../utils/theme';
+import { createColorClasses } from '../../utils/theme';
 
 
 @Component({
@@ -11,12 +11,9 @@ import { createThemedClasses } from '../../utils/theme';
     ios: 'searchbar.ios.scss',
     md: 'searchbar.md.scss'
   },
-  host: {
-    theme: 'searchbar'
-  }
+  scoped: true
 })
 export class Searchbar {
-
   private nativeInput!: HTMLInputElement;
   private isCancelVisible = false;
   private shouldBlur = true;
@@ -31,16 +28,13 @@ export class Searchbar {
   @State() focused = false;
 
   /**
-   * The color to use from your Sass `$colors` map.
-   * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   * The color the searchbar should be.
    */
   @Prop() color?: Color;
 
   /**
    * The mode determines which platform styles to use.
    * Possible values are: `"ios"` or `"md"`.
-   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
    */
   @Prop() mode!: Mode;
 
@@ -60,10 +54,20 @@ export class Searchbar {
   @Prop() autocorrect = 'off';
 
   /**
-   * Set the the cancel button text. Default: `"Cancel"`.
+   * Set the cancel button icon. Only applies to `md` mode. Defaults to `"md-arrow-back"`.
+   */
+  @Prop() cancelButtonIcon = 'md-arrow-back';
+
+  /**
+   * Set the the cancel button text. Only applies to `ios` mode. Default: `"Cancel"`.
    */
   @Prop() cancelButtonText = 'Cancel';
 
+  /**
+   * Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close"` for `md`.
+   */
+  @Prop() clearIcon?: string;
+
   /**
    * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `250`.
    */
@@ -79,6 +83,11 @@ export class Searchbar {
    */
   @Prop() placeholder = 'Search';
 
+  /**
+   * The icon to use as the search icon. Defaults to `"search"`.
+   */
+  @Prop() searchIcon?: string;
+
   /**
    * If true, show the cancel button. Default `false`.
    */
@@ -156,6 +165,7 @@ export class Searchbar {
       const value = this.value;
       if (value !== undefined && value !== '') {
         this.value = '';
+        this.ionInput.emit();
       }
     }, 16 * 4);
     this.shouldBlur = false;
@@ -186,7 +196,7 @@ export class Searchbar {
   }
 
   private inputUpdated() {
-    // const inputEl = this.el.querySelector('.searchbar-input') as HTMLInputElment;
+    // const inputEl = (this.el.shadowRoot || this.el).querySelector('.searchbar-input') as HTMLInputElment;
     // It is important not to re-assign the value if it is the same, because,
     // otherwise, the caret is moved to the end of the input
     // if (inputEl && inputEl.value !== this.value) {
@@ -202,7 +212,7 @@ export class Searchbar {
    * based on whether there is a value in the searchbar or not.
    */
   private onBlur() {
-    const inputEl = this.el.querySelector('.searchbar-input') as HTMLInputElement;
+    const inputEl = (this.el.shadowRoot || this.el).querySelector('.searchbar-input') as HTMLInputElement;
 
     // shouldBlur determines if it should blur
     // if we are clearing the input we still want to stay focused in the input
@@ -258,8 +268,8 @@ export class Searchbar {
    */
   private positionPlaceholder() {
     const isRTL = this.doc.dir === 'rtl';
-    const inputEl = this.el.querySelector('.searchbar-input') as HTMLInputElement;
-    const iconEl = this.el.querySelector('.searchbar-search-icon') as HTMLElement;
+    const inputEl = (this.el.shadowRoot || this.el).querySelector('.searchbar-input') as HTMLInputElement;
+    const iconEl = (this.el.shadowRoot || this.el).querySelector('.searchbar-search-icon') as HTMLElement;
 
     if (this.shouldAlignLeft) {
       inputEl.removeAttribute('style');
@@ -298,10 +308,10 @@ export class Searchbar {
    */
   private positionCancelButton() {
     const isRTL = this.doc.dir === 'rtl';
-    const cancelButton = this.el.querySelector('.searchbar-cancel-button-ios') as HTMLElement;
+    const cancelButton = (this.el.shadowRoot || this.el).querySelector('.searchbar-cancel-button') as HTMLElement;
     const shouldShowCancel = this.focused;
 
-    if (shouldShowCancel !== this.isCancelVisible) {
+    if (cancelButton && shouldShowCancel !== this.isCancelVisible) {
       const cancelStyle = cancelButton.style;
       this.isCancelVisible = shouldShowCancel;
       if (shouldShowCancel) {
@@ -326,6 +336,7 @@ export class Searchbar {
   hostData() {
     return {
       class: {
+        ...createColorClasses(this.color),
         'searchbar-active': this.activated,
         'searchbar-animated': this.animated,
         'searchbar-has-value': (this.value !== ''),
@@ -337,18 +348,18 @@ export class Searchbar {
   }
 
   render() {
-    const cancelButtonClasses = createThemedClasses(this.mode, this.color, 'searchbar-cancel-button');
-    const searchIconClasses = createThemedClasses(this.mode, this.color, 'searchbar-search-icon');
+    const clearIcon = this.clearIcon || (this.mode === 'ios' ? 'ios-close-circle' : 'md-close');
+    const searchIcon = this.searchIcon || 'search';
 
     const cancelButton = (this.showCancelButton)
       ? 
       : null;
@@ -356,7 +367,7 @@ export class Searchbar {
     return [
       

         { this.mode === 'md' && cancelButton }
-        

+        
          this.nativeInput = el as HTMLInputElement}
           class="searchbar-input"
@@ -372,9 +383,11 @@ export class Searchbar {
 
         
       
,
       this.mode === 'ios' && cancelButton
     ];
diff --git a/core/src/components/searchbar/test/basic/index.html b/core/src/components/searchbar/test/basic/index.html
index 8c577043d1..03f643accd 100644
--- a/core/src/components/searchbar/test/basic/index.html
+++ b/core/src/components/searchbar/test/basic/index.html
@@ -6,111 +6,122 @@
   Searchbar - Basic
   
   
+  
 
 
 
   
 
-      
-        
-          Searchbar - Basic
-        
-      
+    
+      
+        Searchbar - Basic
+      
+    
 
-      
-        
 Search - Default 

-        
-        
+    
+      
 Search - Default 

+      
+      
 
-        
 Search - Animated 

-        
-        
+      
 Search - Danger 

+      
+      
 
-        
 Search - Custom Placeholder 

-        
-        
+      
 Search - Custom Search Icon 

+      
+      
 
-        
 Search - No Cancel Button 

-        
-        
+      
 Search - Animated 

+      
+      
 
-        
 Search - Custom Cancel Button Danger 

-        
-        
+      
 Search - Custom Placeholder 

+      
+      
 
-        
 Search - Value passed 

-        
-        
+      
 Search - No Cancel Button 

+      
+      
 
-        
 Search - Mode iOS

-        
-        
+      
 Search - Custom Cancel Button Danger 

+      
+      
 
-        
 Search - Mode MD

-        
-        
+      
 Search - Value passed 

+      
+      
 
-        
 Search - DebounceTime 

-        
-        
+      
 Search - Mode iOS

+      
+      
 
-        
 Search - Animated and No Cancel

-        
-        
+      
 Search - Mode MD

+      
+      
 
-        

-          Change Value
-        

+      
 Search - DebounceTime 

+      
+      
 
-        

-          Toggle Property
-        

-        

-          Toggle Attribute
-        

+      
 Search - Animated and No Cancel

+      
+      
 
-        
-      
+          // Toggle autocomplete property
+          const propIsAutocomplete = dynamicProp.autocomplete === 'on' ? 'off' : 'on';
+          dynamicProp.autocomplete = propIsAutocomplete;
+
+          // Toggle spellcheck property
+          const propIsSpellcheck = dynamicProp.spellcheck === true ? false : true;
+          dynamicProp.spellcheck = propIsSpellcheck;
+        }
+
+        const searchbars = document.querySelectorAll('ion-searchbar')
+        for (let i = 0; i < searchbars.length; i++) {
+          searchbars[i].addEventListener('ionChange', (ev) => {
+            console.log(ev);
+          })
+        }
+      
+    
 
   
 
diff --git a/core/src/components/searchbar/test/preview/index.html b/core/src/components/searchbar/test/preview/index.html
index 504a6ad067..d925d19e5e 100644
--- a/core/src/components/searchbar/test/preview/index.html
+++ b/core/src/components/searchbar/test/preview/index.html
@@ -6,111 +6,114 @@
   Searchbar
   
   
+  
 
 
 
   
 
-      
-        
-          Searchbar
-        
-      
+    
+      
+        Searchbar
+      
+    
 
-      
-        
 Search - Default 

-        
-        
+    
+      
 Search - Default 

+      
+      
 
-        
 Search - Animated 

-        
-        
+      
 Search - Animated 

+      
+      
 
-        
 Search - Custom Placeholder 

-        
-        
+      
 Search - Custom Placeholder 

+      
+      
 
-        
 Search - No Cancel Button 

-        
-        
+      
 Search - No Cancel Button 

+      
+      
 
-        
 Search - Custom Cancel Button Danger 

-        
-        
+      
 Search - Custom Cancel Button Danger 

+      
+      
 
-        
 Search - Value passed 

-        
-        
+      
 Search - Value passed 

+      
+      
 
-        
 Search - Mode iOS

-        
-        
+      
 Search - Mode iOS

+      
+      
 
-        
 Search - Mode MD

-        
-        
+      
 Search - Mode MD

+      
+      
 
-        
 Search - DebounceTime 

-        
-        
+      
 Search - DebounceTime 

+      
+      
 
-        
 Search - Animated and No Cancel

-        
-        
+      
 Search - Animated and No Cancel

+      
+      
 
-        

-          Change Value
-        

+      

+        Change Value
+      

 
-        

-          Toggle Property
-        

-        

-          Toggle Attribute
-        

+      

+        Toggle Property
+      

+      

+        Toggle Attribute
+      

 
-        
-      
+        const searchbars = document.querySelectorAll('ion-searchbar')
+        for (let i = 0; i < searchbars.length; i++) {
+          searchbars[i].addEventListener('ionChange', (ev) => {
+            console.log(ev);
+          })
+        }
+      
+    
 
   
 
diff --git a/core/src/components/searchbar/test/standalone/index.html b/core/src/components/searchbar/test/standalone/index.html
index aed5cb863b..d69f2a83ad 100644
--- a/core/src/components/searchbar/test/standalone/index.html
+++ b/core/src/components/searchbar/test/standalone/index.html
@@ -6,6 +6,7 @@
   Searchbar - Standalone
   
   
+  
 
 
 
diff --git a/core/src/components/searchbar/test/toolbar/index.html b/core/src/components/searchbar/test/toolbar/index.html
index 827809eb8a..5b667163b4 100644
--- a/core/src/components/searchbar/test/toolbar/index.html
+++ b/core/src/components/searchbar/test/toolbar/index.html
@@ -1,11 +1,14 @@
 
 
+
 
   
   Ionic Searchbar Toolbar
   
   
+  
 
+
 
   
 
@@ -19,59 +22,59 @@
       
 
       
-        
 Search - Transparent Toolbar 

+        
 Search - Transparent Toolbar 

         
-          
+          
         
 
-        
 Search - Default Toolbar 

+        
 Search - Default Toolbar 

         
-          
+          
         
 
-        
 Search - Primary Toolbar 

+        
 Search - Primary Toolbar 

         
           
         
 
-        
 Search - Secondary Toolbar 

+        
 Search - Secondary Toolbar 

         
-          
+          
         
 
-        
 Search - Tertiary Toolbar 

+        
 Search - Tertiary Toolbar 

         
-          
+          
         
 
-        
 Search - Success Toolbar 

+        
 Search - Success Toolbar 

         
-          
+          
         
 
-        
 Search - Warning Toolbar 

+        
 Search - Warning Toolbar 

         
-          
+          
         
 
-        
 Search - Danger Toolbar 

+        
 Search - Danger Toolbar 

         
-          
+          
         
 
-        
 Search - Light Toolbar 

+        
 Search - Light Toolbar 

         
           
         
 
-        
 Search - Medium Toolbar 

+        
 Search - Medium Toolbar 

         
           
         
 
-        
 Search - Dark Toolbar 

+        
 Search - Dark Toolbar 

         
-          
+          
         
 
         
@@ -129,6 +132,8 @@
     .orange {
       background-color: #f69234;
     }
+
   
 
+
 
diff --git a/core/src/components/segment-button/readme.md b/core/src/components/segment-button/readme.md
index d75117ea09..89c015e0c4 100644
--- a/core/src/components/segment-button/readme.md
+++ b/core/src/components/segment-button/readme.md
@@ -28,14 +28,6 @@ Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"wa
 boolean
 
 
-#### href
-
-string
-
-Contains a URL or a URL fragment that the hyperlink points to.
-If this property is set, an anchor tag will be rendered.
-
-
 #### mode
 
 string
@@ -73,14 +65,6 @@ Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"wa
 boolean
 
 
-#### href
-
-string
-
-Contains a URL or a URL fragment that the hyperlink points to.
-If this property is set, an anchor tag will be rendered.
-
-
 #### mode
 
 string
diff --git a/core/src/components/segment-button/segment-button.ios.scss b/core/src/components/segment-button/segment-button.ios.scss
deleted file mode 100644
index 718b90b2e9..0000000000
--- a/core/src/components/segment-button/segment-button.ios.scss
+++ /dev/null
@@ -1,151 +0,0 @@
-@import "./segment-button";
-@import "./segment-button.ios.vars";
-
-// iOS Segment Button
-// --------------------------------------------------
-
-ion-segment-button {
-  &:first-of-type .segment-button-ios {
-    @include border-radius($segment-button-ios-border-radius, 0, 0, $segment-button-ios-border-radius);
-    @include margin-horizontal(null, 0);
-  }
-
-  &:not(:first-of-type) .segment-button-ios {
-    border-left-width: 0;
-  }
-
-  &:last-of-type .segment-button-ios {
-    @include border-radius(0, $segment-button-ios-border-radius, $segment-button-ios-border-radius, 0);
-    @include margin-horizontal(0, null);
-
-    border-left-width: 0;
-  }
-}
-
-.segment-button-ios {
-  flex: 1;
-
-  height: $segment-button-ios-height;
-
-  border-width: $segment-button-ios-border-width;
-  border-style: solid;
-  border-color: $segment-button-ios-background-color-activated;
-
-  font-size: $segment-button-ios-font-size;
-  line-height: $segment-button-ios-line-height;
-
-  color: $segment-button-ios-background-color-activated;
-  background-color: $segment-button-ios-background-color;
-
-  ion-icon {
-    font-size: $segment-button-ios-icon-size;
-    line-height: $segment-button-ios-icon-line-height;
-  }
-
-  &.segment-checked {
-    color: $segment-button-ios-text-color;
-    background-color: $segment-button-ios-background-color-activated;
-    transition: $segment-button-ios-transition-activated;
-  }
-
-  &:hover:not(.segment-checked) {
-    background-color: $segment-button-ios-background-color-hover;
-    transition: $segment-button-ios-transition-hover;
-  }
-
-  &:active:not(.segment-checked) {
-    background-color: $segment-button-ios-background-color-active;
-    transition: $segment-button-ios-transition-active;
-  }
-}
-
-// iOS Segment Button RTL
-// --------------------------------------------------
-
-[dir="rtl"] ion-segment-button {
-  &:first-of-type .segment-button-ios {
-    border-left-width: 0;
-  }
-
-  &:last-of-type .segment-button-ios {
-    border-left-width: $segment-button-ios-border-width;
-  }
-}
-
-
-// iOS Segment Button Disabled
-// --------------------------------------------------
-
-.segment-ios .segment-button-disabled {
-  color: $segment-button-ios-background-color-disabled;
-
-  pointer-events: none;
-}
-
-
-// iOS Segment Button in Toolbar
-// --------------------------------------------------
-
-.toolbar-ios ion-segment-button {
-  max-width: $segment-button-ios-toolbar-button-max-width;
-}
-
-.toolbar-ios .segment-button-ios {
-  height: $segment-button-ios-toolbar-button-height;
-
-  font-size: $segment-button-ios-toolbar-font-size;
-  line-height: $segment-button-ios-toolbar-line-height;
-
-  ion-icon {
-    font-size: $segment-button-ios-toolbar-icon-size;
-    line-height: $segment-button-ios-toolbar-icon-line-height;
-  }
-}
-
-
-// iOS Segment Button Mixin
-// --------------------------------------------------
-
-@mixin ios-segment-button($color-name) {
-  $color-base: ion-color($colors-ios, $color-name, base, ios);
-  $color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
-
-  .segment-ios-#{$color-name} {
-
-    .segment-button {
-      border-color: $color-base;
-      color: $color-base;
-
-      &:hover:not(.segment-checked) {
-        background-color: ion-color($colors-ios, $color-name, base, ios, $segment-button-ios-background-color-alpha-hover);
-      }
-
-      &:active:not(.segment-checked) {
-        background-color: ion-color($colors-ios, $color-name, base, ios, $segment-button-ios-background-color-alpha-active);
-      }
-
-      &.segment-checked {
-        color: $color-contrast;
-        background-color: $color-base;
-      }
-    }
-
-    .segment-button-disabled {
-      color: ion-color($colors-ios, $color-name, base, ios, $segment-button-ios-background-color-alpha-disabled);
-    }
-  }
-}
-
-
-// iOS Segment Color Generation
-// --------------------------------------------------
-
-@each $color-name, $color-value in $colors-ios {
-  $color-base: ion-color($colors-ios, $color-name, base, ios);
-
-  @include ios-segment-button($color-name);
-
-  .toolbar-ios-#{$color-name} .segment-button-ios.segment-checked {
-    color: $color-base;
-  }
-}
diff --git a/core/src/components/segment-button/segment-button.ios.vars.scss b/core/src/components/segment-button/segment-button.ios.vars.scss
deleted file mode 100644
index 62937533c7..0000000000
--- a/core/src/components/segment-button/segment-button.ios.vars.scss
+++ /dev/null
@@ -1,88 +0,0 @@
-@import "../../themes/ionic.globals.ios";
-
-// iOS Segment Button
-// --------------------------------------------------
-
-/// @prop - Background of the segment button
-$segment-button-ios-background-color:                 transparent !default;
-
-/// @prop - Background of the activated segment button
-$segment-button-ios-background-color-activated:       ion-color($colors-ios, primary, base, ios) !default;
-
-/// @prop - Background alpha of the activated segment button
-$segment-button-ios-background-color-alpha-hover:     .1 !default;
-
-/// @prop - Background of the segment button when hovered
-$segment-button-ios-background-color-hover:           ion-color($colors-ios, primary, base, ios, $segment-button-ios-background-color-alpha-hover) !default;
-
-/// @prop - Background alpha of the segment button when hovered
-$segment-button-ios-background-color-alpha-active:    .1 !default;
-
-/// @prop - Background of the segment button when active
-$segment-button-ios-background-color-active:          ion-color($colors-ios, primary, base, ios, $segment-button-ios-background-color-alpha-active) !default;
-
-/// @prop - Background alpha of the segment button when active
-$segment-button-ios-background-color-alpha-disabled:  .5 !default;
-
-/// @prop - Background of the activated segment button when active
-$segment-button-ios-background-color-disabled:        ion-color($colors-ios, primary, base, ios, $segment-button-ios-background-color-alpha-disabled) !default;
-
-/// @prop - Text color of the segment button
-$segment-button-ios-text-color:                       ion-color($colors-ios, primary, contrast, ios) !default;
-
-/// @prop - Transition of the activated segment button
-$segment-button-ios-transition-activated:             100ms all linear !default;
-
-/// @prop - Transition of the segment button on hover
-$segment-button-ios-transition-hover:                 100ms all linear !default;
-
-/// @prop - Transition of the segment button when pressed
-$segment-button-ios-transition-active:                100ms all linear !default;
-
-/// @prop - Border width of the segment button
-$segment-button-ios-border-width:                     1px !default;
-
-/// @prop - Height of the segment button
-$segment-button-ios-height:                           32px !default;
-
-/// @prop - Line height of the segment button
-$segment-button-ios-line-height:                      28px !default;
-
-/// @prop - Font size of the segment button
-$segment-button-ios-font-size:                        13px !default;
-
-/// @prop - Border radius of the segment button
-$segment-button-ios-border-radius:                    4px !default;
-
-/// @prop - Size of an icon in the segment button
-$segment-button-ios-icon-size:                        26px !default;
-
-/// @prop - Line height of an icon in the segment button
-$segment-button-ios-icon-line-height:                 28px !default;
-
-/// @prop - Max width of the segment button in a toolbar
-$segment-button-ios-toolbar-button-max-width:         100px !default;
-
-/// @prop - Height of the segment button in a toolbar
-$segment-button-ios-toolbar-button-height:            30px !default;
-
-/// @prop - Line height of the segment button in a toolbar
-$segment-button-ios-toolbar-line-height:              22px !default;
-
-/// @prop - Font size of the segment button in a toolbar
-$segment-button-ios-toolbar-font-size:                12px !default;
-
-/// @prop - Size of an icon in the segment button in a toolbar
-$segment-button-ios-toolbar-icon-size:                22px !default;
-
-/// @prop - Line height of an icon in the segment button in a toolbar
-$segment-button-ios-toolbar-icon-line-height:         24px !default;
-
-/// @prop - Opacity of the segment button on hover
-$segment-button-ios-opacity-hover:                    .1 !default;
-
-/// @prop - Opacity of the segment button when pressed
-$segment-button-ios-opacity-active:                   .16 !default;
-
-/// @prop - Opacity of the disabled segment button
-$segment-button-ios-opacity-disabled:                 .3 !default;
diff --git a/core/src/components/segment-button/segment-button.md.scss b/core/src/components/segment-button/segment-button.md.scss
deleted file mode 100644
index 1c06690516..0000000000
--- a/core/src/components/segment-button/segment-button.md.scss
+++ /dev/null
@@ -1,66 +0,0 @@
-@import "./segment-button";
-@import "./segment-button.md.vars";
-
-// Material Design Segment
-// --------------------------------------------------
-
-.segment-button-md {
-  @include padding($segment-button-md-padding-top, $segment-button-md-padding-end, $segment-button-md-padding-bottom, $segment-button-md-padding-start);
-
-  flex: 1;
-
-  height: $segment-button-md-height;
-
-  border-bottom-width: $segment-button-md-border-bottom-width;
-  border-bottom-style: solid;
-  border-bottom-color: $segment-button-md-border-bottom-color;
-
-  font-size: $segment-button-md-font-size;
-  font-weight: $segment-button-md-font-weight;
-  line-height: $segment-button-md-line-height;
-  text-transform: uppercase;
-
-  color: $segment-button-md-text-color;
-  background-color: transparent;
-  opacity: $segment-button-md-opacity;
-  transition: $segment-button-md-transition;
-
-  ion-icon {
-    font-size: $segment-button-md-icon-size;
-    line-height: $segment-button-md-icon-line-height;
-  }
-
-  &.activated,
-  &.segment-checked {
-    border-color: $segment-button-md-border-color-activated;
-    opacity: $segment-button-md-opacity-activated;
-  }
-}
-
-
-// Material Design Segment Button Disabled
-// --------------------------------------------------
-
-.segment-md .segment-button-disabled {
-  opacity: $segment-button-md-opacity-disabled;
-
-  pointer-events: none;
-}
-
-
-// Material Design Segment Color Generation
-// --------------------------------------------------
-
-@each $color-name, $color-value in $colors-md {
-  $color-base: ion-color($colors-md, $color-name, base, md);
-
-  .segment-md-#{$color-name} .segment-button {
-    color: $color-base;
-
-    &.activated,
-    &.segment-checked {
-      border-color: $color-base;
-      color: $color-base;
-    }
-  }
-}
diff --git a/core/src/components/segment-button/segment-button.md.vars.scss b/core/src/components/segment-button/segment-button.md.vars.scss
deleted file mode 100644
index 494d37b0a1..0000000000
--- a/core/src/components/segment-button/segment-button.md.vars.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-@import "../../themes/ionic.globals.md";
-
-// Material Design Segment Button
-// --------------------------------------------------
-
-/// @prop - Text color of the segment button
-$segment-button-md-text-color:                 $toolbar-md-color-active !default;
-
-/// @prop - Width of the bottom border on the segment button
-$segment-button-md-border-bottom-width:        2px !default;
-
-/// @prop - Color of the bottom border on the segment button
-$segment-button-md-border-bottom-color:        rgba(#000, .10) !default;
-
-/// @prop - Opacity of the segment button
-$segment-button-md-opacity:                    .7 !default;
-
-/// @prop - Border color of the activated segment button
-$segment-button-md-border-color-activated:     $toolbar-md-color-active !default;
-
-/// @prop - Opacity of the activated segment button
-$segment-button-md-opacity-activated:          1 !default;
-
-/// @prop - Opacity of the disabled segment button
-$segment-button-md-opacity-disabled:           .3 !default;
-
-/// @prop - Padding top of the segment button
-$segment-button-md-padding-top:                0 !default;
-
-/// @prop - Padding end of the segment button
-$segment-button-md-padding-end:                6px !default;
-
-/// @prop - Padding bottom of the segment button
-$segment-button-md-padding-bottom:             $segment-button-md-padding-top !default;
-
-/// @prop - Padding start of the segment button
-$segment-button-md-padding-start:              $segment-button-md-padding-end !default;
-
-/// @prop - Height of the segment button
-$segment-button-md-height:                     42px !default;
-
-/// @prop - Line height of the segment button
-$segment-button-md-line-height:                40px !default;
-
-/// @prop - Font size of the segment button
-$segment-button-md-font-size:                  12px !default;
-
-/// @prop - Font weight of the segment button
-$segment-button-md-font-weight:                500 !default;
-
-/// @prop - Transition of the segment button
-$segment-button-md-transition:                 100ms all linear !default;
-
-/// @prop - Size of an icon in the segment button
-$segment-button-md-icon-size:                  26px !default;
-
-/// @prop - Line height of an icon in the segment button
-$segment-button-md-icon-line-height:           $segment-button-md-line-height !default;
diff --git a/core/src/components/segment-button/segment-button.scss b/core/src/components/segment-button/segment-button.scss
index ae56ccd0f3..d1b3e746e3 100644
--- a/core/src/components/segment-button/segment-button.scss
+++ b/core/src/components/segment-button/segment-button.scss
@@ -3,24 +3,45 @@
 // Segment Button
 // --------------------------------------------------
 
-ion-segment-button {
-  display: flex;
-
+:host {
   flex: 1;
+
+  --padding-start: 0;
+  --padding-end: 0;
+  --padding-top: 0;
+  --padding-bottom: 0;
+
+  --icon-size: 1em;
 }
 
-.segment-button {
-  @include border-radius(0);
-  @include margin-horizontal(0);
-  @include text-align(center);
+:host(:first-of-type) .segment-button-native {
+  @include border-radius(var(--border-radius), 0, 0, var(--border-radius));
+
+  --padding-end: 0;
+}
+
+:host(:not(:first-of-type)) .segment-button-native {
+  border-left-width: 0;
+}
+
+:host(:last-of-type) .segment-button-native {
+  @include border-radius(0, var(--border-radius),var(--border-radius), 0);
+
+  --padding-start: 0;
+}
+
+.segment-button-native {
+  @include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start));
+  @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
+
+  text-align: center;
 
   position: relative;
   display: block;
 
   overflow: hidden;
 
-  border: 0;
-
+  text-transform: inherit;
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -30,8 +51,26 @@ ion-segment-button {
   user-select: none;
   contain: content;
 
+  width: 100%;
+  height: 100%;
+
+  border-width: var(--border-width);
+  border-style: var(--border-style);
+  border-color: var(--border-color);
+  transition: var(--transition);
+
+  color: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+
+  background: var(--background);
+
   &:active,
   &:focus {
     outline: none;
   }
 }
+
+::slotted(ion-icon) {
+  font-size: var(--icon-size);
+}
diff --git a/core/src/components/segment-button/segment-button.tsx b/core/src/components/segment-button/segment-button.tsx
index 953ce4f8e0..58f943221f 100644
--- a/core/src/components/segment-button/segment-button.tsx
+++ b/core/src/components/segment-button/segment-button.tsx
@@ -1,15 +1,13 @@
 import { Component, Element, Event, EventEmitter, Prop, Watch } from '@stencil/core';
 import { Color, Mode } from '../../interface';
-import { createThemedClasses, getElementClassMap } from '../../utils/theme';
+import { createColorClasses } from '../../utils/theme';
 
 let ids = 0;
 
 @Component({
   tag: 'ion-segment-button',
-  styleUrls: {
-    ios: 'segment-button.ios.scss',
-    md: 'segment-button.md.scss'
-  }
+  styleUrl: 'segment-button.scss',
+  shadow: true
 })
 export class SegmentButton {
 
@@ -37,12 +35,6 @@ export class SegmentButton {
    */
   @Prop() disabled = false;
 
-  /**
-   * Contains a URL or a URL fragment that the hyperlink points to.
-   * If this property is set, an anchor tag will be rendered.
-   */
-  @Prop() href?: string;
-
   /**
    * The value of the segment button.
    */
@@ -60,33 +52,28 @@ export class SegmentButton {
     }
   }
 
-  render() {
-    const themedClasses = createThemedClasses(this.mode, this.color, 'segment-button');
-    const hostClasses = getElementClassMap(this.el.classList);
-
-    const buttonClasses = {
-      'segment-button-disabled': this.disabled,
-      'segment-checked': this.checked,
-      ...themedClasses,
-      ...hostClasses,
+  hostData() {
+    const { disabled, checked, color } = this;
+    return {
+      class: {
+        ...createColorClasses(color),
+        'segment-button-disabled': disabled,
+        'segment-checked': checked,
+      },
+      'tappable': true,
     };
+  }
 
-    const TagType = this.href ? 'a' : 'button';
-    const attrs = (TagType === 'button')
-      ? {type: 'button'}
-      : {};
-
+  render() {
     return [
-       this.checked = true }>
           
-          { this.mode === 'md' &&  }
-      
+          { this.mode === 'md' &&  }
+      
     ];
   }
 }
diff --git a/core/src/components/segment/segment.ios.scss b/core/src/components/segment/segment.ios.scss
index 9e092a6962..8188df4a76 100644
--- a/core/src/components/segment/segment.ios.scss
+++ b/core/src/components/segment/segment.ios.scss
@@ -4,22 +4,71 @@
 // iOS Segment
 // --------------------------------------------------
 
-.segment-ios {
+:host {
   font-family: $segment-ios-font-family;
 }
 
-.segment-ios.segment-disabled {
+:host(.segment-disabled) {
   opacity: $segment-ios-opacity-disabled;
 
   pointer-events: none;
 }
 
+// iOS Segment Button
+// --------------------------------------------------
+
+::slotted(ion-segment-button) {
+  --border-radius: #{$segment-button-ios-border-radius};
+  --border-width: #{$segment-button-ios-border-width};
+  --border-style: solid;
+  --border-color: #{current-color(base)};
+
+  --background: transparent;
+  --transition: 100ms all linear;
+  --icon-size: #{$segment-button-ios-icon-size};
+
+  height: #{$segment-button-ios-height};
+
+  font-size: #{$segment-button-ios-font-size};
+  line-height: #{$segment-button-ios-line-height};
+
+  color: #{current-color(base)};
+}
+
+::slotted(.segment-checked) {
+  color: #{current-color(contrast)};
+
+  --background: #{current-color(base)};
+}
+
+::slotted(.segment-button-disabled) {
+  color: #{current-color(base, $segment-button-ios-background-color-alpha-disabled)};
+
+  pointer-events: none;
+}
+
+::slotted(ion-segment-button):hover:not(.segment-checked) {
+  --background: #{current-color(base, $segment-button-ios-background-color-alpha-hover)};
+}
+
+::slotted(ion-segment-button):active:not(.segment-checked) {
+  --background: #{current-color(base, $segment-button-ios-background-color-alpha-active)};
+}
+
 
 // iOS Segment in Toolbar
 // --------------------------------------------------
-
-.toolbar-ios .segment-ios {
+:host(.in-toolbar) {
   @include position(0, 0, 0, 0);
 
   position: absolute;
 }
+
+:host(.in-toolbar) ::slotted(ion-segment-button) {
+  max-width: $segment-button-ios-toolbar-button-max-width;
+
+  height: $segment-button-ios-toolbar-button-height;
+
+  font-size: $segment-button-ios-toolbar-font-size;
+  line-height: $segment-button-ios-toolbar-line-height;
+}
\ No newline at end of file
diff --git a/core/src/components/segment/segment.ios.vars.scss b/core/src/components/segment/segment.ios.vars.scss
index d22e2ad822..708ca5972f 100644
--- a/core/src/components/segment/segment.ios.vars.scss
+++ b/core/src/components/segment/segment.ios.vars.scss
@@ -4,7 +4,86 @@
 // --------------------------------------------------
 
 /// @prop - Background of the segment button
-$segment-ios-font-family:                       $font-family-ios-base !default;
+$segment-ios-font-family:                       $font-family-base !default;
 
 /// @prop - Opacity of the disabled segment
 $segment-ios-opacity-disabled:                  .4 !default;
+
+
+// iOS Segment Button
+// --------------------------------------------------
+
+/// @prop - Background of the segment button
+$segment-button-ios-background-color:                 transparent !default;
+
+/// @prop - Background of the activated segment button
+$segment-button-ios-background-color-activated:       ion-color(primary, base) !default;
+
+/// @prop - Background alpha of the activated segment button
+$segment-button-ios-background-color-alpha-hover:     .1 !default;
+
+/// @prop - Background of the segment button when hovered
+$segment-button-ios-background-color-hover:           ion-color(primary, base, $segment-button-ios-background-color-alpha-hover) !default;
+
+/// @prop - Background alpha of the segment button when hovered
+$segment-button-ios-background-color-alpha-active:    .1 !default;
+
+/// @prop - Background of the segment button when active
+$segment-button-ios-background-color-active:          ion-color(primary, base, $segment-button-ios-background-color-alpha-active) !default;
+
+/// @prop - Background alpha of the segment button when active
+$segment-button-ios-background-color-alpha-disabled:  .5 !default;
+
+/// @prop - Background of the activated segment button when active
+$segment-button-ios-background-color-disabled:        ion-color(primary, base, $segment-button-ios-background-color-alpha-disabled) !default;
+
+/// @prop - Text color of the segment button
+$segment-button-ios-text-color:                       ion-color(primary, contrast) !default;
+
+/// @prop - Border width of the segment button
+$segment-button-ios-border-width:                     1px !default;
+
+/// @prop - Height of the segment button
+$segment-button-ios-height:                           32px !default;
+
+/// @prop - Line height of the segment button
+$segment-button-ios-line-height:                      37px !default;
+
+/// @prop - Font size of the segment button
+$segment-button-ios-font-size:                        13px !default;
+
+/// @prop - Border radius of the segment button
+$segment-button-ios-border-radius:                    4px !default;
+
+/// @prop - Size of an icon in the segment button
+$segment-button-ios-icon-size:                        26px !default;
+
+/// @prop - Line height of an icon in the segment button
+$segment-button-ios-icon-line-height:                 28px !default;
+
+/// @prop - Max width of the segment button in a toolbar
+$segment-button-ios-toolbar-button-max-width:         100px !default;
+
+/// @prop - Height of the segment button in a toolbar
+$segment-button-ios-toolbar-button-height:            30px !default;
+
+/// @prop - Line height of the segment button in a toolbar
+$segment-button-ios-toolbar-line-height:              22px !default;
+
+/// @prop - Font size of the segment button in a toolbar
+$segment-button-ios-toolbar-font-size:                12px !default;
+
+/// @prop - Size of an icon in the segment button in a toolbar
+$segment-button-ios-toolbar-icon-size:                22px !default;
+
+/// @prop - Line height of an icon in the segment button in a toolbar
+$segment-button-ios-toolbar-icon-line-height:         24px !default;
+
+/// @prop - Opacity of the segment button on hover
+$segment-button-ios-opacity-hover:                    .1 !default;
+
+/// @prop - Opacity of the segment button when pressed
+$segment-button-ios-opacity-active:                   .16 !default;
+
+/// @prop - Opacity of the disabled segment button
+$segment-button-ios-opacity-disabled:                 .3 !default;
diff --git a/core/src/components/segment/segment.md.scss b/core/src/components/segment/segment.md.scss
index da1f8db335..0c3661cd54 100644
--- a/core/src/components/segment/segment.md.scss
+++ b/core/src/components/segment/segment.md.scss
@@ -4,12 +4,66 @@
 // Material Design Segment
 // --------------------------------------------------
 
-.segment-md {
+:host {
   font-family: $segment-md-font-family;
+
+  color: $segment-button-md-text-color;
 }
 
-.segment-md.segment-disabled {
+:host(.ion-color) {
+  color: #{current-color(base)} !important;
+}
+
+:host(.segment-disabled) {
   opacity: $segment-md-opacity-disabled;
 
   pointer-events: none;
 }
+
+// Material Design Segment Button
+// --------------------------------------------------
+
+::slotted(ion-segment-button) {
+  --padding-top: #{$segment-button-md-padding-top};
+  --padding-end: #{$segment-button-md-padding-end};
+  --padding-bottom: #{$segment-button-md-padding-bottom};
+  --padding-start: #{$segment-button-md-padding-start};
+
+  --background: transparent;
+  --border-color: #{$segment-button-md-border-bottom-color};
+  --border-width: #{0 0 $segment-button-md-border-bottom-width 0};
+  --border-style: solid;
+  --opacity: #{$segment-button-md-opacity};
+  --transition: #{$segment-button-md-transition};
+
+  --icon-size: #{$segment-button-md-icon-size};
+
+  font-size: $segment-button-md-font-size;
+  font-weight: $segment-button-md-font-weight;
+  line-height: $segment-button-md-line-height;
+  color: inherit;
+  height: $segment-button-md-height;
+
+  opacity: $segment-button-md-opacity;
+
+  text-transform: uppercase;
+}
+
+// Checked Segment Button
+// --------------------------------------------------
+
+::slotted(.activated),
+::slotted(.segment-checked) {
+  opacity: $segment-button-md-opacity-activated;
+
+  --border-color: currentColor;
+}
+
+// Disabled Segment Button
+// --------------------------------------------------
+
+::slotted(.segment-button-disabled) {
+  opacity: $segment-button-md-opacity-disabled;
+
+  pointer-events: none;
+}
\ No newline at end of file
diff --git a/core/src/components/segment/segment.md.vars.scss b/core/src/components/segment/segment.md.vars.scss
index f66af5d797..6dd91d433f 100644
--- a/core/src/components/segment/segment.md.vars.scss
+++ b/core/src/components/segment/segment.md.vars.scss
@@ -4,7 +4,65 @@
 // --------------------------------------------------
 
 /// @prop - Background of the segment button
-$segment-md-font-family:                       $font-family-md-base !default;
+$segment-md-font-family:                       $font-family-base !default;
 
 /// @prop - Opacity of the disabled segment
 $segment-md-opacity-disabled:                  .3 !default;
+
+
+// Material Design Segment Button
+// --------------------------------------------------
+
+/// @prop - Text color of the segment button
+$segment-button-md-text-color:                 $toolbar-md-color-active !default;
+
+/// @prop - Width of the bottom border on the segment button
+$segment-button-md-border-bottom-width:        2px !default;
+
+/// @prop - Color of the bottom border on the segment button
+$segment-button-md-border-bottom-color:        rgba(#000, .10) !default;
+
+/// @prop - Opacity of the segment button
+$segment-button-md-opacity:                    .7 !default;
+
+/// @prop - Border color of the activated segment button
+$segment-button-md-border-color-activated:     $toolbar-md-color-active !default;
+
+/// @prop - Opacity of the activated segment button
+$segment-button-md-opacity-activated:          1 !default;
+
+/// @prop - Opacity of the disabled segment button
+$segment-button-md-opacity-disabled:           .3 !default;
+
+/// @prop - Padding top of the segment button
+$segment-button-md-padding-top:                0 !default;
+
+/// @prop - Padding end of the segment button
+$segment-button-md-padding-end:                6px !default;
+
+/// @prop - Padding bottom of the segment button
+$segment-button-md-padding-bottom:             $segment-button-md-padding-top !default;
+
+/// @prop - Padding start of the segment button
+$segment-button-md-padding-start:              $segment-button-md-padding-end !default;
+
+/// @prop - Height of the segment button
+$segment-button-md-height:                     42px !default;
+
+/// @prop - Line height of the segment button
+$segment-button-md-line-height:                40px !default;
+
+/// @prop - Font size of the segment button
+$segment-button-md-font-size:                  12px !default;
+
+/// @prop - Font weight of the segment button
+$segment-button-md-font-weight:                500 !default;
+
+/// @prop - Transition of the segment button
+$segment-button-md-transition:                 100ms all linear !default;
+
+/// @prop - Size of an icon in the segment button
+$segment-button-md-icon-size:                  26px !default;
+
+/// @prop - Line height of an icon in the segment button
+$segment-button-md-icon-line-height:           $segment-button-md-line-height !default;
diff --git a/core/src/components/segment/segment.scss b/core/src/components/segment/segment.scss
index 6248ee680f..cf5d1742f6 100644
--- a/core/src/components/segment/segment.scss
+++ b/core/src/components/segment/segment.scss
@@ -3,7 +3,7 @@
 // Segment
 // --------------------------------------------------
 
-ion-segment {
+:host {
   @include font-smoothing();
 
   display: flex;
@@ -13,4 +13,9 @@ ion-segment {
   justify-content: center;
 
   width: 100%;
+
+  --ion-color-base: #{ion-color(primary, base)};
+  --ion-color-base-rgb: #{ion-color(primary, base, null, true)};
+  --ion-color-contrast: #{ion-color(primary, contrast)};
+  --ion-color-shade: #{ion-color(primary, shade)};
 }
diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx
index 23c0d25a99..c58ef46b2c 100644
--- a/core/src/components/segment/segment.tsx
+++ b/core/src/components/segment/segment.tsx
@@ -1,5 +1,6 @@
 import { Component, Element, Event, EventEmitter, Listen, Prop, Watch } from '@stencil/core';
 import { Color, InputChangeEvent, Mode } from '../../interface';
+import { createColorClasses, hostContext } from '../../utils/theme';
 
 
 @Component({
@@ -8,9 +9,7 @@ import { Color, InputChangeEvent, Mode } from '../../interface';
     ios: 'segment.ios.scss',
     md: 'segment.md.scss'
   },
-  host: {
-    theme: 'segment'
-  }
+  shadow: true
 })
 export class Segment {
 
@@ -40,7 +39,7 @@ export class Segment {
 
   @Watch('value')
   protected valueChanged(value: string | undefined) {
-    this.update();
+    this.updateButtons();
     this.ionChange.emit({value});
   }
 
@@ -57,29 +56,38 @@ export class Segment {
 
   componentDidLoad() {
     if (this.value === undefined) {
-      const buttons = Array.from(this.el.querySelectorAll('ion-segment-button'));
-      const checked = buttons.find(b => b.checked);
+      const checked = this.getButtons().find(b => b.checked);
       if (checked) {
         this.value = checked.value;
       }
     }
-    this.update();
+    this.updateButtons();
   }
 
-  private update() {
+  private updateButtons() {
     const value = this.value;
-    const buttons = Array.from(this.el.querySelectorAll('ion-segment-button'));
-    for (const button of buttons) {
+    for (const button of this.getButtons()) {
       button.checked = (button.value === value);
     }
   }
 
+  private getButtons() {
+    return Array.from(this.el.querySelectorAll('ion-segment-button'));
+  }
+
   hostData() {
     return {
       class: {
-        'segment-disabled': this.disabled
+        ...createColorClasses(this.color),
+
+        'segment-disabled': this.disabled,
+        'in-toolbar': hostContext('ion-toolbar', this.el)
       }
     };
   }
 
+  render() {
+    return ;
+  }
+
 }
diff --git a/core/src/components/segment/test/basic/index.html b/core/src/components/segment/test/basic/index.html
index 3939caa5fa..1195ab6c44 100644
--- a/core/src/components/segment/test/basic/index.html
+++ b/core/src/components/segment/test/basic/index.html
@@ -6,195 +6,197 @@
   Segment - Basic
   
   
+  
 
 
 
   
 
-      
-        
-          Segment - Basic
-        
-      
+    
+      
+        Segment - Basic
+      
+    
 
-      
-        
-          
-            
-              Paid
-            
-            
-              Free
-            
-            
-              Top
-            
-          
-        
+    
+      
+        
+          
+            Paid
+          
+          
+            Free
+          
+          
+            Top
+          
+        
+      
 
-        
-          
-            
-              Bookmarks
-            
-            
-              Reading List
-            
-            
-              Shared Links
-            
-          
-        
+      
+        
+          
+            Bookmarks
+          
+          
+            Reading List
+          
+          
+            Shared Links
+          
+        
+      
 
-        
-          
-            
-              Active
-            
-            
-              Disabled
-            
-            
-              Inactive
-            
-          
-        
+      
+        
+          
+            Active
+          
+          
+            Disabled
+          
+          
+            Inactive
+          
+        
+      
 
-        
-          
-            
-              Sunny
-            
-            
-              Rainy
-            
-          
-        
+      
+        
+          
+            Sunny
+          
+          
+            Rainy
+          
+        
+      
 
-        

-          
-            Seg 1
-            Seg 2
-            Seg 3
-          
+      

+        
+          Seg 1
+          Seg 2
+          Seg 3
+        
 
-          
-            Seg 2 1
-            Seg 2 2
-            Seg 2 3
-          
+        
+          Seg 2 1
+          Seg 2 2
+          Seg 2 3
+        
 
-          
-            
-              
-            
-            
-              
-            
-            
-              
-            
-          
+        
+          
+            
+          
+          
+            
+          
+          
+            
+          
+        
 
-          
-            
-              Bookmarks
-            
-            
-              Reading List
-            
-            
-              Shared Links
-            
-          
+        
+          
+            Bookmarks
+          
+          
+            Reading List
+          
+          
+            Shared Links
+          
+        
 
-          
-            
-              Active
-            
-            
-              Disabled
-            
-            
-              Inactive
-            
-          
+        
+          
+            Active
+          
+          
+            Disabled
+          
+          
+            Inactive
+          
+        
 
-          
-          
-        

+        
+        
+      

 
-        

-          Toggle Disabled
-        

-        

-          Toggle Value
-        

+      

+        Toggle Disabled
+      

+      

+        Toggle Value
+      

 
-        
-      
-
-      
+
+      
+    
+
+    
   
 
 
diff --git a/core/src/components/segment/test/modes/e2e.js b/core/src/components/segment/test/modes/e2e.js
new file mode 100644
index 0000000000..681e35a1ff
--- /dev/null
+++ b/core/src/components/segment/test/modes/e2e.js
@@ -0,0 +1,19 @@
+'use strict';
+
+const { By, until } = require('selenium-webdriver');
+const { register, Page, platforms } = require('../../../../../scripts/e2e');
+
+class E2ETestPage extends Page {
+  constructor(driver, platform) {
+    super(driver, `http://localhost:3333/src/components/segment/test/modes?ionic:mode=${platform}`);
+  }
+}
+
+platforms.forEach(platform => {
+  describe('segment/modes', () => {
+    register('should init', driver => {
+      const page = new E2ETestPage(driver, platform);
+      return page.navigate('#modeSegment');
+    });
+  });
+});
diff --git a/core/src/components/segment/test/modes/index.html b/core/src/components/segment/test/modes/index.html
new file mode 100644
index 0000000000..f46081448e
--- /dev/null
+++ b/core/src/components/segment/test/modes/index.html
@@ -0,0 +1,53 @@
+
+
+
+
+  
+  Segment - Modes
+  
+  
+  
+
+
+
+  
+
+    
+      
+        Segment - Modes
+      
+    
+
+    
+      
Mode: ios

+      
+        
+          Puppies
+        
+        
+          Kittens
+        
+        
+          Turtles
+        
+      
+
+      

+
+      
Mode: md

+      
+        
+          Puppies
+        
+        
+          Kittens
+        
+        
+          Turtles
+        
+      
+    
+  
+
+
+
diff --git a/core/src/components/segment/test/preview/index.html b/core/src/components/segment/test/preview/index.html
index 5ab4058674..69b38cddeb 100644
--- a/core/src/components/segment/test/preview/index.html
+++ b/core/src/components/segment/test/preview/index.html
@@ -6,210 +6,212 @@
   Segment
   
   
+  
 
 
 
   
 
-      
-        
-          Segment
-        
-      
+    
+      
+        Segment
+      
+    
 
-      
-        
-          
-            
-              Paid
-            
-            
-              Free
-            
-            
-              Top
-            
-          
-        
+    
+      
+        
+          
+            Paid
+          
+          
+            Free
+          
+          
+            Top
+          
+        
+      
 
-        
-          
-            
-              Bookmarks
-            
-            
-              Reading List
-            
-            
-              Shared Links
-            
-          
-        
+      
+        
+          
+            Bookmarks
+          
+          
+            Reading List
+          
+          
+            Shared Links
+          
+        
+      
 
-        
-          
-            
-              Active
-            
-            
-              Disabled
-            
-            
-              Inactive
-            
-          
-        
+      
+        
+          
+            Active
+          
+          
+            Disabled
+          
+          
+            Inactive
+          
+        
+      
 
-        
-          
-            
-              Sunny
-            
-            
-              Rainy
-            
-          
-        
+      
+        
+          
+            Sunny
+          
+          
+            Rainy
+          
+        
+      
 
-        

-          
-            Seg 1
-            Seg 2
-            Seg 3
-          
+      

+        
+          Seg 1
+          Seg 2
+          Seg 3
+        
 
-          
-            Seg 2 1
-            Seg 2 2
-            Seg 2 3
-          
+        
+          Seg 2 1
+          Seg 2 2
+          Seg 2 3
+        
 
-          
-            
-              
-            
-            
-              
-            
-            
-              
-            
-          
+        
+          
+            
+          
+          
+            
+          
+          
+            
+          
+        
 
-          
-            
-              Bookmarks
-            
-            
-              Reading List
-            
-            
-              Shared Links
-            
-          
+        
+          
+            Bookmarks
+          
+          
+            Reading List
+          
+          
+            Shared Links
+          
+        
 
-          
-            
-              Active
-            
-            
-              Disabled
-            
-            
-              Inactive
-            
-          
+        
+          
+            Active
+          
+          
+            Disabled
+          
+          
+            Inactive
+          
+        
 
-          
-          
-        

+        
+        
+      

 
-        

-          Toggle Disabled
-        

-        

-          Toggle Value
-        

+      

+        Toggle Disabled
+      

+      

+        Toggle Value
+      

 
-        
-      
-
-      
+
+        const segments = document.querySelectorAll('ion-segment')
+        for (let i = 0; i < segments.length; i++) {
+          segments[i].addEventListener('ionChange', (ev) => {
+            console.log('Segment value changed', ev);
+          })
+        }
+
+        // Listen for ionClick on all segment buttons
+        const segmentButtons = document.querySelectorAll('ion-segment-button')
+        for (let i = 0; i < segmentButtons.length; i++) {
+          segmentButtons[i].addEventListener('ionSelect', (ev) => {
+            console.log('Segment button clicked', ev);
+          })
+        }
+
+      
+    
+
+    
   
 
 
diff --git a/core/src/components/segment/test/standalone/index.html b/core/src/components/segment/test/standalone/index.html
index 5b7d1f1858..9f12b45ebe 100644
--- a/core/src/components/segment/test/standalone/index.html
+++ b/core/src/components/segment/test/standalone/index.html
@@ -6,6 +6,7 @@
   Segment - Standalone
   
   
+  
 
 
 
diff --git a/core/src/components/select-option/select-option.tsx b/core/src/components/select-option/select-option.tsx
index bdcd86a38d..f297266670 100644
--- a/core/src/components/select-option/select-option.tsx
+++ b/core/src/components/select-option/select-option.tsx
@@ -2,10 +2,7 @@ import { Component, Element, Event, EventEmitter, Prop } from '@stencil/core';
 
 
 @Component({
-  tag: 'ion-select-option',
-  host: {
-    theme: 'select-option'
-  }
+  tag: 'ion-select-option'
 })
 export class SelectOption {
 
diff --git a/core/src/components/select-popover/select-popover.scss b/core/src/components/select-popover/select-popover.scss
new file mode 100644
index 0000000000..6a1d4fed8b
--- /dev/null
+++ b/core/src/components/select-popover/select-popover.scss
@@ -0,0 +1,5 @@
+@import "./select-popover.vars";
+
+:host ::slotted(ion-list) {
+  @include margin($select-popover-list-margin-top, $select-popover-list-margin-end, $select-popover-list-margin-bottom, $select-popover-list-margin-start);
+}
diff --git a/core/src/components/select-popover/select-popover.tsx b/core/src/components/select-popover/select-popover.tsx
index 6b7bd5ba1f..6ce4d72b96 100644
--- a/core/src/components/select-popover/select-popover.tsx
+++ b/core/src/components/select-popover/select-popover.tsx
@@ -1,14 +1,14 @@
 import { Component, Listen, Prop } from '@stencil/core';
 import { Mode, SelectPopoverOption } from '../../interface';
+import { createThemedClasses } from '../../utils/theme';
 
 
 @Component({
   tag: 'ion-select-popover',
-  host: {
-    theme: 'select-popover'
-  }}
-)
+  styleUrl: 'select-popover.scss'
+})
 export class SelectPopover {
+
   mode!: Mode;
 
   /** Header text for the popover */
@@ -29,13 +29,19 @@ export class SelectPopover {
     option && option.handler && option.handler();
   }
 
+  hostData() {
+    return {
+      class: createThemedClasses(this.mode, 'select-popover')
+    };
+  }
+
   render() {
     return (
       
         { this.header ? {this.header} : null }
         { this.subHeader || this.message
-          ? 
-              
+          ? 
+              
                 { this.subHeader ? 
{this.subHeader}
 : null }
                 { this.message ? 
{this.message}
 : null }
               
diff --git a/core/src/components/select-popover/select-popover.vars.scss b/core/src/components/select-popover/select-popover.vars.scss
new file mode 100644
index 0000000000..09d0d564dd
--- /dev/null
+++ b/core/src/components/select-popover/select-popover.vars.scss
@@ -0,0 +1,16 @@
+@import "../../themes/ionic.globals";
+
+// Select
+// --------------------------------------------------
+
+/// @prop - Margin top of the select popover list
+$select-popover-list-margin-top:         -1px !default;
+
+/// @prop - Margin end of the select popover list
+$select-popover-list-margin-end:         0 !default;
+
+/// @prop - Margin bottom of the select popover list
+$select-popover-list-margin-bottom:      -1px !default;
+
+/// @prop - Margin start of the select popover list
+$select-popover-list-margin-start:       0 !default;
diff --git a/core/src/components/select/select.ios.scss b/core/src/components/select/select.ios.scss
index 6721de8957..21ce0c67b9 100644
--- a/core/src/components/select/select.ios.scss
+++ b/core/src/components/select/select.ios.scss
@@ -4,25 +4,25 @@
 // iOS Select
 // --------------------------------------------------
 
-.select-ios {
+:host {
   @include padding($select-ios-padding-top, $select-ios-padding-end, $select-ios-padding-bottom, $select-ios-padding-start);
 
   font-family: $select-ios-font-family;
   color: $select-ios-text-color;
 }
 
-.select-ios .select-placeholder {
+.select-placeholder {
   color: $select-ios-placeholder-color;
 }
 
-.select-ios .select-icon {
+.select-icon {
   position: relative;
 
   width: 12px;
   height: 18px;
 }
 
-.select-ios .select-icon .select-icon-inner {
+.select-icon .select-icon-inner {
   @include position(50%, null, null, 5px);
   @include margin(-2px, null, null, null);
 
diff --git a/core/src/components/select/select.ios.vars.scss b/core/src/components/select/select.ios.vars.scss
index ec59df8459..3d9aa1efc9 100644
--- a/core/src/components/select/select.ios.vars.scss
+++ b/core/src/components/select/select.ios.vars.scss
@@ -18,13 +18,13 @@ $select-ios-padding-bottom:         $item-ios-padding-bottom !default;
 $select-ios-padding-start:          $item-ios-padding-start !default;
 
 /// @prop - Font family of the select
-$select-ios-font-family:            $font-family-ios-base !default;
+$select-ios-font-family:            $font-family-base !default;
 
 /// @prop - Color of the select icon
-$select-ios-icon-color:             $text-ios-color-step-650 !default;
+$select-ios-icon-color:             $text-color-step-650 !default;
 
 /// @prop - Color of the select placeholder
 $select-ios-placeholder-color:      $select-ios-icon-color !default;
 
 /// @prop - Text Color of the selected item
-$select-ios-text-color:             $text-ios-color !default;
+$select-ios-text-color:             $text-color !default;
diff --git a/core/src/components/select/select.md.scss b/core/src/components/select/select.md.scss
index cbb7086d21..d07f519e87 100644
--- a/core/src/components/select/select.md.scss
+++ b/core/src/components/select/select.md.scss
@@ -4,14 +4,14 @@
 // Material Design Select
 // --------------------------------------------------
 
-.select-md {
+:host {
   @include padding($select-md-padding-top, $select-md-padding-end, $select-md-padding-bottom, $select-md-padding-start);
 
   font-family: $select-md-font-family;
   color: $select-md-text-color;
 }
 
-.select-md .select-placeholder {
+.select-placeholder {
   color: $select-md-placeholder-color;
 }
 
@@ -19,14 +19,14 @@
   @include margin-horizontal(0, null);
 }
 
-.select-md .select-icon {
+.select-icon {
   position: relative;
 
   width: 12px;
   height: 19px;
 }
 
-.select-md .select-icon .select-icon-inner {
+.select-icon .select-icon-inner {
   @include position(50%, null, null, 5px);
   @include margin(-3px, null, null, null);
 
@@ -61,7 +61,7 @@
 }
 
 .select-popover-md .item-radio-checked {
-  background-color: $background-md-color-step-150;
+  background-color: $background-color-step-150;
 }
 
 .select-popover-md .item-radio-checked ion-label {
diff --git a/core/src/components/select/select.md.vars.scss b/core/src/components/select/select.md.vars.scss
index f9514ab6e4..751aff628b 100644
--- a/core/src/components/select/select.md.vars.scss
+++ b/core/src/components/select/select.md.vars.scss
@@ -18,13 +18,13 @@ $select-md-padding-bottom:      $item-md-padding-bottom !default;
 $select-md-padding-start:       $item-md-padding-start !default;
 
 /// @prop - Font family of the select
-$select-md-font-family:         $font-family-md-base !default;
+$select-md-font-family:         $font-family-base !default;
 
 /// @prop - Color of the select icon
-$select-md-icon-color:          $text-md-color-step-600 !default;
+$select-md-icon-color:          $text-color-step-600 !default;
 
 /// @prop - Color of the select placeholder
 $select-md-placeholder-color:   $select-md-icon-color !default;
 
 /// @prop - Text Color of the selected item
-$select-md-text-color:          $text-md-color !default;
+$select-md-text-color:          $text-color !default;
diff --git a/core/src/components/select/select.scss b/core/src/components/select/select.scss
index 852b853a3c..2a23f59ad3 100644
--- a/core/src/components/select/select.scss
+++ b/core/src/components/select/select.scss
@@ -3,28 +3,17 @@
 // Select
 // --------------------------------------------------
 
-ion-select {
+:host {
   display: flex;
   overflow: hidden;
-
 }
 
-.item .select {
+:host(.in-item) {
   max-width: 45%;
 }
 
 .select-cover {
-  @include position(0, null, null, 0);
-
-  position: absolute;
-
-  width: 100%;
-  height: 100%;
-
-  border: 0;
-
-  background: transparent;
-  cursor: pointer;
+  @include input-cover();
 }
 
 .select-text {
@@ -39,39 +28,20 @@ ion-select {
   white-space: nowrap;
 }
 
-// TODO item needs this class
-.item-multiple-inputs ion-select {
-  position: relative;
-}
-
-.select-disabled,
-.item-select-disabled ion-label {
+:host(.select-disabled) {
   opacity: .4;
 
   pointer-events: none;
 }
 
-.select-popover ion-list {
-  @include margin($select-popover-list-margin-top, $select-popover-list-margin-end, $select-popover-list-margin-bottom, $select-popover-list-margin-start);
-}
-
-.select-option {
+::slotted(ion-select-option) {
   display: none;
 }
 
-.select button:focus {
+button:focus {
   outline: none;
 }
 
-.select-key button {
+:host(.select-key) button {
   border: 2px solid #5e9ed6;
 }
-
-
-// Stacked & Floating Select
-// --------------------------------------------------
-
-.item-label-stacked .select,
-.item-label-floating .select {
-  max-width: 100%;
-}
diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx
index 83925e2024..9a9c8525e7 100644
--- a/core/src/components/select/select.tsx
+++ b/core/src/components/select/select.tsx
@@ -1,8 +1,7 @@
 import { Component, Element, Event, EventEmitter, Listen, Prop, State, Watch } from '@stencil/core';
-import { ActionSheetButton, ActionSheetOptions, AlertInput, AlertOptions,
-  CssClassMap, Mode, PopoverOptions, SelectInputChangeEvent, SelectInterface, SelectPopoverOption, StyleEvent
-} from '../../interface';
+import { ActionSheetButton, ActionSheetOptions, AlertInput, AlertOptions, CssClassMap, Mode, PopoverOptions, SelectInputChangeEvent, SelectInterface, SelectPopoverOption, StyleEvent} from '../../interface';
 import { deferEvent } from '../../utils/helpers';
+import { createThemedClasses, hostContext } from '../../utils/theme';
 
 
 @Component({
@@ -11,16 +10,14 @@ import { deferEvent } from '../../utils/helpers';
     ios: 'select.ios.scss',
     md: 'select.md.scss'
   },
-  host: {
-    theme: 'select'
-  }
+  shadow: true
 })
 export class Select {
 
   private childOpts: HTMLIonSelectOptionElement[] = [];
   private selectId = `ion-sel-${selectIds++}`;
   private labelId?: string;
-  private overlay?: HTMLIonActionSheetElement | HTMLIonAlertElement | HTMLIonPopoverElement | null;
+  private overlay?: HTMLIonActionSheetElement | HTMLIonAlertElement | HTMLIonPopoverElement;
 
   mode!: Mode;
 
@@ -324,10 +321,8 @@ export class Select {
     };
 
     const popover = this.overlay = await this.popoverCtrl.create(popoverOpts);
-    if (popover) {
-      await popover.present();
-      this.isExpanded = true;
-    }
+    await popover.present();
+    this.isExpanded = true;
     return popover;
   }
 
@@ -359,10 +354,9 @@ export class Select {
     };
 
     const actionSheet = this.overlay = await this.actionSheetCtrl.create(actionSheetOpts);
-    if (actionSheet) {
-      await actionSheet.present();
-      this.isExpanded = true;
-    }
+    await actionSheet.present();
+
+    this.isExpanded = true;
     return actionSheet;
   }
 
@@ -402,10 +396,9 @@ export class Select {
     };
 
     const alert = this.overlay = await this.alertCtrl.create(alertOpts);
-    if (alert) {
-      await alert.present();
-      this.isExpanded = true;
-    }
+    await alert.present();
+
+    this.isExpanded = true;
     return alert;
   }
 
@@ -449,14 +442,17 @@ export class Select {
     this.ionStyle.emit({
       'interactive': true,
       'select': true,
-      'select-disabled': this.disabled,
-      'input-has-value': this.hasValue()
+      'input-has-value': this.hasValue(),
+      'interactive-disabled': this.disabled,
+      'select-disabled': this.disabled
     });
   }
 
   hostData() {
     return {
       class: {
+        ...createThemedClasses(this.mode, 'select'),
+        'in-item': hostContext('.item', this.el),
         'select-disabled': this.disabled,
         'select-key': this.keyFocus
       }
diff --git a/core/src/components/select/select.vars.scss b/core/src/components/select/select.vars.scss
index 09d0d564dd..e21c162d17 100644
--- a/core/src/components/select/select.vars.scss
+++ b/core/src/components/select/select.vars.scss
@@ -1,16 +1 @@
 @import "../../themes/ionic.globals";
-
-// Select
-// --------------------------------------------------
-
-/// @prop - Margin top of the select popover list
-$select-popover-list-margin-top:         -1px !default;
-
-/// @prop - Margin end of the select popover list
-$select-popover-list-margin-end:         0 !default;
-
-/// @prop - Margin bottom of the select popover list
-$select-popover-list-margin-bottom:      -1px !default;
-
-/// @prop - Margin start of the select popover list
-$select-popover-list-margin-start:       0 !default;
diff --git a/core/src/components/select/test/basic/index.html b/core/src/components/select/test/basic/index.html
index 5376e3470d..9bc7763f94 100644
--- a/core/src/components/select/test/basic/index.html
+++ b/core/src/components/select/test/basic/index.html
@@ -1,251 +1,254 @@
 
 
+
 
   
   Select - Basic
   
   
+  
 
+
 
   
 
-      
-        
-          Select - Basic
-        
-      
+    
+      
+        Select - Basic
+      
+    
 
-      
-        
-          Single Value Select
+    
+      
+        Single Value Select
 
-          
-            Gender
-            
-              Female
-              Male
-            
-          
+        
+          Gender
+          
+            Female
+            Male
+          
+        
 
-          
-            Hair Color
-            
-              Brown
-              Blonde
-              Black
-              Red
-            
-          
+        
+          Hair Color
+          
+            Brown
+            Blonde
+            Black
+            Red
+          
+        
 
-          
-            Skittles
-            
-              Red
-              Purple
-              Yellow
-              Orange
-              Green
-            
-          
+        
+          Skittles
+          
+            Red
+            Purple
+            Yellow
+            Orange
+            Green
+          
+        
 
-        
+      
 
-        
-          Select - Custom Interface Options
+      
+        Select - Custom Interface Options
 
-          
-            Alert
-            
-              Bacon
-              Black Olives
-              Extra Cheese
-              Green Peppers
-              Mushrooms
-              Onions
-              Pepperoni
-              Pineapple
-              Sausage
-              Spinach
-            
-          
+        
+          Alert
+          
+            Bacon
+            Black Olives
+            Extra Cheese
+            Green Peppers
+            Mushrooms
+            Onions
+            Pepperoni
+            Pineapple
+            Sausage
+            Spinach
+          
+        
 
-          
-            Popover
-            
-              Brown
-              Blonde
-              Black
-              Red
-            
-          
+        
+          Popover
+          
+            Brown
+            Blonde
+            Black
+            Red
+          
+        
 
-          
-            Action Sheet
-            
-              Red
-              Purple
-              Yellow
-              Orange
-              Green
-            
-          
+        
+          Action Sheet
+          
+            Red
+            Purple
+            Yellow
+            Orange
+            Green
+          
+        
 
-        
+      
 
-        
-          Popover Interface Select
+      
+        Popover Interface Select
 
-          
-            Gender
-            
-              Female
-              Male
-            
-          
+        
+          Gender
+          
+            Female
+            Male
+          
+        
 
-          
-            Gaming
-            
-              NES
-              Nintendo64
-              PlayStation
-              Sega Genesis
-              Sega Saturn
-              SNES
-            
-          
+        
+          Gaming
+          
+            NES
+            Nintendo64
+            PlayStation
+            Sega Genesis
+            Sega Saturn
+            SNES
+          
+        
 
-          
-            Date
-            
-              January
-              February
-              March
-              April
-              May
-              June
-              July
-              August
-              September
-              October
-              November
-              December
-            
-            
-              1989
-              1990
-              1991
-              1992
-              1993
-              1994
-              1995
-              1996
-              1997
-              1998
-              1999
-            
-          
+        
+          Date
+          
+            January
+            February
+            March
+            April
+            May
+            June
+            July
+            August
+            September
+            October
+            November
+            December
+          
+          
+            1989
+            1990
+            1991
+            1992
+            1993
+            1994
+            1995
+            1996
+            1997
+            1998
+            1999
+          
+        
 
-        
+      
 
 
-        
-          Action Sheet Interface Select
+      
+        Action Sheet Interface Select
 
-          
-            Mute Notifications
-            
-              For 15 Minutes
-              For 1 Hour
-              For 24 Hours
-              Until I turn it back on
-            
-          
+        
+          Mute Notifications
+          
+            For 15 Minutes
+            For 1 Hour
+            For 24 Hours
+            Until I turn it back on
+          
+        
 
-          
-            Rating
-            
-              1 Star
-              2 Stars
-              3 Stars
-              4 Stars
-              5 Stars
-            
-          
+        
+          Rating
+          
+            1 Star
+            2 Stars
+            3 Stars
+            4 Stars
+            5 Stars
+          
+        
 
-        
+      
 
-        
-          Multiple Value Select
+      
+        Multiple Value Select
 
-          
-            Toppings
-            
-              Bacon
-              Black Olives
-              Extra Cheese
-              Green Peppers
-              Mushrooms
-              Onions
-              Pepperoni
-              Pineapple
-              Sausage
-              Spinach
-            
-          
+        
+          Toppings
+          
+            Bacon
+            Black Olives
+            Extra Cheese
+            Green Peppers
+            Mushrooms
+            Onions
+            Pepperoni
+            Pineapple
+            Sausage
+            Spinach
+          
+        
 
-          
-            Pets
-            
-              Bird
-              Cat
-              Dog
-              Honey Badger
-            
-          
+        
+          Pets
+          
+            Bird
+            Cat
+            Dog
+            Honey Badger
+          
+        
 
-          
-            Disabled
-            
-              Selected Text
-            
-          
+        
+          Disabled
+          
+            Selected Text
+          
+        
 
-          
-            Stacked
-            
-              Default
-              Other
-              N/A
-            
-          
+        
+          Stacked
+          
+            Default
+            Other
+            N/A
+          
+        
 
-          
-            Floating
-            
-              Default
-              Other
-              N/A
-            
-          
+        
+          Floating
+          
+            Default
+            Other
+            N/A
+          
+        
 
-          
-            Floating
-            
-              Default
-              Other
-              N/A
-            
-          
-        
+        
+          Floating
+          
+            Default
+            Other
+            N/A
+          
+        
+      
 
-        

-          
-            Toggle Disabled
-          
-        

+      

+        
+          Toggle Disabled
+        
+      

 
-      
+    
 
     
   
 
+
 
-
-
-
diff --git a/core/src/components/select/test/multiple-value/index.html b/core/src/components/select/test/multiple-value/index.html
index 06d089e7e4..1d4c44bcdd 100644
--- a/core/src/components/select/test/multiple-value/index.html
+++ b/core/src/components/select/test/multiple-value/index.html
@@ -1,116 +1,122 @@
 
 
+
 
   
   Select - Multiple Value
   
   
+  
 
+
 
   
 
-      
-        
-          Select Item: Multiple Value
-        
-      
+    
+      
+        Select Item: Multiple Value
+      
+    
 
-      
+    
 
-        
-          Toppings
-          
-            Bacon
-            Black Olives
-            Extra Cheese
-            Green Peppers
-            Mushrooms
-            Onions
-            Pepperoni
-            Pineapple
-            Sausage
-            Spinach
-          
-        
+      
+        Toppings
+        
+          Bacon
+          Black Olives
+          Extra Cheese
+          Green Peppers
+          Mushrooms
+          Onions
+          Pepperoni
+          Pineapple
+          Sausage
+          Spinach
+        
+      
 
-        
-          Car Features
-          
-            Backup Camera
-            Headted Seats
-            Keyless Entry
-            Navigation
-            Parking Assist
-            Sun Roof
-          
-        
+      
+        Car Features
+        
+          Backup Camera
+          Headted Seats
+          Keyless Entry
+          Navigation
+          Parking Assist
+          Sun Roof
+        
+      
 
-        
-          Pets
-          
-              Cat
-              Dog
-              Turtle
-              Fish
-          
-        
+      
+        Pets
+        
+          Cat
+          Dog
+          Turtle
+          Fish
+        
+      
 
-        
-          Disabled
-          
-            Selected Text
-          
-        
+      
+        Disabled
+        
+          Selected Text
+        
+      
 
-        
-          Statuses
-          
-            Selected
-            Default
-            Disabled
-          
-        
+      
+        Statuses
+        
+          Selected
+          Default
+          Disabled
+        
+      
 
-        
+      
 
-        

-          
-            
-              
-            
-            
-              Select
-              
-                1
-                2
-                3
-              
-            
-            Submit
-          
-        

+      

+        
+          
+            
+          
+          
+            Select
+            
+              1
+              2
+              3
+            
+          
+          Submit
+        
+      

 
-        
-          Floating label
-          
-            Bacon
-            Black Olives
-            Extra Cheese
-            Green Peppers
-            Mushrooms
-            Onions
-            Pepperoni
-            Pineapple
-            Sausage
-            Spinach
-          
-        
+      
+        Floating label
+        
+          Bacon
+          Black Olives
+          Extra Cheese
+          Green Peppers
+          Mushrooms
+          Onions
+          Pepperoni
+          Pineapple
+          Sausage
+          Spinach
+        
+      
 
-      
+    
 
     
   
 
+
 
-
-
-
diff --git a/core/src/components/select/test/preview/index.html b/core/src/components/select/test/preview/index.html
index d6dcbb7084..5fcec2db31 100644
--- a/core/src/components/select/test/preview/index.html
+++ b/core/src/components/select/test/preview/index.html
@@ -6,6 +6,7 @@
   Select
   
   
+  
 
 
 
diff --git a/core/src/components/select/test/single-value/index.html b/core/src/components/select/test/single-value/index.html
index 54980787a1..9a02d6d735 100644
--- a/core/src/components/select/test/single-value/index.html
+++ b/core/src/components/select/test/single-value/index.html
@@ -1,165 +1,168 @@
 
 
+
 
   
   Select - Single Value
   
   
+  
 
+
 
   
 
-      
-        
-          Select Item: Single Value
-        
-      
+    
+      
+        Select Item: Single Value
+      
+    
 
-      
-        
-          Gender
-          
-            Female
-            Male
-          
-        
+    
+      
+        Gender
+        
+          Female
+          Male
+        
+      
 
-        
-          Popover
-          
-            Select
-            Action Sheet
-            Popover
-          
-        
+      
+        Popover
+        
+          Select
+          Action Sheet
+          Popover
+        
+      
 
-        
-          Gaming
-          
-            NES
-            Nintendo64
-            PlayStation
-            Sega Genesis
-            Sega Saturn
-            SNES
-          
-        
+      
+        Gaming
+        
+          NES
+          Nintendo64
+          PlayStation
+          Sega Genesis
+          Sega Saturn
+          SNES
+        
+      
 
-        
-          Operating System
-          
-            DOS
-            Linux
-            Mac OS 7
-            Mac OS 8
-            Windows 3.1
-            Windows 95
-            Windows 98
-          
-        
+      
+        Operating System
+        
+          DOS
+          Linux
+          Mac OS 7
+          Mac OS 8
+          Windows 3.1
+          Windows 95
+          Windows 98
+        
+      
 
-        
-          Notifications
-          
-            Enable
-            Mute
-            Mute for a week
-            Mute for a year
-          
-        
+      
+        Notifications
+        
+          Enable
+          Mute
+          Mute for a week
+          Mute for a year
+        
+      
 
-        
-          Edit
-          
-            Add Reaction
-            Copy Text
-            Share Text
-            Copy Link to Message
-            Remind Me
-            Pin File
-            Star File
-            Mark Unread
-            Edit Title
-            Save Image
-            Copy Image
-            Delete File
-          
-        
+      
+        Edit
+        
+          Add Reaction
+          Copy Text
+          Share Text
+          Copy Link to Message
+          Remind Me
+          Pin File
+          Star File
+          Mark Unread
+          Edit Title
+          Save Image
+          Copy Image
+          Delete File
+        
+      
 
-        
-          Music
-          
-            Alice in Chains
-            Green Day
-            Nirvana
-            Pearl Jam
-            Smashing Pumpkins
-            Soundgarden
-            Stone Temple Pilots
-          
-        
+      
+        Music
+        
+          Alice in Chains
+          Green Day
+          Nirvana
+          Pearl Jam
+          Smashing Pumpkins
+          Soundgarden
+          Stone Temple Pilots
+        
+      
 
-        
-          Date
-          
-            January
-            February
-            March
-            April
-            May
-            June
-            July
-            August
-            September
-            October
-            November
-            December
-          
-          
-          
-        
+      
+        Date
+        
+          January
+          February
+          March
+          April
+          May
+          June
+          July
+          August
+          September
+          October
+          November
+          December
+        
+        
+        
+      
 
-        
-          Statuses
-          
-            Selected
-            Default
-            Disabled
-          
-        
+      
+        Statuses
+        
+          Selected
+          Default
+          Disabled
+        
+      
 
-        
-          Currency
-          
-          
-        
+      
+        Currency
+        
+        
+      
 
-        Reset Gender
+      Reset Gender
 
-        
-      
+      
+    
 
     
   
 
+
 
-
-
-
diff --git a/core/src/components/select/test/standalone/index.html b/core/src/components/select/test/standalone/index.html
index 0ee7e77733..db01beecb7 100644
--- a/core/src/components/select/test/standalone/index.html
+++ b/core/src/components/select/test/standalone/index.html
@@ -6,6 +6,7 @@
   Select - Standalone
   
   
+  
 
 
 
diff --git a/core/src/components/show-when/show-when.tsx b/core/src/components/show-when/show-when.tsx
index 8698ef9fa9..0b8ae39c7f 100644
--- a/core/src/components/show-when/show-when.tsx
+++ b/core/src/components/show-when/show-when.tsx
@@ -5,7 +5,7 @@ import { DisplayWhen, PLATFORM_CONFIGS, PlatformConfig, detectPlatforms, updateT
 
 @Component({
   tag: 'ion-show-when',
-  styleUrl: './show-when.scss'
+  styleUrl: 'show-when.scss'
 })
 export class ShowWhen implements DisplayWhen {
 
diff --git a/core/src/components/show-when/test/basic/index.html b/core/src/components/show-when/test/basic/index.html
index 78351ef4a8..db4d39c1e8 100644
--- a/core/src/components/show-when/test/basic/index.html
+++ b/core/src/components/show-when/test/basic/index.html
@@ -6,93 +6,94 @@
   Show When - Basic
   
   
+  
 
 
 
   
 
-      
-        
-          Show when - Basic
-        
-      
+    
+      
+        Show when - Basic
+      
+    
 
-      
+    
 
-        
Mode Tests

-        
-          
Shows on MD, iOS

-        
+      
Mode Tests

+      
+        
Shows on MD, iOS

+      
 
-        
-          
Shows on MD only

-        
+      
+        
Shows on MD only

+      
 
-        
-          
Shows on iOS only

-        
+      
+        
Shows on iOS only

+      
 
-        
Orientation Tests

-        
-          
Shows on portrait orientation

-        
+      
Orientation Tests

+      
+        
Shows on portrait orientation

+      
 
-        
-          
Shows on landscape orientation

-        
+      
+        
Shows on landscape orientation

+      
 
-        
Platform Tests

+      
Platform Tests

 
-        
-          
Render on Android and iOS

-        
+      
+        
Render on Android and iOS

+      
 
-        
-          
Only render on iOS

-        
+      
+        
Only render on iOS

+      
 
-        
-          
Only render on Android

-        
+      
+        
Only render on Android

+      
 
-        
-          
Only render on ipad

-        
+      
+        
Only render on ipad

+      
 
-        
-          
Only render on phablet

-        
+      
+        
Only render on phablet

+      
 
-        
-          
Only render on phone

-        
+      
+        
Only render on phone

+      
 
-        
Size Tests

-        
-          
Only render on xs

-        
+      
Size Tests

+      
+        
Only render on xs

+      
 
-        
-          
Only render on sm

-        
+      
+        
Only render on sm

+      
 
-        
-          
Only render on md

-        
+      
+        
Only render on md

+      
 
-        
-          
Only render on lg

-        
+      
+        
Only render on lg

+      
 
-        
-          
Only render on xl

-        
+      
+        
Only render on xl

+      
 
-        
-          
Only render on XS or m

-        
+      
+        
Only render on XS or m

+      
 
-      
+    
 
 
   
diff --git a/core/src/components/show-when/test/preview/index.html b/core/src/components/show-when/test/preview/index.html
index 3e4f127100..8b9ea26391 100644
--- a/core/src/components/show-when/test/preview/index.html
+++ b/core/src/components/show-when/test/preview/index.html
@@ -6,93 +6,94 @@
   Show When
   
   
+  
 
 
 
   
 
-      
-        
-          Show when
-        
-      
+    
+      
+        Show when
+      
+    
 
-      
+    
 
-        
Mode Tests

-        
-          
Shows on MD, iOS

-        
+      
Mode Tests

+      
+        
Shows on MD, iOS

+      
 
-        
-          
Shows on MD only

-        
+      
+        
Shows on MD only

+      
 
-        
-          
Shows on iOS only

-        
+      
+        
Shows on iOS only

+      
 
-        
Orientation Tests

-        
-          
Shows on portrait orientation

-        
+      
Orientation Tests

+      
+        
Shows on portrait orientation

+      
 
-        
-          
Shows on landscape orientation

-        
+      
+        
Shows on landscape orientation

+      
 
-        
Platform Tests

+      
Platform Tests

 
-        
-          
Render on Android and iOS

-        
+      
+        
Render on Android and iOS

+      
 
-        
-          
Only render on iOS

-        
+      
+        
Only render on iOS

+      
 
-        
-          
Only render on Android

-        
+      
+        
Only render on Android

+      
 
-        
-          
Only render on ipad

-        
+      
+        
Only render on ipad

+      
 
-        
-          
Only render on phablet

-        
+      
+        
Only render on phablet

+      
 
-        
-          
Only render on phone

-        
+      
+        
Only render on phone

+      
 
-        
Size Tests

-        
-          
Only render on xs

-        
+      
Size Tests

+      
+        
Only render on xs

+      
 
-        
-          
Only render on sm

-        
+      
+        
Only render on sm

+      
 
-        
-          
Only render on md

-        
+      
+        
Only render on md

+      
 
-        
-          
Only render on lg

-        
+      
+        
Only render on lg

+      
 
-        
-          
Only render on xl

-        
+      
+        
Only render on xl

+      
 
-        
-          
Only render on XS or m

-        
+      
+        
Only render on XS or m

+      
 
-      
+    
 
 
   
diff --git a/core/src/components/skeleton-text/skeleton-text.ios.scss b/core/src/components/skeleton-text/skeleton-text.ios.scss
index 76ace01982..91d646f6b1 100644
--- a/core/src/components/skeleton-text/skeleton-text.ios.scss
+++ b/core/src/components/skeleton-text/skeleton-text.ios.scss
@@ -5,7 +5,7 @@
 // iOS Skeleton Text
 // --------------------------------------------------
 
-.skeleton-text-ios span {
+span {
   background-color: $skeleton-text-ios-bar-background-color;
   opacity: $skeleton-text-ios-bar-opacity;
 }
diff --git a/core/src/components/skeleton-text/skeleton-text.ios.vars.scss b/core/src/components/skeleton-text/skeleton-text.ios.vars.scss
index 419137d522..301e282b6c 100644
--- a/core/src/components/skeleton-text/skeleton-text.ios.vars.scss
+++ b/core/src/components/skeleton-text/skeleton-text.ios.vars.scss
@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Background color of the skeleton text bar
-$skeleton-text-ios-bar-background-color:    $text-ios-color !default;
+$skeleton-text-ios-bar-background-color:    $text-color !default;
 
 /// @prop - Opacity of the text bar for the skeleton text
 $skeleton-text-ios-bar-opacity:             .1 !default;
diff --git a/core/src/components/skeleton-text/skeleton-text.md.scss b/core/src/components/skeleton-text/skeleton-text.md.scss
index 41708d3686..d5b9f6f933 100644
--- a/core/src/components/skeleton-text/skeleton-text.md.scss
+++ b/core/src/components/skeleton-text/skeleton-text.md.scss
@@ -5,7 +5,7 @@
 // Material Design Skeleton Text
 // --------------------------------------------------
 
-.skeleton-text-md span {
+span {
   background-color: $skeleton-text-md-bar-background-color;
   opacity: $skeleton-text-md-bar-opacity;
 }
diff --git a/core/src/components/skeleton-text/skeleton-text.md.vars.scss b/core/src/components/skeleton-text/skeleton-text.md.vars.scss
index 3106d6e7ef..c8288f60e7 100644
--- a/core/src/components/skeleton-text/skeleton-text.md.vars.scss
+++ b/core/src/components/skeleton-text/skeleton-text.md.vars.scss
@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Background color of the skeleton text bar
-$skeleton-text-md-bar-background-color:     $text-md-color !default;
+$skeleton-text-md-bar-background-color:     $text-color !default;
 
 /// @prop - Opacity of the text bar for the skeleton text
 $skeleton-text-md-bar-opacity:              .1 !default;
diff --git a/core/src/components/skeleton-text/skeleton-text.scss b/core/src/components/skeleton-text/skeleton-text.scss
index 4347721dc9..c459908803 100644
--- a/core/src/components/skeleton-text/skeleton-text.scss
+++ b/core/src/components/skeleton-text/skeleton-text.scss
@@ -4,7 +4,7 @@
 // Skeleton Text
 // --------------------------------------------------
 
-ion-skeleton-text {
+:host {
   display: inline-block;
 
   width: 100%;
@@ -13,7 +13,7 @@ ion-skeleton-text {
   user-select: none;
 }
 
-ion-skeleton-text span {
+span {
   display: inline-block;
 
   font-size: 8px;
diff --git a/core/src/components/skeleton-text/skeleton-text.tsx b/core/src/components/skeleton-text/skeleton-text.tsx
index 9163a28082..dfecf5414f 100644
--- a/core/src/components/skeleton-text/skeleton-text.tsx
+++ b/core/src/components/skeleton-text/skeleton-text.tsx
@@ -6,9 +6,7 @@ import { Component, Prop } from '@stencil/core';
     ios: 'skeleton-text.ios.scss',
     md: 'skeleton-text.md.scss'
   },
-  host: {
-    theme: 'skeleton-text'
-  }
+  shadow: true
 })
 export class SkeletonText {
 
diff --git a/core/src/components/skeleton-text/test/basic/index.html b/core/src/components/skeleton-text/test/basic/index.html
index 7dcf3ec8f4..be3acbc108 100644
--- a/core/src/components/skeleton-text/test/basic/index.html
+++ b/core/src/components/skeleton-text/test/basic/index.html
@@ -1,11 +1,14 @@
 
 
+
 
   
   Skeleton Text - Basic
   
   
+  
 
+
 
   
   
@@ -13,7 +16,5 @@
   
   
 
+
 
-
-
-
diff --git a/core/src/components/skeleton-text/test/preview/index.html b/core/src/components/skeleton-text/test/preview/index.html
index acaae76cbf..d6b807b6fd 100644
--- a/core/src/components/skeleton-text/test/preview/index.html
+++ b/core/src/components/skeleton-text/test/preview/index.html
@@ -1,11 +1,14 @@
 
 
+
 
   
   Skeleton Text
   
   
+  
 
+
 
   
   
@@ -13,7 +16,5 @@
   
   
 
+
 
-
-
-
diff --git a/core/src/components/slide/slide.scss b/core/src/components/slide/slide.scss
index 3f394dbc06..a4330194a3 100644
--- a/core/src/components/slide/slide.scss
+++ b/core/src/components/slide/slide.scss
@@ -12,7 +12,7 @@ ion-slide {
 }
 
 .slide-zoom {
-  @include text-align(center);
+  text-align: center;
 
   display: block;
 
@@ -20,7 +20,7 @@ ion-slide {
 }
 
 .swiper-slide {
-  @include text-align(center);
+  text-align: center;
 
   box-sizing: border-box;
   position: relative;
diff --git a/core/src/components/slides/readme.md b/core/src/components/slides/readme.md
index 4df66643f2..f9360ad584 100644
--- a/core/src/components/slides/readme.md
+++ b/core/src/components/slides/readme.md
@@ -33,7 +33,14 @@ See http://idangero.us/swiper/api/ for valid options
 
 boolean
 
-Show or hide the pager
+If true, show the pagination. Defaults to `false`.
+
+
+#### scrollbar
+
+boolean
+
+If true, show the scrollbar. Defaults to `false`.
 
 
 ## Attributes
@@ -50,7 +57,14 @@ See http://idangero.us/swiper/api/ for valid options
 
 boolean
 
-Show or hide the pager
+If true, show the pagination. Defaults to `false`.
+
+
+#### scrollbar
+
+boolean
+
+If true, show the scrollbar. Defaults to `false`.
 
 
 ## Events
diff --git a/core/src/components/slides/slides-vendor.scss b/core/src/components/slides/slides-vendor.scss
index 5a62c704f1..7e0ebc8a25 100644
--- a/core/src/components/slides/slides-vendor.scss
+++ b/core/src/components/slides/slides-vendor.scss
@@ -272,8 +272,7 @@
   height: 8px;
   display: inline-block;
   border-radius: 100%;
-  background: #000;
-  opacity: 0.2;
+  background: rgba(0, 0, 0, .2);
 }
 button.swiper-pagination-bullet {
   border: none;
@@ -289,7 +288,6 @@ button.swiper-pagination-bullet {
   cursor: pointer;
 }
 .swiper-pagination-bullet-active {
-  opacity: 1;
   background: #007aff;
 }
 .swiper-container-vertical > .swiper-pagination-bullets {
diff --git a/core/src/components/slides/slides.ios.scss b/core/src/components/slides/slides.ios.scss
index c3b8f7d9b0..6ad4cfed8d 100644
--- a/core/src/components/slides/slides.ios.scss
+++ b/core/src/components/slides/slides.ios.scss
@@ -1,26 +1,14 @@
-@import "./slides-vendor";
+@import "./slides";
 @import "./slides.ios.vars";
 
-.slides-ios .swiper-pagination-bullet {
-  background-color: $slides-ios-bullet-background-color;
-}
+// iOS Slides
+// --------------------------------------------------
 
-.slides-ios .swiper-pagination-bullet-active {
-  background-color: $slides-ios-bullet-background-color-active;
-}
-
-.slides-ios .swiper-pagination-progress {
-  background-color: $slides-ios-progress-background-color;
-}
-
-.slides-ios .swiper-pagination-progress .swiper-pagination-progressbar {
-  background-color: $slides-ios-progress-bar-background-color;
-}
-
-.slides-ios .swiper-scrollbar {
-  background-color: $slides-ios-scroll-bar-background-color;
-}
-
-.slides-ios .swiper-scrollbar-drag {
-  background-color: $slides-ios-scroll-bar-drag-background-color;
+:host {
+  --bullet-background: #{$slides-ios-bullet-background};
+  --bullet-background-active: #{$slides-ios-bullet-background-active};
+  --progress-bar-background: #{$slides-ios-progress-bar-background};
+  --progress-bar-background-active: #{$slides-ios-progress-bar-background-active};
+  --scroll-bar-background: #{$slides-ios-scroll-bar-background};
+  --scroll-bar-background-active: #{$slides-ios-scroll-bar-drag-background};
 }
diff --git a/core/src/components/slides/slides.ios.vars.scss b/core/src/components/slides/slides.ios.vars.scss
index 3adc7fb33f..103cb67fe6 100644
--- a/core/src/components/slides/slides.ios.vars.scss
+++ b/core/src/components/slides/slides.ios.vars.scss
@@ -1,28 +1,28 @@
 @import "../../themes/ionic.globals.ios";
 
-/// @prop - Slides Bullet Background color
-$slides-ios-bullet-background-color:                    $text-ios-color-step-400 !default;
+/// @prop - Background color of the bullet
+$slides-ios-bullet-background:                    $text-color-step-800 !default;
 
-/// @prop - Slides Bullet Background color when Active
-$slides-ios-bullet-background-color-active:             ion-color($colors-ios, primary, base, ios) !default;
+/// @prop - Background color of the active bullet
+$slides-ios-bullet-background-active:             ion-color(primary, base) !default;
 
-/// @prop - Slides Progress indicator Background color alpha
-$slides-ios-progress-background-color-alpha:            .25 !default;
+/// @prop - Alpha to use for the background color of the progress bar
+$slides-ios-progress-bar-background-alpha:        .25 !default;
 
-/// @prop - Slides Progress indicator Background color
-$slides-ios-progress-background-color:                  css-var($text-ios-color-value, text-ios-color, $slides-ios-progress-background-color-alpha) !default;
+/// @prop - Background color of the progress bar
+$slides-ios-progress-bar-background:              rgba(var(--ion-text-color-rgb, $text-color-rgb), $slides-ios-progress-bar-background-alpha) !default;
 
-/// @prop - Slides Progress indicator bar Background color
-$slides-ios-progress-bar-background-color:              ion-color($colors-ios, primary, shade, ios) !default;
+/// @prop - Background color of the active progress bar
+$slides-ios-progress-bar-background-active:       ion-color(primary, shade) !default;
 
-/// @prop - Slides Scroll bar Background color alpha
-$slides-ios-scroll-bar-background-color-alpha:          .25 !default;
+/// @prop - Alpha to use for the background color of the scroll bar
+$slides-ios-scroll-bar-background-alpha:          .1 !default;
 
-/// @prop - Slides Scroll bar Background color
-$slides-ios-scroll-bar-background-color:                css-var($text-ios-color-value, text-ios-color, $slides-ios-scroll-bar-background-color-alpha) !default;
+/// @prop - Background color of the scroll bar
+$slides-ios-scroll-bar-background:                rgba(var(--ion-text-color-rgb, $text-color-rgb), $slides-ios-scroll-bar-background-alpha) !default;
 
-/// @prop - Slides Scroll bar drag handle Background color alpha
-$slides-ios-scroll-bar-drag-background-color-alpha:     .5 !default;
+/// @prop - Alpha to use for the background color of the scroll bar while dragging
+$slides-ios-scroll-bar-drag-background-alpha:     .5 !default;
 
-/// @prop - Slides Scroll bar drag handle Background color
-$slides-ios-scroll-bar-drag-background-color:           css-var($text-ios-color-value, text-ios-color, $slides-ios-scroll-bar-drag-background-color-alpha) !default;
+/// @prop - Background color of the scroll bar drag handle
+$slides-ios-scroll-bar-drag-background:           rgba(var(--ion-text-color-rgb, $text-color-rgb), $slides-ios-scroll-bar-drag-background-alpha) !default;
diff --git a/core/src/components/slides/slides.md.scss b/core/src/components/slides/slides.md.scss
index fb1703747e..d80f968bf4 100644
--- a/core/src/components/slides/slides.md.scss
+++ b/core/src/components/slides/slides.md.scss
@@ -1,26 +1,14 @@
-@import "./slides-vendor";
+@import "./slides";
 @import "./slides.md.vars";
 
-.slides-md .swiper-pagination-bullet {
-  background-color: $slides-md-bullet-background-color;
-}
+// Material Design Slides
+// --------------------------------------------------
 
-.slides-md .swiper-pagination-bullet-active {
-  background-color: $slides-md-bullet-background-color-active;
-}
-
-.slides-md .swiper-pagination-progress {
-  background-color: $slides-md-progress-background-color;
-}
-
-.slides-md .swiper-pagination-progress .swiper-pagination-progressbar {
-  background-color: $slides-md-progress-bar-background-color;
-}
-
-.slides-md .swiper-scrollbar {
-  background-color: $slides-md-scroll-bar-background-color;
-}
-
-.slides-md .swiper-scrollbar-drag {
-  background-color: $slides-md-scroll-bar-drag-background-color;
+:host {
+  --bullet-background: #{$slides-md-bullet-background};
+  --bullet-background-active: #{$slides-md-bullet-background-active};
+  --progress-bar-background: #{$slides-md-progress-bar-background};
+  --progress-bar-background-active: #{$slides-md-progress-bar-background-active};
+  --scroll-bar-background: #{$slides-md-scroll-bar-background};
+  --scroll-bar-background-active: #{$slides-md-scroll-bar-drag-background};
 }
diff --git a/core/src/components/slides/slides.md.vars.scss b/core/src/components/slides/slides.md.vars.scss
index dbf7494aa9..12635df4d6 100644
--- a/core/src/components/slides/slides.md.vars.scss
+++ b/core/src/components/slides/slides.md.vars.scss
@@ -1,28 +1,28 @@
 @import "../../themes/ionic.globals.md";
 
-/// @prop - Slides Bullet Background color
-$slides-md-bullet-background-color:                   $text-md-color-step-400 !default;
+/// @prop - Background color of the bullet
+$slides-md-bullet-background:                   $text-color-step-800 !default;
 
-/// @prop - Slides Bullet Background color when Active
-$slides-md-bullet-background-color-active:            ion-color($colors-md, primary, base, md) !default;
+/// @prop - Background color of the active bullet
+$slides-md-bullet-background-active:            ion-color(primary, base) !default;
 
-/// @prop - Slides Progress indicator Background color alpha
-$slides-md-progress-background-color-alpha:           .25 !default;
+/// @prop - Alpha to use for the background color of the progress bar
+$slides-md-progress-bar-background-alpha:       .25 !default;
 
-/// @prop - Slides Progress indicator Background color
-$slides-md-progress-background-color:                 css-var($text-md-color-value, text-md-color, $slides-md-progress-background-color-alpha) !default;
+/// @prop - Background color of the progress
+$slides-md-progress-bar-background:             rgba(var(--ion-text-color-rgb, $text-color-rgb), $slides-md-progress-bar-background-alpha) !default;
 
-/// @prop - Slides Progress indicator bar Background color
-$slides-md-progress-bar-background-color:             ion-color($colors-md, primary, shade, md) !default;
+/// @prop - Background color of the progress bar
+$slides-md-progress-bar-background-active:      ion-color(primary, shade) !default;
 
-/// @prop - Slides Scroll bar Background color alpha
-$slides-md-scroll-bar-background-color-alpha:         .25 !default;
+/// @prop - Alpha to use for the background color of the scroll bar
+$slides-md-scroll-bar-background-alpha:         .1 !default;
 
-/// @prop - Slides Scroll bar Background color
-$slides-md-scroll-bar-background-color:               css-var($text-md-color-value, text-md-color, $slides-md-scroll-bar-background-color-alpha) !default;
+/// @prop - Background color of the scroll bar
+$slides-md-scroll-bar-background:               rgba(var(--ion-text-color-rgb, $text-color-rgb), $slides-md-scroll-bar-background-alpha) !default;
 
-/// @prop - Slides Scroll bar drag handle Background color alpha
-$slides-md-scroll-bar-drag-background-color-alpha:    .5 !default;
+/// @prop - Alpha to use for the background color of the scroll bar while dragging
+$slides-md-scroll-bar-drag-background-alpha:    .5 !default;
 
-/// @prop - Slides Scroll bar drag handle Background color
-$slides-md-scroll-bar-drag-background-color:          css-var($text-md-color-value, text-md-color, $slides-md-scroll-bar-drag-background-color-alpha) !default;
+/// @prop - Background color of the scroll bar drag handle
+$slides-md-scroll-bar-drag-background:          rgba(var(--ion-text-color-rgb, $text-color-rgb), $slides-md-scroll-bar-drag-background-alpha) !default;
diff --git a/core/src/components/slides/slides.scss b/core/src/components/slides/slides.scss
index 0baa29555a..082d430586 100644
--- a/core/src/components/slides/slides.scss
+++ b/core/src/components/slides/slides.scss
@@ -4,6 +4,41 @@
 // Slides
 // --------------------------------------------------
 
-ion-slides {
+:host {
   display: block;
 }
+
+
+// Pagination Bullets
+// --------------------------------------------------
+
+.swiper-pagination-bullet {
+  background: var(--bullet-background);
+}
+
+.swiper-pagination-bullet-active {
+  background: var(--bullet-background-active);
+}
+
+
+// Pagination Progress Bar
+// --------------------------------------------------
+
+.swiper-pagination-progressbar {
+  background: var(--progress-bar-background);
+}
+
+.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
+  background: var(--progress-bar-background-active);
+}
+
+// Scrollbar
+// --------------------------------------------------
+
+.swiper-scrollbar {
+  background: var(--scroll-bar-background);
+}
+
+.swiper-scrollbar-drag {
+  background: var(--scroll-bar-background-active);
+}
\ No newline at end of file
diff --git a/core/src/components/slides/slides.tsx b/core/src/components/slides/slides.tsx
index f984f7e76e..773f1142a5 100644
--- a/core/src/components/slides/slides.tsx
+++ b/core/src/components/slides/slides.tsx
@@ -1,21 +1,24 @@
 import { Component, Element, Event, EventEmitter, Method, Prop, Watch } from '@stencil/core';
+import { Mode } from '../../interface.js';
+import { createThemedClasses } from '../../utils/theme.js';
 import { Swiper }  from './vendor/swiper.js';
+
 @Component({
   tag: 'ion-slides',
   styleUrls: {
     ios: 'slides.ios.scss',
     md: 'slides.md.scss'
   },
-  host: {
-    theme: 'slides'
-  },
-  assetsDir: 'vendor'
+  assetsDir: 'vendor',
+  shadow: true
 })
 export class Slides {
   private container!: HTMLElement;
   private swiper: any;
 
-  @Element() el!: HTMLElement;
+  mode!: Mode;
+
+  @Element() el!: HTMLStencilElement;
 
   /**
    * Emitted before the active slide has changed.
@@ -96,9 +99,14 @@ export class Slides {
   }
 
   /**
-   * Show or hide the pager
+   * If true, show the pagination. Defaults to `false`.
    */
-  @Prop() pager = true;
+  @Prop() pager = false;
+
+  /**
+   * If true, show the scrollbar. Defaults to `false`.
+   */
+  @Prop() scrollbar = false;
 
   componentDidLoad() {
     setTimeout(this.initSlides.bind(this), 10);
@@ -110,7 +118,7 @@ export class Slides {
 
   private initSlides() {
     console.debug(`ion-slides, init`);
-    this.container = this.el.children[0] as HTMLElement;
+    this.container = (this.el.shadowRoot || this.el).querySelector('.swiper-container') as HTMLElement;
     const finalOptions = this.normalizeOptions();
     // init swiper core
     this.swiper = new Swiper(this.container, finalOptions);
@@ -247,9 +255,15 @@ export class Slides {
       initialSlide: 0,
       loop: false,
       pager: false,
-      pagination: '.swiper-pagination',
-      paginationType: 'bullets',
+      pagination: {
+        el: '.swiper-pagination',
+        type: 'bullets',
+      },
       parallax: false,
+      scrollbar: {
+        el: '.swiper-scrollbar',
+        hide: true,
+      },
       slidesPerView: 1,
       spaceBetween: 0,
       speed: 300,
@@ -352,18 +366,20 @@ export class Slides {
     return Object.assign({}, swiperOptions, this.options, eventOptions);
   }
 
+  hostData() {
+    return {
+      class: createThemedClasses(this.mode, 'slides')
+    };
+  }
+
   render() {
     return (
-      

+      
 this.container = el as HTMLElement }>
         

-          
+          
         

-        

+        { this.pager ? 
 : null }
+        { this.scrollbar ? 
 : null }
       

     );
   }
diff --git a/core/src/components/slides/test/app-intro/index.html b/core/src/components/slides/test/app-intro/index.html
index 86503a9819..4fd948ac14 100644
--- a/core/src/components/slides/test/app-intro/index.html
+++ b/core/src/components/slides/test/app-intro/index.html
@@ -7,6 +7,7 @@
 
   
   
+  
 
   
 
 
 
   
 
-      
-        
-          
-            Prev
-          
-          
-            Next
-          
-        
-      
-      
-        
+    
+      
+        
+          Prev
+        
+        
+          Next
+        
+      
+    
+    
+      
 
-          
-            
-            

-              

-                Welcome to ICA
-              

-              

-                The ionic conference app is a practical preview of the ionic framework in action, and a demonstration of proper code use.
-              

-            

-          
+        
+          
+          

+            

+              Welcome to
+              ICA
+            

+            

+              The
+              ionic conference app is a practical preview of the ionic framework in action, and a demonstration of proper
+              code use.
+            

+          

+        
 
-          
-            
-            

-              
What is Ionic?

-              
Ionic Framework is an open source SDK that enables developers to build high quality mobile apps with web technologies like HTML, CSS, and JavaScript.

-            

-          
+        
+          
+          

+            
What is Ionic?

+            

+              Ionic Framework is an open source SDK that enables developers to build high quality mobile apps with web
+              technologies like HTML, CSS, and JavaScript.

+          

+        
 
-          
-            
-            

-              
What is Ionic Pro?

-              
Ionic Pro is a powerful set of services and features built on top of Ionic Framework that brings a totally new level of app development agility to mobile dev teams.

-            

-          
+        
+          
+          

+            
What is Ionic Pro?

+            

+              Ionic Pro is a powerful set of services and features built on top of Ionic Framework that brings a totally
+              new level of app development agility to mobile dev teams.

+          

+        
 
-          
-            
-            
-              Back to the start
-            
-          
-        
-      
+        
+          
+          
+            Back to the start
+          
+        
+      
+    
 
   
   
+  
   
 
 
 
   
 
-      
-        
-          
-            
Slide 1

-          
-          
-            
Slide 2

-          
-          
-            
Slide 3

-          
-        
-        Slide Prev
-        Slide Next
-        Get Active Index
-        Get Previous Index
+    
+      
+        
+          
Slide 1

+        
+        
+          
Slide 2

+        
+        
+          
Slide 3

+        
+      
+      Slide Prev
+      Slide Next
+      Get Active Index
+      Get Previous Index
 
-        Is the End?
-        Is the beginning?
+      Is the End?
+      Is the beginning?
 
-        Slide to slide index 2
-        Get slide length
-        Start auto play
-        Stop auto play
-        Set options
-      
+      Slide to slide index 2
+      Get slide length
+      Start auto play
+      Stop auto play
+      Set options
+    
 
   
   
diff --git a/core/src/components/slides/test/pagination/index.html b/core/src/components/slides/test/pagination/index.html
new file mode 100644
index 0000000000..c9c643a6b1
--- /dev/null
+++ b/core/src/components/slides/test/pagination/index.html
@@ -0,0 +1,138 @@
+
+
+
+
+  
+  Slides - Pagination
+
+  
+  
+  
+
+
+
+  
+
+    
+      
+        
+          
Default Slides

+        
+        
+          
Slide 2

+        
+        
+          
Slide 3

+        
+      
+
+      
+        
+          
Bullet Pagination

+        
+        
+          
Slide 2

+        
+        
+          
Slide 3

+        
+      
+
+      
+        
+          
Custom Bullet Pagination

+        
+        
+          
Slide 2

+        
+        
+          
Slide 3

+        
+      
+
+      
+        
+          
Progress Pagination

+        
+        
+          
Slide 2

+        
+        
+          
Slide 3

+        
+      
+
+      
+        
+          
Custom Progress Pagination

+        
+        
+          
Slide 2

+        
+        
+          
Slide 3

+        
+      
+
+      
+        
+          
Fraction Pagination

+        
+        
+          
Slide 2

+        
+        
+          
Slide 3

+        
+      
+    
+  
+
+  
+
+  
+
+
+
diff --git a/core/src/components/slides/test/preview/index.html b/core/src/components/slides/test/preview/index.html
index b1e285975b..4c900eaf06 100644
--- a/core/src/components/slides/test/preview/index.html
+++ b/core/src/components/slides/test/preview/index.html
@@ -7,42 +7,44 @@
 
   
   
+  
   
 
 
 
   
 
-      
-        
-          
-            
Slide 1

-          
-          
-            
Slide 2

-          
-          
-            
Slide 3

-          
-        
-        Slide Prev
-        Slide Next
-        Get Active Index
-        Get Previous Index
+    
+      
+        
+          
Slide 1

+        
+        
+          
Slide 2

+        
+        
+          
Slide 3

+        
+      
+      Slide Prev
+      Slide Next
+      Get Active Index
+      Get Previous Index
 
-        Is the End?
-        Is the beginning?
+      Is the End?
+      Is the beginning?
 
-        Slide to slide index 2
-        Get slide length
-        Start auto play
-        Stop auto play
-        Set options
-      
+      Slide to slide index 2
+      Get slide length
+      Start auto play
+      Stop auto play
+      Set options
+    
 
   
   
diff --git a/core/src/components/slides/test/scrollbar/index.html b/core/src/components/slides/test/scrollbar/index.html
new file mode 100644
index 0000000000..d7f3db00dc
--- /dev/null
+++ b/core/src/components/slides/test/scrollbar/index.html
@@ -0,0 +1,98 @@
+
+
+
+
+  
+  Slides - Scrollbar
+
+  
+  
+  
+
+
+
+  
+
+    
+      
+        
+          
Default Slides

+        
+        
+          
Slide 2

+        
+        
+          
Slide 3

+        
+      
+
+      
+        
+          
Scrollbar

+        
+        
+          
Slide 2

+        
+        
+          
Slide 3

+        
+      
+
+      
+        
+          
Visible Scrollbar

+        
+        
+          
Slide 2

+        
+        
+          
Slide 3

+        
+      
+
+      
+        
+          
Custom Visible Scrollbar

+        
+        
+          
Slide 2

+        
+        
+          
Slide 3

+        
+      
+    
+  
+
+  
+
+  
+
+
+
diff --git a/core/src/components/slides/test/standalone/index.html b/core/src/components/slides/test/standalone/index.html
index 431072192f..b0ca37a765 100644
--- a/core/src/components/slides/test/standalone/index.html
+++ b/core/src/components/slides/test/standalone/index.html
@@ -6,6 +6,7 @@
   Slides - Standalone
   
   
+  
 
 
 
diff --git a/core/src/components/slides/vendor/swiper.js b/core/src/components/slides/vendor/swiper.js
index 29c1babba5..c7d253b7d7 100644
--- a/core/src/components/slides/vendor/swiper.js
+++ b/core/src/components/slides/vendor/swiper.js
@@ -1501,7 +1501,13 @@ var Swiper;
     var swiperSize = swiper.size;
     var rtl = swiper.rtlTranslate;
     var wrongRTL = swiper.wrongRTL;
-    var slides = $wrapperEl.children('.' + swiper.params.slideClass);
+
+    // Ionic hack to work with shadow
+    var children = $wrapperEl[0].querySelector('slot') && $wrapperEl[0].querySelector('slot').assignedNodes();
+    children = children && $(children.filter(child => child.classList && child.classList.contains(swiper.params.slideClass)));
+
+    var slides = children || $wrapperEl.children('.' + swiper.params.slideClass);
+
     var isVirtual = swiper.virtual && params.virtual.enabled;
     var slidesLength = isVirtual ? swiper.virtual.slides.length : slides.length;
     var snapGrid = [];
@@ -6154,7 +6160,8 @@ var Swiper;
         return;
       }
 
-      var $el = $(params.el);
+      // Ionic hack to get the pagination element
+      var $el = $(this.el.querySelector(params.el)) || $(params.el);
       if ($el.length === 0) {
         return;
       }
@@ -6705,7 +6712,8 @@ var Swiper;
       var $swiperEl = swiper.$el;
       var params = swiper.params.scrollbar;
 
-      var $el = $(params.el);
+      // Ionic hack to work with shadow
+      var $el = $(this.el.querySelector(params.el)) || $(params.el);
       if (
         swiper.params.uniqueNavElements &&
         typeof params.el === 'string' &&
diff --git a/core/src/components/spinner/spinner.ios.scss b/core/src/components/spinner/spinner.ios.scss
index e257d36c2c..3a9c5bcff6 100644
--- a/core/src/components/spinner/spinner.ios.scss
+++ b/core/src/components/spinner/spinner.ios.scss
@@ -4,46 +4,22 @@
 // iOS Spinner
 // --------------------------------------------------
 
-.spinner-lines-ios line,
-.spinner-lines-small-ios line {
-  stroke: $spinner-ios-lines-color;
+:host(.spinner-lines) {
+  --ion-color-base: #{$spinner-ios-lines-color};
 }
 
-.spinner-bubbles-ios circle {
-  fill: $spinner-ios-bubbles-color;
+:host(.spinner-bubbles) {
+  --ion-color-base: #{$spinner-ios-bubbles-color};
 }
 
-.spinner-circles-ios circle {
-  fill: $spinner-ios-circles-color;
+:host(.spinner-circles) {
+  --ion-color-base: #{$spinner-ios-circles-color};
 }
 
-.spinner-crescent-ios circle {
-  stroke: $spinner-ios-crescent-color;
+:host(.spinner-crescent) {
+  --ion-color-base: #{$spinner-ios-crescent-color};
 }
 
-.spinner-dots-ios circle {
-  fill: $spinner-ios-dots-color;
-}
-
-
-// Generate iOS Spinner Colors
-// --------------------------------------------------
-
-@each $color-name, $color-value in $colors-ios {
-  $color-base: ion-color($colors-ios, $color-name, base, ios);
-
-  .spinner-ios-#{$color-name} {
-
-    &.spinner-lines line,
-    &.spinner-lines-small line,
-    &.spinner-crescent circle {
-      stroke: $color-base;
-    }
-
-    &.spinner-bubbles circle,
-    &.spinner-circles circle,
-    &.spinner-dots circle {
-      fill: $color-base;
-    }
-  }
+:host(.spinner-dots) {
+  --ion-color-base: #{$spinner-ios-dots-color};
 }
diff --git a/core/src/components/spinner/spinner.ios.vars.scss b/core/src/components/spinner/spinner.ios.vars.scss
index 99bdd81f27..09aa8d21cb 100644
--- a/core/src/components/spinner/spinner.ios.vars.scss
+++ b/core/src/components/spinner/spinner.ios.vars.scss
@@ -4,16 +4,16 @@
 // --------------------------------------------------
 
 /// @prop - Color of the lines spinner
-$spinner-ios-lines-color:          $text-ios-color-step-400 !default;
+$spinner-ios-lines-color:          $text-color-step-400 !default;
 
 /// @prop - Color of the bubbles spinner
-$spinner-ios-bubbles-color:        $text-ios-color !default;
+$spinner-ios-bubbles-color:        $text-color !default;
 
 /// @prop - Color of the circles spinner
-$spinner-ios-circles-color:        $text-ios-color-step-400 !default;
+$spinner-ios-circles-color:        $text-color-step-400 !default;
 
 /// @prop - Color of the crescent spinner
-$spinner-ios-crescent-color:       $text-ios-color !default;
+$spinner-ios-crescent-color:       $text-color !default;
 
 /// @prop - Color of the dots spinner
-$spinner-ios-dots-color:           $text-ios-color-step-300 !default;
+$spinner-ios-dots-color:           $text-color-step-300 !default;
diff --git a/core/src/components/spinner/spinner.md.scss b/core/src/components/spinner/spinner.md.scss
index d61e170c9c..44d9bd6a7d 100644
--- a/core/src/components/spinner/spinner.md.scss
+++ b/core/src/components/spinner/spinner.md.scss
@@ -4,46 +4,22 @@
 // Material Design Spinner
 // --------------------------------------------------
 
-.spinner-lines-md line,
-.spinner-lines-small-md line {
-  stroke: $spinner-md-lines-color;
+:host(.spinner-lines-md) {
+  --ion-color-base: #{$spinner-md-lines-color};
 }
 
-.spinner-bubbles-md circle {
-  fill: $spinner-md-bubbles-color;
+:host(.spinner-bubbles) {
+  --ion-color-base: #{$spinner-md-bubbles-color};
 }
 
-.spinner-circles-md circle {
-  fill: $spinner-md-circles-color;
+:host(.spinner-circles) {
+  --ion-color-base: #{$spinner-md-circles-color};
 }
 
-.spinner-crescent-md circle {
-  stroke: $spinner-md-crescent-color;
+:host(.spinner-crescent) {
+  --ion-color-base: #{$spinner-md-crescent-color};
 }
 
-.spinner-dots-md circle {
-  fill: $spinner-md-dots-color;
-}
-
-
-// Generate Material Design Spinner Colors
-// --------------------------------------------------
-
-@each $color-name, $color-value in $colors-md {
-  $color-base: ion-color($colors-md, $color-name, base, md);
-
-  .spinner-md-#{$color-name} {
-
-    &.spinner-lines line,
-    &.spinner-lines-small line,
-    &.spinner-crescent circle {
-      stroke: $color-base;
-    }
-
-    &.spinner-bubbles circle,
-    &.spinner-circles circle,
-    &.spinner-dots circle {
-      fill: $color-base;
-    }
-  }
+:host(.spinner-dots) {
+  --ion-color-base: #{$spinner-md-dots-color};
 }
diff --git a/core/src/components/spinner/spinner.md.vars.scss b/core/src/components/spinner/spinner.md.vars.scss
index 61a58cbcce..747c0131d9 100644
--- a/core/src/components/spinner/spinner.md.vars.scss
+++ b/core/src/components/spinner/spinner.md.vars.scss
@@ -4,16 +4,16 @@
 // --------------------------------------------------
 
 /// @prop - Color of the lines spinner
-$spinner-md-lines-color:          $text-md-color-step-400 !default;
+$spinner-md-lines-color:          $text-color-step-400 !default;
 
 /// @prop - Color of the bubbles spinner
-$spinner-md-bubbles-color:        $text-md-color !default;
+$spinner-md-bubbles-color:        $text-color !default;
 
 /// @prop - Color of the circles spinner
-$spinner-md-circles-color:        $text-md-color-step-400 !default;
+$spinner-md-circles-color:        $text-color-step-400 !default;
 
 /// @prop - Color of the crescent spinner
-$spinner-md-crescent-color:       $text-md-color !default;
+$spinner-md-crescent-color:       $text-color !default;
 
 /// @prop - Color of the dots spinner
-$spinner-md-dots-color:           $text-md-color-step-300 !default;
+$spinner-md-dots-color:           $text-color-step-300 !default;
diff --git a/core/src/components/spinner/spinner.scss b/core/src/components/spinner/spinner.scss
index 730040f91c..463146ebc1 100644
--- a/core/src/components/spinner/spinner.scss
+++ b/core/src/components/spinner/spinner.scss
@@ -3,15 +3,19 @@
 // Spinners
 // --------------------------------------------------
 
-ion-spinner {
+:host {
   position: relative;
   display: inline-block;
 
   width: 28px;
   height: 28px;
+
+  color: #{current-color(base)};
+
+  --ion-color-base: currentColor;
 }
 
-ion-spinner svg {
+svg {
   @include position(0, null, null, 0);
 
   position: absolute;
@@ -22,7 +26,7 @@ ion-spinner svg {
   transform: translateZ(0);
 }
 
-ion-spinner.spinner-paused svg {
+:host(.spinner-paused) svg {
   animation-play-state: paused;
 }
 
@@ -30,14 +34,15 @@ ion-spinner.spinner-paused svg {
 // Spinner: lines / lines-small
 // --------------------------------------------------
 
-.spinner-lines line,
-.spinner-lines-small line {
+:host(.spinner-lines) line,
+:host(.spinner-lines-small) line {
   stroke-width: 4px;
   stroke-linecap: round;
+  stroke: currentColor;
 }
 
-.spinner-lines svg,
-.spinner-lines-small svg {
+:host(.spinner-lines) svg,
+:host(.spinner-lines-small) svg {
   animation: spinner-fade-out 1s linear infinite;
 }
 
@@ -45,30 +50,34 @@ ion-spinner.spinner-paused svg {
 // Spinner: bubbles
 // --------------------------------------------------
 
-.spinner-bubbles svg {
+:host(.spinner-bubbles) svg {
   animation: spinner-scale-out 1s linear infinite;
+  fill: currentColor;
 }
 
 
 // Spinner: circles
 // --------------------------------------------------
 
-.spinner-circles svg {
+:host(.spinner-circles) svg {
   animation: spinner-fade-out 1s linear infinite;
+  fill: currentColor;
 }
 
 
 // Spinner: crescent
 // --------------------------------------------------
 
-.spinner-crescent circle {
+:host(.spinner-crescent) circle {
   fill: transparent;
   stroke-width: 4px;
   stroke-dasharray: 128px;
   stroke-dashoffset: 82px;
+
+  stroke: currentColor;
 }
 
-.spinner-crescent svg {
+:host(.spinner-crescent) svg {
   animation: spinner-rotate 1s linear infinite;
 }
 
@@ -76,11 +85,12 @@ ion-spinner.spinner-paused svg {
 // Spinner: dots
 // --------------------------------------------------
 
-.spinner-dots circle {
+:host(.spinner-dots) circle {
   stroke-width: 0;
+  fill: currentColor;
 }
 
-.spinner-dots svg {
+:host(.spinner-dots) svg {
   @include transform-origin(center);
 
   animation: spinner-dots 1s linear infinite;
diff --git a/core/src/components/spinner/spinner.tsx b/core/src/components/spinner/spinner.tsx
index 2ab9bcc1fd..234444f442 100644
--- a/core/src/components/spinner/spinner.tsx
+++ b/core/src/components/spinner/spinner.tsx
@@ -1,6 +1,6 @@
 import { Component, Prop } from '@stencil/core';
 import { Color, Config, Mode } from '../../interface';
-import { createThemedClasses } from '../../utils/theme';
+import { createColorClasses } from '../../utils/theme';
 import { SPINNERS, SpinnerConfig } from './spinner-configs';
 
 
@@ -10,9 +10,7 @@ import { SPINNERS, SpinnerConfig } from './spinner-configs';
     ios: 'spinner.ios.scss',
     md: 'spinner.md.scss'
   },
-  host: {
-    theme: 'spinner'
-  }
+  shadow: true
 })
 export class Spinner {
   @Prop({ context: 'config' }) config!: Config;
@@ -70,15 +68,13 @@ export class Spinner {
   }
 
   hostData() {
-    const themedClasses = createThemedClasses(this.mode, this.color, `spinner spinner-${this.getName()}`);
-
-    const spinnerClasses = {
-      ...themedClasses,
-      'spinner-paused': this.paused
-    };
-
     return {
-      class: spinnerClasses
+      class: {
+        ...createColorClasses(this.color),
+
+        [`spinner-${this.getName()}`]: true,
+        'spinner-paused': this.paused
+      }
     };
   }
 
@@ -86,9 +82,7 @@ export class Spinner {
     const name = this.getName();
 
     const spinner = SPINNERS[name] || SPINNERS['lines'];
-
     const duration = (typeof this.duration === 'number' && this.duration > 10 ? this.duration : spinner.dur);
-
     const svgs: any[] = [];
 
     if (spinner.circles) {
diff --git a/core/src/components/spinner/test/basic/index.html b/core/src/components/spinner/test/basic/index.html
index 07b0281b52..9c8ec5d39f 100644
--- a/core/src/components/spinner/test/basic/index.html
+++ b/core/src/components/spinner/test/basic/index.html
@@ -1,60 +1,64 @@
 
 
+
 
   
   Spinner - Basic
   
   
+  
 
+
 
   
 
-      
-        
-          Spinner - Basic
-        
-      
+    
+      
+        Spinner - Basic
+      
+    
 
-      
-        
-          
-            Spinner Loading Indicators
-          
-          
-            
-            Show Default Spinner
-          
-          
-            
-            Show Lines
-          
-          
-            
-            Show Lines Small
-          
-          
-            
-            Show Dots
-          
-          
-            
-            Show Bubbles
-          
-          
-            
-            Show Circles
-          
-          
-            
-            Show Crescent
-          
-          
-            
-            Show Paused Default Spinner
-          
-        
-      
+    
+      
+        
+          Spinner Loading Indicators
+        
+        
+          
+          Show Default Spinner
+        
+        
+          
+          Show Lines
+        
+        
+          
+          Show Lines Small
+        
+        
+          
+          Show Dots
+        
+        
+          
+          Show Bubbles
+        
+        
+          
+          Show Circles
+        
+        
+          
+          Show Crescent
+        
+        
+          
+          Show Paused Default Spinner
+        
+      
+    
 
   
 
+
 
diff --git a/core/src/components/spinner/test/color/index.html b/core/src/components/spinner/test/color/index.html
index 45a89bd96d..52600e3756 100644
--- a/core/src/components/spinner/test/color/index.html
+++ b/core/src/components/spinner/test/color/index.html
@@ -1,60 +1,64 @@
 
 
+
 
   
   Spinner - Color
   
   
+  
 
+
 
   
 
-      
-        
-          Spinner - Color
-        
-      
+    
+      
+        Spinner - Color
+      
+    
 
-      
-        
-          
-            Spinner Loading Indicators
-          
-          
-            
-            Show Default Spinner
-          
-          
-            
-            Show Lines (Primary)
-          
-          
-            
-            Show Lines Small (Secondary)
-          
-          
-            
-            Show Dots (Danger)
-          
-          
-            
-            Show Bubbles (Light)
-          
-          
-            
-            Show Circles (Dark)
-          
-          
-            
-            Show Crescent (Primary)
-          
-          
-            
-            Show Paused Default Spinner (Secondary)
-          
-        
-      
+    
+      
+        
+          Spinner Loading Indicators
+        
+        
+          
+          Show Default Spinner
+        
+        
+          
+          Show Lines (Primary)
+        
+        
+          
+          Show Lines Small (Secondary)
+        
+        
+          
+          Show Dots (Danger)
+        
+        
+          
+          Show Bubbles (Light)
+        
+        
+          
+          Show Circles (Dark)
+        
+        
+          
+          Show Crescent (Primary)
+        
+        
+          
+          Show Paused Default Spinner (Secondary)
+        
+      
+    
 
   
 
+
 
diff --git a/core/src/components/spinner/test/preview/index.html b/core/src/components/spinner/test/preview/index.html
index 2a2c9084fa..2906600f3c 100644
--- a/core/src/components/spinner/test/preview/index.html
+++ b/core/src/components/spinner/test/preview/index.html
@@ -1,60 +1,64 @@
 
 
+
 
   
   Spinner
   
   
+  
 
+
 
   
 
-      
-        
-          Spinner
-        
-      
+    
+      
+        Spinner
+      
+    
 
-      
-        
-          
-            Spinner Loading Indicators
-          
-          
-            
-            Show Default Spinner
-          
-          
-            
-            Show Lines
-          
-          
-            
-            Show Lines Small
-          
-          
-            
-            Show Dots
-          
-          
-            
-            Show Bubbles
-          
-          
-            
-            Show Circles
-          
-          
-            
-            Show Crescent
-          
-          
-            
-            Show Paused Default Spinner
-          
-        
-      
+    
+      
+        
+          Spinner Loading Indicators
+        
+        
+          
+          Show Default Spinner
+        
+        
+          
+          Show Lines
+        
+        
+          
+          Show Lines Small
+        
+        
+          
+          Show Dots
+        
+        
+          
+          Show Bubbles
+        
+        
+          
+          Show Circles
+        
+        
+          
+          Show Crescent
+        
+        
+          
+          Show Paused Default Spinner
+        
+      
+    
 
   
 
+
 
diff --git a/core/src/components/spinner/test/standalone/index.html b/core/src/components/spinner/test/standalone/index.html
index 71c4bbab69..3f25cbd4be 100644
--- a/core/src/components/spinner/test/standalone/index.html
+++ b/core/src/components/spinner/test/standalone/index.html
@@ -6,6 +6,7 @@
   Spinner - Standalone
   
   
+  
 
 
 
diff --git a/core/src/components/split-pane/split-pane.scss b/core/src/components/split-pane/split-pane.scss
index 86dc715527..2ee1d25d41 100644
--- a/core/src/components/split-pane/split-pane.scss
+++ b/core/src/components/split-pane/split-pane.scss
@@ -43,23 +43,6 @@
   display: none;
 }
 
-.split-pane-visible > ion-menu {
-  > .menu-inner {
-    @include position-horizontal(0, 0);
-
-    // scss-lint:disable ImportantRule
-    width: auto;
-
-    box-shadow: none !important;
-    transform: none !important;
-  }
-
-  > .ion-backdrop {
-    // scss-lint:disable ImportantRule
-    display: hidden !important;
-  }
-}
-
 .split-pane-visible > .split-pane-side[side=start] {
   @include multi-dir() {
     order: -1;
diff --git a/core/src/components/split-pane/split-pane.tsx b/core/src/components/split-pane/split-pane.tsx
index 337ba5b413..d53b79e348 100644
--- a/core/src/components/split-pane/split-pane.tsx
+++ b/core/src/components/split-pane/split-pane.tsx
@@ -1,4 +1,6 @@
 import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
+import { Mode } from '../../interface';
+import { createThemedClasses } from '../../utils/theme';
 
 const SPLIT_PANE_MAIN = 'split-pane-main';
 const SPLIT_PANE_SIDE = 'split-pane-side';
@@ -17,15 +19,14 @@ const QUERY: { [key: string]: string }  = {
   styleUrls: {
     ios: 'split-pane.ios.scss',
     md: 'split-pane.md.scss'
-  },
-  host: {
-    theme: 'split-pane'
   }
 })
 export class SplitPane {
 
   private rmL: any;
 
+  mode!: Mode;
+
   @Element() el!: HTMLElement;
   @State() visible = false;
 
@@ -155,6 +156,7 @@ export class SplitPane {
   hostData() {
     return {
       class: {
+        ...createThemedClasses(this.mode, 'split-pane'),
         'split-pane-visible': this.visible
       }
     };
diff --git a/core/src/components/split-pane/test/basic/index.html b/core/src/components/split-pane/test/basic/index.html
index 5ffe8cda22..a241a7649e 100644
--- a/core/src/components/split-pane/test/basic/index.html
+++ b/core/src/components/split-pane/test/basic/index.html
@@ -6,6 +6,7 @@
   Split Pane - Basic
   
   
+  
 
 
 
@@ -52,7 +53,9 @@
 
             
               
-                
+                
+                  
+                
               
             
 
@@ -105,6 +108,8 @@
     f:last-child {
       background-color: red;
     }
+
   
 
+
 
diff --git a/core/src/components/split-pane/test/preview/index.html b/core/src/components/split-pane/test/preview/index.html
index af858663b5..50f44b33d8 100644
--- a/core/src/components/split-pane/test/preview/index.html
+++ b/core/src/components/split-pane/test/preview/index.html
@@ -6,6 +6,7 @@
   Split Pane
   
   
+  
 
 
 
@@ -52,7 +53,9 @@
 
             
               
-                
+                
+                  
+                
               
             
 
@@ -105,6 +108,8 @@
     f:last-child {
       background-color: red;
     }
+
   
 
+
 
diff --git a/core/src/components/status-tap/readme.md b/core/src/components/status-tap/readme.md
deleted file mode 100644
index f1285fc3a0..0000000000
--- a/core/src/components/status-tap/readme.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# ion-status-tap
-
-
-
-
-
-
-## Properties
-
-#### duration
-
-number
-
-How long the scrolling action should take.
-
-
-## Attributes
-
-#### duration
-
-number
-
-How long the scrolling action should take.
-
-
-
-----------------------------------------------
-
-*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/core/src/components/status-tap/status-tap.tsx b/core/src/components/status-tap/status-tap.tsx
deleted file mode 100644
index 3c6af33440..0000000000
--- a/core/src/components/status-tap/status-tap.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { Component, Listen, Prop } from '@stencil/core';
-import { QueueController } from '../../interface';
-
-/** @hidden */
-@Component({
-  tag: 'ion-status-tap'
-})
-export class StatusTap {
-
-  @Prop({ context: 'queue' }) queue!: QueueController;
-  @Prop({ context: 'window' }) win!: Window;
-
-  /** How long the scrolling action should take. */
-  @Prop() duration = 300;
-
-  @Listen('window:statusTap')
-  onStatusTap() {
-    this.queue.read(() => {
-      const width = this.win.innerWidth;
-      const height = this.win.innerWidth;
-      const el = this.win.document.elementFromPoint(width / 2, height / 2);
-      if (!el) {
-        return;
-      }
-      const scrollEl = el.closest('ion-scroll');
-      if (scrollEl) {
-        scrollEl.componentOnReady().then(() => {
-          this.queue.write(() => {
-            scrollEl.scrollToTop(this.duration);
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * The back button event is triggered when the user presses the native
-   * platform's back button, also referred to as the "hardware" back button.
-   * This event is only used within Cordova apps running on Android and
-   * Windows platforms. This event is not fired on iOS since iOS doesn't come
-   * with a hardware back button in the same sense an Android or Windows device
-   * does.
-   *
-   * Registering a hardware back button action and setting a priority allows
-   * apps to control which action should be called when the hardware back
-   * button is pressed. This method decides which of the registered back button
-   * actions has the highest priority and should be called.
-   *
-   * @param {Function} fn Called when the back button is pressed,
-   * if this registered action has the highest priority.
-   * @param {number} priority Set the priority for this action. Only the highest priority will execute. Defaults to `0`.
-   * @returns {Function} A function that, when called, will unregister
-   * the back button action.
-   */
-  // @Method()
-  // registerBackButtonAction(fn: Function, priority = 0): () => void {
-  //   const newAction = {
-  //     fn,
-  //     priority
-  //   };
-  //   backButtonActions.push(newAction);
-
-  //   return () => {
-  //     backButtonActions = backButtonActions.filter(bbAction => bbAction !== newAction);
-  //   };
-  // }
-
-  // @Listen('document:backbutton')
-  // hardwareBackButtonPressed() {
-  //   // check if menu exists and is open
-  //   return checkIfMenuIsOpen().then((done: boolean) => {
-  //     if (!done) {
-  //       // we need to check if there is an action-sheet, alert, loading, picker, popover or toast open
-  //       // if so, just return and don't do anything
-  //       // Why? I have no idea, but that is the existing behavior in Ionic 3
-  //       return checkIfNotModalOverlayIsOpen();
-  //     }
-  //     return done;
-  //   }).then((done: boolean) => {
-  //     if (!done) {
-  //       // if there's a modal open, close that instead
-  //       return closeModalIfOpen();
-  //     }
-  //     return done;
-  //   }).then((done: boolean) => {
-  //     // okay cool, it's time to pop a nav if possible
-  //     if (!done) {
-  //       return popEligibleView();
-  //     }
-  //     return done;
-  //   }).then((done: boolean) => {
-  //     if (!done) {
-  //       // okay, we didn't find a nav that we can pop, so we should just exit the app
-  //       // since each platform exits differently, just delegate it to the platform to
-  //       // figure out how to exit
-  //       return this.exitApp.emit();
-  //     }
-  //     return Promise.resolve();
-  //   });
-  // }
-}
diff --git a/core/src/components/status-tap/test/basic/index.html b/core/src/components/status-tap/test/basic/index.html
deleted file mode 100644
index eeb948dab6..0000000000
--- a/core/src/components/status-tap/test/basic/index.html
+++ /dev/null
@@ -1,56 +0,0 @@
-
-
-
-
-  
-  Status Tap - Basic
-  
-  
-
-
-
-  
-    
-
-      
-        
-          Status Tap - Basic
-        
-      
-
-      
-        

-          Mock Status Tap
-        

-      
-
-  
-
-
-
-
-
\ No newline at end of file
diff --git a/core/src/components/status-tap/test/preview/index.html b/core/src/components/status-tap/test/preview/index.html
deleted file mode 100644
index c9d99f5fbc..0000000000
--- a/core/src/components/status-tap/test/preview/index.html
+++ /dev/null
@@ -1,56 +0,0 @@
-
-
-
-
-  
-  Status Tap
-  
-  
-
-
-
-  
-    
-
-      
-        
-          Status Tap
-        
-      
-
-      
-        

-          Mock Status Tap
-        

-      
-
-  
-
-
-
-
-
\ No newline at end of file
diff --git a/core/src/components/tab-button/readme.md b/core/src/components/tab-button/readme.md
index 40bc09ffe6..81a63bc758 100644
--- a/core/src/components/tab-button/readme.md
+++ b/core/src/components/tab-button/readme.md
@@ -8,6 +8,16 @@ TabButton is an internal component for tabs. Please see the [Tab docs](../tab) f
 
 ## Properties
 
+#### color
+
+string
+
+
+#### mode
+
+string
+
+
 #### selected
 
 boolean
@@ -24,6 +34,16 @@ The tab component for the button
 
 ## Attributes
 
+#### color
+
+string
+
+
+#### mode
+
+string
+
+
 #### selected
 
 boolean
diff --git a/core/src/components/tab-button/tab-button.ios.scss b/core/src/components/tab-button/tab-button.ios.scss
index 52440f32eb..8f36398794 100644
--- a/core/src/components/tab-button/tab-button.ios.scss
+++ b/core/src/components/tab-button/tab-button.ios.scss
@@ -1,20 +1,18 @@
 @import "./tab-button";
 @import "./tab-button.ios.vars";
 
-.tab-button-ios {
+:host {
   max-width: $tab-button-ios-max-width;
 
   font-size: $tab-button-ios-font-size;
   color: $tab-button-ios-text-color;
 
-  fill: $tab-button-ios-icon-color;
+  --color-selected: #{$tabbar-ios-text-color-active};
+  --background-focused: #{$tabbar-ios-background-color-focused};
 }
 
-.tab-button-ios.focused {
-  background: $tabbar-ios-background-color-focused;
-}
 
-.tab-button-ios .tab-cover {
+.tab-button-native {
   @include padding(
     $tab-button-ios-padding-top,
     $tab-button-ios-padding-end,
@@ -22,37 +20,36 @@
     $tab-button-ios-padding-start);
 }
 
-.tab-button-ios:hover,
-.tab-button-ios.tab-selected {
-  color: $tab-button-ios-text-color-active;
-
-  fill: $tab-button-ios-icon-color-active;
-}
-
-.tab-button-ios .tab-button-text {
+.tab-button-text {
   @include margin(0, null, 1px, null);
 
   min-height: $tab-button-ios-font-size + 1;
 }
 
-.tab-button-ios.has-title-only .tab-button-text {
+:host(.has-title-only) .tab-button-text {
+  @include margin(2px, 0);
+
   font-size: $tab-button-ios-font-size + 2;
+
+  font-size: 14px;
+  line-height: 1.1;
 }
 
-.tab-button-ios .tab-button-icon {
+.tab-button-icon {
   @include margin(4px, null, null, null);
 
   font-size: $tab-button-ios-icon-size;
 }
 
-.tabbar-ios .tab-button-icon::before {
+.tab-button-icon::before {
   vertical-align: top;
 }
 
+
+
 .layout-icon-end .tab-button-ios .tab-button-text,
 .layout-icon-start .tab-button-ios .tab-button-text,
-.layout-icon-hide .tab-button-ios .tab-button-text,
-.tab-button-ios.has-title-only .tab-button-text {
+.layout-icon-hide .tab-button-ios .tab-button-text {
   @include margin(2px, 0);
 
   font-size: 14px;
diff --git a/core/src/components/tab-button/tab-button.md.scss b/core/src/components/tab-button/tab-button.md.scss
index 219e08b737..1c48a889f5 100644
--- a/core/src/components/tab-button/tab-button.md.scss
+++ b/core/src/components/tab-button/tab-button.md.scss
@@ -4,20 +4,18 @@
 // Material Design Tab Button
 // --------------------------------------------------
 
-.tab-button-md {
+:host {
   max-width: 168px;
 
   font-weight: $tab-button-md-font-weight;
+
   color: $tab-button-md-text-color;
 
-  fill: $tab-button-md-icon-color;
+  --color-selected: #{$tabbar-md-text-color-active};
+  --background-focused: #{$tabbar-md-background-color-focused};
 }
 
-.tab-button-md.focused {
-  background: $tabbar-md-background-color-focused;
-}
-
-.tab-button-md .tab-cover {
+.tab-button-native {
   @include padding(
     $tab-button-md-padding-top,
     $tab-button-md-padding-end,
@@ -27,27 +25,10 @@
   display: flex;
 }
 
-.scrollable .tab-button-md {
-  overflow: hidden;
-
-  flex: 1 0 auto;
-}
-
-.tab-button-md.tab-selected {
-  color: $tab-button-md-text-color-active;
-
-  fill: $tab-button-md-icon-color-active;
-}
-
 // Material Design Tab Button Text
 // --------------------------------------------------
 
-.placement-top .tab-button-md.tab-selected .tab-button-icon,
-.placement-top .tab-button-md.tab-selected .tab-button-text {
-  transform: inherit;
-}
-
-.tab-button-md .tab-button-text {
+.tab-button-text {
   @include margin($tab-button-md-text-margin-top, $tab-button-md-text-margin-end, $tab-button-md-text-margin-bottom, $tab-button-md-text-margin-start);
 
   @include transform-origin(center, bottom);
@@ -58,25 +39,15 @@
   transition: $tab-button-md-text-transition;
 }
 
-.tab-button-md.tab-selected .tab-button-text {
+:host(.tab-selected) .tab-button-text {
   transform: $tab-button-md-text-transform-active;
   transition: $tab-button-md-text-transition;
 }
 
-.layout-icon-top .tab-button-md .has-icon .tab-button-text {
-  @include margin(null, null, -2px, null);
-}
-
-.layout-icon-bottom .tab-button-md .tab-button-text {
-  @include transform-origin(center, top);
-
-  @include margin(-2px, null, null, null);
-}
-
 // Material Design Tab Button Icon
 // --------------------------------------------------
 
-.tab-button-md .tab-button-icon {
+.tab-button-icon {
   @include transform-origin(center, center);
 
   width: $tab-button-md-icon-size;
@@ -88,13 +59,23 @@
 }
 
 // Tab layout: icon-top, icon-only, title-only
-.tab-button-md.tab-selected .tab-button-icon {
+:host(.tab-selected) .tab-button-icon {
   @include transform(translate3d(
     $tab-button-md-icon-transform-x-active,
     $tab-button-md-icon-transform-y-active,
     $tab-button-md-icon-transform-z-active));
 }
 
+
+// Material Design Tab with Icon or Title only
+// --------------------------------------------------
+
+:host(.icon-only),
+:host(.has-title-only) {
+  justify-content: center;
+}
+
+
 // Tab layout: icon-end
 .layout-icon-end .tab-button-md.tab-selected .tab-button-icon {
   @include transform(translate3d(
@@ -119,12 +100,17 @@
     $tab-button-md-icon-left-transform-z-active));
 }
 
-// Material Design Tab with Icon or Title only
-// --------------------------------------------------
+.layout-icon-top .tab-button-md .has-icon .tab-button-text {
+  @include margin(null, null, -2px, null);
+}
+
+.layout-icon-bottom .tab-button-md .tab-button-text {
+  @include transform-origin(center, top);
+
+  @include margin(-2px, null, null, null);
+}
 
 .layout-icon-hide .tab-button-md,
-.layout-title-hide .tab-button-md,
-.tab-button-md.icon-only,
-.tab-button-md.has-title-only {
+.layout-title-hide .tab-button-md {
   justify-content: center;
 }
diff --git a/core/src/components/tab-button/tab-button.scss b/core/src/components/tab-button/tab-button.scss
index cdd0f8c72b..dfd23a7d6f 100644
--- a/core/src/components/tab-button/tab-button.scss
+++ b/core/src/components/tab-button/tab-button.scss
@@ -1,8 +1,8 @@
 @import "../../themes/ionic.globals";
 
-ion-tab-button {
+:host {
   @include margin(0);
-  @include text-align(center);
+  text-align: center;
   @include border-radius(0);
 
   box-sizing: border-box;
@@ -22,13 +22,31 @@ ion-tab-button {
   background: none;
 
   user-select: none;
+
+  box-sizing: border-box;
 }
 
-ion-tab-button a {
+:host(.ion-color) {
+  color: #{current-color(contrast)};
+
+  --color-selected: #{current-color(contrast)};
+  --background-selected: #{current-color(shade)};
+}
+
+:host(.focused) {
+  background: var(--background-focused);
+}
+
+:host(:hover),
+:host(.tab-selected) {
+  color: var(--color-selected);
+}
+
+a {
   text-decoration: none;
 }
 
-.tab-cover {
+.tab-button-native {
   @include margin(0);
   @include padding(0);
 
@@ -45,6 +63,7 @@ ion-tab-button a {
   color: inherit;
   background: transparent;
   cursor: pointer;
+  box-sizing: border-box;
 
   &:active,
   &:focus {
@@ -52,16 +71,18 @@ ion-tab-button a {
   }
 }
 
-.tab-btn-disabled {
+:host(.tab-button-disabled) {
   pointer-events: none;
+}
 
-  > .tab-cover {
-    opacity: .4;
-  }
+:host(.tab-button-disabled) .tab-button-native {
+  opacity: .4;
 }
 
 .tab-button-text,
 .tab-button-icon {
+  box-sizing: border-box;
+
   display: none;
   overflow: hidden;
 
@@ -74,15 +95,39 @@ ion-tab-button a {
   white-space: nowrap;
 }
 
-.has-icon .tab-button-icon,
-.has-title .tab-button-text {
+:host(.has-icon) .tab-button-icon,
+:host(.has-title) .tab-button-text {
   display: block;
 }
 
-.has-title-only .tab-button-text {
+:host(.has-title-only) .tab-button-text {
   white-space: normal;
 }
 
+
+// Tab Badges
+// --------------------------------------------------
+
+.tab-badge {
+  @include position(6%, 4%, null, null); // 4% fallback
+  @include position(null, calc(50% - 50px), null, null);
+  @include padding(1px, 6px);
+
+  position: absolute;
+
+  height: auto;
+
+  font-size: 12px;
+  line-height: 16px;
+  box-sizing: border-box;
+}
+
+:host(.has-icon) .tab-badge {
+  @include position(null, calc(50% - 30px), null, null);
+}
+
+
+
 // Tab Badges
 // --------------------------------------------------
 
@@ -110,25 +155,6 @@ ion-tab-button a {
   display: none;
 }
 
-// Tab Badges
-// --------------------------------------------------
-
-.tab-badge {
-  @include position(6%, 4%, null, null); // 4% fallback
-  @include position(null, calc(50% - 50px), null, null);
-  @include padding(1px, 6px);
-
-  position: absolute;
-
-  height: auto;
-
-  font-size: 12px;
-  line-height: 16px;
-}
-
-.has-icon .tab-badge {
-  @include position(null, calc(50% - 30px), null, null);
-}
 
 .layout-icon-bottom .tab-badge,
 .layout-icon-start .tab-badge,
diff --git a/core/src/components/tab-button/tab-button.tsx b/core/src/components/tab-button/tab-button.tsx
index 425c854306..3dda456b03 100644
--- a/core/src/components/tab-button/tab-button.tsx
+++ b/core/src/components/tab-button/tab-button.tsx
@@ -1,5 +1,6 @@
-import {Component, Element, Event, EventEmitter, Listen, Prop, State} from '@stencil/core';
-import { Mode } from '../../interface';
+import { Component, Element, Event, EventEmitter, Listen, Prop, State } from '@stencil/core';
+import { Color, Mode } from '../../interface';
+import { createColorClasses } from '../../utils/theme';
 
 
 @Component({
@@ -7,13 +8,15 @@ import { Mode } from '../../interface';
   styleUrls: {
     ios: 'tab-button.ios.scss',
     md: 'tab-button.md.scss'
-  }
+  },
+  shadow: true
 })
 export class TabButton {
 
   @Element() el!: HTMLElement;
 
-  mode!: Mode;
+  @Prop() mode!: Mode;
+  @Prop() color?: Color;
 
   @State() keyFocus = false;
 
@@ -71,13 +74,14 @@ export class TabButton {
       'aria-selected': selected,
       'hidden': !tab.show,
       class: {
+        ...createColorClasses(this.color),
         'tab-selected': selected,
         'has-title': hasTitle,
         'has-icon': hasIcon,
         'has-title-only': hasTitleOnly,
         'has-icon-only': hasIconOnly,
         'has-badge': hasBadge,
-        'tab-btn-disabled': tab.disabled,
+        'tab-button-disabled': tab.disabled,
         'focused': this.keyFocus
       }
     };
@@ -90,7 +94,7 @@ export class TabButton {
     return [
       
         { tab.icon &&  }
diff --git a/core/src/components/tab/tab.tsx b/core/src/components/tab/tab.tsx
index 85315d3886..52ec4e097a 100644
--- a/core/src/components/tab/tab.tsx
+++ b/core/src/components/tab/tab.tsx
@@ -42,7 +42,7 @@ export class Tab {
   /**
    * The badge color for the tab button.
    */
-  @Prop() badgeColor: Color = 'default';
+  @Prop() badgeColor?: Color;
 
   /**
    * The component to display inside of the tab.
@@ -62,7 +62,7 @@ export class Tab {
   /**
    * If true, the tab will be selected. Defaults to `false`.
    */
-  @Prop({ mutable: true }) selected = false;
+  @Prop() selected = false;
 
   @Watch('selected')
   selectedChanged(selected: boolean) {
diff --git a/core/src/components/tabbar/readme.md b/core/src/components/tabbar/readme.md
index 340abad695..4437abd835 100644
--- a/core/src/components/tabbar/readme.md
+++ b/core/src/components/tabbar/readme.md
@@ -8,6 +8,11 @@ Tabbar is an internal component for Tabs. Please see the [Tabs documentation](..
 
 ## Properties
 
+#### color
+
+string
+
+
 #### highlight
 
 boolean
@@ -22,6 +27,11 @@ string
 The layout of the title and icons
 
 
+#### mode
+
+string
+
+
 #### placement
 
 string
@@ -59,6 +69,11 @@ If true, the tabbar will be translucent. Defaults to `false`.
 
 ## Attributes
 
+#### color
+
+string
+
+
 #### highlight
 
 boolean
@@ -73,6 +88,11 @@ string
 The layout of the title and icons
 
 
+#### mode
+
+string
+
+
 #### placement
 
 string
diff --git a/core/src/components/tabbar/tabbar-interface.ts b/core/src/components/tabbar/tabbar-interface.ts
new file mode 100644
index 0000000000..3d64f89f4d
--- /dev/null
+++ b/core/src/components/tabbar/tabbar-interface.ts
@@ -0,0 +1,2 @@
+export type TabbarLayout = 'icon-top' | 'icon-start' | 'icon-end' | 'icon-bottom' | 'icon-hide' | 'title-hide';
+export type TabbarPlacement = 'top' | 'bottom';
diff --git a/core/src/components/tabbar/tabbar.ios.scss b/core/src/components/tabbar/tabbar.ios.scss
index 2f1e885b03..21b4ca527f 100644
--- a/core/src/components/tabbar/tabbar.ios.scss
+++ b/core/src/components/tabbar/tabbar.ios.scss
@@ -4,78 +4,31 @@
 // iOS Tabs
 // --------------------------------------------------
 
-.tabbar-ios {
+:host {
   justify-content: center;
 
   height: $tabbar-ios-height;
 
   border-top: $tabbar-ios-border;
-  background-color: $tabbar-ios-background-color;
+
+  --ion-color-base: #{$tabbar-ios-background-color};
+  --ion-color-base-rgb: var(--ion-tabbar-translucent-background-color-rgb, 248, 248, 248);
+  --ion-color-contrast: #{$tabbar-ios-text-color-active};
 
   contain: strict;
 }
 
-.tabbar-ios.placement-top {
+:host(.placement-top) {
   border-top: 0;
   border-bottom: $tabbar-ios-border;
 }
 
-.tabbar-ios .tabbar-highlight {
-  background: $tabbar-ios-text-color-active;
-}
-
 // iOS Translucent Tabbar
 // --------------------------------------------------
 
-.tabbar-translucent-ios {
-  background-color: $tabbar-ios-translucent-background-color;
+:host(.tabbar-translucent) {
+  background-color: #{current-color(base, $tabbar-ios-translucent-background-color-alpha)};
 
   backdrop-filter: $tabbar-ios-translucent-filter;
 }
 
-// iOS Tabbar Color Mixin
-// --------------------------------------------------
-
-@mixin tabbar-ios($color-name) {
-  $color-base: ion-color($colors-ios, $color-name, base, ios);
-  $color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
-  $color-shade: ion-color($colors-ios, $color-name, shade, ios);
-
-  $translucent-background-color: ion-color($colors-ios, $color-name, base, ios, $tabbar-ios-translucent-background-color-alpha);
-
-  .tabbar-ios-#{$color-name} {
-    border-color: $background-ios-color-step-400;
-    color: $color-contrast;
-    background-color: $color-base;
-
-    fill: $color-contrast;
-  }
-
-  .tabbar-ios-#{$color-name} .tab-button {
-    color: $color-contrast;
-  }
-
-  .tabbar-ios-#{$color-name} .tab-button.focused {
-    background: $color-shade;
-  }
-
-  .tabbar-ios-#{$color-name} .tab-button:hover:not(.disable-hover),
-  .tabbar-ios-#{$color-name} .tab-selected {
-    font-weight: bold;
-
-    color: $color-contrast;
-
-    fill: $color-contrast;
-  }
-
-  .tabbar-translucent-ios-#{$color-name} {
-    background-color: $translucent-background-color;
-  }
-}
-
-// iOS Tabbar Color Generation
-// --------------------------------------------------
-
-@each $color-name, $color-value in $colors-ios {
-  @include tabbar-ios($color-name);
-}
diff --git a/core/src/components/tabbar/tabbar.md.scss b/core/src/components/tabbar/tabbar.md.scss
index 54e7ba9f16..87ca82107e 100644
--- a/core/src/components/tabbar/tabbar.md.scss
+++ b/core/src/components/tabbar/tabbar.md.scss
@@ -1,59 +1,32 @@
 @import "./tabbar";
 @import "./tabbar.md.vars";
 
-.tabbar-md {
+:host {
   height: $tabbar-md-height;
 
   border-top: $tabbar-md-border;
-  background: $tabbar-md-background-color;
+
+  --ion-color-base: #{$tabbar-md-background-color};
+  --ion-color-contrast: #{$tabbar-md-text-color-active};
 
   contain: strict;
 }
 
-.tabbar-md .tabbar-highlight {
-  background: $tabbar-md-text-color-active;
-}
-
-.tabbar-md.scrollable ion-scroll {
+ion-scroll {
   @include margin(0, 8px);
 
   max-width: 650px;
 }
 
-// Material Design Tabs Color Mixin
-// --------------------------------------------------
 
-@mixin tabbar-md($color-name) {
-  $color-base: ion-color($colors-md, $color-name, base, md);
-  $color-contrast: ion-color($colors-md, $color-name, contrast, md);
-  $color-shade: ion-color($colors-md, $color-name, shade, md);
-
-  .tabbar-md-#{$color-name} {
-    color: $color-contrast;
-    background-color: $color-base;
-
-    fill: $color-contrast;
-  }
-
-  .tabbar-md-#{$color-name} .tab-button.focused {
-    background: $color-shade;
-  }
-
-  .tabbar-md-#{$color-name} .tab-button:hover,
-  .tabbar-md-#{$color-name} .tab-button.tab-selected {
-    color: $color-contrast;
-
-    fill: $color-contrast;
-  }
-
-  .tabbar-md-#{$color-name} .tabbar-highlight {
-    background: $color-contrast;
-  }
+// TODO: REVIEW
+:host(.placement-top) .tab-button.tab-selected .tab-button-icon,
+:host(.placement-top) .tab-button.tab-selected .tab-button-text {
+  transform: inherit;
 }
 
-// Material Design Tabbar Color Generation
-// --------------------------------------------------
+.scrollable .tab-button {
+  overflow: hidden;
 
-@each $color-name, $color-value in $colors-md {
-  @include tabbar-md($color-name);
-}
+  flex: 1 0 auto;
+}
\ No newline at end of file
diff --git a/core/src/components/tabbar/tabbar.scss b/core/src/components/tabbar/tabbar.scss
index ecd473e6a8..20c971d48f 100644
--- a/core/src/components/tabbar/tabbar.scss
+++ b/core/src/components/tabbar/tabbar.scss
@@ -1,6 +1,6 @@
 @import "../../themes/ionic.globals";
 
-ion-tabbar {
+:host {
   position: relative;
 
   z-index: $z-index-toolbar;
@@ -12,13 +12,16 @@ ion-tabbar {
   order: 1;
 
   width: 100%;
+
+  background: #{current-color(base)};
+  color: #{current-color(contrast)};
 }
 
-ion-tabbar.tabbar-hidden {
+:host(.tabbar-hidden) {
   display: none;
 }
 
-ion-tabbar.placement-top {
+:host(.placement-top) {
   order: -1;
 }
 
@@ -39,6 +42,8 @@ ion-tabbar.placement-top {
 
   transform: translateZ(0);
 
+  background: currentColor;
+
   &.animated {
     transition-duration: 300ms;
     transition-property: transform;
@@ -48,11 +53,11 @@ ion-tabbar.placement-top {
   }
 }
 
-.placement-top .tabbar-highlight {
+:host(.placement-top) .tabbar-highlight {
   bottom: 0;
 }
 
-.placement-bottom .tabbar-highlight {
+:host(.placement-bottom) .tabbar-highlight {
   top: 0;
 }
 
@@ -60,19 +65,17 @@ ion-tabbar.placement-top {
 // Overflow Scrolling
 // --------------------------------------------------
 
-ion-tabbar.scrollable {
-  ion-scroll {
-    overflow: hidden;
-  }
-
-  .scroll-inner {
-    position: relative;
-    display: flex;
-
-    flex-direction: row;
-  }
-
-  ion-button.inactive {
-    visibility: hidden;
-  }
+ion-scroll {
+  overflow: hidden;
+}
+
+.scroll-inner {
+  position: relative;
+  display: flex;
+
+  flex-direction: row;
+}
+
+ion-button.inactive {
+  visibility: hidden;
 }
diff --git a/core/src/components/tabbar/tabbar.tsx b/core/src/components/tabbar/tabbar.tsx
index d69e143969..1d957ee551 100644
--- a/core/src/components/tabbar/tabbar.tsx
+++ b/core/src/components/tabbar/tabbar.tsx
@@ -1,9 +1,6 @@
-import { Component, Element, Listen, Prop, State, Watch } from '@stencil/core';
-import { Color, Mode, QueueController } from '../../interface';
-import { createThemedClasses } from '../../utils/theme';
-
-export type TabbarLayout = 'icon-top' | 'icon-start' | 'icon-end' | 'icon-bottom' | 'icon-hide' | 'title-hide';
-export type TabbarPlacement = 'top' | 'bottom';
+import { Component, Element, Listen, Prop, QueueApi, State, Watch } from '@stencil/core';
+import { Color, Mode, TabbarLayout, TabbarPlacement } from '../../interface';
+import { createColorClasses } from '../../utils/theme';
 
 @Component({
   tag: 'ion-tabbar',
@@ -11,20 +8,18 @@ export type TabbarPlacement = 'top' | 'bottom';
     ios: 'tabbar.ios.scss',
     md: 'tabbar.md.scss'
   },
-  host: {
-    theme: 'tabbar'
-  }
+  shadow: true
 })
 export class Tabbar {
 
   private scrollEl?: HTMLIonScrollElement;
 
-  mode!: Mode;
-  color?: Color;
+  @Prop() mode!: Mode;
+  @Prop() color?: Color;
 
   @Element() el!: HTMLElement;
 
-  @Prop({ context: 'queue' }) queue!: QueueController;
+  @Prop({ context: 'queue' }) queue!: QueueApi;
   @Prop({ context: 'document' }) doc!: Document;
 
   @State() canScrollLeft = false;
@@ -179,12 +174,11 @@ export class Tabbar {
   }
 
   hostData() {
-    const themedClasses = this.translucent ? createThemedClasses(this.mode, this.color, 'tabbar-translucent') : {};
-
     return {
       role: 'tablist',
       class: {
-        ...themedClasses,
+        ...createColorClasses(this.color),
+        'tabbar-translucent': this.translucent,
         [`layout-${this.layout}`]: true,
         [`placement-${this.placement}`]: true,
         'tabbar-hidden': this.hidden,
@@ -196,8 +190,7 @@ export class Tabbar {
   render() {
     const selectedTab = this.selectedTab;
     const ionTabbarHighlight = this.highlight ? 
 as HTMLElement : null;
-    const buttonClasses = createThemedClasses(this.mode, this.color, 'tab-button');
-    const tabButtons = this.tabs.map(tab => );
+    const tabButtons = this.tabs.map(tab => );
 
     if (this.scrollable) {
       return [
diff --git a/core/src/components/tabs/tabs.scss b/core/src/components/tabs/tabs.scss
index 796d8be665..269e410f0c 100644
--- a/core/src/components/tabs/tabs.scss
+++ b/core/src/components/tabs/tabs.scss
@@ -1,6 +1,6 @@
 @import "../../themes/ionic.globals";
 
-ion-tabs {
+:host {
   @include position(0, 0, 0, 0);
 
   position: absolute;
diff --git a/core/src/components/tabs/tabs.tsx b/core/src/components/tabs/tabs.tsx
index e73e09b6e2..2a9bb80c4c 100644
--- a/core/src/components/tabs/tabs.tsx
+++ b/core/src/components/tabs/tabs.tsx
@@ -1,11 +1,11 @@
 import { Build, Component, Element, Event, EventEmitter, Listen, Method, Prop, State } from '@stencil/core';
-import { Color, Config, NavOutlet, RouteID, RouteWrite } from '../../interface';
-import { TabbarLayout, TabbarPlacement } from '../tabbar/tabbar';
+import { Color, Config, NavOutlet, RouteID, RouteWrite, TabbarLayout, TabbarPlacement } from '../../interface';
 
 
 @Component({
   tag: 'ion-tabs',
-  styleUrl: 'tabs.scss'
+  styleUrl: 'tabs.scss',
+  shadow: true
 })
 export class Tabs implements NavOutlet {
 
diff --git a/core/src/components/tabs/test/basic/index.html b/core/src/components/tabs/test/basic/index.html
index f733007851..d2a7178a07 100644
--- a/core/src/components/tabs/test/basic/index.html
+++ b/core/src/components/tabs/test/basic/index.html
@@ -1,11 +1,14 @@
 
 
+
 
   
   Tab - Basic
   
   
+  
 
+
 
 
   
@@ -49,12 +52,10 @@
 
       
 
-      
+      
       
     
   
 
+
 
diff --git a/core/src/components/tabs/test/nav/index.html b/core/src/components/tabs/test/nav/index.html
index 6db659e45f..0b94a79603 100644
--- a/core/src/components/tabs/test/nav/index.html
+++ b/core/src/components/tabs/test/nav/index.html
@@ -1,12 +1,14 @@
 
 
+
 
   
   Tab - Nav
   
   
+  
   
   
+  
 
+
 
 
   
@@ -264,4 +267,5 @@
     
   
 
+
 
diff --git a/core/src/components/tabs/test/placements/index.html b/core/src/components/tabs/test/placements/index.html
index c2e0b7b1e7..7d2ba47f4e 100644
--- a/core/src/components/tabs/test/placements/index.html
+++ b/core/src/components/tabs/test/placements/index.html
@@ -1,11 +1,14 @@
 
 
+
 
   
   Tab - Basic
   
   
+  
 
+
 
 
   
@@ -53,4 +56,5 @@
     
   
 
+
 
diff --git a/core/src/components/tabs/test/preview/index.html b/core/src/components/tabs/test/preview/index.html
index 408b3eb41f..4606aa8f55 100644
--- a/core/src/components/tabs/test/preview/index.html
+++ b/core/src/components/tabs/test/preview/index.html
@@ -1,11 +1,14 @@
 
 
+
 
   
   Tab
   
   
+  
 
+
 
 
   
@@ -49,13 +52,10 @@
 
       
 
-      
+      
       
     
   
 
+
 
diff --git a/core/src/components/tabs/test/scroll/index.html b/core/src/components/tabs/test/scroll/index.html
index c24d330475..fce85ee31c 100644
--- a/core/src/components/tabs/test/scroll/index.html
+++ b/core/src/components/tabs/test/scroll/index.html
@@ -1,12 +1,14 @@
 
 
+
 
   
   Tab - Scroll
-  
+  
   
+  
 
+
 
 
   
@@ -31,4 +33,5 @@
     
   
 
+
 
diff --git a/core/src/components/tabs/test/translucent/index.html b/core/src/components/tabs/test/translucent/index.html
index 474a07286f..f8f934cd01 100644
--- a/core/src/components/tabs/test/translucent/index.html
+++ b/core/src/components/tabs/test/translucent/index.html
@@ -1,14 +1,17 @@
 
 
+
 
   
   Tab - Translucent
   
   
+  
   
 
+
 
 
   
@@ -23,12 +26,12 @@
       
 
       
-          
+        
       
 
       
-          
-          
+        
+        
       
 
       
@@ -80,6 +83,8 @@
     .orange {
       background-color: #f69234;
     }
-    
+
+  
 
+
 
diff --git a/core/src/components/tabs/test/vanilla/index.html b/core/src/components/tabs/test/vanilla/index.html
index 235d69d7e0..05ee6e3725 100644
--- a/core/src/components/tabs/test/vanilla/index.html
+++ b/core/src/components/tabs/test/vanilla/index.html
@@ -1,14 +1,17 @@
 
 
+
 
   
   Tab - Vanilla
   
   
+  
   
 
+
 
   
     
@@ -32,6 +35,8 @@
       height: 100%;
       color: #FFF;
     }
-    
+
+  
 
+
 
diff --git a/core/src/components/tap-click/tap-click.tsx b/core/src/components/tap-click/tap-click.tsx
index 8247ef29f0..e5b71566a1 100644
--- a/core/src/components/tap-click/tap-click.tsx
+++ b/core/src/components/tap-click/tap-click.tsx
@@ -155,7 +155,7 @@ export class TapClick {
 }
 
 function getActivatableTarget(el: HTMLElement): any {
-  return el.closest('a,button,[tappable]');
+  return el.closest(':not([tappable]) > a, :not([tappable]) > button, [tappable]');
 }
 
 const ACTIVATED = 'activated';
diff --git a/core/src/components/tap-click/test/basic/index.html b/core/src/components/tap-click/test/basic/index.html
index 72d7d33e10..7eccefc919 100644
--- a/core/src/components/tap-click/test/basic/index.html
+++ b/core/src/components/tap-click/test/basic/index.html
@@ -1,10 +1,12 @@
 
 
+
 
   
   Button Effect - Basic
   
   
+  
 
   
 
+
 
   
 
-        
-          
-            Button Effect - Basic
-          
-        
+    
+      
+        Button Effect - Basic
+      
+    
 
-        
-          

-            Small
-          

-          

-            Large
-          

-          

-            Large
-          

-          

-            Large
-          

-          

-            
-            This is just a div + effect behind
-            Nested button
-          

-          

-            This is just a div + effect on top
-            Nested button
-            
-          

+    
+      

+        Small
+      

+      

+        Large
+      

+      

+        Large
+      

+      

+        Large
+      

+      

+        
+        This is just a div + effect behind
+        Nested button
+      

+      

+        This is just a div + effect on top
+        Nested button
+        
+      

 
-          

-            This is just a div + effect
-            
-          

-        
+      

+        This is just a div + effect
+        
+      

+    
 
   
   
 
+
 
diff --git a/core/src/components/tap-click/test/preview/index.html b/core/src/components/tap-click/test/preview/index.html
index e7de5d795a..5330bb3a6e 100644
--- a/core/src/components/tap-click/test/preview/index.html
+++ b/core/src/components/tap-click/test/preview/index.html
@@ -1,10 +1,12 @@
 
 
+
 
   
   Button Effect
   
   
+  
 
   
 
+
 
   
 
-        
-          
-            Button Effect
-          
-        
+    
+      
+        Button Effect
+      
+    
 
-        
-          

-            Small
-          

-          

-            Large
-          

-          

-            Large
-          

-          

-            Large
-          

-          

-            
-            This is just a div + effect behind
-            Nested button
-          

-          

-            This is just a div + effect on top
-            Nested button
-            
-          

+    
+      

+        Small
+      

+      

+        Large
+      

+      

+        Large
+      

+      

+        Large
+      

+      

+        
+        This is just a div + effect behind
+        Nested button
+      

+      

+        This is just a div + effect on top
+        Nested button
+        
+      

 
-          

-            This is just a div + effect
-            
-          

-        
+      

+        This is just a div + effect
+        
+      

+    
 
   
   
 
+
 
diff --git a/core/src/components/text/test/basic/index.html b/core/src/components/text/test/basic/index.html
index 024b8764d4..1fdae4445f 100644
--- a/core/src/components/text/test/basic/index.html
+++ b/core/src/components/text/test/basic/index.html
@@ -1,61 +1,71 @@
 
 
+
 
   
   Text - Basic
   
   
+  
 
+
 
   
 
-      
-        
-          Text - Basic
-        
-      
+    
+      
+        Text - Basic
+      
+    
 
-      
-        
-          
H1: The quick brown fox jumps over the lazy dog

-        
+    
+      
+        
H1: The quick brown fox jumps over the lazy dog

+      
 
-        
-          
H2: The quick brown fox jumps over the lazy dog

-        
+      
+        
H2: The quick brown fox jumps over the lazy dog

+      
 
-        
-          
H3: The quick brown fox jumps over the lazy dog

-        
+      
+        
H3: The quick brown fox jumps over the lazy dog

+      
 
+      
+        
H4: The quick brown fox jumps over the lazy dog

+      
+
+      
+        
H5: The quick brown fox jumps over the lazy dog

+      
+
+      
+        
H6: The quick brown fox jumps over the lazy dog

+      
+
+      

+        I saw a werewolf with a Chinese menu in his hand. Walking through the
         
-          
H4: The quick brown fox jumps over the lazy dog

+          streets
+         of Soho in the rain. He
+        
+          was
+         looking for a place called Lee Ho Fook's. Gonna get a
+        
+          big dish of beef chow mein.
         
+        My purple class link.
+      

 
-        
-          
H5: The quick brown fox jumps over the lazy dog

+      

+        He's the hairy-handed gent who ran amuck in Kent. Lately he's
+        
+          been
+         overheard in Mayfair. Better stay away from him. He'll rip your lungs out, Jim. I'd like to meet his tailor.
+        
+          
         
-
-        
-          
H6: The quick brown fox jumps over the lazy dog

-        
-
-        

-          I saw a werewolf with a Chinese menu in his hand.
-          Walking through the streets of Soho in the rain.
-          He was looking for a place called Lee Ho Fook's.
-          Gonna get a big dish of beef chow mein.
-          My purple class link.
-        

-
-        

-          He's the hairy-handed gent who ran amuck in Kent.
-          Lately he's been overheard in Mayfair.
-          Better stay away from him.
-          He'll rip your lungs out, Jim.
-          I'd like to meet his tailor.
-          
-        

+      

 
 
   
@@ -64,6 +74,7 @@
     .color-purple {
       color: purple;
     }
+
   
 
   
 
+
 
-
-
-
diff --git a/core/src/components/text/test/preview/index.html b/core/src/components/text/test/preview/index.html
index d40bbc4b56..79a2f55d68 100644
--- a/core/src/components/text/test/preview/index.html
+++ b/core/src/components/text/test/preview/index.html
@@ -1,61 +1,71 @@
 
 
+
 
   
   Text
   
   
+  
 
+
 
   
 
-      
-        
-          Text
-        
-      
+    
+      
+        Text
+      
+    
 
-      
-        
-          
H1: The quick brown fox jumps over the lazy dog

-        
+    
+      
+        
H1: The quick brown fox jumps over the lazy dog

+      
 
-        
-          
H2: The quick brown fox jumps over the lazy dog

-        
+      
+        
H2: The quick brown fox jumps over the lazy dog

+      
 
-        
-          
H3: The quick brown fox jumps over the lazy dog

-        
+      
+        
H3: The quick brown fox jumps over the lazy dog

+      
 
+      
+        
H4: The quick brown fox jumps over the lazy dog

+      
+
+      
+        
H5: The quick brown fox jumps over the lazy dog

+      
+
+      
+        
H6: The quick brown fox jumps over the lazy dog

+      
+
+      

+        I saw a werewolf with a Chinese menu in his hand. Walking through the
         
-          
H4: The quick brown fox jumps over the lazy dog

+          streets
+         of Soho in the rain. He
+        
+          was
+         looking for a place called Lee Ho Fook's. Gonna get a
+        
+          big dish of beef chow mein.
         
+        My purple class link.
+      

 
-        
-          
H5: The quick brown fox jumps over the lazy dog

+      

+        He's the hairy-handed gent who ran amuck in Kent. Lately he's
+        
+          been
+         overheard in Mayfair. Better stay away from him. He'll rip your lungs out, Jim. I'd like to meet his tailor.
+        
+          
         
-
-        
-          
H6: The quick brown fox jumps over the lazy dog

-        
-
-        

-          I saw a werewolf with a Chinese menu in his hand.
-          Walking through the streets of Soho in the rain.
-          He was looking for a place called Lee Ho Fook's.
-          Gonna get a big dish of beef chow mein.
-          My purple class link.
-        

-
-        

-          He's the hairy-handed gent who ran amuck in Kent.
-          Lately he's been overheard in Mayfair.
-          Better stay away from him.
-          He'll rip your lungs out, Jim.
-          I'd like to meet his tailor.
-          
-        

+      

 
 
   
@@ -64,6 +74,7 @@
     .color-purple {
       color: purple;
     }
+
   
 
   
 
+
 
-
-
-
diff --git a/core/src/components/text/text.ios.scss b/core/src/components/text/text.ios.scss
deleted file mode 100644
index 115bb21fa7..0000000000
--- a/core/src/components/text/text.ios.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@import "./text.ios.vars";
-
-// iOS Text
-// --------------------------------------------------
-
-// Generate iOS Text Colors
-// --------------------------------------------------
-
-@each $color-name, $color-value in $colors-ios {
-  $base-color: ion-color($colors-ios, $color-name, base, ios);
-
-  .text-ios-#{$color-name},
-  .text-ios-#{$color-name} a,
-  .text-ios-#{$color-name} p {
-    // scss-lint:disable ImportantRule
-    color: $base-color !important;
-  }
-
-}
diff --git a/core/src/components/text/text.ios.vars.scss b/core/src/components/text/text.ios.vars.scss
deleted file mode 100644
index 4cb9603643..0000000000
--- a/core/src/components/text/text.ios.vars.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@import "../../themes/ionic.globals.ios";
-
-// iOS Text
-// --------------------------------------------------
diff --git a/core/src/components/text/text.md.scss b/core/src/components/text/text.md.scss
deleted file mode 100644
index 65a4690e8a..0000000000
--- a/core/src/components/text/text.md.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@import "./text.md.vars";
-
-// Material Design Text
-// --------------------------------------------------
-
-// Generate Material Design Text Colors
-// --------------------------------------------------
-
-@each $color-name, $color-value in $colors-md {
-  $base-color: ion-color($colors-md, $color-name, base, md);
-
-  .text-md-#{$color-name},
-  .text-md-#{$color-name} a,
-  .text-md-#{$color-name} p {
-    // scss-lint:disable ImportantRule
-    color: $base-color !important;
-  }
-
-}
diff --git a/core/src/components/text/text.md.vars.scss b/core/src/components/text/text.md.vars.scss
deleted file mode 100644
index 53d544fa50..0000000000
--- a/core/src/components/text/text.md.vars.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@import "../../themes/ionic.globals.md";
-
-// Material Design Text
-// --------------------------------------------------
diff --git a/core/src/components/text/text.scss b/core/src/components/text/text.scss
new file mode 100644
index 0000000000..16b058da5f
--- /dev/null
+++ b/core/src/components/text/text.scss
@@ -0,0 +1,10 @@
+@import "../../themes/ionic.globals";
+
+// Text
+// --------------------------------------------------
+
+:host {
+  color: #{current-color(base)};
+
+  --ion-color-base: currentColor;
+}
diff --git a/core/src/components/text/text.tsx b/core/src/components/text/text.tsx
index 7a7c429179..ce791c34cf 100644
--- a/core/src/components/text/text.tsx
+++ b/core/src/components/text/text.tsx
@@ -1,16 +1,12 @@
 import { Component, Prop } from '@stencil/core';
 import { Color, Mode } from '../../interface';
+import { createColorClasses } from '../../utils/theme';
 
 
 @Component({
   tag: 'ion-text',
-  styleUrls: {
-    ios: 'text.ios.scss',
-    md: 'text.md.scss'
-  },
-  host: {
-    theme: 'text'
-  }
+  styleUrl: 'text.scss',
+  shadow: true
 })
 export class Text {
 
@@ -26,4 +22,13 @@ export class Text {
    */
   @Prop() mode!: Mode;
 
+  hostData() {
+    return {
+      class: createColorClasses(this.color)
+    };
+  }
+
+  render() {
+    return ;
+  }
 }
diff --git a/core/src/components/textarea/test/basic/index.html b/core/src/components/textarea/test/basic/index.html
index 3d1fd8efa0..a90abb2ff5 100644
--- a/core/src/components/textarea/test/basic/index.html
+++ b/core/src/components/textarea/test/basic/index.html
@@ -1,96 +1,99 @@
 
 
+
 
   
   Input - Textarea
   
   
+  
 
+
 
   
 
-      
-        
-          Input - Textarea
-        
-      
+    
+      
+        Input - Textarea
+      
+    
 
-      
+    
 
-        
-          
-            Inline Label
-            
-          
+      
+        
+          Inline Label
+          
+        
 
-          
-            Fixed Label
-            
-          
+        
+          Fixed Label
+          
+        
 
-          
-            
-          
+        
+          
+        
 
-          
-            Stacked Label
-            
-          
+        
+          Stacked Label
+          
+        
 
-          
-            Floating Label
-            
-          
+        
+          Floating Label
+          
+        
 
-          
-            Disabled
-            
-          
+        
+          Disabled
+          
+        
 
-          
-            Readonly
-            
-          
+        
+          Readonly
+          
+        
 
-          
-            Dynamic Value
-            
-          
+        
+          Dynamic Value
+          
+        
 
-          
-            Dynamic Value
-            
-          
+        
+          Dynamic Value
+          
+        
 
-          
-            Clear on Edit
-            
-          
+        
+          Clear on Edit
+          
+        
 
-          
-            Clear on Edit
-            
-          
-        
+        
+          Clear on Edit
+          
+        
+      
 
-        

-          
-            Toggle Disabled
-          
+      

+        
+          Toggle Disabled
+        
 
-          
-            Toggle Readonly
-          
+        
+          Toggle Readonly
+        
 
-          
-            Toggle Value
-          
+        
+          Toggle Value
+        
 
-          
-            Clear Value
-          
-        

-      
+        
+          Clear Value
+        
+      

+    
 
     
   
 
+
 
-
-
-
diff --git a/core/src/components/textarea/test/preview/index.html b/core/src/components/textarea/test/preview/index.html
index 3d1fd8efa0..a90abb2ff5 100644
--- a/core/src/components/textarea/test/preview/index.html
+++ b/core/src/components/textarea/test/preview/index.html
@@ -1,96 +1,99 @@
 
 
+
 
   
   Input - Textarea
   
   
+  
 
+
 
   
 
-      
-        
-          Input - Textarea
-        
-      
+    
+      
+        Input - Textarea
+      
+    
 
-      
+    
 
-        
-          
-            Inline Label
-            
-          
+      
+        
+          Inline Label
+          
+        
 
-          
-            Fixed Label
-            
-          
+        
+          Fixed Label
+          
+        
 
-          
-            
-          
+        
+          
+        
 
-          
-            Stacked Label
-            
-          
+        
+          Stacked Label
+          
+        
 
-          
-            Floating Label
-            
-          
+        
+          Floating Label
+          
+        
 
-          
-            Disabled
-            
-          
+        
+          Disabled
+          
+        
 
-          
-            Readonly
-            
-          
+        
+          Readonly
+          
+        
 
-          
-            Dynamic Value
-            
-          
+        
+          Dynamic Value
+          
+        
 
-          
-            Dynamic Value
-            
-          
+        
+          Dynamic Value
+          
+        
 
-          
-            Clear on Edit
-            
-          
+        
+          Clear on Edit
+          
+        
 
-          
-            Clear on Edit
-            
-          
-        
+        
+          Clear on Edit
+          
+        
+      
 
-        

-          
-            Toggle Disabled
-          
+      

+        
+          Toggle Disabled
+        
 
-          
-            Toggle Readonly
-          
+        
+          Toggle Readonly
+        
 
-          
-            Toggle Value
-          
+        
+          Toggle Value
+        
 
-          
-            Clear Value
-          
-        

-      
+        
+          Clear Value
+        
+      

+    
 
     
   
 
+
 
-
-
-
diff --git a/core/src/components/textarea/test/standalone/index.html b/core/src/components/textarea/test/standalone/index.html
index 5f47eafa61..873c80bf94 100644
--- a/core/src/components/textarea/test/standalone/index.html
+++ b/core/src/components/textarea/test/standalone/index.html
@@ -6,6 +6,7 @@
   Textarea - Standalone
   
   
+  
 
 
 
diff --git a/core/src/components/textarea/textarea.ios.scss b/core/src/components/textarea/textarea.ios.scss
index 6d1a286b37..cbf0d2e4dc 100644
--- a/core/src/components/textarea/textarea.ios.scss
+++ b/core/src/components/textarea/textarea.ios.scss
@@ -4,40 +4,14 @@
 // iOS Textarea
 // --------------------------------------------------
 
-.native-textarea-ios {
-  @include placeholder($textarea-ios-placeholder-color);
-  @include margin($textarea-ios-margin-top, $textarea-ios-margin-end, $textarea-ios-margin-bottom, $textarea-ios-margin-start);
-  @include padding(0);
-
-  width: calc(100% - #{($textarea-ios-margin-end + $textarea-ios-margin-start)});
-
+:host {
   font-family: $textarea-ios-font-family;
   font-size: $textarea-ios-font-size;
-}
-
-
-// iOS Stacked & Floating Textarea
-// --------------------------------------------------
-
-.item-ios.item-label-stacked .native-textarea,
-.item-ios.item-label-floating .native-textarea {
-  @include margin(8px, null, 8px, 0);
-
-  width: calc(100% - #{$textarea-ios-margin-end});
-}
-
-.item-ios.item-label-stacked .label-ios + .input + .cloned-input,
-.item-ios.item-label-floating .label-ios + .input + .cloned-input {
-  @include margin-horizontal(0, null);
-}
-
-
-// iOS Textarea After Label
-// --------------------------------------------------
-
-.label-ios + ion-textarea .native-textarea,
-.label-ios + .input + .cloned-input {
-  @include margin-horizontal($textarea-ios-by-label-margin-start, null);
-
-  width: calc(100% - (#{$item-ios-padding-end} / 2) - #{$item-ios-padding-start});
+
+  --padding-top: #{$textarea-ios-padding-top};
+  --padding-end: #{$textarea-ios-padding-end};
+  --padding-bottom: #{$textarea-ios-padding-bottom};
+  --padding-start: #{$textarea-ios-padding-start};
+
+  --placeholder-color: #{$textarea-ios-placeholder-color};
 }
diff --git a/core/src/components/textarea/textarea.ios.vars.scss b/core/src/components/textarea/textarea.ios.vars.scss
index 3ed51ac579..2388e695b5 100644
--- a/core/src/components/textarea/textarea.ios.vars.scss
+++ b/core/src/components/textarea/textarea.ios.vars.scss
@@ -9,22 +9,22 @@
 $textarea-ios-by-label-margin-start:         $item-ios-padding-start !default;
 
 /// @prop - Font family of the textarea
-$textarea-ios-font-family:                   $font-family-ios-base !default;
+$textarea-ios-font-family:                   $font-family-base !default;
 
 /// @prop - Font size of the textarea
 $textarea-ios-font-size:                     inherit !default;
 
 /// @prop - Margin top of the textarea
-$textarea-ios-margin-top:                    $item-ios-padding-top !default;
+$textarea-ios-padding-top:                    $item-ios-padding-top !default;
 
 /// @prop - Margin end of the textarea
-$textarea-ios-margin-end:                    ($item-ios-padding-end / 2) !default;
+$textarea-ios-padding-end:                    ($item-ios-padding-end / 2) !default;
 
 /// @prop - Margin bottom of the textarea
-$textarea-ios-margin-bottom:                 $item-ios-padding-bottom !default;
+$textarea-ios-padding-bottom:                 $item-ios-padding-bottom !default;
 
 /// @prop - Margin start of the textarea
-$textarea-ios-margin-start:                  0 !default;
+$textarea-ios-padding-start:                  0 !default;
 
 /// @prop - Placeholder text color of the textarea
-$textarea-ios-placeholder-color:            $placeholder-text-ios-color !default;
+$textarea-ios-placeholder-color:            $placeholder-text-color !default;
diff --git a/core/src/components/textarea/textarea.md.scss b/core/src/components/textarea/textarea.md.scss
index d2342a8de5..76c16622d6 100644
--- a/core/src/components/textarea/textarea.md.scss
+++ b/core/src/components/textarea/textarea.md.scss
@@ -4,24 +4,14 @@
 // Material Design Textarea
 // --------------------------------------------------
 
-.native-textarea-md {
-  @include placeholder($textarea-md-placeholder-color);
-  @include margin($textarea-md-margin-top, $textarea-md-margin-end, $textarea-md-margin-bottom, $textarea-md-margin-start);
-  @include padding(0);
-
-  width: calc(100% - #{$textarea-md-margin-end} - #{$textarea-md-margin-start});
-
+:host {
   font-family: $textarea-md-font-family;
   font-size: $textarea-md-font-size;
-}
-
-
-// Material Design Stacked & Floating Textarea
-// --------------------------------------------------
-
-.item-label-stacked .native-textarea-md,
-.item-label-floating .native-textarea-md {
-  @include margin(8px, null, 8px, 0);
-
-  width: calc(100% - #{$textarea-md-margin-end});
+
+  --padding-top: #{$textarea-md-padding-top};
+  --padding-end: #{$textarea-md-padding-end};
+  --padding-bottom: #{$textarea-md-padding-bottom};
+  --padding-start: #{$textarea-md-padding-start};
+
+  --placeholder-color: #{$textarea-md-placeholder-color};
 }
diff --git a/core/src/components/textarea/textarea.md.vars.scss b/core/src/components/textarea/textarea.md.vars.scss
index a886ec4136..c27fa964d0 100644
--- a/core/src/components/textarea/textarea.md.vars.scss
+++ b/core/src/components/textarea/textarea.md.vars.scss
@@ -6,22 +6,22 @@
 // --------------------------------------------------
 
 /// @prop - Font family of the textarea
-$textarea-md-font-family:                    $font-family-md-base !default;
+$textarea-md-font-family:                    $font-family-base !default;
 
 /// @prop - Font size of the textarea
 $textarea-md-font-size:                      inherit !default;
 
 /// @prop - Margin top of the textarea
-$textarea-md-margin-top:                     $item-md-padding-top !default;
+$textarea-md-padding-top:                     $item-md-padding-top !default;
 
 /// @prop - Margin end of the textarea
-$textarea-md-margin-end:                     ($item-md-padding-end / 2) !default;
+$textarea-md-padding-end:                     ($item-md-padding-end / 2) !default;
 
 /// @prop - Margin bottom of the textarea
-$textarea-md-margin-bottom:                  $item-md-padding-bottom !default;
+$textarea-md-padding-bottom:                  $item-md-padding-bottom !default;
 
 /// @prop - Margin start of the textarea
-$textarea-md-margin-start:                   ($item-md-padding-start / 2) !default;
+$textarea-md-padding-start:                   ($item-md-padding-start / 2) !default;
 
 /// @prop - Placeholder text color of the textarea
-$textarea-md-placeholder-color:             $placeholder-text-md-color !default;
+$textarea-md-placeholder-color:             $placeholder-text-color !default;
diff --git a/core/src/components/textarea/textarea.scss b/core/src/components/textarea/textarea.scss
index 189ad15a7d..6e93b9d5a1 100644
--- a/core/src/components/textarea/textarea.scss
+++ b/core/src/components/textarea/textarea.scss
@@ -3,84 +3,65 @@
 // Textarea
 // --------------------------------------------------
 
-ion-textarea {
+:host {
+  box-sizing: border-box;
   position: relative;
   display: block;
 
   flex: 1;
 
   width: 100%;
-}
 
-.item-input ion-textarea {
-  position: static;
+  --padding-top: 0;
+  --padding-end: 0;
+  --padding-bottom: 0;
+  --padding-start: 0;
+
+  --border-radius: 0;
 }
 
 // Textarea Within An Item
 // --------------------------------------------------
 
-.item.item-textarea {
-  align-items: stretch;
+:host(.in-item) {
+  position: static;
 }
 
+
 // Native Textarea
 // --------------------------------------------------
 
 .native-textarea {
-  @include appearance(none);
-  @include border-radius(0);
+  @include border-radius(var(--border-radius));
+  @include placeholder(var(--placeholder-color));
+  @include margin(0);
+  @include padding(
+    var(--padding-top),
+    var(--padding-end),
+    var(--padding-bottom),
+    var(--padding-start)
+  );
 
+  box-sizing: border-box;
   display: block;
 
-  flex: 1;
-
-  width: 92%;
-  width: calc(100% - 10px);
+  width: 100%;
+  height: 100%;
 
   border: 0;
 
+  outline: none;
+  font-family: inherit;
   font-size: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
 
   background: transparent;
 
-  &:active,
-  &:focus {
-    outline: none;
-  }
+  resize: none;
+  appearance: none;
 }
 
 .native-textarea[disabled] {
   opacity: .4;
 }
-
-.platform-mobile .native-textarea {
-  resize: none;
-}
-
-.item-input-has-focus a,
-.item-input-has-focus button,
-.item-input-has-focus textarea {
-  pointer-events: auto;
-}
-
-// Input Cover: Unfocused
-// --------------------------------------------------
-// The input cover is the div that actually receives the
-// tap/click event when scroll assist is configured to true.
-// This make it so the native input element is not clickable.
-// This will only show when the scroll assist is configured
-// otherwise the .input-cover will not be rendered at all
-// The input cover is not clickable when the input is disabled
-
-.textarea-cover {
-  @include position(0, null, null, 0);
-
-  position: absolute;
-
-  width: 100%;
-  height: 100%;
-}
-
-.textarea[disabled] .textarea-cover {
-  pointer-events: none;
-}
diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx
index b9a9614544..848d3c22ef 100644
--- a/core/src/components/textarea/textarea.tsx
+++ b/core/src/components/textarea/textarea.tsx
@@ -1,8 +1,6 @@
-import { Component, Element, Event, EventEmitter, Prop, Watch } from '@stencil/core';
-
+import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
 import { Color, InputChangeEvent, Mode, StyleEvent } from '../../interface';
 import { debounceEvent, deferEvent } from '../../utils/helpers';
-import { createThemedClasses } from '../../utils/theme';
 import { TextareaComponent } from '../input/input-base';
 
 
@@ -12,12 +10,12 @@ import { TextareaComponent } from '../input/input-base';
     ios: 'textarea.ios.scss',
     md: 'textarea.md.scss'
   },
-  host: {
-    theme: 'textarea'
-  }
+  shadow: true
 })
 export class Textarea implements TextareaComponent {
 
+  private inputEl?: HTMLTextAreaElement;
+
   mode!: Mode;
   color?: Color;
 
@@ -25,6 +23,8 @@ export class Textarea implements TextareaComponent {
 
   @Element() el!: HTMLElement;
 
+  @State() hasFocus = false;
+
   /**
    * Emitted when the input value has changed.
    */
@@ -150,10 +150,9 @@ export class Textarea implements TextareaComponent {
    */
   @Watch('value')
   protected valueChanged() {
-    const inputEl = this.el.querySelector('textarea')!;
-    const value = this.value;
-    if (inputEl.value !== value) {
-      inputEl.value = value;
+    const { inputEl, value } = this;
+    if (inputEl!.value !== value) {
+      inputEl!.value = value;
     }
     this.ionChange.emit({value});
   }
@@ -169,37 +168,32 @@ export class Textarea implements TextareaComponent {
       'interactive': true,
       'textarea': true,
       'input': true,
-      'input-disabled': this.disabled,
-      'input-has-value': this.hasValue(),
-      'input-has-focus': this.hasFocus()
+      'interactive-disabled': this.disabled,
+      'has-value': this.hasValue(),
+      'has-focus': this.hasFocus
     });
   }
 
-  private clearTextInput() {
-    this.value = '';
-  }
-
   private onInput(ev: KeyboardEvent) {
-    this.value = ev.target && (ev.target as HTMLInputElement).value || '';
+    this.value = this.inputEl!.value;
     this.emitStyle();
     this.ionInput.emit(ev);
   }
 
   private onFocus() {
+    this.hasFocus = true;
     this.focusChange();
-    this.emitStyle();
 
     this.ionFocus.emit();
   }
 
   private onBlur() {
+    this.hasFocus = false;
     this.focusChange();
-    this.emitStyle();
 
     this.ionBlur.emit();
   }
 
-
   private onKeyDown() {
     this.checkClearOnEdit();
   }
@@ -215,7 +209,7 @@ export class Textarea implements TextareaComponent {
     // Did the input value change after it was blurred and edited?
     if (this.didBlurAfterEdit && this.hasValue()) {
       // Clear the input
-      this.clearTextInput();
+      this.value = '';
     }
 
     // Reset the flag
@@ -224,14 +218,10 @@ export class Textarea implements TextareaComponent {
 
   private focusChange() {
     // If clearOnEdit is enabled and the input blurred but has a value, set a flag
-    if (this.clearOnEdit && !this.hasFocus() && this.hasValue()) {
+    if (this.clearOnEdit && !this.hasFocus && this.hasValue()) {
       this.didBlurAfterEdit = true;
     }
-  }
-
-  private hasFocus(): boolean {
-    // check if an input has focus or not
-    return this.el && (this.el.querySelector(':focus') === this.el.querySelector('textarea'));
+    this.emitStyle();
   }
 
   private hasValue(): boolean {
@@ -239,11 +229,10 @@ export class Textarea implements TextareaComponent {
   }
 
   render() {
-    const themedClasses = createThemedClasses(this.mode, this.color, 'native-textarea');
-    // TODO aria-labelledby={this.item.labelId}
-
     return (