diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index be9bbea35c9..33baff6a777 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -17,8 +17,10 @@ jobs: - uses: actions/setup-node@v4 with: node-version-file: package.json - - run: npm install - - run: npm --workspace="packages/calcite-design-tokens" run build + - run: | + npm install + npm --workspace="packages/calcite-design-tokens" run build + npm --workspace="packages/calcite-ui-icons" run build - name: Publish to Chromatic uses: chromaui/action@v11 with: diff --git a/.release-please-manifest.json b/.release-please-manifest.json index 5ab1bb067f8..620e6edc9fe 100644 --- a/.release-please-manifest.json +++ b/.release-please-manifest.json @@ -1,8 +1,8 @@ { - "packages/calcite-components": "2.10.1", - "packages/calcite-components-react": "2.10.1", + "packages/calcite-components": "2.11.1", + "packages/calcite-components-react": "2.11.1", "packages/calcite-design-tokens": "2.2.0", - "packages/calcite-ui-icons": "3.29.0", + "packages/calcite-ui-icons": "3.30.0", "packages/eslint-plugin-calcite-components": "1.2.0", - "packages/calcite-components-angular/projects/component-library": "2.10.1" + "packages/calcite-components-angular/projects/component-library": "2.11.1" } diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 41939a2698b..e50a8650c02 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -132,7 +132,7 @@ npm install Next, start the local Stencil development server on localhost: ```sh -npm start +npm run start:components ``` The demos will open in the browser after building. Edit the pages in [`packages/calcite-components/src/demos`](.packages/calcite-components/src/demos) to modify the component demos, such as changing attributes or adding content to slots. When adding a new demo page, make sure to add a link in [`packages/calcite-components/src/index.html`](./packages/calcite-components/src/index.html) so others can find it. You can also edit the component code in [`packages/calcite-components/src/components`](packages/calcite-components/src/components`./src/components), and the changes will be reflected in the demos. diff --git a/lerna.json b/lerna.json index f4e92ab1a44..7c9e2c85009 100644 --- a/lerna.json +++ b/lerna.json @@ -5,7 +5,8 @@ "command": { "version": { "conventionalCommits": true, - "allowBranch": ["main", "rc", "dev"] + "allowBranch": ["main", "rc", "dev"], + "exact": true } } } diff --git a/package-lock.json b/package-lock.json index 5180d35bb79..efc9eaa29fc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -65,19 +65,19 @@ "chromatic": "11.5.6", "concurrently": "8.2.2", "conventional-changelog-conventionalcommits": "7.0.2", - "cpy": "11.0.1", + "cpy": "11.1.0", "cpy-cli": "5.0.0", "dedent": "1.5.3", "eslint": "8.57.0", "eslint-config-prettier": "9.1.0", "eslint-plugin-import": "2.29.1", "eslint-plugin-jest": "28.6.0", - "eslint-plugin-jsdoc": "48.4.0", - "eslint-plugin-prettier": "5.1.3", - "eslint-plugin-react": "7.34.4", + "eslint-plugin-jsdoc": "48.10.1", + "eslint-plugin-prettier": "5.2.1", + "eslint-plugin-react": "7.35.0", "eslint-plugin-unicorn": "54.0.0", "globby": "14.0.2", - "husky": "9.0.11", + "husky": "9.1.4", "jest": "29.7.0", "jest-axe": "9.0.0", "jest-cli": "29.7.0", @@ -109,9 +109,9 @@ "workbox-build": "7.1.1" }, "optionalDependencies": { - "@nx/nx-darwin-arm64": "19.5.1", + "@nx/nx-darwin-arm64": "19.5.3", "@nx/nx-linux-x64-gnu": "18.3.5", - "@nx/nx-win32-x64-msvc": "19.5.1" + "@nx/nx-win32-x64-msvc": "19.5.3" } }, "node_modules/@actions/core": { @@ -3121,15 +3121,13 @@ "license": "0BSD" }, "node_modules/@es-joy/jsdoccomment": { - "version": "0.43.1", + "version": "0.46.0", + "resolved": "https://registry.npmjs.org/@es-joy/jsdoccomment/-/jsdoccomment-0.46.0.tgz", + "integrity": "sha512-C3Axuq1xd/9VqFZpW4YAzOx5O9q/LP46uIQy/iNDpHG3fmPa6TBtvfglMCs3RBiBxAIi0Go97r8+jvTt55XMyQ==", "dev": true, - "license": "MIT", "dependencies": { - "@types/eslint": "^8.56.5", - "@types/estree": "^1.0.5", - "@typescript-eslint/types": "^7.2.0", "comment-parser": "1.4.1", - "esquery": "^1.5.0", + "esquery": "^1.6.0", "jsdoc-type-pratt-parser": "~4.0.0" }, "engines": { @@ -6533,9 +6531,9 @@ "license": "0BSD" }, "node_modules/@nx/nx-darwin-arm64": { - "version": "19.5.1", - "resolved": "https://registry.npmjs.org/@nx/nx-darwin-arm64/-/nx-darwin-arm64-19.5.1.tgz", - "integrity": "sha512-mdFSnwf+cEGZQ0HDJIzHBOWmho66VUN44qsDRPVSwpaEqlHSlcbiqKzM0+oVx9CRDLNQoYtYs1Y3hGlnag1sCQ==", + "version": "19.5.3", + "resolved": "https://registry.npmjs.org/@nx/nx-darwin-arm64/-/nx-darwin-arm64-19.5.3.tgz", + "integrity": "sha512-DacVfnhx7wiglDXRAdbrmaP4s3ZQXMs8Mk0fGoQYjv1uwWajDOPxMYJUZH0CGysIDADSrku4AIqogGX/CZjSuQ==", "cpu": [ "arm64" ], @@ -6682,9 +6680,9 @@ } }, "node_modules/@nx/nx-win32-x64-msvc": { - "version": "19.5.1", - "resolved": "https://registry.npmjs.org/@nx/nx-win32-x64-msvc/-/nx-win32-x64-msvc-19.5.1.tgz", - "integrity": "sha512-bxj12iAuyEwBCV6A+C8nXQ55KNji4L0VrL3y2KeH0wOeBMgTeKQxoMNk0/Ty2O6354YkAgwaKRHJMnM/LfO+og==", + "version": "19.5.3", + "resolved": "https://registry.npmjs.org/@nx/nx-win32-x64-msvc/-/nx-win32-x64-msvc-19.5.3.tgz", + "integrity": "sha512-DOdO7K6ySiwrXsnJNjJXxng427n5+nXIDt4L81ltCdr6oE8wUiUpRTt1dfl65rHknojB/b1at3V6+x450F0/2A==", "cpu": [ "x64" ], @@ -10443,17 +10441,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/array.prototype.toreversed": { - "version": "1.1.2", - "dev": true, - "license": "MIT", - "dependencies": { - "call-bind": "^1.0.2", - "define-properties": "^1.2.0", - "es-abstract": "^1.22.1", - "es-shim-unscopables": "^1.0.0" - } - }, "node_modules/array.prototype.tosorted": { "version": "1.1.4", "dev": true, @@ -11898,9 +11885,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001642", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001642.tgz", - "integrity": "sha512-3XQ0DoRgLijXJErLSl+bLnJ+Et4KqV1PY6JJBGAFlsNsz31zeAIncyeZfLCabHK/jtSh+671RM9YMldxjUPZtA==", + "version": "1.0.30001645", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001645.tgz", + "integrity": "sha512-GFtY2+qt91kzyMk6j48dJcwJVq5uTkk71XxE3RtScx7XWRLsO7bU44LOFkOZYR8w9YMS0UhPSYpN/6rAMImmLw==", "dev": true, "funding": [ { @@ -11915,7 +11902,8 @@ "type": "github", "url": "https://github.com/sponsors/ai" } - ] + ], + "license": "CC-BY-4.0" }, "node_modules/canvas": { "version": "2.11.2", @@ -13629,16 +13617,17 @@ } }, "node_modules/cpy": { - "version": "11.0.1", + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/cpy/-/cpy-11.1.0.tgz", + "integrity": "sha512-QGHetPSSuprVs+lJmMDcivvrBwTKASzXQ5qxFvRC2RFESjjod71bDvFvhxTjDgkNjrrb72AI6JPjfYwxrIy33A==", "dev": true, - "license": "MIT", "dependencies": { "copy-file": "^11.0.0", - "globby": "^13.2.2", + "globby": "^14.0.2", "junk": "^4.0.1", - "micromatch": "^4.0.5", - "p-filter": "^3.0.0", - "p-map": "^6.0.0" + "micromatch": "^4.0.7", + "p-filter": "^4.1.0", + "p-map": "^7.0.2" }, "engines": { "node": ">=18" @@ -13727,30 +13716,28 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/cpy/node_modules/globby": { - "version": "13.2.2", + "node_modules/cpy/node_modules/p-filter": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/p-filter/-/p-filter-4.1.0.tgz", + "integrity": "sha512-37/tPdZ3oJwHaS3gNJdenCDB3Tz26i9sjhnguBtvN0vYlRIiDNnvTWkuh+0hETV9rLPdJ3rlL3yVOYPIAnM8rw==", "dev": true, - "license": "MIT", "dependencies": { - "dir-glob": "^3.0.1", - "fast-glob": "^3.3.0", - "ignore": "^5.2.4", - "merge2": "^1.4.1", - "slash": "^4.0.0" + "p-map": "^7.0.1" }, "engines": { - "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + "node": ">=18" }, "funding": { "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/cpy/node_modules/slash": { - "version": "4.0.0", + "node_modules/cpy/node_modules/p-map": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/p-map/-/p-map-7.0.2.tgz", + "integrity": "sha512-z4cYYMMdKHzw4O5UkWJImbZynVIo0lSGTXc7bzB1e/rrDqkgGUNysK/o4bTr+0+xKvvLoTyGqYC4Fgljy9qe1Q==", "dev": true, - "license": "MIT", "engines": { - "node": ">=12" + "node": ">=18" }, "funding": { "url": "https://github.com/sponsors/sindresorhus" @@ -15669,21 +15656,22 @@ } }, "node_modules/eslint-plugin-jsdoc": { - "version": "48.4.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-48.4.0.tgz", - "integrity": "sha512-xBUxuAx03cKoEA7y+MYSUdwyN8AJyZHbAJ257sOFXgVgCScm574S4zEYJpBoARwaCu4chhCbvA+gdm+00whlxA==", + "version": "48.10.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-48.10.1.tgz", + "integrity": "sha512-dxV7ytazLW9CdPahds07FljQ960vLQG65mUnFi8/6Pc6u6miCZNGYrnKVHrnnrcj+LikhiKAayjrUiNttzRMEg==", "dev": true, "dependencies": { - "@es-joy/jsdoccomment": "~0.43.1", + "@es-joy/jsdoccomment": "~0.46.0", "are-docs-informative": "^0.0.2", "comment-parser": "1.4.1", - "debug": "^4.3.4", + "debug": "^4.3.5", "escape-string-regexp": "^4.0.0", - "esquery": "^1.5.0", - "parse-imports": "^2.1.0", - "semver": "^7.6.2", + "espree": "^10.1.0", + "esquery": "^1.6.0", + "parse-imports": "^2.1.1", + "semver": "^7.6.3", "spdx-expression-parse": "^4.0.0", - "synckit": "^0.9.0" + "synckit": "^0.9.1" }, "engines": { "node": ">=18" @@ -15692,10 +15680,28 @@ "eslint": "^7.0.0 || ^8.0.0 || ^9.0.0" } }, + "node_modules/eslint-plugin-jsdoc/node_modules/debug": { + "version": "4.3.6", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz", + "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==", + "dev": true, + "dependencies": { + "ms": "2.1.2" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, "node_modules/eslint-plugin-jsdoc/node_modules/escape-string-regexp": { "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", "dev": true, - "license": "MIT", "engines": { "node": ">=10" }, @@ -15703,13 +15709,43 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/eslint-plugin-jsdoc/node_modules/eslint-visitor-keys": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.0.0.tgz", + "integrity": "sha512-OtIRv/2GyiF6o/d8K7MYKKbXrOUBIK6SfkIRM4Z0dY3w+LiQ0vy3F57m0Z71bjbyeiWFiHJ8brqnmE6H6/jEuw==", + "dev": true, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/eslint-plugin-jsdoc/node_modules/espree": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/espree/-/espree-10.1.0.tgz", + "integrity": "sha512-M1M6CpiE6ffoigIOWYO9UDP8TMUw9kqb21tf+08IgDYjCsOvCuDt4jQcZmoYxx+w7zlKw9/N0KXfto+I8/FrXA==", + "dev": true, + "dependencies": { + "acorn": "^8.12.0", + "acorn-jsx": "^5.3.2", + "eslint-visitor-keys": "^4.0.0" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, "node_modules/eslint-plugin-prettier": { - "version": "5.1.3", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.1.tgz", + "integrity": "sha512-gH3iR3g4JfF+yYPaJYkN7jEl9QbweL/YfkoRlNnuIEHEz1vHVlCmWOS+eGGiRuzHQXdJFCOTxRgvju9b8VUmrw==", "dev": true, - "license": "MIT", "dependencies": { "prettier-linter-helpers": "^1.0.0", - "synckit": "^0.8.6" + "synckit": "^0.9.1" }, "engines": { "node": "^14.18.0 || >=16.0.0" @@ -15732,36 +15768,15 @@ } } }, - "node_modules/eslint-plugin-prettier/node_modules/synckit": { - "version": "0.8.8", - "dev": true, - "license": "MIT", - "dependencies": { - "@pkgr/core": "^0.1.0", - "tslib": "^2.6.2" - }, - "engines": { - "node": "^14.18.0 || >=16.0.0" - }, - "funding": { - "url": "https://opencollective.com/unts" - } - }, - "node_modules/eslint-plugin-prettier/node_modules/tslib": { - "version": "2.6.2", - "dev": true, - "license": "0BSD" - }, "node_modules/eslint-plugin-react": { - "version": "7.34.4", - "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.34.4.tgz", - "integrity": "sha512-Np+jo9bUwJNxCsT12pXtrGhJgT3T44T1sHhn1Ssr42XFn8TES0267wPGo5nNrMHi8qkyimDAX2BUmkf9pSaVzA==", + "version": "7.35.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.35.0.tgz", + "integrity": "sha512-v501SSMOWv8gerHkk+IIQBkcGRGrO2nfybfj5pLxuJNFTPxxA3PSryhXTK+9pNbtkggheDdsC0E9Q8CuPk6JKA==", "dev": true, "dependencies": { "array-includes": "^3.1.8", "array.prototype.findlast": "^1.2.5", "array.prototype.flatmap": "^1.3.2", - "array.prototype.toreversed": "^1.1.2", "array.prototype.tosorted": "^1.1.4", "doctrine": "^2.1.0", "es-iterator-helpers": "^1.0.19", @@ -15782,7 +15797,7 @@ "node": ">=4" }, "peerDependencies": { - "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8" + "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7" } }, "node_modules/eslint-plugin-react/node_modules/brace-expansion": { @@ -16186,8 +16201,9 @@ } }, "node_modules/esquery": { - "version": "1.5.0", - "license": "BSD-3-Clause", + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz", + "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==", "dependencies": { "estraverse": "^5.1.0" }, @@ -18634,11 +18650,12 @@ } }, "node_modules/husky": { - "version": "9.0.11", + "version": "9.1.4", + "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.4.tgz", + "integrity": "sha512-bho94YyReb4JV7LYWRWxZ/xr6TtOTt8cMfmQ39MQYJ7f/YE268s3GdghGwi+y4zAeqewE5zYLvuhV0M0ijsDEA==", "dev": true, - "license": "MIT", "bin": { - "husky": "bin.mjs" + "husky": "bin.js" }, "engines": { "node": ">=18" @@ -25858,23 +25875,6 @@ } } }, - "node_modules/nx/node_modules/@nx/nx-darwin-arm64": { - "version": "19.5.3", - "resolved": "https://registry.npmjs.org/@nx/nx-darwin-arm64/-/nx-darwin-arm64-19.5.3.tgz", - "integrity": "sha512-DacVfnhx7wiglDXRAdbrmaP4s3ZQXMs8Mk0fGoQYjv1uwWajDOPxMYJUZH0CGysIDADSrku4AIqogGX/CZjSuQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">= 10" - } - }, "node_modules/nx/node_modules/@nx/nx-linux-x64-gnu": { "version": "19.5.3", "resolved": "https://registry.npmjs.org/@nx/nx-linux-x64-gnu/-/nx-linux-x64-gnu-19.5.3.tgz", @@ -25892,23 +25892,6 @@ "node": ">= 10" } }, - "node_modules/nx/node_modules/@nx/nx-win32-x64-msvc": { - "version": "19.5.3", - "resolved": "https://registry.npmjs.org/@nx/nx-win32-x64-msvc/-/nx-win32-x64-msvc-19.5.3.tgz", - "integrity": "sha512-DOdO7K6ySiwrXsnJNjJXxng427n5+nXIDt4L81ltCdr6oE8wUiUpRTt1dfl65rHknojB/b1at3V6+x450F0/2A==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 10" - } - }, "node_modules/nx/node_modules/ansi-styles": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", @@ -32998,12 +32981,6 @@ "dev": true, "license": "MIT" }, - "node_modules/timezone-groups": { - "version": "0.8.0", - "bin": { - "timezone-groups": "dist/cli.cjs" - } - }, "node_modules/timm": { "version": "1.7.1", "resolved": "https://registry.npmjs.org/timm/-/timm-1.7.1.tgz", @@ -35897,10 +35874,10 @@ }, "packages/calcite-components": { "name": "@esri/calcite-components", - "version": "2.11.0-next.29", + "version": "2.12.0-next.4", "license": "SEE LICENSE.md", "dependencies": { - "@esri/calcite-ui-icons": "^3.29.1-next.0", + "@esri/calcite-ui-icons": "3.30.1-next.0", "@floating-ui/dom": "1.6.8", "@stencil/core": "4.19.2", "@types/color": "3.0.6", @@ -35911,7 +35888,7 @@ "focus-trap": "7.5.4", "lodash-es": "4.17.21", "sortablejs": "1.15.1", - "timezone-groups": "0.8.0", + "timezone-groups": "0.9.0", "type-fest": "4.18.2" }, "devDependencies": { @@ -39076,10 +39053,10 @@ }, "packages/calcite-components-angular/projects/component-library": { "name": "@esri/calcite-components-angular", - "version": "2.11.0-next.29", + "version": "2.12.0-next.4", "license": "SEE LICENSE.md", "dependencies": { - "@esri/calcite-components": "^2.11.0-next.29", + "@esri/calcite-components": "2.12.0-next.4", "tslib": "2.6.3" }, "peerDependencies": { @@ -39089,10 +39066,10 @@ }, "packages/calcite-components-react": { "name": "@esri/calcite-components-react", - "version": "2.11.0-next.29", + "version": "2.12.0-next.4", "license": "SEE LICENSE.md", "dependencies": { - "@esri/calcite-components": "^2.11.0-next.29" + "@esri/calcite-components": "2.12.0-next.4" }, "peerDependencies": { "react": ">=16.7", @@ -39483,6 +39460,14 @@ "node": ">=8" } }, + "packages/calcite-components/node_modules/timezone-groups": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/timezone-groups/-/timezone-groups-0.9.0.tgz", + "integrity": "sha512-6Os7VhGet5ZU5q7Sx5hxzyzyym5+IfVax5m6LBz1LqZGshlcDRykYyyD4j7yhN1yn/jjw4eJpd8KpzyPWKU+nQ==", + "engines": { + "node": ">=20.0.0" + } + }, "packages/calcite-components/node_modules/type-fest": { "version": "4.18.2", "license": "(MIT OR CC0-1.0)", @@ -39526,7 +39511,7 @@ }, "packages/calcite-ui-icons": { "name": "@esri/calcite-ui-icons", - "version": "3.29.1-next.0", + "version": "3.30.1-next.0", "license": "SEE LICENSE.md", "bin": { "spriter": "bin/spriter.js" diff --git a/package.json b/package.json index 0c2b1186329..1dd578f897b 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "publish:hotfix": "./support/release.sh publish hotfix", "prepare": "husky", "start": "turbo run start --log-order=stream", + "start:components": "turbo run start --log-order=stream --filter=@esri/calcite-components", "test": "turbo run test --log-order=stream", "util:is-next-deployable": "tsx support/isNextDeployable.ts", "util:push-tags": "git push origin HEAD --follow-tags", @@ -80,19 +81,19 @@ "chromatic": "11.5.6", "concurrently": "8.2.2", "conventional-changelog-conventionalcommits": "7.0.2", - "cpy": "11.0.1", + "cpy": "11.1.0", "cpy-cli": "5.0.0", "dedent": "1.5.3", "eslint": "8.57.0", "eslint-config-prettier": "9.1.0", "eslint-plugin-import": "2.29.1", "eslint-plugin-jest": "28.6.0", - "eslint-plugin-jsdoc": "48.4.0", - "eslint-plugin-prettier": "5.1.3", - "eslint-plugin-react": "7.34.4", + "eslint-plugin-jsdoc": "48.10.1", + "eslint-plugin-prettier": "5.2.1", + "eslint-plugin-react": "7.35.0", "eslint-plugin-unicorn": "54.0.0", "globby": "14.0.2", - "husky": "9.0.11", + "husky": "9.1.4", "jest": "29.7.0", "jest-axe": "9.0.0", "jest-cli": "29.7.0", @@ -135,8 +136,8 @@ "patch-package": "8.0.0" }, "optionalDependencies": { - "@nx/nx-darwin-arm64": "19.5.1", + "@nx/nx-darwin-arm64": "19.5.3", "@nx/nx-linux-x64-gnu": "18.3.5", - "@nx/nx-win32-x64-msvc": "19.5.1" + "@nx/nx-win32-x64-msvc": "19.5.3" } } diff --git a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md index 4445a96ef28..467d2394923 100644 --- a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md +++ b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md @@ -3,137 +3,47 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. -## [2.11.0-next.29](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.28...@esri/calcite-components-angular@2.11.0-next.29) (2024-07-30) +## [2.12.0-next.4](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.12.0-next.3...@esri/calcite-components-angular@2.12.0-next.4) (2024-08-02) **Note:** Version bump only for package @esri/calcite-components-angular -## [2.11.0-next.28](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.27...@esri/calcite-components-angular@2.11.0-next.28) (2024-07-30) +## [2.12.0-next.3](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.12.0-next.2...@esri/calcite-components-angular@2.12.0-next.3) (2024-08-02) **Note:** Version bump only for package @esri/calcite-components-angular -## [2.11.0-next.27](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.26...@esri/calcite-components-angular@2.11.0-next.27) (2024-07-29) +## [2.11.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0...@esri/calcite-components-angular@2.11.1) (2024-08-02) -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.11.0-next.26](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.25...@esri/calcite-components-angular@2.11.0-next.26) (2024-07-29) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.11.0-next.25](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.24...@esri/calcite-components-angular@2.11.0-next.25) (2024-07-26) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.11.0-next.24](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.23...@esri/calcite-components-angular@2.11.0-next.24) (2024-07-25) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.11.0-next.23](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.22...@esri/calcite-components-angular@2.11.0-next.23) (2024-07-25) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.11.0-next.22](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.21...@esri/calcite-components-angular@2.11.0-next.22) (2024-07-25) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.11.0-next.21](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.20...@esri/calcite-components-angular@2.11.0-next.21) (2024-07-23) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.11.0-next.20](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.19...@esri/calcite-components-angular@2.11.0-next.20) (2024-07-23) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.11.0-next.19](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.18...@esri/calcite-components-angular@2.11.0-next.19) (2024-07-23) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.11.0-next.18](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.17...@esri/calcite-components-angular@2.11.0-next.18) (2024-07-22) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.11.0-next.17](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.16...@esri/calcite-components-angular@2.11.0-next.17) (2024-07-22) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.11.0-next.16](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.15...@esri/calcite-components-angular@2.11.0-next.16) (2024-07-22) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.11.0-next.15](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.14...@esri/calcite-components-angular@2.11.0-next.15) (2024-07-19) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.11.0-next.14](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.13...@esri/calcite-components-angular@2.11.0-next.14) (2024-07-16) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.11.0-next.13](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.12...@esri/calcite-components-angular@2.11.0-next.13) (2024-07-16) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.11.0-next.12](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.11...@esri/calcite-components-angular@2.11.0-next.12) (2024-07-16) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.11.0-next.11](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.10...@esri/calcite-components-angular@2.11.0-next.11) (2024-07-16) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.11.0-next.10](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.9...@esri/calcite-components-angular@2.11.0-next.10) (2024-07-15) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.11.0-next.9](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.8...@esri/calcite-components-angular@2.11.0-next.9) (2024-07-15) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.11.0-next.8](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.7...@esri/calcite-components-angular@2.11.0-next.8) (2024-07-15) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.11.0-next.7](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.6...@esri/calcite-components-angular@2.11.0-next.7) (2024-07-15) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.11.0-next.6](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.5...@esri/calcite-components-angular@2.11.0-next.6) (2024-07-12) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.11.0-next.5](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.4...@esri/calcite-components-angular@2.11.0-next.5) (2024-07-12) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.11.0-next.4](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.3...@esri/calcite-components-angular@2.11.0-next.4) (2024-07-12) +### Miscellaneous Chores -**Note:** Version bump only for package @esri/calcite-components-angular +- **@esri/calcite-components-angular:** Synchronize components versions -## [2.11.0-next.3](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.2...@esri/calcite-components-angular@2.11.0-next.3) (2024-07-11) +## [2.12.0-next.2](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.12.0-next.1...@esri/calcite-components-angular@2.12.0-next.2) (2024-08-02) **Note:** Version bump only for package @esri/calcite-components-angular -## [2.11.0-next.2](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.1...@esri/calcite-components-angular@2.11.0-next.2) (2024-07-08) +## [2.12.0-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.12.0-next.0...@esri/calcite-components-angular@2.12.0-next.1) (2024-08-01) **Note:** Version bump only for package @esri/calcite-components-angular -## [2.11.0-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.0...@esri/calcite-components-angular@2.11.0-next.1) (2024-07-05) +## [2.12.0-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.1-next.0...@esri/calcite-components-angular@2.12.0-next.0) (2024-08-01) **Note:** Version bump only for package @esri/calcite-components-angular -## [2.11.0-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.10.2-next.2...@esri/calcite-components-angular@2.11.0-next.0) (2024-07-02) +## [2.11.1-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.31...@esri/calcite-components-angular@2.11.1-next.0) (2024-08-01) **Note:** Version bump only for package @esri/calcite-components-angular -## [2.10.2-next.2](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.10.2-next.1...@esri/calcite-components-angular@2.10.2-next.2) (2024-07-01) - -**Note:** Version bump only for package @esri/calcite-components-angular +## [2.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.10.1...@esri/calcite-components-angular@2.11.0) (2024-07-31) -## [2.10.2-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.10.2-next.0...@esri/calcite-components-angular@2.10.2-next.1) (2024-07-01) +### Miscellaneous Chores -**Note:** Version bump only for package @esri/calcite-components-angular +- **@esri/calcite-components-angular:** Synchronize components versions -## [2.10.2-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.10.1-next.0...@esri/calcite-components-angular@2.10.2-next.0) (2024-06-28) +### Dependencies -**Note:** Version bump only for package @esri/calcite-components-angular +- The following workspace dependencies were updated + - dependencies + - @esri/calcite-components bumped from ^2.11.0-next.30 to ^2.11.0 ## [2.10.1](https://github.com/esri/calcite-design-system/compare/@esri/calcite-components-angular@2.10.0...@esri/calcite-components-angular@2.10.1) (2024-06-27) diff --git a/packages/calcite-components-angular/projects/component-library/package.json b/packages/calcite-components-angular/projects/component-library/package.json index e9f0a69d9be..d0e764092cd 100644 --- a/packages/calcite-components-angular/projects/component-library/package.json +++ b/packages/calcite-components-angular/projects/component-library/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components-angular", - "version": "2.11.0-next.29", + "version": "2.12.0-next.4", "description": "A set of Angular components that wrap Esri's Calcite Components.", "homepage": "https://developers.arcgis.com/calcite-design-system/", "bugs": { @@ -17,7 +17,7 @@ }, "sideEffects": false, "dependencies": { - "@esri/calcite-components": "^2.11.0-next.29", + "@esri/calcite-components": "2.12.0-next.4", "tslib": "2.6.3" }, "peerDependencies": { diff --git a/packages/calcite-components-react/CHANGELOG.md b/packages/calcite-components-react/CHANGELOG.md index 4deef69ed73..6ad3c3c2aa1 100644 --- a/packages/calcite-components-react/CHANGELOG.md +++ b/packages/calcite-components-react/CHANGELOG.md @@ -3,137 +3,53 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. -## [2.11.0-next.29](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.28...@esri/calcite-components-react@2.11.0-next.29) (2024-07-30) +## [2.12.0-next.4](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.12.0-next.3...@esri/calcite-components-react@2.12.0-next.4) (2024-08-02) **Note:** Version bump only for package @esri/calcite-components-react -## [2.11.0-next.28](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.27...@esri/calcite-components-react@2.11.0-next.28) (2024-07-30) +## [2.12.0-next.3](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.12.0-next.2...@esri/calcite-components-react@2.12.0-next.3) (2024-08-02) **Note:** Version bump only for package @esri/calcite-components-react -## [2.11.0-next.27](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.26...@esri/calcite-components-react@2.11.0-next.27) (2024-07-29) +## [2.11.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0...@esri/calcite-components-react@2.11.1) (2024-08-02) -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.11.0-next.26](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.25...@esri/calcite-components-react@2.11.0-next.26) (2024-07-29) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.11.0-next.25](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.24...@esri/calcite-components-react@2.11.0-next.25) (2024-07-26) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.11.0-next.24](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.23...@esri/calcite-components-react@2.11.0-next.24) (2024-07-25) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.11.0-next.23](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.22...@esri/calcite-components-react@2.11.0-next.23) (2024-07-25) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.11.0-next.22](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.21...@esri/calcite-components-react@2.11.0-next.22) (2024-07-25) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.11.0-next.21](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.20...@esri/calcite-components-react@2.11.0-next.21) (2024-07-23) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.11.0-next.20](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.19...@esri/calcite-components-react@2.11.0-next.20) (2024-07-23) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.11.0-next.19](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.18...@esri/calcite-components-react@2.11.0-next.19) (2024-07-23) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.11.0-next.18](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.17...@esri/calcite-components-react@2.11.0-next.18) (2024-07-22) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.11.0-next.17](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.16...@esri/calcite-components-react@2.11.0-next.17) (2024-07-22) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.11.0-next.16](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.15...@esri/calcite-components-react@2.11.0-next.16) (2024-07-22) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.11.0-next.15](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.14...@esri/calcite-components-react@2.11.0-next.15) (2024-07-19) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.11.0-next.14](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.13...@esri/calcite-components-react@2.11.0-next.14) (2024-07-16) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.11.0-next.13](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.12...@esri/calcite-components-react@2.11.0-next.13) (2024-07-16) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.11.0-next.12](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.11...@esri/calcite-components-react@2.11.0-next.12) (2024-07-16) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.11.0-next.11](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.10...@esri/calcite-components-react@2.11.0-next.11) (2024-07-16) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.11.0-next.10](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.9...@esri/calcite-components-react@2.11.0-next.10) (2024-07-15) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.11.0-next.9](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.8...@esri/calcite-components-react@2.11.0-next.9) (2024-07-15) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.11.0-next.8](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.7...@esri/calcite-components-react@2.11.0-next.8) (2024-07-15) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.11.0-next.7](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.6...@esri/calcite-components-react@2.11.0-next.7) (2024-07-15) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.11.0-next.6](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.5...@esri/calcite-components-react@2.11.0-next.6) (2024-07-12) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.11.0-next.5](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.4...@esri/calcite-components-react@2.11.0-next.5) (2024-07-12) +### Miscellaneous Chores -**Note:** Version bump only for package @esri/calcite-components-react +- **@esri/calcite-components-react:** Synchronize components versions -## [2.11.0-next.4](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.3...@esri/calcite-components-react@2.11.0-next.4) (2024-07-12) +### Dependencies -**Note:** Version bump only for package @esri/calcite-components-react +- The following workspace dependencies were updated + - dependencies + - @esri/calcite-components bumped from ^2.11.0 to ^2.11.1 -## [2.11.0-next.3](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.2...@esri/calcite-components-react@2.11.0-next.3) (2024-07-11) +## [2.12.0-next.2](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.12.0-next.1...@esri/calcite-components-react@2.12.0-next.2) (2024-08-02) **Note:** Version bump only for package @esri/calcite-components-react -## [2.11.0-next.2](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.1...@esri/calcite-components-react@2.11.0-next.2) (2024-07-08) +## [2.12.0-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.12.0-next.0...@esri/calcite-components-react@2.12.0-next.1) (2024-08-01) **Note:** Version bump only for package @esri/calcite-components-react -## [2.11.0-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.0...@esri/calcite-components-react@2.11.0-next.1) (2024-07-05) +## [2.12.0-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.1-next.0...@esri/calcite-components-react@2.12.0-next.0) (2024-08-01) **Note:** Version bump only for package @esri/calcite-components-react -## [2.11.0-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.10.2-next.2...@esri/calcite-components-react@2.11.0-next.0) (2024-07-02) +## [2.11.1-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.31...@esri/calcite-components-react@2.11.1-next.0) (2024-08-01) **Note:** Version bump only for package @esri/calcite-components-react -## [2.10.2-next.2](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.10.2-next.1...@esri/calcite-components-react@2.10.2-next.2) (2024-07-01) - -**Note:** Version bump only for package @esri/calcite-components-react +## [2.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.10.1...@esri/calcite-components-react@2.11.0) (2024-07-31) -## [2.10.2-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.10.2-next.0...@esri/calcite-components-react@2.10.2-next.1) (2024-07-01) +### Miscellaneous Chores -**Note:** Version bump only for package @esri/calcite-components-react +- **@esri/calcite-components-react:** Synchronize components versions -## [2.10.2-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.10.1-next.0...@esri/calcite-components-react@2.10.2-next.0) (2024-06-28) +### Dependencies -**Note:** Version bump only for package @esri/calcite-components-react +- The following workspace dependencies were updated + - dependencies + - @esri/calcite-components bumped from ^2.11.0-next.30 to ^2.11.0 ## [2.10.1](https://github.com/esri/calcite-design-system/compare/@esri/calcite-components-react@2.10.0...@esri/calcite-components-react@2.10.1) (2024-06-27) diff --git a/packages/calcite-components-react/package.json b/packages/calcite-components-react/package.json index ae308ee56ba..fe62c53b4c9 100644 --- a/packages/calcite-components-react/package.json +++ b/packages/calcite-components-react/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components-react", - "version": "2.11.0-next.29", + "version": "2.12.0-next.4", "description": "A set of React components that wrap calcite components", "homepage": "https://developers.arcgis.com/calcite-design-system/", "repository": { @@ -28,7 +28,7 @@ "tsc": "tsc" }, "dependencies": { - "@esri/calcite-components": "^2.11.0-next.29" + "@esri/calcite-components": "2.12.0-next.4" }, "peerDependencies": { "react": ">=16.7", diff --git a/packages/calcite-components/.stylelintrc-postcss.json b/packages/calcite-components/.stylelintrc-postcss.json index e00f52323f3..ff5307bc884 100644 --- a/packages/calcite-components/.stylelintrc-postcss.json +++ b/packages/calcite-components/.stylelintrc-postcss.json @@ -1,6 +1,11 @@ { "plugins": ["stylelint-use-logical-spec"], "rules": { - "liberty/use-logical-spec": "always" + "liberty/use-logical-spec": [ + "always", + { + "except": ["left", "right"] + } + ] } } diff --git a/packages/calcite-components/.stylelintrc.json b/packages/calcite-components/.stylelintrc.json index 5cbf73c088b..10ebb9cdd91 100644 --- a/packages/calcite-components/.stylelintrc.json +++ b/packages/calcite-components/.stylelintrc.json @@ -4,7 +4,12 @@ "plugins": ["stylelint-use-logical-spec"], "rules": { "length-zero-no-unit": true, - "liberty/use-logical-spec": "always", + "liberty/use-logical-spec": [ + "always", + { + "except": ["left", "right"] + } + ], "no-descending-specificity": [ true, { diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md index 250de1f20a8..e670144bf9b 100644 --- a/packages/calcite-components/CHANGELOG.md +++ b/packages/calcite-components/CHANGELOG.md @@ -3,216 +3,110 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. -## [2.11.0-next.29](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.28...@esri/calcite-components@2.11.0-next.29) (2024-07-30) +## [2.12.0-next.4](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.12.0-next.3...@esri/calcite-components@2.12.0-next.4) (2024-08-02) ### Bug Fixes -- **dialog:** fix menu positioning when when overlayPositioning is 'fixed' and menuOpen is true ([#9891](https://github.com/Esri/calcite-design-system/issues/9891)) ([6911682](https://github.com/Esri/calcite-design-system/commit/69116826923b31259c36cdf1c262128763c1b016)), closes [#9876](https://github.com/Esri/calcite-design-system/issues/9876) -- improve browser check to resolve SSR errors ([#9897](https://github.com/Esri/calcite-design-system/issues/9897)) ([94683e3](https://github.com/Esri/calcite-design-system/commit/94683e3de58e2b24d05f605770eef7f5b599d835)), closes [#9242](https://github.com/Esri/calcite-design-system/issues/9242) -- **input-date-picker:** ensure initial value is in range ([#9894](https://github.com/Esri/calcite-design-system/issues/9894)) ([b7b1705](https://github.com/Esri/calcite-design-system/commit/b7b17058e15815634f4f4acdc83c8e5e3e649c50)), closes [#9282](https://github.com/Esri/calcite-design-system/issues/9282) +- **input-time-zone:** translate region names ([#9940](https://github.com/Esri/calcite-design-system/issues/9940)) ([f975adb](https://github.com/Esri/calcite-design-system/commit/f975adb0ec56aca487eec83db24f1d95bce6c73f)), closes [#9018](https://github.com/Esri/calcite-design-system/issues/9018) -## [2.11.0-next.28](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.27...@esri/calcite-components@2.11.0-next.28) (2024-07-30) - -### Features - -- **shell-panel:** deprecate float displayMode and add float-content and float-all ([#9795](https://github.com/Esri/calcite-design-system/issues/9795)) ([9beb6eb](https://github.com/Esri/calcite-design-system/commit/9beb6eba2971b3f06d9e4ee3c625c276561b9542)), closes [#7513](https://github.com/Esri/calcite-design-system/issues/7513) - -## [2.11.0-next.27](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.26...@esri/calcite-components@2.11.0-next.27) (2024-07-29) - -### Bug Fixes - -- **tooltip:** allow focusing on a reference element and then clicking on a tooltip ([#9878](https://github.com/Esri/calcite-design-system/issues/9878)) ([af467a1](https://github.com/Esri/calcite-design-system/commit/af467a16fd10788e103e96ab6c19cff3ee9af6b9)), closes [#9840](https://github.com/Esri/calcite-design-system/issues/9840) - -## [2.11.0-next.26](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.25...@esri/calcite-components@2.11.0-next.26) (2024-07-29) - -### Features - -- **combobox-item:** apply heading color according to updated spec ([#9883](https://github.com/Esri/calcite-design-system/issues/9883)) ([d8ddf57](https://github.com/Esri/calcite-design-system/commit/d8ddf57eec1b9aa009cbe1c18b3c8146fc54b1ca)), closes [#9881](https://github.com/Esri/calcite-design-system/issues/9881) -- **dialog:** add padding to default slot ([#9871](https://github.com/Esri/calcite-design-system/issues/9871)) ([9f06123](https://github.com/Esri/calcite-design-system/commit/9f06123ac2f5b152ce2f27a2ca64f46e212c5a9b)), closes [#9869](https://github.com/Esri/calcite-design-system/issues/9869) - -### Bug Fixes - -- **panel:** correct footer padding and layout ([#9868](https://github.com/Esri/calcite-design-system/issues/9868)) ([b25a0ae](https://github.com/Esri/calcite-design-system/commit/b25a0ae7427613c9b75dd763327f622894ca1d22)), closes [#9858](https://github.com/Esri/calcite-design-system/issues/9858) [#9857](https://github.com/Esri/calcite-design-system/issues/9857) -- **tab-title:** Adjust hover styling for `bordered` Tab Title ([#9867](https://github.com/Esri/calcite-design-system/issues/9867)) ([2c62917](https://github.com/Esri/calcite-design-system/commit/2c629172c3f5f6facbe9d9424daaae9f5dbdf344)), closes [#9854](https://github.com/Esri/calcite-design-system/issues/9854) - -## [2.11.0-next.25](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.24...@esri/calcite-components@2.11.0-next.25) (2024-07-26) - -### Features - -- **dialog:** adds new dialog component and deprecates the modal component ([#9751](https://github.com/Esri/calcite-design-system/issues/9751)) ([0cdd327](https://github.com/Esri/calcite-design-system/commit/0cdd327438f43248b33a5244a2fb18c31b92d582)), closes [#7886](https://github.com/Esri/calcite-design-system/issues/7886) - -## [2.11.0-next.24](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.23...@esri/calcite-components@2.11.0-next.24) (2024-07-25) - -### Bug Fixes - -- **panel, flow-item:** prevent footer slots from conflicting with each other ([#9856](https://github.com/Esri/calcite-design-system/issues/9856)) ([f3a26b6](https://github.com/Esri/calcite-design-system/commit/f3a26b6074f702cfc3c2638302cf4454a2a99a3d)), closes [#9855](https://github.com/Esri/calcite-design-system/issues/9855) - -## [2.11.0-next.23](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.22...@esri/calcite-components@2.11.0-next.23) (2024-07-25) - -### Bug Fixes - -- **carousel:** Prevent duplicate animation when navigating via keyboard ([#9848](https://github.com/Esri/calcite-design-system/issues/9848)) ([37229a5](https://github.com/Esri/calcite-design-system/commit/37229a5de4a6338c6d921d2def6afc38300bf636)), closes [#9471](https://github.com/Esri/calcite-design-system/issues/9471) - -## [2.11.0-next.22](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.21...@esri/calcite-components@2.11.0-next.22) (2024-07-25) +## [2.12.0-next.3](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.12.0-next.2...@esri/calcite-components@2.12.0-next.3) (2024-08-02) ### Bug Fixes -- **shell:** fix resizing a slotted shell-panel when clicking to resize ([#9846](https://github.com/Esri/calcite-design-system/issues/9846)) ([2318905](https://github.com/Esri/calcite-design-system/commit/23189059dd8a0efa4e665c5a10d2dc1568e0d6ef)), closes [#9807](https://github.com/Esri/calcite-design-system/issues/9807) -- **tabs:** Update tab title indicator display ([#9666](https://github.com/Esri/calcite-design-system/issues/9666)) ([d570023](https://github.com/Esri/calcite-design-system/commit/d570023ab447b6ba6694c38b611efae4db2cc0eb)), closes [#8800](https://github.com/Esri/calcite-design-system/issues/8800) [#8772](https://github.com/Esri/calcite-design-system/issues/8772) - -## [2.11.0-next.21](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.20...@esri/calcite-components@2.11.0-next.21) (2024-07-23) - -### Features - -- **combobox:** append custom values to top of dropdown ([#9817](https://github.com/Esri/calcite-design-system/issues/9817)) ([287448b](https://github.com/Esri/calcite-design-system/commit/287448b432d0e93b0b183282cca07867ab29a678)), closes [#7288](https://github.com/Esri/calcite-design-system/issues/7288) - -## [2.11.0-next.20](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.19...@esri/calcite-components@2.11.0-next.20) (2024-07-23) - -### Bug Fixes - -- **time-picker:** render meridiem first for korean locale ([#9842](https://github.com/Esri/calcite-design-system/issues/9842)) ([6ed4d21](https://github.com/Esri/calcite-design-system/commit/6ed4d21d9429a42389657cce6d65ac814ac02a16)), closes [#9720](https://github.com/Esri/calcite-design-system/issues/9720) - -## [2.11.0-next.19](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.18...@esri/calcite-components@2.11.0-next.19) (2024-07-23) - -### Bug Fixes - -- **tabs:** handle tab close events that remove the associated tab-title and tab elements from the DOM ([#9768](https://github.com/Esri/calcite-design-system/issues/9768)) ([d945793](https://github.com/Esri/calcite-design-system/commit/d945793830940b578c21b6a48e592eb56503a1ad)), closes [#7155](https://github.com/Esri/calcite-design-system/issues/7155) - -## [2.11.0-next.18](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.17...@esri/calcite-components@2.11.0-next.18) (2024-07-22) - -### Bug Fixes - -- **combobox-item:** tweak center content font-weight and spacing ([#9818](https://github.com/Esri/calcite-design-system/issues/9818)) ([e2bddcf](https://github.com/Esri/calcite-design-system/commit/e2bddcf4374d043246b969106090f543add81c52)), closes [#3695](https://github.com/Esri/calcite-design-system/issues/3695) - -## [2.11.0-next.17](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.16...@esri/calcite-components@2.11.0-next.17) (2024-07-22) - -### Features - -- **combobox, combobox-item:** add `metadata` support for filtering ([#9819](https://github.com/Esri/calcite-design-system/issues/9819)) ([bd90f63](https://github.com/Esri/calcite-design-system/commit/bd90f638b6da0879b92dadbba6688e9590c8fe7f)), closes [#9796](https://github.com/Esri/calcite-design-system/issues/9796) - -## [2.11.0-next.16](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.15...@esri/calcite-components@2.11.0-next.16) (2024-07-22) - -### Features - -- **tooltip:** support touch events ([#9487](https://github.com/Esri/calcite-design-system/issues/9487)) ([77459fb](https://github.com/Esri/calcite-design-system/commit/77459fbfb54163dffb85e9ca1178e39938bf38eb)), closes [#9273](https://github.com/Esri/calcite-design-system/issues/9273) - -## [2.11.0-next.15](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.14...@esri/calcite-components@2.11.0-next.15) (2024-07-19) - -### Features +- **combobox:** fix selection of items that were previously disabled ([#9943](https://github.com/Esri/calcite-design-system/issues/9943)) ([368abed](https://github.com/Esri/calcite-design-system/commit/368abed2dc5fcaa127adeeb63c47553a41f0e75c)), closes [#9719](https://github.com/Esri/calcite-design-system/issues/9719) -- **color-picker, color-picker-hex-input:** Add input auto commit, blur and auto select enhancements. ([#9701](https://github.com/Esri/calcite-design-system/issues/9701)) ([281a869](https://github.com/Esri/calcite-design-system/commit/281a86954e266a554dfbbf96c0a641820f11dc56)), closes [#9624](https://github.com/Esri/calcite-design-system/issues/9624) - -## [2.11.0-next.14](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.13...@esri/calcite-components@2.11.0-next.14) (2024-07-16) +## [2.11.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0...@esri/calcite-components@2.11.1) (2024-08-02) ### Bug Fixes -- **radio-button-group:** remove blank clickable space outside of label ([#9793](https://github.com/Esri/calcite-design-system/issues/9793)) ([818a33e](https://github.com/Esri/calcite-design-system/commit/818a33edd8a8114b8a8a09f1bb8a5ad78fc9c8a0)), closes [#6703](https://github.com/Esri/calcite-design-system/issues/6703) +- **block:** Display correct header spacing when heading or description are present ([#9924](https://github.com/Esri/calcite-design-system/issues/9924)) ([d8f1077](https://github.com/Esri/calcite-design-system/commit/d8f1077c649f9f45f0db7e00a916a4261cd0adf2)) +- **panel, flow-item:** Fix header padding regression ([#9936](https://github.com/Esri/calcite-design-system/issues/9936)) ([90e9368](https://github.com/Esri/calcite-design-system/commit/90e93681c6926eec8480c4028f2797046ebd54f4)) -## [2.11.0-next.13](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.12...@esri/calcite-components@2.11.0-next.13) (2024-07-16) +## [2.12.0-next.2](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.12.0-next.1...@esri/calcite-components@2.12.0-next.2) (2024-08-02) ### Bug Fixes -- **deps:** move @types/sortablejs as a dependency so the public types resolve properly ([#9786](https://github.com/Esri/calcite-design-system/issues/9786)) ([e36268b](https://github.com/Esri/calcite-design-system/commit/e36268babbd311b3405d376063f0ae5fbb35f873)), closes [#9505](https://github.com/Esri/calcite-design-system/issues/9505) - -## [2.11.0-next.12](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.11...@esri/calcite-components@2.11.0-next.12) (2024-07-16) - -### Features - -- **combobox, combobox-item:** add `description`, `shortHeading` props and `content-end` slot ([#9771](https://github.com/Esri/calcite-design-system/issues/9771)) ([25a4778](https://github.com/Esri/calcite-design-system/commit/25a4778cf7ebbdcfbe6f7da7e0c86238e7cbf819)), closes [#3695](https://github.com/Esri/calcite-design-system/issues/3695) - -## [2.11.0-next.11](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.10...@esri/calcite-components@2.11.0-next.11) (2024-07-16) - -### Features - -- **panel, flow-item:** add alerts slot ([#9778](https://github.com/Esri/calcite-design-system/issues/9778)) ([5ba517c](https://github.com/Esri/calcite-design-system/commit/5ba517c9d934e88c393eab90e5c0d16da24c43b2)), closes [#9772](https://github.com/Esri/calcite-design-system/issues/9772) +- **shell:** position side panels above the center content ([#9912](https://github.com/Esri/calcite-design-system/issues/9912)) ([3c061b8](https://github.com/Esri/calcite-design-system/commit/3c061b8c020de153f96f11968636a891fd46ed81)), closes [#6658](https://github.com/Esri/calcite-design-system/issues/6658) -## [2.11.0-next.10](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.9...@esri/calcite-components@2.11.0-next.10) (2024-07-15) - -### Features - -- **chip:** enhance multi-select group affordance ([#9286](https://github.com/Esri/calcite-design-system/issues/9286)) ([93a17a1](https://github.com/Esri/calcite-design-system/commit/93a17a17c670aaa2a6f443ecc6b9d3fdfde859ac)), closes [#9055](https://github.com/Esri/calcite-design-system/issues/9055) [#7425](https://github.com/Esri/calcite-design-system/issues/7425) +## [2.12.0-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.12.0-next.0...@esri/calcite-components@2.12.0-next.1) (2024-08-01) ### Bug Fixes -- **block:** remove top padding when no heading is defined ([#9782](https://github.com/Esri/calcite-design-system/issues/9782)) ([d71e064](https://github.com/Esri/calcite-design-system/commit/d71e0648b03f138cdef2e8e9f2868d849e1ed04a)), closes [#9753](https://github.com/Esri/calcite-design-system/issues/9753) - -## [2.11.0-next.9](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.8...@esri/calcite-components@2.11.0-next.9) (2024-07-15) - -### Features - -- provide info message on stamped version instead of warning ([#9739](https://github.com/Esri/calcite-design-system/issues/9739)) ([6ccb12a](https://github.com/Esri/calcite-design-system/commit/6ccb12a17ec371ba13fe144f8d37fdfb607dfce2)), closes [#9721](https://github.com/Esri/calcite-design-system/issues/9721) +- **button:** drop loader fade-in/out animation ([#9929](https://github.com/Esri/calcite-design-system/issues/9929)) ([0f8a4a3](https://github.com/Esri/calcite-design-system/commit/0f8a4a3777065434baf5a8bf6b43ae53b0e6659a)), closes [#8576](https://github.com/Esri/calcite-design-system/issues/8576) -## [2.11.0-next.8](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.7...@esri/calcite-components@2.11.0-next.8) (2024-07-15) +## [2.12.0-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.1-next.0...@esri/calcite-components@2.12.0-next.0) (2024-08-01) ### Features -- **panel, flow-item:** add beforeClose property ([#9770](https://github.com/Esri/calcite-design-system/issues/9770)) ([fe32441](https://github.com/Esri/calcite-design-system/commit/fe32441883f3c793e5994fec594325362e5bef61)), closes [#9769](https://github.com/Esri/calcite-design-system/issues/9769) - -## [2.11.0-next.7](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.6...@esri/calcite-components@2.11.0-next.7) (2024-07-15) - -### Bug Fixes - -- **tile:** center align slot's text when alignment is equal to center ([#9773](https://github.com/Esri/calcite-design-system/issues/9773)) ([4a26398](https://github.com/Esri/calcite-design-system/commit/4a263988b72faca473e993aebe0c7f61b12a6d19)), closes [#9540](https://github.com/Esri/calcite-design-system/issues/9540) - -## [2.11.0-next.6](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.5...@esri/calcite-components@2.11.0-next.6) (2024-07-12) +- **input-time-zone:** add region mode ([#9873](https://github.com/Esri/calcite-design-system/issues/9873)) ([7111a51](https://github.com/Esri/calcite-design-system/commit/7111a51bd4cd4ff8b27a7947408b8ffe4b94319f)), closes [#9018](https://github.com/Esri/calcite-design-system/issues/9018) +- **input-time-zone:** add search placeholder icon to provide hint ([#9892](https://github.com/Esri/calcite-design-system/issues/9892)) ([923c8f7](https://github.com/Esri/calcite-design-system/commit/923c8f71367f5e8c01153c1b69f67683f2300c58)), closes [#9017](https://github.com/Esri/calcite-design-system/issues/9017) ### Bug Fixes -- **shell:** update shell to correctly position calcite shell panel at shell's bottom ([#9748](https://github.com/Esri/calcite-design-system/issues/9748)) ([f56c625](https://github.com/Esri/calcite-design-system/commit/f56c625188c634b7fcc51d70f9e3ab2e287fda72)), closes [#8269](https://github.com/Esri/calcite-design-system/issues/8269) +- **dropdown:** ensure `setFocus` focuses the trigger ([#9917](https://github.com/Esri/calcite-design-system/issues/9917)) ([3b7d880](https://github.com/Esri/calcite-design-system/commit/3b7d880af91ef081295df9eb14b31c8c26cd268e)), closes [#9731](https://github.com/Esri/calcite-design-system/issues/9731) +- improve all initial floating-ui positioning ([#9937](https://github.com/Esri/calcite-design-system/issues/9937)) ([7d21438](https://github.com/Esri/calcite-design-system/commit/7d214385bea68185eda6228315d8fb7cc91fa063)), closes [#5697](https://github.com/Esri/calcite-design-system/issues/5697) +- **panel, flow-item:** fix header padding regression ([#9936](https://github.com/Esri/calcite-design-system/issues/9936)) ([f618380](https://github.com/Esri/calcite-design-system/commit/f61838065070729f81e54afdb17584578566b96a)), closes [#9921](https://github.com/Esri/calcite-design-system/issues/9921) -## [2.11.0-next.5](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.4...@esri/calcite-components@2.11.0-next.5) (2024-07-12) +## [2.11.1-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.31...@esri/calcite-components@2.11.1-next.0) (2024-08-01) ### Bug Fixes -- **tile:** center align contentTop and contentBottom slots when alignment prop equals "center" ([#9732](https://github.com/Esri/calcite-design-system/issues/9732)) ([a462498](https://github.com/Esri/calcite-design-system/commit/a462498a0afd85a72cc78cdc8d119c582628247e)), closes [#9540](https://github.com/Esri/calcite-design-system/issues/9540) +- **block:** display correct header spacing when heading or description are present ([#9924](https://github.com/Esri/calcite-design-system/issues/9924)) ([23d67b4](https://github.com/Esri/calcite-design-system/commit/23d67b4af5843ec92790f6de0c338885f30ca779)), closes [#9920](https://github.com/Esri/calcite-design-system/issues/9920) -## [2.11.0-next.4](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.3...@esri/calcite-components@2.11.0-next.4) (2024-07-12) - -### Bug Fixes - -- **panel, flow-item:** fix footer-padding CSS prop regression ([#9757](https://github.com/Esri/calcite-design-system/issues/9757)) ([94b808c](https://github.com/Esri/calcite-design-system/commit/94b808c7238cf0ba183adc1ab365efdedaaaa7a7)) - -## [2.11.0-next.3](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.2...@esri/calcite-components@2.11.0-next.3) (2024-07-11) - -### Bug Fixes - -- **input-number:** restore decimal input mode default ([#9741](https://github.com/Esri/calcite-design-system/issues/9741)) ([9264011](https://github.com/Esri/calcite-design-system/commit/926401188ecf6f03b3e9b386863407172ceb0eab)), closes [#9740](https://github.com/Esri/calcite-design-system/issues/9740) - -## [2.11.0-next.2](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.1...@esri/calcite-components@2.11.0-next.2) (2024-07-08) +## [2.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.10.1...@esri/calcite-components@2.11.0) (2024-07-31) ### Features -- **panel, flow-item:** add scale property ([#9730](https://github.com/Esri/calcite-design-system/issues/9730)) ([1cc65e7](https://github.com/Esri/calcite-design-system/commit/1cc65e73ba6ba1119f6f9890c6c4ecf23922c6ca)), closes [#6980](https://github.com/Esri/calcite-design-system/issues/6980) - -## [2.11.0-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.0...@esri/calcite-components@2.11.0-next.1) (2024-07-05) +- **chip:** Enhance multi-select group affordance ([#9286](https://github.com/Esri/calcite-design-system/issues/9286)) ([fd150e1](https://github.com/Esri/calcite-design-system/commit/fd150e1ef6fdce71a25dfad6355d1963c81b6474)) +- **color-picker, color-picker-hex-input:** Add input auto commit, blur and auto select enhancements. ([#9701](https://github.com/Esri/calcite-design-system/issues/9701)) ([b2be625](https://github.com/Esri/calcite-design-system/commit/b2be62566821e36b985d133b1c867b3cfb51fa84)) +- **combobox-item:** Apply heading color according to updated spec ([#9883](https://github.com/Esri/calcite-design-system/issues/9883)) ([9f642ff](https://github.com/Esri/calcite-design-system/commit/9f642fffba76555d3cb91aa0a05bb2e026f1cc58)) +- **combobox, combobox-item:** Add `description`, `shortHeading` props and `content-end` slot ([#9771](https://github.com/Esri/calcite-design-system/issues/9771)) ([78eb555](https://github.com/Esri/calcite-design-system/commit/78eb5557deee8c04d857f79061d29d35bc2473ee)) +- **combobox, combobox-item:** Add `metadata` support for filtering ([#9819](https://github.com/Esri/calcite-design-system/issues/9819)) ([5de7787](https://github.com/Esri/calcite-design-system/commit/5de778772c7e99a643598e1c3c829498f98865c1)) +- **combobox:** Append custom values to top of dropdown ([#9817](https://github.com/Esri/calcite-design-system/issues/9817)) ([bd55097](https://github.com/Esri/calcite-design-system/commit/bd55097cb09f9cedc5cc57ecd9c2ac9ce662ee54)) +- **dialog:** Add padding to default slot ([#9871](https://github.com/Esri/calcite-design-system/issues/9871)) ([9d89d1d](https://github.com/Esri/calcite-design-system/commit/9d89d1d5a791b899bd07ce3c01203d443e684f99)) +- **dialog:** Adds new dialog component and deprecates the modal component ([#9751](https://github.com/Esri/calcite-design-system/issues/9751)) ([0111c23](https://github.com/Esri/calcite-design-system/commit/0111c236a30aebe55654ee442134962df3d62042)) +- **icon:** Type icon names ([#9650](https://github.com/Esri/calcite-design-system/issues/9650)) ([7513f3a](https://github.com/Esri/calcite-design-system/commit/7513f3a2b870bb13e8937fd1c3ac1f80fd350908)) +- **panel, flow-item:** Add alerts slot ([#9778](https://github.com/Esri/calcite-design-system/issues/9778)) ([8b9b820](https://github.com/Esri/calcite-design-system/commit/8b9b820611e653b9fffd8602ed8458eb790504ba)) +- **panel, flow-item:** Add beforeClose property ([#9770](https://github.com/Esri/calcite-design-system/issues/9770)) ([aefd3cb](https://github.com/Esri/calcite-design-system/commit/aefd3cb39d5f5eab7adb94d1d1617ebc51bc80be)) +- **panel, flow-item:** Add scale property ([#9730](https://github.com/Esri/calcite-design-system/issues/9730)) ([27c597e](https://github.com/Esri/calcite-design-system/commit/27c597e87e7f5ebce98899062e775e8aed3ba52c)) +- Provide info message on stamped version instead of warning ([#9739](https://github.com/Esri/calcite-design-system/issues/9739)) ([b25cb7b](https://github.com/Esri/calcite-design-system/commit/b25cb7b4d7a328115d66bc2f897d8c1bbdadeab8)) +- **shell-panel:** Deprecate float displayMode and add float-content and float-all ([#9795](https://github.com/Esri/calcite-design-system/issues/9795)) ([bf93728](https://github.com/Esri/calcite-design-system/commit/bf93728a507360a6b479f8b14d6da52ce517415f)) +- **tooltip:** Support touch events ([#9487](https://github.com/Esri/calcite-design-system/issues/9487)) ([633706b](https://github.com/Esri/calcite-design-system/commit/633706b07ee56c646b126e33c99afe7292f9db04)) ### Bug Fixes -- **segmented-control:** Make check state update correctly ([#9733](https://github.com/Esri/calcite-design-system/issues/9733)) ([a2f3741](https://github.com/Esri/calcite-design-system/commit/a2f37415513a2f2e8471dcef982351b7c82b225b)), closes [#6860](https://github.com/Esri/calcite-design-system/issues/6860) - -## [2.11.0-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.10.2-next.2...@esri/calcite-components@2.11.0-next.0) (2024-07-02) - -### Features - -- **icon:** type icon names ([#9650](https://github.com/Esri/calcite-design-system/issues/9650)) ([9c2ba2f](https://github.com/Esri/calcite-design-system/commit/9c2ba2fb21f195387a8dc0a95009c620f070378d)), closes [#8858](https://github.com/Esri/calcite-design-system/issues/8858) +- **block-section:** Apply missing CSS class to start/end icon ([#9688](https://github.com/Esri/calcite-design-system/issues/9688)) ([2169ed2](https://github.com/Esri/calcite-design-system/commit/2169ed2ac3e5614274e23d2005c90f22e95e6f57)) +- **block:** Remove top padding when no heading is defined ([#9782](https://github.com/Esri/calcite-design-system/issues/9782)) ([704f5df](https://github.com/Esri/calcite-design-system/commit/704f5dfbe47b8cc0e6b6b5f2a1689a4827379f84)) +- **carousel:** Prevent duplicate animation when navigating via keyboard ([#9848](https://github.com/Esri/calcite-design-system/issues/9848)) ([cfdbd44](https://github.com/Esri/calcite-design-system/commit/cfdbd4484443457ddb791288e11d29f8bee1d9b3)) +- **combobox-item:** Tweak center content font-weight and spacing ([#9818](https://github.com/Esri/calcite-design-system/issues/9818)) ([a67c4af](https://github.com/Esri/calcite-design-system/commit/a67c4af175525d24ca146185a46b56bee775a55c)) +- **deps:** Move @types/sortablejs as a dependency so the public types resolve properly ([#9786](https://github.com/Esri/calcite-design-system/issues/9786)) ([3d47c52](https://github.com/Esri/calcite-design-system/commit/3d47c521ded02319f42f57a66182293881a416d9)) +- **dialog:** Fix menu positioning when when overlayPositioning is 'fixed' and menuOpen is true ([#9891](https://github.com/Esri/calcite-design-system/issues/9891)) ([4390177](https://github.com/Esri/calcite-design-system/commit/43901771755e8c151ab13ec5e23f6712ac5f83fe)) +- Fix issue in Firefox where disabled elements were incorrectly enabled when a sibling was enabled ([#9710](https://github.com/Esri/calcite-design-system/issues/9710)) ([cd4d52c](https://github.com/Esri/calcite-design-system/commit/cd4d52ce05e5f3301ff5e3ece966e2304bd96a68)) +- **flow-item:** Set closed property to true when internal panel is closed ([#9715](https://github.com/Esri/calcite-design-system/issues/9715)) ([f7d2a4f](https://github.com/Esri/calcite-design-system/commit/f7d2a4f8410c4c4a4174417f87d6585fa51e78b6)) +- Improve browser check to resolve SSR errors ([#9897](https://github.com/Esri/calcite-design-system/issues/9897)) ([bdb225b](https://github.com/Esri/calcite-design-system/commit/bdb225b6a430e47527b5a957a61c632895ae0f0c)) +- **input-date-picker:** Ensure initial value is in range ([#9894](https://github.com/Esri/calcite-design-system/issues/9894)) ([7d05134](https://github.com/Esri/calcite-design-system/commit/7d051344f598445d68c04bce09d7c1e9463884bd)) +- **input-number:** Restore decimal input mode default ([#9741](https://github.com/Esri/calcite-design-system/issues/9741)) ([1165dca](https://github.com/Esri/calcite-design-system/commit/1165dca7a84b313ff0c03039348597fcddd9da32)) +- **panel, flow-item:** Fix footer-padding CSS prop regression ([#9757](https://github.com/Esri/calcite-design-system/issues/9757)) ([f935790](https://github.com/Esri/calcite-design-system/commit/f935790d6952f167b969fe1443e8bc680731a558)) +- **panel, flow-item:** Prevent footer slots from conflicting with each other ([#9856](https://github.com/Esri/calcite-design-system/issues/9856)) ([cffaff8](https://github.com/Esri/calcite-design-system/commit/cffaff85fe7587398df613d084446533441ee7ab)) +- **panel:** Correct footer padding and layout ([#9868](https://github.com/Esri/calcite-design-system/issues/9868)) ([1e02ece](https://github.com/Esri/calcite-design-system/commit/1e02ecee51b3f81c0c19eedd7de9ef8f4b418fc0)) +- **radio-button-group:** Remove blank clickable space outside of label ([#9793](https://github.com/Esri/calcite-design-system/issues/9793)) ([4cc24a0](https://github.com/Esri/calcite-design-system/commit/4cc24a0dbb3b494e2361b185a8aba8be987a7188)) +- **segmented-control:** Make check state update correctly ([#9733](https://github.com/Esri/calcite-design-system/issues/9733)) ([602c922](https://github.com/Esri/calcite-design-system/commit/602c922e8a2e59e3dcb46928779143c8be3a8c2d)) +- **shell:** Fix resizing a slotted shell-panel when clicking to resize ([#9846](https://github.com/Esri/calcite-design-system/issues/9846)) ([326001c](https://github.com/Esri/calcite-design-system/commit/326001cd1eafaa0dd579e34d2e219efcdca58816)) +- **shell:** Update shell to correctly position calcite shell panel at shell's bottom ([#9748](https://github.com/Esri/calcite-design-system/issues/9748)) ([5959db7](https://github.com/Esri/calcite-design-system/commit/5959db790378634c1800a7bcdb94568ba8c1fadb)) +- **tab-title:** Adjust hover styling for `bordered` Tab Title ([#9867](https://github.com/Esri/calcite-design-system/issues/9867)) ([a77cd27](https://github.com/Esri/calcite-design-system/commit/a77cd27ef8cf3b512e56a226b91efcea3f5bff52)) +- **tabs:** Handle tab close events that remove the associated tab-title and tab elements from the DOM ([#9768](https://github.com/Esri/calcite-design-system/issues/9768)) ([bda619c](https://github.com/Esri/calcite-design-system/commit/bda619cdabcf8b25f269eb830d5ce2f7e649cabf)) +- **tabs:** Update tab title indicator display ([#9666](https://github.com/Esri/calcite-design-system/issues/9666)) ([5f0914b](https://github.com/Esri/calcite-design-system/commit/5f0914bd098cbc66e74111307ed1602851ee3880)) +- **tile:** Center align contentTop and contentBottom slots when alignment prop equals "center" ([#9732](https://github.com/Esri/calcite-design-system/issues/9732)) ([1a8393b](https://github.com/Esri/calcite-design-system/commit/1a8393b8cc6a50b915e28e722229457b07af83fd)) +- **tile:** Center align slot's text when alignment is equal to center ([#9773](https://github.com/Esri/calcite-design-system/issues/9773)) ([8611bfc](https://github.com/Esri/calcite-design-system/commit/8611bfcf72ede1725a44698eee19d3ef16eea933)) +- **time-picker:** Render meridiem first for korean locale ([#9842](https://github.com/Esri/calcite-design-system/issues/9842)) ([897f924](https://github.com/Esri/calcite-design-system/commit/897f9248ddac7b878a0daaa993fc3136363986b7)) +- **tooltip:** Allow focusing on a reference element and then clicking on a tooltip ([#9878](https://github.com/Esri/calcite-design-system/issues/9878)) ([dfca2d4](https://github.com/Esri/calcite-design-system/commit/dfca2d4fe113c4a9321423749a170498fa13dfb3)) +- Widen icon type to allow string ([#9915](https://github.com/Esri/calcite-design-system/issues/9915)) ([44138b1](https://github.com/Esri/calcite-design-system/commit/44138b13b4df7413b19e6258cdae9bb18a9e7142)) -## [2.10.2-next.2](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.10.2-next.1...@esri/calcite-components@2.10.2-next.2) (2024-07-01) - -### Bug Fixes - -- **block-section:** apply missing CSS class to start/end icon ([#9688](https://github.com/Esri/calcite-design-system/issues/9688)) ([bceeab5](https://github.com/Esri/calcite-design-system/commit/bceeab50480c5011505704eb80af85968eb5a972)), closes [#9703](https://github.com/Esri/calcite-design-system/issues/9703) - -## [2.10.2-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.10.2-next.0...@esri/calcite-components@2.10.2-next.1) (2024-07-01) - -### Bug Fixes - -- **flow-item:** set closed property to true when internal panel is closed ([#9715](https://github.com/Esri/calcite-design-system/issues/9715)) ([69661bc](https://github.com/Esri/calcite-design-system/commit/69661bcdee0f189fa9f7eed95fc98e584a115d06)), closes [#9714](https://github.com/Esri/calcite-design-system/issues/9714) - -## [2.10.2-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.10.1-next.0...@esri/calcite-components@2.10.2-next.0) (2024-06-28) - -### Bug Fixes +### Dependencies -- fix issue in Firefox where disabled elements were incorrectly enabled when a sibling was enabled ([#9710](https://github.com/Esri/calcite-design-system/issues/9710)) ([1d9abfc](https://github.com/Esri/calcite-design-system/commit/1d9abfce816716a1cbb2fd0ede73ce198babafa0)) +- The following workspace dependencies were updated + - dependencies + - @esri/calcite-ui-icons bumped from ^3.29.1-next.0 to ^3.30.0 ## [2.10.1](https://github.com/esri/calcite-design-system/compare/@esri/calcite-components@2.10.0...@esri/calcite-components@2.10.1) (2024-06-27) diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json index 94e78b1d3e4..5f4599abfd7 100644 --- a/packages/calcite-components/package.json +++ b/packages/calcite-components/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components", - "version": "2.11.0-next.29", + "version": "2.12.0-next.4", "homepage": "https://developers.arcgis.com/calcite-design-system/", "description": "Web Components for Esri's Calcite Design System.", "main": "dist/index.cjs.js", @@ -20,7 +20,7 @@ ], "scripts": { "build": "npm run util:prep-build-reqs && stencil build", - "postbuild": "npm run util:patch && npm run util:generate-t9n-docs-json && npm run util:clean-readmes", + "postbuild": "npm run util:generate-t9n-docs-json && npm run util:clean-readmes", "build:watch": "npm run util:prep-build-reqs && stencil build --no-docs --watch", "build:watch-dev": "npm run util:prep-build-reqs && stencil build --no-docs --dev --watch", "build-storybook": "npm run util:prep-storybook-build && NODE_OPTIONS=--openssl-legacy-provider storybook build --output-dir ./docs --quiet", @@ -47,8 +47,6 @@ "util:generate-t9n-docs-json": "tsx support/generateT9nDocsJSON.ts", "util:generate-t9n-types": "tsx support/generateT9nTypes.ts", "util:hydration-styles": "tsx support/hydrationStyles.ts", - "util:patch": "npm run util:patch-esm-resolution", - "util:patch-esm-resolution": "tsx support/patchESMResolution.ts", "util:prep-build-reqs": "npm run util:copy-assets && npm run util:generate-t9n-types", "util:prep-storybook-build": "npm run util:prep-build-reqs && stencil build --config stencil.storybook.config.ts && npm run lint:md", "util:sync-t9n-en-bundles": "tsx support/syncEnT9nBundles.ts", @@ -63,7 +61,7 @@ "directory": "packages/calcite-components" }, "dependencies": { - "@esri/calcite-ui-icons": "^3.29.1-next.0", + "@esri/calcite-ui-icons": "3.30.1-next.0", "@floating-ui/dom": "1.6.8", "@stencil/core": "4.19.2", "@types/color": "3.0.6", @@ -74,7 +72,7 @@ "focus-trap": "7.5.4", "lodash-es": "4.17.21", "sortablejs": "1.15.1", - "timezone-groups": "0.8.0", + "timezone-groups": "0.9.0", "type-fest": "4.18.2" }, "devDependencies": { diff --git a/packages/calcite-components/readme.md b/packages/calcite-components/readme.md index 458e15890e8..f2b563f42c0 100644 --- a/packages/calcite-components/readme.md +++ b/packages/calcite-components/readme.md @@ -17,12 +17,12 @@ The most common approach for loading Calcite Components is to use the version ho ```html ``` diff --git a/packages/calcite-components/src/assets/styles/_floating-ui.scss b/packages/calcite-components/src/assets/styles/_floating-ui.scss index 3783853269d..4618c4d6ea6 100644 --- a/packages/calcite-components/src/assets/styles/_floating-ui.scss +++ b/packages/calcite-components/src/assets/styles/_floating-ui.scss @@ -1,7 +1,20 @@ -$floating-ui-transform-bottom: translateY(-5px); -$floating-ui-transform-top: translateY(5px); -$floating-ui-transform-left: translateX(5px); -$floating-ui-transform-right: translateX(-5px); +$floating-ui-transition-offset: 5px; + +@mixin floatingUIOffsetBottom { + inset-block-start: -$floating-ui-transition-offset; +} + +@mixin floatingUIOffsetTop { + inset-block-start: $floating-ui-transition-offset; +} + +@mixin floatingUIOffsetLeft { + left: $floating-ui-transition-offset; +} + +@mixin floatingUIOffsetRight { + left: -$floating-ui-transition-offset; +} @mixin floating-ui-base { --calcite-floating-ui-transition: var(--calcite-animation-timing); @@ -12,7 +25,7 @@ $floating-ui-transform-right: translateX(-5px); .calcite-floating-ui-anim { position: relative; transition: var(--calcite-floating-ui-transition); - transition-property: transform, visibility, opacity; + transition-property: inset, left, opacity; opacity: 0; box-shadow: $shadow-2; @apply rounded z-default; @@ -21,7 +34,8 @@ $floating-ui-transform-right: translateX(-5px); @mixin floatingUIAnimActive { opacity: 1; - transform: translate(0); + inset-block: 0; + left: 0; } @mixin floatingUIElemAnim($selector) { @@ -29,19 +43,19 @@ $floating-ui-transform-right: translateX(-5px); @include floatingUIAnim(); &[data-placement^="bottom"] .calcite-floating-ui-anim { - transform: $floating-ui-transform-bottom; + @include floatingUIOffsetBottom(); } &[data-placement^="top"] .calcite-floating-ui-anim { - transform: $floating-ui-transform-top; + @include floatingUIOffsetTop(); } &[data-placement^="left"] .calcite-floating-ui-anim { - transform: $floating-ui-transform-left; + @include floatingUIOffsetLeft(); } &[data-placement^="right"] .calcite-floating-ui-anim { - transform: $floating-ui-transform-right; + @include floatingUIOffsetRight(); } &[data-placement] .calcite-floating-ui-anim--active { @@ -54,19 +68,19 @@ $floating-ui-transform-right: translateX(-5px); @include floatingUIAnim(); :host([data-placement^="bottom"]) .calcite-floating-ui-anim { - transform: $floating-ui-transform-bottom; + @include floatingUIOffsetBottom(); } :host([data-placement^="top"]) .calcite-floating-ui-anim { - transform: $floating-ui-transform-top; + @include floatingUIOffsetTop(); } :host([data-placement^="left"]) .calcite-floating-ui-anim { - transform: $floating-ui-transform-left; + @include floatingUIOffsetLeft(); } :host([data-placement^="right"]) .calcite-floating-ui-anim { - transform: $floating-ui-transform-right; + @include floatingUIOffsetRight(); } :host([data-placement]) .calcite-floating-ui-anim--active { diff --git a/packages/calcite-components/src/assets/styles/_sortable.scss b/packages/calcite-components/src/assets/styles/_sortable.scss index ae119bc7ea5..ba0574aee09 100644 --- a/packages/calcite-components/src/assets/styles/_sortable.scss +++ b/packages/calcite-components/src/assets/styles/_sortable.scss @@ -16,9 +16,9 @@ bg-foreground-2 absolute top-0 - left-0 + start-0 bottom-0 - right-0 + end-0 z-default; } diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 346aed4f24b..ec69dc49efc 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -7,7 +7,7 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; import { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces"; import { RequestedItem } from "./components/accordion/interfaces"; -import { IconName } from "./components/icon/interfaces"; +import { IconNameOrString } from "./components/icon/interfaces"; import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; import { ActionMessages } from "./components/action/assets/action/t9n"; import { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; @@ -103,7 +103,7 @@ import { ValueListMessages } from "./components/value-list/assets/value-list/t9n import { ListItemAndHandle } from "./components/value-list-item/interfaces"; export { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces"; export { RequestedItem } from "./components/accordion/interfaces"; -export { IconName } from "./components/icon/interfaces"; +export { IconNameOrString } from "./components/icon/interfaces"; export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; export { ActionMessages } from "./components/action/assets/action/t9n"; export { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; @@ -243,7 +243,7 @@ export namespace Components { /** * Specifies an icon to display at the end of the component. */ - "iconEnd": IconName; + "iconEnd": IconNameOrString; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -255,7 +255,7 @@ export namespace Components { /** * Specifies an icon to display at the start of the component. */ - "iconStart": IconName; + "iconStart": IconNameOrString; /** * Specifies the type of the icon in the header inherited from the `calcite-accordion`. */ @@ -294,7 +294,7 @@ export namespace Components { /** * Specifies an icon to display. */ - "icon": IconName; + "icon": IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -525,7 +525,7 @@ export namespace Components { /** * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */ - "icon": IconName | boolean; + "icon": IconNameOrString | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -624,7 +624,7 @@ export namespace Components { /** * Specifies an icon to display at the end of the component. */ - "iconEnd": IconName; + "iconEnd": IconNameOrString; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -632,7 +632,7 @@ export namespace Components { /** * Specifies an icon to display at the start of the component. */ - "iconStart": IconName; + "iconStart": IconNameOrString; /** * When `true`, a busy indicator is displayed. */ @@ -667,7 +667,7 @@ export namespace Components { /** * Specifies an icon to display at the end of the component. */ - "iconEnd": IconName; + "iconEnd": IconNameOrString; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -675,7 +675,7 @@ export namespace Components { /** * Specifies an icon to display at the start of the component. */ - "iconStart": IconName; + "iconStart": IconNameOrString; /** * Use this property to override individual strings used by the component. */ @@ -737,7 +737,7 @@ export namespace Components { /** * Specifies an icon to display at the end of the component. */ - "iconEnd": IconName; + "iconEnd": IconNameOrString; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -745,7 +745,7 @@ export namespace Components { /** * Specifies an icon to display at the start of the component. */ - "iconStart": IconName; + "iconStart": IconNameOrString; /** * Specifies the kind of the component, which will apply to the border and background if applicable. */ @@ -1021,7 +1021,7 @@ export namespace Components { /** * Specifies an icon to display. */ - "icon": IconName; + "icon": IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -1299,7 +1299,7 @@ export namespace Components { /** * Specifies the placeholder icon for the input. */ - "placeholderIcon": IconName; + "placeholderIcon": IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -1349,7 +1349,7 @@ export namespace Components { /** * Specifies the validation icon to display under the component. */ - "validationIcon": IconName | boolean; + "validationIcon": IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ @@ -1397,7 +1397,7 @@ export namespace Components { /** * Specifies an icon to display. */ - "icon": IconName; + "icon": IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -1830,7 +1830,7 @@ export namespace Components { /** * Specifies an icon to display at the end of the component. */ - "iconEnd": IconName; + "iconEnd": IconNameOrString; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -1838,7 +1838,7 @@ export namespace Components { /** * Specifies an icon to display at the start of the component. */ - "iconStart": IconName; + "iconStart": IconNameOrString; /** * Accessible name for the component. */ @@ -1881,7 +1881,7 @@ export namespace Components { * Specifies an icon to display. * @default "plus" */ - "icon": IconName; + "icon": IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -2133,7 +2133,7 @@ export namespace Components { * Displays a specific icon. * @see [Icons](https://esri.github.io/calcite-ui-icons) */ - "icon": IconName; + "icon": IconNameOrString; /** * Specifies the size of the component. */ @@ -2232,7 +2232,7 @@ export namespace Components { /** * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */ - "icon": IconName | boolean; + "icon": IconNameOrString | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -2370,7 +2370,7 @@ export namespace Components { /** * Specifies the validation icon to display under the component. */ - "validationIcon": IconName | boolean; + "validationIcon": IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ @@ -2494,7 +2494,7 @@ export namespace Components { /** * Specifies the validation icon to display under the component. */ - "validationIcon": IconName | boolean; + "validationIcon": IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ @@ -2518,7 +2518,7 @@ export namespace Components { /** * Specifies an icon to display. */ - "icon": IconName | boolean; + "icon": IconNameOrString | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -2574,7 +2574,7 @@ export namespace Components { * Specifies an icon to display. * @futureBreaking Remove boolean type as it is not supported. */ - "icon": IconName | boolean; + "icon": IconNameOrString | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -2689,7 +2689,7 @@ export namespace Components { /** * Specifies the validation icon to display under the component. */ - "validationIcon": IconName | boolean; + "validationIcon": IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ @@ -2743,7 +2743,7 @@ export namespace Components { * Specifies an icon to display. * @futureBreaking Remove boolean type as it is not supported. */ - "icon": IconName | boolean; + "icon": IconNameOrString | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -2830,7 +2830,7 @@ export namespace Components { /** * Specifies the validation icon to display under the component. */ - "validationIcon": IconName | boolean; + "validationIcon": IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ @@ -2930,7 +2930,7 @@ export namespace Components { /** * Specifies the validation icon to display under the component. */ - "validationIcon": IconName | boolean; + "validationIcon": IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ @@ -3018,7 +3018,7 @@ export namespace Components { /** * Specifies the validation icon to display under the component. */ - "validationIcon": IconName | boolean; + "validationIcon": IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ @@ -3069,7 +3069,7 @@ export namespace Components { /** * Specifies an icon to display at the end of the component. */ - "iconEnd": IconName; + "iconEnd": IconNameOrString; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -3077,7 +3077,7 @@ export namespace Components { /** * Specifies an icon to display at the start of the component. */ - "iconStart": IconName; + "iconStart": IconNameOrString; /** * Specifies the relationship to the linked document defined in `href`. */ @@ -3358,7 +3358,7 @@ export namespace Components { /** * Specifies an icon to display at the end of the component. */ - "iconEnd": IconName; + "iconEnd": IconNameOrString; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -3366,7 +3366,7 @@ export namespace Components { /** * Specifies an icon to display at the start of the component. */ - "iconStart": IconName; + "iconStart": IconNameOrString; "isTopLevelItem": boolean; /** * Accessible name for the component. @@ -3597,7 +3597,7 @@ export namespace Components { /** * Specifies an icon to display. */ - "icon": IconName; + "icon": IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -3667,7 +3667,7 @@ export namespace Components { /** * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */ - "icon": IconName | boolean; + "icon": IconNameOrString | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -4195,7 +4195,7 @@ export namespace Components { /** * Specifies the validation icon to display under the component. */ - "validationIcon": IconName | boolean; + "validationIcon": IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ @@ -4314,7 +4314,7 @@ export namespace Components { /** * Specifies the validation icon to display under the component. */ - "validationIcon": IconName | boolean; + "validationIcon": IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ @@ -4346,7 +4346,7 @@ export namespace Components { /** * Specifies an icon to display at the end of the component. */ - "iconEnd": IconName; + "iconEnd": IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -4354,7 +4354,7 @@ export namespace Components { /** * Specifies an icon to display at the start of the component. */ - "iconStart": IconName; + "iconStart": IconNameOrString; /** * Defines the layout of the component inherited from parent `calcite-segmented-control`, defaults to `horizontal`. */ @@ -4409,7 +4409,7 @@ export namespace Components { /** * Specifies the validation icon to display under the component. */ - "validationIcon": IconName | boolean; + "validationIcon": IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ @@ -4757,7 +4757,7 @@ export namespace Components { /** * Specifies an icon to display at the end of the primary button. */ - "primaryIconEnd": IconName; + "primaryIconEnd": IconNameOrString; /** * Displays the `primaryIconStart` and/or `primaryIconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -4765,7 +4765,7 @@ export namespace Components { /** * Specifies an icon to display at the start of the primary button. */ - "primaryIconStart": IconName; + "primaryIconStart": IconNameOrString; /** * Accessible name for the primary button. */ @@ -5025,7 +5025,7 @@ export namespace Components { /** * Specifies an icon to display at the end of the component. */ - "iconEnd": IconName; + "iconEnd": IconNameOrString; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -5033,7 +5033,7 @@ export namespace Components { /** * Specifies an icon to display at the start of the component. */ - "iconStart": IconName; + "iconStart": IconNameOrString; "layout": TabLayout; /** * Use this property to override individual strings used by the component. @@ -5361,7 +5361,7 @@ export namespace Components { /** * Specifies the validation icon to display under the component. */ - "validationIcon": IconName | boolean; + "validationIcon": IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ @@ -5416,7 +5416,7 @@ export namespace Components { /** * Specifies an icon to display. */ - "icon": IconName; + "icon": IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -5518,7 +5518,7 @@ export namespace Components { /** * Specifies an icon to display. */ - "icon": IconName; + "icon": IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -5746,7 +5746,7 @@ export namespace Components { /** * Specifies an icon to display at the start of the component. */ - "iconStart": IconName; + "iconStart": IconNameOrString; /** * In ancestor selection mode, show as indeterminate when only some children are selected. */ @@ -6574,6 +6574,7 @@ declare global { }; interface HTMLCalciteComboboxItemElementEventMap { "calciteComboboxItemChange": void; + "calciteInternalComboboxItemChange": void; } interface HTMLCalciteComboboxItemElement extends Components.CalciteComboboxItem, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLCalciteComboboxItemElement, ev: CalciteComboboxItemCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; @@ -8131,7 +8132,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the end of the component. */ - "iconEnd"?: IconName; + "iconEnd"?: IconNameOrString; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -8143,7 +8144,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the start of the component. */ - "iconStart"?: IconName; + "iconStart"?: IconNameOrString; /** * Specifies the type of the icon in the header inherited from the `calcite-accordion`. */ @@ -8180,7 +8181,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display. */ - "icon"?: IconName; + "icon"?: IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -8399,7 +8400,7 @@ declare namespace LocalJSX { /** * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */ - "icon"?: IconName | boolean; + "icon"?: IconNameOrString | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -8518,7 +8519,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the end of the component. */ - "iconEnd"?: IconName; + "iconEnd"?: IconNameOrString; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -8526,7 +8527,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the start of the component. */ - "iconStart"?: IconName; + "iconStart"?: IconNameOrString; /** * When `true`, a busy indicator is displayed. */ @@ -8578,7 +8579,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the end of the component. */ - "iconEnd"?: IconName; + "iconEnd"?: IconNameOrString; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -8586,7 +8587,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the start of the component. */ - "iconStart"?: IconName; + "iconStart"?: IconNameOrString; /** * Use this property to override individual strings used by the component. */ @@ -8648,7 +8649,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the end of the component. */ - "iconEnd"?: IconName; + "iconEnd"?: IconNameOrString; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -8656,7 +8657,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the start of the component. */ - "iconStart"?: IconName; + "iconStart"?: IconNameOrString; /** * Specifies the kind of the component, which will apply to the border and background if applicable. */ @@ -8945,7 +8946,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display. */ - "icon"?: IconName; + "icon"?: IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -9262,7 +9263,7 @@ declare namespace LocalJSX { /** * Specifies the placeholder icon for the input. */ - "placeholderIcon"?: IconName; + "placeholderIcon"?: IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -9302,7 +9303,7 @@ declare namespace LocalJSX { /** * Specifies the validation icon to display under the component. */ - "validationIcon"?: IconName | boolean; + "validationIcon"?: IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ @@ -9350,7 +9351,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display. */ - "icon"?: IconName; + "icon"?: IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -9363,6 +9364,10 @@ declare namespace LocalJSX { * Fires whenever the component is selected or unselected. */ "onCalciteComboboxItemChange"?: (event: CalciteComboboxItemCustomEvent) => void; + /** + * Fires whenever a property the parent combobox needs to know about is changed. + */ + "onCalciteInternalComboboxItemChange"?: (event: CalciteComboboxItemCustomEvent) => void; /** * Specifies the size of the component inherited from the `calcite-combobox`, defaults to `m`. */ @@ -9824,7 +9829,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the end of the component. */ - "iconEnd"?: IconName; + "iconEnd"?: IconNameOrString; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -9832,7 +9837,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the start of the component. */ - "iconStart"?: IconName; + "iconStart"?: IconNameOrString; /** * Accessible name for the component. */ @@ -9878,7 +9883,7 @@ declare namespace LocalJSX { * Specifies an icon to display. * @default "plus" */ - "icon"?: IconName; + "icon"?: IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -10124,7 +10129,7 @@ declare namespace LocalJSX { * Displays a specific icon. * @see [Icons](https://esri.github.io/calcite-ui-icons) */ - "icon"?: IconName; + "icon"?: IconNameOrString; /** * Specifies the size of the component. */ @@ -10228,7 +10233,7 @@ declare namespace LocalJSX { /** * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */ - "icon"?: IconName | boolean; + "icon"?: IconNameOrString | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -10368,7 +10373,7 @@ declare namespace LocalJSX { /** * Specifies the validation icon to display under the component. */ - "validationIcon"?: IconName | boolean; + "validationIcon"?: IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ @@ -10502,7 +10507,7 @@ declare namespace LocalJSX { /** * Specifies the validation icon to display under the component. */ - "validationIcon"?: IconName | boolean; + "validationIcon"?: IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ @@ -10526,7 +10531,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display. */ - "icon"?: IconName | boolean; + "icon"?: IconNameOrString | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -10582,7 +10587,7 @@ declare namespace LocalJSX { * Specifies an icon to display. * @futureBreaking Remove boolean type as it is not supported. */ - "icon"?: IconName | boolean; + "icon"?: IconNameOrString | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -10699,7 +10704,7 @@ declare namespace LocalJSX { /** * Specifies the validation icon to display under the component. */ - "validationIcon"?: IconName | boolean; + "validationIcon"?: IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ @@ -10753,7 +10758,7 @@ declare namespace LocalJSX { * Specifies an icon to display. * @futureBreaking Remove boolean type as it is not supported. */ - "icon"?: IconName | boolean; + "icon"?: IconNameOrString | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -10845,7 +10850,7 @@ declare namespace LocalJSX { /** * Specifies the validation icon to display under the component. */ - "validationIcon"?: IconName | boolean; + "validationIcon"?: IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ @@ -10956,7 +10961,7 @@ declare namespace LocalJSX { /** * Specifies the validation icon to display under the component. */ - "validationIcon"?: IconName | boolean; + "validationIcon"?: IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ @@ -11063,7 +11068,7 @@ declare namespace LocalJSX { /** * Specifies the validation icon to display under the component. */ - "validationIcon"?: IconName | boolean; + "validationIcon"?: IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ @@ -11117,7 +11122,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the end of the component. */ - "iconEnd"?: IconName; + "iconEnd"?: IconNameOrString; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -11125,7 +11130,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the start of the component. */ - "iconStart"?: IconName; + "iconStart"?: IconNameOrString; /** * Specifies the relationship to the linked document defined in `href`. */ @@ -11441,7 +11446,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the end of the component. */ - "iconEnd"?: IconName; + "iconEnd"?: IconNameOrString; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -11449,7 +11454,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the start of the component. */ - "iconStart"?: IconName; + "iconStart"?: IconNameOrString; "isTopLevelItem"?: boolean; /** * Accessible name for the component. @@ -11683,7 +11688,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display. */ - "icon"?: IconName; + "icon"?: IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -11745,7 +11750,7 @@ declare namespace LocalJSX { /** * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */ - "icon"?: IconName | boolean; + "icon"?: IconNameOrString | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -12303,7 +12308,7 @@ declare namespace LocalJSX { /** * Specifies the validation icon to display under the component. */ - "validationIcon"?: IconName | boolean; + "validationIcon"?: IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ @@ -12422,7 +12427,7 @@ declare namespace LocalJSX { /** * Specifies the validation icon to display under the component. */ - "validationIcon"?: IconName | boolean; + "validationIcon"?: IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ @@ -12454,7 +12459,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the end of the component. */ - "iconEnd"?: IconName; + "iconEnd"?: IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -12462,7 +12467,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the start of the component. */ - "iconStart"?: IconName; + "iconStart"?: IconNameOrString; /** * Defines the layout of the component inherited from parent `calcite-segmented-control`, defaults to `horizontal`. */ @@ -12521,7 +12526,7 @@ declare namespace LocalJSX { /** * Specifies the validation icon to display under the component. */ - "validationIcon"?: IconName | boolean; + "validationIcon"?: IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ @@ -12895,7 +12900,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the end of the primary button. */ - "primaryIconEnd"?: IconName; + "primaryIconEnd"?: IconNameOrString; /** * Displays the `primaryIconStart` and/or `primaryIconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -12903,7 +12908,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the start of the primary button. */ - "primaryIconStart"?: IconName; + "primaryIconStart"?: IconNameOrString; /** * Accessible name for the primary button. */ @@ -13141,7 +13146,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the end of the component. */ - "iconEnd"?: IconName; + "iconEnd"?: IconNameOrString; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -13149,7 +13154,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the start of the component. */ - "iconStart"?: IconName; + "iconStart"?: IconNameOrString; "layout"?: TabLayout; /** * Use this property to override individual strings used by the component. @@ -13502,7 +13507,7 @@ declare namespace LocalJSX { /** * Specifies the validation icon to display under the component. */ - "validationIcon"?: IconName | boolean; + "validationIcon"?: IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ @@ -13557,7 +13562,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display. */ - "icon"?: IconName; + "icon"?: IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -13664,7 +13669,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display. */ - "icon"?: IconName; + "icon"?: IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -13906,7 +13911,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the start of the component. */ - "iconStart"?: IconName; + "iconStart"?: IconNameOrString; /** * In ancestor selection mode, show as indeterminate when only some children are selected. */ diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx index c8e99f9512b..936fcf062ef 100644 --- a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx +++ b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx @@ -30,7 +30,7 @@ import { setComponentLoaded, setUpLoadableComponent, } from "../../utils/loadable"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { SLOTS, CSS, IDS } from "./resources"; import { RequestedItem } from "./interfaces"; @@ -61,10 +61,10 @@ export class AccordionItem implements ConditionalSlotComponent, LoadableComponen @Prop() description: string; /** Specifies an icon to display at the start of the component. */ - @Prop({ reflect: true }) iconStart: IconName; + @Prop({ reflect: true }) iconStart: IconNameOrString; /** Specifies an icon to display at the end of the component. */ - @Prop({ reflect: true }) iconEnd: IconName; + @Prop({ reflect: true }) iconEnd: IconNameOrString; /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl: FlipContext; diff --git a/packages/calcite-components/src/components/accordion-item/readme.md b/packages/calcite-components/src/components/accordion-item/readme.md index 4c717c0853a..66683857b7b 100644 --- a/packages/calcite-components/src/components/accordion-item/readme.md +++ b/packages/calcite-components/src/components/accordion-item/readme.md @@ -6,14 +6,14 @@ For comprehensive guidance on using and implementing `calcite-accordion-item`, r ## Properties -| Property | Attribute | Description | Type | Default | -| ------------- | --------------- | ----------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `description` | `description` | Specifies a description for the component. | `string` | `undefined` | -| `expanded` | `expanded` | When `true`, the component is expanded. | `boolean` | `false` | -| `heading` | `heading` | Specifies heading text for the component. | `string` | `undefined` | -| `iconEnd` | `icon-end` | Specifies an icon to display at the end of the component. | `CamelCaseIcons \| "date-time" \| "i12-x" \| "i14-x" \| "i18-x" \| "i1-x" \| "i2-d-explore" \| "i2-x" \| "i360-view" \| "i3-d-glasses" \| "i4-x" \| "i8-x" \| "a-z" \| "a-z-down" \| "a-z-up" \| "a3-landscape" \| "a3-portrait" \| "a4-landscape" \| "a4-portrait" \| "absolute-direction" \| "absolute-elevation" \| "access-string-results" \| "activity-monitor" \| "actual-size" \| "add-and-update-features" \| "add-constant" \| "add-features" \| "add-in" \| "add-in-edit" \| "add-in-new" \| "add-layer" \| "add-layer-service" \| "add-raster-variable" \| "add-rasters" \| "add-reaction" \| "add-text" \| "add-to-model" \| "address-book" \| "alert-off-circle-f" \| "all-servers" \| "analysis-overlay" \| "annotate-tool" \| "ansi-a-landscape" \| "ansi-a-portrait" \| "ansi-b-landscape" \| "ansi-b-portrait" \| "antenna-height" \| "app-gear" \| "app-launcher" \| "app-run" \| "app-update" \| "apply-changes" \| "apply-selection-to-existing-view" \| "arcgis-data-store" \| "arcgis-online" \| "arrow-bold-down" \| "arrow-bold-left" \| "arrow-bold-right" \| "arrow-bold-up" \| "arrow-circle-down" \| "arrow-circle-down-f" \| "arrow-double-diagonal1" \| "arrow-double-diagonal2" \| "arrow-double-horizontal" \| "arrow-double-vertical" \| "arrow-down" \| "arrow-down-left" \| "arrow-down-right" \| "arrow-left" \| "arrow-right" \| "arrow-right-left" \| "arrow-up" \| "arrow-up-down" \| "arrow-up-left" \| "arrow-up-right" \| "asterisk-large" \| "asterisk-small" \| "attachment-plus" \| "auto-layout" \| "battery-charging" \| "bear-left" \| "bear-right" \| "beginning-f" \| "bell-f" \| "bell-off" \| "bookmark-f" \| "border-radius-fully-rounded" \| "border-radius-rounded" \| "border-radius-sharp" \| "box-chart" \| "box-chart-series" \| "brackets-curly" \| "break-recurrence" \| "bring-forward" \| "bring-to-front" \| "browser-map" \| "brush-mark" \| "brush-mark-plus" \| "brush-tip" \| "bullet-point" \| "bullet-point-large" \| "camera-flash-off" \| "camera-flash-on" \| "camera-plus" \| "camera-switch-front-back" \| "camera-unlock" \| "caret-double-horizontal" \| "caret-double-vertical" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-square-down" \| "caret-square-left" \| "caret-square-right" \| "caret-square-up" \| "caret-up" \| "catalog-dataset" \| "center-align" \| "center-horizontal" \| "center-vertical" \| "change-detection" \| "change-font-size" \| "chart-gear" \| "chart-magnifying-glass" \| "check-circle" \| "check-circle-f" \| "check-extent" \| "check-layer" \| "check-shield" \| "check-square" \| "check-square-f" \| "chevron-down" \| "chevron-down-left" \| "chevron-down-right" \| "chevron-end" \| "chevron-left" \| "chevron-right" \| "chevron-start" \| "chevron-up" \| "chevron-up-left" \| "chevron-up-right" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chord-diagram" \| "circle-f" \| "circle-area" \| "circle-disallowed" \| "circle-inset-large" \| "circle-inset-medium" \| "circle-inset-small" \| "circle-pause" \| "circle-pause-f" \| "circle-stop" \| "circle-stop-f" \| "classify-objects" \| "classify-pixels" \| "clear-selection" \| "clipboard-brackets" \| "clock-down" \| "clock-forward" \| "clock-up" \| "cloud-data" \| "cloud-server" \| "code-branch" \| "code-branch-edit" \| "collaboration-distributed" \| "collaboration-user" \| "color-coded-map" \| "color-correction" \| "column-settings" \| "community-link-chart-layout" \| "compass-needle" \| "compass-north-circle" \| "conditional-rules" \| "conditional-rules-path" \| "conference-room" \| "configure-editing" \| "configure-grid-unit" \| "configure-popup" \| "content-full" \| "content-inline" \| "content-large" \| "content-medium" \| "content-minimal" \| "content-none" \| "content-side-by-side" \| "content-small" \| "contingent-values" \| "coordinate-system" \| "copy-to-clipboard" \| "credit-card" \| "cursor-click" \| "cursor-lock" \| "cursor-marquee" \| "cursor-minus" \| "cursor-plus" \| "cursor-selection" \| "custom-print" \| "cut-and-fill-volume-calculation" \| "data-card" \| "data-check" \| "data-clock-chart" \| "data-cloud" \| "data-folder" \| "data-magnifying-glass" \| "data-raster" \| "debug-script" \| "decrease-link-chart-symbol-size" \| "deep-learning" \| "deep-learning-project" \| "derived-value" \| "developer-credentials" \| "diamond-inset-large" \| "diamond-inset-medium" \| "diamond-inset-small" \| "dimensions-unit" \| "dimensions-wall" \| "display-selection-lock" \| "display-selection-unlock" \| "dissolve-features" \| "distance-type" \| "distribute-height-evenly" \| "distribute-width-evenly" \| "dock-bottom" \| "dock-left" \| "dock-right" \| "double-float" \| "download-to" \| "drive-time" \| "drive-time-largest" \| "drive-time-smallest" \| "drive-time-threshold" \| "drive-time-x-bar" \| "driving-distance" \| "driving-time" \| "drone-fixed-wing" \| "drone-flying-wing" \| "drone-quadcopter" \| "drone-quadcopter-top" \| "edit-attributes" \| "edit-geometry" \| "elevator-down" \| "elevator-up" \| "ellipsis-circle" \| "email-address" \| "embedded-card" \| "embedded-content" \| "embedded-live-content" \| "employee-id" \| "enable-disable-feature-selection" \| "end-f" \| "escalator-down" \| "escalator-up" \| "exclamation-mark-circle" \| "exclamation-mark-circle-f" \| "exclamation-mark-triangle" \| "exclamation-mark-triangle-f" \| "exclamation-point" \| "exclamation-point-f" \| "exit-highway-left" \| "exit-highway-right" \| "expression-defined-color" \| "extend-trim" \| "extent-filter" \| "face-id" \| "feature-details" \| "feature-layer" \| "file-archive" \| "file-cad" \| "file-code" \| "file-csv" \| "file-data" \| "file-ecd" \| "file-excel" \| "file-gpx" \| "file-image" \| "file-kml" \| "file-magnifying-glass" \| "file-pdf" \| "file-pdf-plus" \| "file-pitemx" \| "file-ppt" \| "file-report" \| "file-report-generic" \| "file-shape" \| "file-sound" \| "file-sqlite" \| "file-text" \| "file-user" \| "file-video" \| "file-word" \| "file-xml" \| "file-zip" \| "files-csv-collection" \| "filter-expand" \| "find-path" \| "flip-vertical" \| "floor-plan" \| "folder-f" \| "folder-archive" \| "folder-magnifying-glass" \| "folder-move" \| "folder-new" \| "folder-open" \| "folder-open-f" \| "folder-plus" \| "folder-star" \| "folder-video" \| "follow-pause" \| "follow-play" \| "force-directed-link-chart-layout" \| "fork-left" \| "fork-middle" \| "fork-right" \| "form-dropdown" \| "form-elements" \| "form-field" \| "form-field-multiline" \| "form-field-off" \| "forward-f" \| "four-by-one-grid" \| "four-by-three-grid" \| "four-by-two-grid" \| "frame-export" \| "freehand-area" \| "full-screen" \| "full-screen-exit" \| "function-editor" \| "gauge-summary" \| "geoanalytics-server" \| "geoevent-server" \| "geographic-link-chart-layout" \| "geonet-question" \| "gis-server" \| "gps-off" \| "gps-on" \| "gps-on-f" \| "graph-axis" \| "graph-bar100-stacked" \| "graph-bar" \| "graph-bar-side-by-side" \| "graph-bar-stacked" \| "graph-box-mean-lines" \| "graph-box-side-by-side" \| "graph-guides" \| "graph-histogram" \| "graph-line-series" \| "graph-moving-average" \| "graph-pie-slice" \| "graph-scatter-plot" \| "graph-time-series" \| "grid-diamond" \| "grid-hexagon" \| "grid-triangle" \| "grid-unit" \| "ground-control-point" \| "group-form" \| "group-form-plus" \| "group-items" \| "group-layers" \| "group-layout-elements" \| "group-x" \| "h3-hexagon" \| "handle-vertical" \| "heading-layout" \| "heading-rtl" \| "heart-f" \| "heat-chart" \| "heavy-rain" \| "heavy-snow" \| "hexagon2-inset-large" \| "hexagon2-inset-medium" \| "hexagon2-inset-small" \| "hexagon-inset-large" \| "hexagon-inset-medium" \| "hexagon-inset-small" \| "hide-derived-value" \| "hide-empty" \| "hide-layers" \| "hide-parameters" \| "hierarchical-link-chart-layout" \| "highlighter-tip" \| "highway-change" \| "highway-change-right" \| "hillshade-effect" \| "horizontal-distribute" \| "hourglass-active" \| "hourglass-expired" \| "image-chips" \| "image-collection-explorer" \| "image-display-order" \| "image-layer" \| "image-magnifying-glass" \| "image-mensuration" \| "image-pin" \| "image-plus" \| "image-segmentation" \| "image-server" \| "image-space" \| "image-unit" \| "increase-link-chart-symbol-size" \| "information-f" \| "information-letter" \| "initiative-template" \| "joined-view-layer" \| "knowledge-graph" \| "knowledge-graph-dashboard" \| "knowledge-graph-data-model" \| "knowledge-graph-data-store" \| "knowledge-graph-export" \| "knowledge-graph-import" \| "knowledge-graph-new" \| "knowledge-graph-relationship" \| "knowledge-layer" \| "knowledge-server" \| "knowledge-studio" \| "label-off" \| "language-translate" \| "lasso-select" \| "layer-basemap" \| "layer-broken" \| "layer-filter" \| "layer-graphics" \| "layer-hide" \| "layer-kml" \| "layer-line" \| "layer-line-service" \| "layer-map" \| "layer-map-service" \| "layer-points" \| "layer-polygon" \| "layer-polygon-service" \| "layer-service" \| "layer-settings" \| "layer-zoom-to" \| "layers-editable" \| "layers-f" \| "layers-reference" \| "layout-compact" \| "layout-horizontal" \| "layout-spacious" \| "layout-vertical" \| "left-align" \| "left-edge" \| "left-left" \| "left-right" \| "legend-left" \| "legend-plus" \| "legend-right" \| "light-rain" \| "light-snow" \| "line-check" \| "line-dashed" \| "line-dotted" \| "line-of-sight" \| "line-solid" \| "line-straight" \| "link-chart" \| "link-chart-expand" \| "link-chart-from-template" \| "list-bullet" \| "list-button" \| "list-check" \| "list-check-all" \| "list-merge" \| "list-number" \| "list-number-rtl" \| "list-radio" \| "list-rectangle" \| "list-show-all" \| "livestream-video-layer" \| "location-sharing" \| "location-sharing-f" \| "location-sharing-off" \| "lock-f" \| "ltr-elements-align" \| "ltr-paragraph-align" \| "magnifying-glass" \| "magnifying-glass-minus" \| "magnifying-glass-plus" \| "map-contents" \| "map-from-template" \| "map-level-settings" \| "map-pin" \| "map-space" \| "mask-inside" \| "mask-outside" \| "maximum-graph" \| "maximum-territory-distance" \| "measure-area" \| "measure-building-height-shadow" \| "measure-building-height-top-base" \| "measure-building-height-top-shadow" \| "measure-line" \| "media-layer" \| "mega-phone" \| "members-brackets" \| "merge-details" \| "merge-on-highway" \| "merge-on-highway-right" \| "merge-units" \| "microphone-plus" \| "min-distance-between-centers" \| "minimum-graph" \| "minus-circle" \| "minus-circle-f" \| "minus-square" \| "minus-square-f" \| "miscellaneous-collection" \| "mission-server" \| "mobile-off" \| "mobile-vibrate" \| "model-edit" \| "modify-associations" \| "move-from-basemap" \| "move-to-basemap" \| "move-up" \| "move-up-all" \| "multidimensional-raster" \| "multiple-variables" \| "music-note" \| "new-link-chart" \| "new-model" \| "new-raster-function-template" \| "new-training" \| "no-attachment" \| "no-image" \| "no-map" \| "nodes-link" \| "nodes-merge" \| "nodes-unlink" \| "nodes-unmerge" \| "notebook-server" \| "notebook-snapshot" \| "notepad-add" \| "notepad-edit" \| "number-circle1" \| "number-circle1-f" \| "number-circle2" \| "number-circle2-f" \| "number-circle3" \| "number-circle3-f" \| "number-circle4" \| "number-circle4-f" \| "number-circle5" \| "number-circle5-f" \| "number-circle6" \| "number-circle6-f" \| "number-circle7" \| "number-circle7-f" \| "number-circle8" \| "number-circle8-f" \| "number-circle9" \| "number-circle9-f" \| "number-of-territories" \| "object-detection" \| "objectstore-data-store" \| "on-the-ground-elevation" \| "open-book" \| "oriented-imagery-layer" \| "oriented-imagery-widget" \| "overlap-features" \| "overwrite-features" \| "overwrite-project" \| "paint-bucket" \| "palette-check" \| "pan-drag" \| "parcel-layer" \| "partly-cloudy" \| "paste-with-attribute" \| "paste-without-attribute" \| "pause-f" \| "pen-mark" \| "pen-mark-plus" \| "pen-tip" \| "pencil-mark" \| "pencil-mark-plus" \| "pencil-square" \| "pencil-tip" \| "personal-homepage" \| "pie-chart" \| "pin-plus" \| "pin-tear" \| "pin-tear-f" \| "play-f" \| "plus-circle" \| "plus-square" \| "point-line" \| "polygon-area" \| "polygon-line-check" \| "polygon-select" \| "polygon-vertices" \| "pop-up1" \| "pop-up-blank" \| "pop-up-blank-f" \| "premium-content-user-credit" \| "presentation-x" \| "print-preview" \| "processing-templates" \| "profile-variables" \| "project-mission" \| "project-template" \| "puzzle-piece" \| "qr-code" \| "qt-code" \| "question-f" \| "question-mark" \| "radial-tree-link-chart-layout" \| "rain-snow" \| "rain-thunder" \| "ramp-left" \| "ramp-right" \| "raster-analysis" \| "raster-function" \| "raster-function-template" \| "raster-function-template-play" \| "read-only-non-editable" \| "rectangle-area" \| "rectangle-plus" \| "recycle-bin" \| "refresh-f" \| "relational-data-store" \| "relative-direction" \| "relative-to-ground-elevation" \| "relative-to-scene-elevation" \| "remove-from-list" \| "remove-linkchart" \| "reorder-cards" \| "reorder-grid" \| "reorder-stack" \| "replace-image" \| "reshape-add-geometry" \| "reshape-subtract-geometry" \| "reshape-tool" \| "resize-area" \| "reverse-f" \| "ribbon-rosette" \| "right-align" \| "right-angle" \| "right-edge" \| "right-left" \| "right-right" \| "rings-largest" \| "rings-smallest" \| "rings-threshold" \| "rings-x-bar" \| "road-sign" \| "rotate-device" \| "round-about" \| "round-about-right" \| "rounded-rectangle" \| "route-from" \| "route-to" \| "rss-f" \| "rtl-elements-align" \| "rtl-paragraph-align" \| "running-outline" \| "rural-driving-distance" \| "rural-driving-time" \| "satellite0-f" \| "satellite1-f" \| "satellite2-f" \| "satellite3-f" \| "save-as" \| "scan-area" \| "scan-barcode" \| "scan-corridor" \| "scan-crosshatch" \| "scan-perimeter" \| "scan-vertical" \| "screenshot-mode" \| "select-by-attributes" \| "select-category" \| "select-column" \| "select-range" \| "select-visible" \| "selected-items-filter" \| "selection-filter" \| "selection-manager" \| "selection-set" \| "selection-x" \| "send-backwards" \| "send-to-back" \| "serial-port" \| "server-lock" \| "share-ios" \| "sharp-left" \| "sharp-right" \| "shield-coin" \| "shopping-cart" \| "show-all-parameters" \| "show-column" \| "show-derived-value" \| "show-multiple-layers-at-a-time" \| "show-one-layer-at-a-time" \| "show-required-parameters" \| "sign-in" \| "sign-out" \| "simple-link-chart-layout" \| "sky-plot" \| "sliders-horizontal" \| "smart-camera" \| "smart-form" \| "smart-tree-link-chart-layout" \| "snap-to-grid" \| "snap-to-pixel" \| "snap-to-point" \| "snow-thunder" \| "sort-ascending" \| "sort-ascending-arrow" \| "sort-descending" \| "sort-descending-arrow" \| "sound-low" \| "sound-off" \| "sound-unavailable" \| "spatiotemporal-data-store" \| "speech-bubble" \| "speech-bubble-check" \| "speech-bubble-exclamation" \| "speech-bubble-like" \| "speech-bubble-plus" \| "speech-bubble-social" \| "speech-bubbles" \| "split-features" \| "split-geometry" \| "split-units" \| "square-f" \| "square-area" \| "square-inset-large" \| "square-inset-medium" \| "square-inset-small" \| "stairs-down" \| "stairs-up" \| "star-f" \| "star-circle" \| "stop-square" \| "stop-square-f" \| "stored-as-new-query" \| "stored-query" \| "sub-fields" \| "subheading-rtl" \| "suitability-analysis-output" \| "summarize-center-and-dispersion1" \| "summarize-center-and-dispersion2" \| "summarize-center-and-dispersion3" \| "system-management" \| "tabbed-view" \| "take-pedestrian-ramp" \| "territory-buffer-distance" \| "test-data" \| "text-bold" \| "text-button" \| "text-dashed-underline" \| "text-large" \| "text-medium" \| "text-paragraph-large" \| "text-small" \| "text-solid-underline" \| "three-by-one-grid" \| "three-by-three-grid" \| "three-by-two-grid" \| "thumbs-down" \| "thumbs-up" \| "tile-cache-data-store" \| "tile-layer" \| "tiled-imagery-layer" \| "time-filter" \| "time-zone" \| "toggle-off" \| "toggle-on" \| "tour-pin-tear" \| "transverse-hexagon" \| "trapezoid-area" \| "trucking-distance" \| "trucking-time" \| "u-turn" \| "u-turn-right" \| "ungroup-items" \| "ungroup-layers" \| "ungroup-layout-elements" \| "update-features" \| "update-project" \| "upload-to" \| "urban-model" \| "usb-security-key" \| "user-calendar" \| "user-down" \| "user-key" \| "user-minus" \| "user-plus" \| "user-to-device" \| "user-up" \| "user-x" \| "utility-network" \| "utility-network-trace" \| "validate-utility-network-topology" \| "vertex-check" \| "vertex-edit" \| "vertex-gps" \| "vertex-move" \| "vertex-plus" \| "vertex-x" \| "vertical-distribute" \| "video-layer" \| "video-plus" \| "video-server" \| "video-single-server" \| "video-web" \| "view-associations" \| "view-hide" \| "view-mixed" \| "view-visible" \| "walk-through-door" \| "walking-distance" \| "walking-time" \| "widgets-group" \| "widgets-source" \| "widgets-tabs" \| "workflow-diagram" \| "workflow-manager-server" \| "x-axis-guide" \| "x-bar" \| "x-circle" \| "x-circle-f" \| "x-octagon" \| "x-octagon-f" \| "y-axis-guide" \| "zoom-in-fixed" \| "zoom-out-fixed" \| "zoom-to-object"` | `undefined` | -| `iconFlipRtl` | `icon-flip-rtl` | Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). | `"both" \| "end" \| "start"` | `undefined` | -| `iconStart` | `icon-start` | Specifies an icon to display at the start of the component. | `CamelCaseIcons \| "date-time" \| "i12-x" \| "i14-x" \| "i18-x" \| "i1-x" \| "i2-d-explore" \| "i2-x" \| "i360-view" \| "i3-d-glasses" \| "i4-x" \| "i8-x" \| "a-z" \| "a-z-down" \| "a-z-up" \| "a3-landscape" \| "a3-portrait" \| "a4-landscape" \| "a4-portrait" \| "absolute-direction" \| "absolute-elevation" \| "access-string-results" \| "activity-monitor" \| "actual-size" \| "add-and-update-features" \| "add-constant" \| "add-features" \| "add-in" \| "add-in-edit" \| "add-in-new" \| "add-layer" \| "add-layer-service" \| "add-raster-variable" \| "add-rasters" \| "add-reaction" \| "add-text" \| "add-to-model" \| "address-book" \| "alert-off-circle-f" \| "all-servers" \| "analysis-overlay" \| "annotate-tool" \| "ansi-a-landscape" \| "ansi-a-portrait" \| "ansi-b-landscape" \| "ansi-b-portrait" \| "antenna-height" \| "app-gear" \| "app-launcher" \| "app-run" \| "app-update" \| "apply-changes" \| "apply-selection-to-existing-view" \| "arcgis-data-store" \| "arcgis-online" \| "arrow-bold-down" \| "arrow-bold-left" \| "arrow-bold-right" \| "arrow-bold-up" \| "arrow-circle-down" \| "arrow-circle-down-f" \| "arrow-double-diagonal1" \| "arrow-double-diagonal2" \| "arrow-double-horizontal" \| "arrow-double-vertical" \| "arrow-down" \| "arrow-down-left" \| "arrow-down-right" \| "arrow-left" \| "arrow-right" \| "arrow-right-left" \| "arrow-up" \| "arrow-up-down" \| "arrow-up-left" \| "arrow-up-right" \| "asterisk-large" \| "asterisk-small" \| "attachment-plus" \| "auto-layout" \| "battery-charging" \| "bear-left" \| "bear-right" \| "beginning-f" \| "bell-f" \| "bell-off" \| "bookmark-f" \| "border-radius-fully-rounded" \| "border-radius-rounded" \| "border-radius-sharp" \| "box-chart" \| "box-chart-series" \| "brackets-curly" \| "break-recurrence" \| "bring-forward" \| "bring-to-front" \| "browser-map" \| "brush-mark" \| "brush-mark-plus" \| "brush-tip" \| "bullet-point" \| "bullet-point-large" \| "camera-flash-off" \| "camera-flash-on" \| "camera-plus" \| "camera-switch-front-back" \| "camera-unlock" \| "caret-double-horizontal" \| "caret-double-vertical" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-square-down" \| "caret-square-left" \| "caret-square-right" \| "caret-square-up" \| "caret-up" \| "catalog-dataset" \| "center-align" \| "center-horizontal" \| "center-vertical" \| "change-detection" \| "change-font-size" \| "chart-gear" \| "chart-magnifying-glass" \| "check-circle" \| "check-circle-f" \| "check-extent" \| "check-layer" \| "check-shield" \| "check-square" \| "check-square-f" \| "chevron-down" \| "chevron-down-left" \| "chevron-down-right" \| "chevron-end" \| "chevron-left" \| "chevron-right" \| "chevron-start" \| "chevron-up" \| "chevron-up-left" \| "chevron-up-right" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chord-diagram" \| "circle-f" \| "circle-area" \| "circle-disallowed" \| "circle-inset-large" \| "circle-inset-medium" \| "circle-inset-small" \| "circle-pause" \| "circle-pause-f" \| "circle-stop" \| "circle-stop-f" \| "classify-objects" \| "classify-pixels" \| "clear-selection" \| "clipboard-brackets" \| "clock-down" \| "clock-forward" \| "clock-up" \| "cloud-data" \| "cloud-server" \| "code-branch" \| "code-branch-edit" \| "collaboration-distributed" \| "collaboration-user" \| "color-coded-map" \| "color-correction" \| "column-settings" \| "community-link-chart-layout" \| "compass-needle" \| "compass-north-circle" \| "conditional-rules" \| "conditional-rules-path" \| "conference-room" \| "configure-editing" \| "configure-grid-unit" \| "configure-popup" \| "content-full" \| "content-inline" \| "content-large" \| "content-medium" \| "content-minimal" \| "content-none" \| "content-side-by-side" \| "content-small" \| "contingent-values" \| "coordinate-system" \| "copy-to-clipboard" \| "credit-card" \| "cursor-click" \| "cursor-lock" \| "cursor-marquee" \| "cursor-minus" \| "cursor-plus" \| "cursor-selection" \| "custom-print" \| "cut-and-fill-volume-calculation" \| "data-card" \| "data-check" \| "data-clock-chart" \| "data-cloud" \| "data-folder" \| "data-magnifying-glass" \| "data-raster" \| "debug-script" \| "decrease-link-chart-symbol-size" \| "deep-learning" \| "deep-learning-project" \| "derived-value" \| "developer-credentials" \| "diamond-inset-large" \| "diamond-inset-medium" \| "diamond-inset-small" \| "dimensions-unit" \| "dimensions-wall" \| "display-selection-lock" \| "display-selection-unlock" \| "dissolve-features" \| "distance-type" \| "distribute-height-evenly" \| "distribute-width-evenly" \| "dock-bottom" \| "dock-left" \| "dock-right" \| "double-float" \| "download-to" \| "drive-time" \| "drive-time-largest" \| "drive-time-smallest" \| "drive-time-threshold" \| "drive-time-x-bar" \| "driving-distance" \| "driving-time" \| "drone-fixed-wing" \| "drone-flying-wing" \| "drone-quadcopter" \| "drone-quadcopter-top" \| "edit-attributes" \| "edit-geometry" \| "elevator-down" \| "elevator-up" \| "ellipsis-circle" \| "email-address" \| "embedded-card" \| "embedded-content" \| "embedded-live-content" \| "employee-id" \| "enable-disable-feature-selection" \| "end-f" \| "escalator-down" \| "escalator-up" \| "exclamation-mark-circle" \| "exclamation-mark-circle-f" \| "exclamation-mark-triangle" \| "exclamation-mark-triangle-f" \| "exclamation-point" \| "exclamation-point-f" \| "exit-highway-left" \| "exit-highway-right" \| "expression-defined-color" \| "extend-trim" \| "extent-filter" \| "face-id" \| "feature-details" \| "feature-layer" \| "file-archive" \| "file-cad" \| "file-code" \| "file-csv" \| "file-data" \| "file-ecd" \| "file-excel" \| "file-gpx" \| "file-image" \| "file-kml" \| "file-magnifying-glass" \| "file-pdf" \| "file-pdf-plus" \| "file-pitemx" \| "file-ppt" \| "file-report" \| "file-report-generic" \| "file-shape" \| "file-sound" \| "file-sqlite" \| "file-text" \| "file-user" \| "file-video" \| "file-word" \| "file-xml" \| "file-zip" \| "files-csv-collection" \| "filter-expand" \| "find-path" \| "flip-vertical" \| "floor-plan" \| "folder-f" \| "folder-archive" \| "folder-magnifying-glass" \| "folder-move" \| "folder-new" \| "folder-open" \| "folder-open-f" \| "folder-plus" \| "folder-star" \| "folder-video" \| "follow-pause" \| "follow-play" \| "force-directed-link-chart-layout" \| "fork-left" \| "fork-middle" \| "fork-right" \| "form-dropdown" \| "form-elements" \| "form-field" \| "form-field-multiline" \| "form-field-off" \| "forward-f" \| "four-by-one-grid" \| "four-by-three-grid" \| "four-by-two-grid" \| "frame-export" \| "freehand-area" \| "full-screen" \| "full-screen-exit" \| "function-editor" \| "gauge-summary" \| "geoanalytics-server" \| "geoevent-server" \| "geographic-link-chart-layout" \| "geonet-question" \| "gis-server" \| "gps-off" \| "gps-on" \| "gps-on-f" \| "graph-axis" \| "graph-bar100-stacked" \| "graph-bar" \| "graph-bar-side-by-side" \| "graph-bar-stacked" \| "graph-box-mean-lines" \| "graph-box-side-by-side" \| "graph-guides" \| "graph-histogram" \| "graph-line-series" \| "graph-moving-average" \| "graph-pie-slice" \| "graph-scatter-plot" \| "graph-time-series" \| "grid-diamond" \| "grid-hexagon" \| "grid-triangle" \| "grid-unit" \| "ground-control-point" \| "group-form" \| "group-form-plus" \| "group-items" \| "group-layers" \| "group-layout-elements" \| "group-x" \| "h3-hexagon" \| "handle-vertical" \| "heading-layout" \| "heading-rtl" \| "heart-f" \| "heat-chart" \| "heavy-rain" \| "heavy-snow" \| "hexagon2-inset-large" \| "hexagon2-inset-medium" \| "hexagon2-inset-small" \| "hexagon-inset-large" \| "hexagon-inset-medium" \| "hexagon-inset-small" \| "hide-derived-value" \| "hide-empty" \| "hide-layers" \| "hide-parameters" \| "hierarchical-link-chart-layout" \| "highlighter-tip" \| "highway-change" \| "highway-change-right" \| "hillshade-effect" \| "horizontal-distribute" \| "hourglass-active" \| "hourglass-expired" \| "image-chips" \| "image-collection-explorer" \| "image-display-order" \| "image-layer" \| "image-magnifying-glass" \| "image-mensuration" \| "image-pin" \| "image-plus" \| "image-segmentation" \| "image-server" \| "image-space" \| "image-unit" \| "increase-link-chart-symbol-size" \| "information-f" \| "information-letter" \| "initiative-template" \| "joined-view-layer" \| "knowledge-graph" \| "knowledge-graph-dashboard" \| "knowledge-graph-data-model" \| "knowledge-graph-data-store" \| "knowledge-graph-export" \| "knowledge-graph-import" \| "knowledge-graph-new" \| "knowledge-graph-relationship" \| "knowledge-layer" \| "knowledge-server" \| "knowledge-studio" \| "label-off" \| "language-translate" \| "lasso-select" \| "layer-basemap" \| "layer-broken" \| "layer-filter" \| "layer-graphics" \| "layer-hide" \| "layer-kml" \| "layer-line" \| "layer-line-service" \| "layer-map" \| "layer-map-service" \| "layer-points" \| "layer-polygon" \| "layer-polygon-service" \| "layer-service" \| "layer-settings" \| "layer-zoom-to" \| "layers-editable" \| "layers-f" \| "layers-reference" \| "layout-compact" \| "layout-horizontal" \| "layout-spacious" \| "layout-vertical" \| "left-align" \| "left-edge" \| "left-left" \| "left-right" \| "legend-left" \| "legend-plus" \| "legend-right" \| "light-rain" \| "light-snow" \| "line-check" \| "line-dashed" \| "line-dotted" \| "line-of-sight" \| "line-solid" \| "line-straight" \| "link-chart" \| "link-chart-expand" \| "link-chart-from-template" \| "list-bullet" \| "list-button" \| "list-check" \| "list-check-all" \| "list-merge" \| "list-number" \| "list-number-rtl" \| "list-radio" \| "list-rectangle" \| "list-show-all" \| "livestream-video-layer" \| "location-sharing" \| "location-sharing-f" \| "location-sharing-off" \| "lock-f" \| "ltr-elements-align" \| "ltr-paragraph-align" \| "magnifying-glass" \| "magnifying-glass-minus" \| "magnifying-glass-plus" \| "map-contents" \| "map-from-template" \| "map-level-settings" \| "map-pin" \| "map-space" \| "mask-inside" \| "mask-outside" \| "maximum-graph" \| "maximum-territory-distance" \| "measure-area" \| "measure-building-height-shadow" \| "measure-building-height-top-base" \| "measure-building-height-top-shadow" \| "measure-line" \| "media-layer" \| "mega-phone" \| "members-brackets" \| "merge-details" \| "merge-on-highway" \| "merge-on-highway-right" \| "merge-units" \| "microphone-plus" \| "min-distance-between-centers" \| "minimum-graph" \| "minus-circle" \| "minus-circle-f" \| "minus-square" \| "minus-square-f" \| "miscellaneous-collection" \| "mission-server" \| "mobile-off" \| "mobile-vibrate" \| "model-edit" \| "modify-associations" \| "move-from-basemap" \| "move-to-basemap" \| "move-up" \| "move-up-all" \| "multidimensional-raster" \| "multiple-variables" \| "music-note" \| "new-link-chart" \| "new-model" \| "new-raster-function-template" \| "new-training" \| "no-attachment" \| "no-image" \| "no-map" \| "nodes-link" \| "nodes-merge" \| "nodes-unlink" \| "nodes-unmerge" \| "notebook-server" \| "notebook-snapshot" \| "notepad-add" \| "notepad-edit" \| "number-circle1" \| "number-circle1-f" \| "number-circle2" \| "number-circle2-f" \| "number-circle3" \| "number-circle3-f" \| "number-circle4" \| "number-circle4-f" \| "number-circle5" \| "number-circle5-f" \| "number-circle6" \| "number-circle6-f" \| "number-circle7" \| "number-circle7-f" \| "number-circle8" \| "number-circle8-f" \| "number-circle9" \| "number-circle9-f" \| "number-of-territories" \| "object-detection" \| "objectstore-data-store" \| "on-the-ground-elevation" \| "open-book" \| "oriented-imagery-layer" \| "oriented-imagery-widget" \| "overlap-features" \| "overwrite-features" \| "overwrite-project" \| "paint-bucket" \| "palette-check" \| "pan-drag" \| "parcel-layer" \| "partly-cloudy" \| "paste-with-attribute" \| "paste-without-attribute" \| "pause-f" \| "pen-mark" \| "pen-mark-plus" \| "pen-tip" \| "pencil-mark" \| "pencil-mark-plus" \| "pencil-square" \| "pencil-tip" \| "personal-homepage" \| "pie-chart" \| "pin-plus" \| "pin-tear" \| "pin-tear-f" \| "play-f" \| "plus-circle" \| "plus-square" \| "point-line" \| "polygon-area" \| "polygon-line-check" \| "polygon-select" \| "polygon-vertices" \| "pop-up1" \| "pop-up-blank" \| "pop-up-blank-f" \| "premium-content-user-credit" \| "presentation-x" \| "print-preview" \| "processing-templates" \| "profile-variables" \| "project-mission" \| "project-template" \| "puzzle-piece" \| "qr-code" \| "qt-code" \| "question-f" \| "question-mark" \| "radial-tree-link-chart-layout" \| "rain-snow" \| "rain-thunder" \| "ramp-left" \| "ramp-right" \| "raster-analysis" \| "raster-function" \| "raster-function-template" \| "raster-function-template-play" \| "read-only-non-editable" \| "rectangle-area" \| "rectangle-plus" \| "recycle-bin" \| "refresh-f" \| "relational-data-store" \| "relative-direction" \| "relative-to-ground-elevation" \| "relative-to-scene-elevation" \| "remove-from-list" \| "remove-linkchart" \| "reorder-cards" \| "reorder-grid" \| "reorder-stack" \| "replace-image" \| "reshape-add-geometry" \| "reshape-subtract-geometry" \| "reshape-tool" \| "resize-area" \| "reverse-f" \| "ribbon-rosette" \| "right-align" \| "right-angle" \| "right-edge" \| "right-left" \| "right-right" \| "rings-largest" \| "rings-smallest" \| "rings-threshold" \| "rings-x-bar" \| "road-sign" \| "rotate-device" \| "round-about" \| "round-about-right" \| "rounded-rectangle" \| "route-from" \| "route-to" \| "rss-f" \| "rtl-elements-align" \| "rtl-paragraph-align" \| "running-outline" \| "rural-driving-distance" \| "rural-driving-time" \| "satellite0-f" \| "satellite1-f" \| "satellite2-f" \| "satellite3-f" \| "save-as" \| "scan-area" \| "scan-barcode" \| "scan-corridor" \| "scan-crosshatch" \| "scan-perimeter" \| "scan-vertical" \| "screenshot-mode" \| "select-by-attributes" \| "select-category" \| "select-column" \| "select-range" \| "select-visible" \| "selected-items-filter" \| "selection-filter" \| "selection-manager" \| "selection-set" \| "selection-x" \| "send-backwards" \| "send-to-back" \| "serial-port" \| "server-lock" \| "share-ios" \| "sharp-left" \| "sharp-right" \| "shield-coin" \| "shopping-cart" \| "show-all-parameters" \| "show-column" \| "show-derived-value" \| "show-multiple-layers-at-a-time" \| "show-one-layer-at-a-time" \| "show-required-parameters" \| "sign-in" \| "sign-out" \| "simple-link-chart-layout" \| "sky-plot" \| "sliders-horizontal" \| "smart-camera" \| "smart-form" \| "smart-tree-link-chart-layout" \| "snap-to-grid" \| "snap-to-pixel" \| "snap-to-point" \| "snow-thunder" \| "sort-ascending" \| "sort-ascending-arrow" \| "sort-descending" \| "sort-descending-arrow" \| "sound-low" \| "sound-off" \| "sound-unavailable" \| "spatiotemporal-data-store" \| "speech-bubble" \| "speech-bubble-check" \| "speech-bubble-exclamation" \| "speech-bubble-like" \| "speech-bubble-plus" \| "speech-bubble-social" \| "speech-bubbles" \| "split-features" \| "split-geometry" \| "split-units" \| "square-f" \| "square-area" \| "square-inset-large" \| "square-inset-medium" \| "square-inset-small" \| "stairs-down" \| "stairs-up" \| "star-f" \| "star-circle" \| "stop-square" \| "stop-square-f" \| "stored-as-new-query" \| "stored-query" \| "sub-fields" \| "subheading-rtl" \| "suitability-analysis-output" \| "summarize-center-and-dispersion1" \| "summarize-center-and-dispersion2" \| "summarize-center-and-dispersion3" \| "system-management" \| "tabbed-view" \| "take-pedestrian-ramp" \| "territory-buffer-distance" \| "test-data" \| "text-bold" \| "text-button" \| "text-dashed-underline" \| "text-large" \| "text-medium" \| "text-paragraph-large" \| "text-small" \| "text-solid-underline" \| "three-by-one-grid" \| "three-by-three-grid" \| "three-by-two-grid" \| "thumbs-down" \| "thumbs-up" \| "tile-cache-data-store" \| "tile-layer" \| "tiled-imagery-layer" \| "time-filter" \| "time-zone" \| "toggle-off" \| "toggle-on" \| "tour-pin-tear" \| "transverse-hexagon" \| "trapezoid-area" \| "trucking-distance" \| "trucking-time" \| "u-turn" \| "u-turn-right" \| "ungroup-items" \| "ungroup-layers" \| "ungroup-layout-elements" \| "update-features" \| "update-project" \| "upload-to" \| "urban-model" \| "usb-security-key" \| "user-calendar" \| "user-down" \| "user-key" \| "user-minus" \| "user-plus" \| "user-to-device" \| "user-up" \| "user-x" \| "utility-network" \| "utility-network-trace" \| "validate-utility-network-topology" \| "vertex-check" \| "vertex-edit" \| "vertex-gps" \| "vertex-move" \| "vertex-plus" \| "vertex-x" \| "vertical-distribute" \| "video-layer" \| "video-plus" \| "video-server" \| "video-single-server" \| "video-web" \| "view-associations" \| "view-hide" \| "view-mixed" \| "view-visible" \| "walk-through-door" \| "walking-distance" \| "walking-time" \| "widgets-group" \| "widgets-source" \| "widgets-tabs" \| "workflow-diagram" \| "workflow-manager-server" \| "x-axis-guide" \| "x-bar" \| "x-circle" \| "x-circle-f" \| "x-octagon" \| "x-octagon-f" \| "y-axis-guide" \| "zoom-in-fixed" \| "zoom-out-fixed" \| "zoom-to-object"` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------- | --------------- | ----------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | +| `description` | `description` | Specifies a description for the component. | `string` | `undefined` | +| `expanded` | `expanded` | When `true`, the component is expanded. | `boolean` | `false` | +| `heading` | `heading` | Specifies heading text for the component. | `string` | `undefined` | +| `iconEnd` | `icon-end` | Specifies an icon to display at the end of the component. | `string` | `undefined` | +| `iconFlipRtl` | `icon-flip-rtl` | Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). | `"both" \| "end" \| "start"` | `undefined` | +| `iconStart` | `icon-start` | Specifies an icon to display at the start of the component. | `string` | `undefined` | ## Methods diff --git a/packages/calcite-components/src/components/action-menu/readme.md b/packages/calcite-components/src/components/action-menu/readme.md index 45be8580e3c..6524b961ddd 100644 --- a/packages/calcite-components/src/components/action-menu/readme.md +++ b/packages/calcite-components/src/components/action-menu/readme.md @@ -12,7 +12,7 @@ | `label` *(required)* | `label` | Specifies the text string for the component. | `string` | `undefined` | | `open` | `open` | When `true`, the component is open. | `boolean` | `false` | | `overlayPositioning` | `overlay-positioning` | Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. | `"absolute" \| "fixed"` | `"absolute"` | -| `placement` | `placement` | Determines where the component will be positioned relative to the `referenceElement`. | `"auto" \| "top" \| "bottom" \| "left" \| "right" \| "top-start" \| "top-end" \| "bottom-start" \| "bottom-end" \| "left-start" \| "left-end" \| "right-start" \| "right-end" \| "leading" \| "trailing" \| "auto-start" \| "auto-end" \| "leading-start" \| "leading-end" \| "trailing-end" \| "trailing-start"` | `"auto"` | +| `placement` | `placement` | Determines where the component will be positioned relative to the `referenceElement`. | `"auto" \| "top" \| "bottom" \| "right" \| "left" \| "top-start" \| "top-end" \| "bottom-start" \| "bottom-end" \| "right-start" \| "right-end" \| "left-start" \| "left-end" \| "leading" \| "trailing" \| "auto-start" \| "auto-end" \| "leading-start" \| "leading-end" \| "trailing-end" \| "trailing-start"` | `"auto"` | | `scale` | `scale` | Specifies the size of the component's trigger `calcite-action`. | `"l" \| "m" \| "s"` | `undefined` | ## Events diff --git a/packages/calcite-components/src/components/action/action.tsx b/packages/calcite-components/src/components/action/action.tsx index f68e5515f88..ad16ee39aa6 100644 --- a/packages/calcite-components/src/components/action/action.tsx +++ b/packages/calcite-components/src/components/action/action.tsx @@ -36,7 +36,7 @@ import { updateMessages, } from "../../utils/t9n"; import { Alignment, Appearance, Scale } from "../interfaces"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { isBrowser } from "../../utils/browser"; import { ActionMessages } from "./assets/action/t9n"; import { CSS, SLOTS } from "./resources"; @@ -86,7 +86,7 @@ export class Action @Prop({ reflect: true }) disabled = false; /** Specifies an icon to display. */ - @Prop() icon: IconName; + @Prop() icon: IconNameOrString; /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl = false; diff --git a/packages/calcite-components/src/components/action/readme.md b/packages/calcite-components/src/components/action/readme.md index fb79c36cb5d..78c083d1255 100755 --- a/packages/calcite-components/src/components/action/readme.md +++ b/packages/calcite-components/src/components/action/readme.md @@ -6,22 +6,22 @@ For comprehensive guidance on using and implementing `calcite-action`, refer to ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `active` | `active` | When `true`, the component is highlighted. | `boolean` | `false` | -| `alignment` | `alignment` | Specifies the horizontal alignment of button elements with text content. | `"center" \| "end" \| "start"` | `undefined` | -| `appearance` | `appearance` | Specifies the appearance of the component. | `"solid" \| "transparent"` | `"solid"` | -| `compact` | `compact` | When `true`, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`. | `boolean` | `false` | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `icon` | `icon` | Specifies an icon to display. | `CamelCaseIcons \| "date-time" \| "i12-x" \| "i14-x" \| "i18-x" \| "i1-x" \| "i2-d-explore" \| "i2-x" \| "i360-view" \| "i3-d-glasses" \| "i4-x" \| "i8-x" \| "a-z" \| "a-z-down" \| "a-z-up" \| "a3-landscape" \| "a3-portrait" \| "a4-landscape" \| "a4-portrait" \| "absolute-direction" \| "absolute-elevation" \| "access-string-results" \| "activity-monitor" \| "actual-size" \| "add-and-update-features" \| "add-constant" \| "add-features" \| "add-in" \| "add-in-edit" \| "add-in-new" \| "add-layer" \| "add-layer-service" \| "add-raster-variable" \| "add-rasters" \| "add-reaction" \| "add-text" \| "add-to-model" \| "address-book" \| "alert-off-circle-f" \| "all-servers" \| "analysis-overlay" \| "annotate-tool" \| "ansi-a-landscape" \| "ansi-a-portrait" \| "ansi-b-landscape" \| "ansi-b-portrait" \| "antenna-height" \| "app-gear" \| "app-launcher" \| "app-run" \| "app-update" \| "apply-changes" \| "apply-selection-to-existing-view" \| "arcgis-data-store" \| "arcgis-online" \| "arrow-bold-down" \| "arrow-bold-left" \| "arrow-bold-right" \| "arrow-bold-up" \| "arrow-circle-down" \| "arrow-circle-down-f" \| "arrow-double-diagonal1" \| "arrow-double-diagonal2" \| "arrow-double-horizontal" \| "arrow-double-vertical" \| "arrow-down" \| "arrow-down-left" \| "arrow-down-right" \| "arrow-left" \| "arrow-right" \| "arrow-right-left" \| "arrow-up" \| "arrow-up-down" \| "arrow-up-left" \| "arrow-up-right" \| "asterisk-large" \| "asterisk-small" \| "attachment-plus" \| "auto-layout" \| "battery-charging" \| "bear-left" \| "bear-right" \| "beginning-f" \| "bell-f" \| "bell-off" \| "bookmark-f" \| "border-radius-fully-rounded" \| "border-radius-rounded" \| "border-radius-sharp" \| "box-chart" \| "box-chart-series" \| "brackets-curly" \| "break-recurrence" \| "bring-forward" \| "bring-to-front" \| "browser-map" \| "brush-mark" \| "brush-mark-plus" \| "brush-tip" \| "bullet-point" \| "bullet-point-large" \| "camera-flash-off" \| "camera-flash-on" \| "camera-plus" \| "camera-switch-front-back" \| "camera-unlock" \| "caret-double-horizontal" \| "caret-double-vertical" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-square-down" \| "caret-square-left" \| "caret-square-right" \| "caret-square-up" \| "caret-up" \| "catalog-dataset" \| "center-align" \| "center-horizontal" \| "center-vertical" \| "change-detection" \| "change-font-size" \| "chart-gear" \| "chart-magnifying-glass" \| "check-circle" \| "check-circle-f" \| "check-extent" \| "check-layer" \| "check-shield" \| "check-square" \| "check-square-f" \| "chevron-down" \| "chevron-down-left" \| "chevron-down-right" \| "chevron-end" \| "chevron-left" \| "chevron-right" \| "chevron-start" \| "chevron-up" \| "chevron-up-left" \| "chevron-up-right" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chord-diagram" \| "circle-f" \| "circle-area" \| "circle-disallowed" \| "circle-inset-large" \| "circle-inset-medium" \| "circle-inset-small" \| "circle-pause" \| "circle-pause-f" \| "circle-stop" \| "circle-stop-f" \| "classify-objects" \| "classify-pixels" \| "clear-selection" \| "clipboard-brackets" \| "clock-down" \| "clock-forward" \| "clock-up" \| "cloud-data" \| "cloud-server" \| "code-branch" \| "code-branch-edit" \| "collaboration-distributed" \| "collaboration-user" \| "color-coded-map" \| "color-correction" \| "column-settings" \| "community-link-chart-layout" \| "compass-needle" \| "compass-north-circle" \| "conditional-rules" \| "conditional-rules-path" \| "conference-room" \| "configure-editing" \| "configure-grid-unit" \| "configure-popup" \| "content-full" \| "content-inline" \| "content-large" \| "content-medium" \| "content-minimal" \| "content-none" \| "content-side-by-side" \| "content-small" \| "contingent-values" \| "coordinate-system" \| "copy-to-clipboard" \| "credit-card" \| "cursor-click" \| "cursor-lock" \| "cursor-marquee" \| "cursor-minus" \| "cursor-plus" \| "cursor-selection" \| "custom-print" \| "cut-and-fill-volume-calculation" \| "data-card" \| "data-check" \| "data-clock-chart" \| "data-cloud" \| "data-folder" \| "data-magnifying-glass" \| "data-raster" \| "debug-script" \| "decrease-link-chart-symbol-size" \| "deep-learning" \| "deep-learning-project" \| "derived-value" \| "developer-credentials" \| "diamond-inset-large" \| "diamond-inset-medium" \| "diamond-inset-small" \| "dimensions-unit" \| "dimensions-wall" \| "display-selection-lock" \| "display-selection-unlock" \| "dissolve-features" \| "distance-type" \| "distribute-height-evenly" \| "distribute-width-evenly" \| "dock-bottom" \| "dock-left" \| "dock-right" \| "double-float" \| "download-to" \| "drive-time" \| "drive-time-largest" \| "drive-time-smallest" \| "drive-time-threshold" \| "drive-time-x-bar" \| "driving-distance" \| "driving-time" \| "drone-fixed-wing" \| "drone-flying-wing" \| "drone-quadcopter" \| "drone-quadcopter-top" \| "edit-attributes" \| "edit-geometry" \| "elevator-down" \| "elevator-up" \| "ellipsis-circle" \| "email-address" \| "embedded-card" \| "embedded-content" \| "embedded-live-content" \| "employee-id" \| "enable-disable-feature-selection" \| "end-f" \| "escalator-down" \| "escalator-up" \| "exclamation-mark-circle" \| "exclamation-mark-circle-f" \| "exclamation-mark-triangle" \| "exclamation-mark-triangle-f" \| "exclamation-point" \| "exclamation-point-f" \| "exit-highway-left" \| "exit-highway-right" \| "expression-defined-color" \| "extend-trim" \| "extent-filter" \| "face-id" \| "feature-details" \| "feature-layer" \| "file-archive" \| "file-cad" \| "file-code" \| "file-csv" \| "file-data" \| "file-ecd" \| "file-excel" \| "file-gpx" \| "file-image" \| "file-kml" \| "file-magnifying-glass" \| "file-pdf" \| "file-pdf-plus" \| "file-pitemx" \| "file-ppt" \| "file-report" \| "file-report-generic" \| "file-shape" \| "file-sound" \| "file-sqlite" \| "file-text" \| "file-user" \| "file-video" \| "file-word" \| "file-xml" \| "file-zip" \| "files-csv-collection" \| "filter-expand" \| "find-path" \| "flip-vertical" \| "floor-plan" \| "folder-f" \| "folder-archive" \| "folder-magnifying-glass" \| "folder-move" \| "folder-new" \| "folder-open" \| "folder-open-f" \| "folder-plus" \| "folder-star" \| "folder-video" \| "follow-pause" \| "follow-play" \| "force-directed-link-chart-layout" \| "fork-left" \| "fork-middle" \| "fork-right" \| "form-dropdown" \| "form-elements" \| "form-field" \| "form-field-multiline" \| "form-field-off" \| "forward-f" \| "four-by-one-grid" \| "four-by-three-grid" \| "four-by-two-grid" \| "frame-export" \| "freehand-area" \| "full-screen" \| "full-screen-exit" \| "function-editor" \| "gauge-summary" \| "geoanalytics-server" \| "geoevent-server" \| "geographic-link-chart-layout" \| "geonet-question" \| "gis-server" \| "gps-off" \| "gps-on" \| "gps-on-f" \| "graph-axis" \| "graph-bar100-stacked" \| "graph-bar" \| "graph-bar-side-by-side" \| "graph-bar-stacked" \| "graph-box-mean-lines" \| "graph-box-side-by-side" \| "graph-guides" \| "graph-histogram" \| "graph-line-series" \| "graph-moving-average" \| "graph-pie-slice" \| "graph-scatter-plot" \| "graph-time-series" \| "grid-diamond" \| "grid-hexagon" \| "grid-triangle" \| "grid-unit" \| "ground-control-point" \| "group-form" \| "group-form-plus" \| "group-items" \| "group-layers" \| "group-layout-elements" \| "group-x" \| "h3-hexagon" \| "handle-vertical" \| "heading-layout" \| "heading-rtl" \| "heart-f" \| "heat-chart" \| "heavy-rain" \| "heavy-snow" \| "hexagon2-inset-large" \| "hexagon2-inset-medium" \| "hexagon2-inset-small" \| "hexagon-inset-large" \| "hexagon-inset-medium" \| "hexagon-inset-small" \| "hide-derived-value" \| "hide-empty" \| "hide-layers" \| "hide-parameters" \| "hierarchical-link-chart-layout" \| "highlighter-tip" \| "highway-change" \| "highway-change-right" \| "hillshade-effect" \| "horizontal-distribute" \| "hourglass-active" \| "hourglass-expired" \| "image-chips" \| "image-collection-explorer" \| "image-display-order" \| "image-layer" \| "image-magnifying-glass" \| "image-mensuration" \| "image-pin" \| "image-plus" \| "image-segmentation" \| "image-server" \| "image-space" \| "image-unit" \| "increase-link-chart-symbol-size" \| "information-f" \| "information-letter" \| "initiative-template" \| "joined-view-layer" \| "knowledge-graph" \| "knowledge-graph-dashboard" \| "knowledge-graph-data-model" \| "knowledge-graph-data-store" \| "knowledge-graph-export" \| "knowledge-graph-import" \| "knowledge-graph-new" \| "knowledge-graph-relationship" \| "knowledge-layer" \| "knowledge-server" \| "knowledge-studio" \| "label-off" \| "language-translate" \| "lasso-select" \| "layer-basemap" \| "layer-broken" \| "layer-filter" \| "layer-graphics" \| "layer-hide" \| "layer-kml" \| "layer-line" \| "layer-line-service" \| "layer-map" \| "layer-map-service" \| "layer-points" \| "layer-polygon" \| "layer-polygon-service" \| "layer-service" \| "layer-settings" \| "layer-zoom-to" \| "layers-editable" \| "layers-f" \| "layers-reference" \| "layout-compact" \| "layout-horizontal" \| "layout-spacious" \| "layout-vertical" \| "left-align" \| "left-edge" \| "left-left" \| "left-right" \| "legend-left" \| "legend-plus" \| "legend-right" \| "light-rain" \| "light-snow" \| "line-check" \| "line-dashed" \| "line-dotted" \| "line-of-sight" \| "line-solid" \| "line-straight" \| "link-chart" \| "link-chart-expand" \| "link-chart-from-template" \| "list-bullet" \| "list-button" \| "list-check" \| "list-check-all" \| "list-merge" \| "list-number" \| "list-number-rtl" \| "list-radio" \| "list-rectangle" \| "list-show-all" \| "livestream-video-layer" \| "location-sharing" \| "location-sharing-f" \| "location-sharing-off" \| "lock-f" \| "ltr-elements-align" \| "ltr-paragraph-align" \| "magnifying-glass" \| "magnifying-glass-minus" \| "magnifying-glass-plus" \| "map-contents" \| "map-from-template" \| "map-level-settings" \| "map-pin" \| "map-space" \| "mask-inside" \| "mask-outside" \| "maximum-graph" \| "maximum-territory-distance" \| "measure-area" \| "measure-building-height-shadow" \| "measure-building-height-top-base" \| "measure-building-height-top-shadow" \| "measure-line" \| "media-layer" \| "mega-phone" \| "members-brackets" \| "merge-details" \| "merge-on-highway" \| "merge-on-highway-right" \| "merge-units" \| "microphone-plus" \| "min-distance-between-centers" \| "minimum-graph" \| "minus-circle" \| "minus-circle-f" \| "minus-square" \| "minus-square-f" \| "miscellaneous-collection" \| "mission-server" \| "mobile-off" \| "mobile-vibrate" \| "model-edit" \| "modify-associations" \| "move-from-basemap" \| "move-to-basemap" \| "move-up" \| "move-up-all" \| "multidimensional-raster" \| "multiple-variables" \| "music-note" \| "new-link-chart" \| "new-model" \| "new-raster-function-template" \| "new-training" \| "no-attachment" \| "no-image" \| "no-map" \| "nodes-link" \| "nodes-merge" \| "nodes-unlink" \| "nodes-unmerge" \| "notebook-server" \| "notebook-snapshot" \| "notepad-add" \| "notepad-edit" \| "number-circle1" \| "number-circle1-f" \| "number-circle2" \| "number-circle2-f" \| "number-circle3" \| "number-circle3-f" \| "number-circle4" \| "number-circle4-f" \| "number-circle5" \| "number-circle5-f" \| "number-circle6" \| "number-circle6-f" \| "number-circle7" \| "number-circle7-f" \| "number-circle8" \| "number-circle8-f" \| "number-circle9" \| "number-circle9-f" \| "number-of-territories" \| "object-detection" \| "objectstore-data-store" \| "on-the-ground-elevation" \| "open-book" \| "oriented-imagery-layer" \| "oriented-imagery-widget" \| "overlap-features" \| "overwrite-features" \| "overwrite-project" \| "paint-bucket" \| "palette-check" \| "pan-drag" \| "parcel-layer" \| "partly-cloudy" \| "paste-with-attribute" \| "paste-without-attribute" \| "pause-f" \| "pen-mark" \| "pen-mark-plus" \| "pen-tip" \| "pencil-mark" \| "pencil-mark-plus" \| "pencil-square" \| "pencil-tip" \| "personal-homepage" \| "pie-chart" \| "pin-plus" \| "pin-tear" \| "pin-tear-f" \| "play-f" \| "plus-circle" \| "plus-square" \| "point-line" \| "polygon-area" \| "polygon-line-check" \| "polygon-select" \| "polygon-vertices" \| "pop-up1" \| "pop-up-blank" \| "pop-up-blank-f" \| "premium-content-user-credit" \| "presentation-x" \| "print-preview" \| "processing-templates" \| "profile-variables" \| "project-mission" \| "project-template" \| "puzzle-piece" \| "qr-code" \| "qt-code" \| "question-f" \| "question-mark" \| "radial-tree-link-chart-layout" \| "rain-snow" \| "rain-thunder" \| "ramp-left" \| "ramp-right" \| "raster-analysis" \| "raster-function" \| "raster-function-template" \| "raster-function-template-play" \| "read-only-non-editable" \| "rectangle-area" \| "rectangle-plus" \| "recycle-bin" \| "refresh-f" \| "relational-data-store" \| "relative-direction" \| "relative-to-ground-elevation" \| "relative-to-scene-elevation" \| "remove-from-list" \| "remove-linkchart" \| "reorder-cards" \| "reorder-grid" \| "reorder-stack" \| "replace-image" \| "reshape-add-geometry" \| "reshape-subtract-geometry" \| "reshape-tool" \| "resize-area" \| "reverse-f" \| "ribbon-rosette" \| "right-align" \| "right-angle" \| "right-edge" \| "right-left" \| "right-right" \| "rings-largest" \| "rings-smallest" \| "rings-threshold" \| "rings-x-bar" \| "road-sign" \| "rotate-device" \| "round-about" \| "round-about-right" \| "rounded-rectangle" \| "route-from" \| "route-to" \| "rss-f" \| "rtl-elements-align" \| "rtl-paragraph-align" \| "running-outline" \| "rural-driving-distance" \| "rural-driving-time" \| "satellite0-f" \| "satellite1-f" \| "satellite2-f" \| "satellite3-f" \| "save-as" \| "scan-area" \| "scan-barcode" \| "scan-corridor" \| "scan-crosshatch" \| "scan-perimeter" \| "scan-vertical" \| "screenshot-mode" \| "select-by-attributes" \| "select-category" \| "select-column" \| "select-range" \| "select-visible" \| "selected-items-filter" \| "selection-filter" \| "selection-manager" \| "selection-set" \| "selection-x" \| "send-backwards" \| "send-to-back" \| "serial-port" \| "server-lock" \| "share-ios" \| "sharp-left" \| "sharp-right" \| "shield-coin" \| "shopping-cart" \| "show-all-parameters" \| "show-column" \| "show-derived-value" \| "show-multiple-layers-at-a-time" \| "show-one-layer-at-a-time" \| "show-required-parameters" \| "sign-in" \| "sign-out" \| "simple-link-chart-layout" \| "sky-plot" \| "sliders-horizontal" \| "smart-camera" \| "smart-form" \| "smart-tree-link-chart-layout" \| "snap-to-grid" \| "snap-to-pixel" \| "snap-to-point" \| "snow-thunder" \| "sort-ascending" \| "sort-ascending-arrow" \| "sort-descending" \| "sort-descending-arrow" \| "sound-low" \| "sound-off" \| "sound-unavailable" \| "spatiotemporal-data-store" \| "speech-bubble" \| "speech-bubble-check" \| "speech-bubble-exclamation" \| "speech-bubble-like" \| "speech-bubble-plus" \| "speech-bubble-social" \| "speech-bubbles" \| "split-features" \| "split-geometry" \| "split-units" \| "square-f" \| "square-area" \| "square-inset-large" \| "square-inset-medium" \| "square-inset-small" \| "stairs-down" \| "stairs-up" \| "star-f" \| "star-circle" \| "stop-square" \| "stop-square-f" \| "stored-as-new-query" \| "stored-query" \| "sub-fields" \| "subheading-rtl" \| "suitability-analysis-output" \| "summarize-center-and-dispersion1" \| "summarize-center-and-dispersion2" \| "summarize-center-and-dispersion3" \| "system-management" \| "tabbed-view" \| "take-pedestrian-ramp" \| "territory-buffer-distance" \| "test-data" \| "text-bold" \| "text-button" \| "text-dashed-underline" \| "text-large" \| "text-medium" \| "text-paragraph-large" \| "text-small" \| "text-solid-underline" \| "three-by-one-grid" \| "three-by-three-grid" \| "three-by-two-grid" \| "thumbs-down" \| "thumbs-up" \| "tile-cache-data-store" \| "tile-layer" \| "tiled-imagery-layer" \| "time-filter" \| "time-zone" \| "toggle-off" \| "toggle-on" \| "tour-pin-tear" \| "transverse-hexagon" \| "trapezoid-area" \| "trucking-distance" \| "trucking-time" \| "u-turn" \| "u-turn-right" \| "ungroup-items" \| "ungroup-layers" \| "ungroup-layout-elements" \| "update-features" \| "update-project" \| "upload-to" \| "urban-model" \| "usb-security-key" \| "user-calendar" \| "user-down" \| "user-key" \| "user-minus" \| "user-plus" \| "user-to-device" \| "user-up" \| "user-x" \| "utility-network" \| "utility-network-trace" \| "validate-utility-network-topology" \| "vertex-check" \| "vertex-edit" \| "vertex-gps" \| "vertex-move" \| "vertex-plus" \| "vertex-x" \| "vertical-distribute" \| "video-layer" \| "video-plus" \| "video-server" \| "video-single-server" \| "video-web" \| "view-associations" \| "view-hide" \| "view-mixed" \| "view-visible" \| "walk-through-door" \| "walking-distance" \| "walking-time" \| "widgets-group" \| "widgets-source" \| "widgets-tabs" \| "workflow-diagram" \| "workflow-manager-server" \| "x-axis-guide" \| "x-bar" \| "x-circle" \| "x-circle-f" \| "x-octagon" \| "x-octagon-f" \| "y-axis-guide" \| "zoom-in-fixed" \| "zoom-out-fixed" \| "zoom-to-object"` | `undefined` | -| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | -| `indicator` | `indicator` | When `true`, displays a visual indicator. | `boolean` | `false` | -| `label` | `label` | Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop. | `string` | `undefined` | -| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | -| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ActionMessages` | `undefined` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `text` *(required)* | `text` | Specifies text that accompanies the icon. | `string` | `undefined` | -| `textEnabled` | `text-enabled` | Indicates whether the text is displayed. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | ----------- | +| `active` | `active` | When `true`, the component is highlighted. | `boolean` | `false` | +| `alignment` | `alignment` | Specifies the horizontal alignment of button elements with text content. | `"center" \| "end" \| "start"` | `undefined` | +| `appearance` | `appearance` | Specifies the appearance of the component. | `"solid" \| "transparent"` | `"solid"` | +| `compact` | `compact` | **[DEPRECATED]** No longer necessary.

When `true`, the side padding of the component is reduced. | `boolean` | `false` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `icon` | `icon` | Specifies an icon to display. | `string` | `undefined` | +| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | +| `indicator` | `indicator` | When `true`, displays a visual indicator. | `boolean` | `false` | +| `label` | `label` | Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop. | `string` | `undefined` | +| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ActionMessages` | `undefined` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `text` *(required)* | `text` | Specifies text that accompanies the icon. | `string` | `undefined` | +| `textEnabled` | `text-enabled` | Indicates whether the text is displayed. | `boolean` | `false` | ## Methods diff --git a/packages/calcite-components/src/components/alert/alert.tsx b/packages/calcite-components/src/components/alert/alert.tsx index 2ba97cd4a11..f59e346cd4a 100644 --- a/packages/calcite-components/src/components/alert/alert.tsx +++ b/packages/calcite-components/src/components/alert/alert.tsx @@ -42,7 +42,7 @@ import { } from "../../utils/t9n"; import { Kind, Scale } from "../interfaces"; import { KindIcons } from "../resources"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { AlertMessages } from "./assets/alert/t9n"; import { AlertDuration, Sync, Unregister } from "./interfaces"; import { CSS, DURATIONS, SLOTS } from "./resources"; @@ -111,7 +111,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen * When `true`, shows a default recommended icon. Alternatively, * pass a Calcite UI Icon name to display a specific icon. */ - @Prop({ reflect: true }) icon: IconName | boolean; + @Prop({ reflect: true }) icon: IconNameOrString | boolean; /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl = false; @@ -309,7 +309,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen ); } - private renderIcon(icon: IconName): VNode { + private renderIcon(icon: IconNameOrString): VNode { return (
diff --git a/packages/calcite-components/src/components/alert/readme.md b/packages/calcite-components/src/components/alert/readme.md index b9345015c29..c42f545ce3c 100644 --- a/packages/calcite-components/src/components/alert/readme.md +++ b/packages/calcite-components/src/components/alert/readme.md @@ -10,7 +10,7 @@ For comprehensive guidance on using and implementing `calcite-alert`, refer to t | -------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | ----------- | | `autoClose` | `auto-close` | When `true`, the component closes automatically. Recommended for passive, non-blocking alerts. | `boolean` | `false` | | `autoCloseDuration` | `auto-close-duration` | Specifies the duration before the component automatically closes - only use with `autoClose`. | `"fast" \| "medium" \| "slow"` | `"medium"` | -| `icon` | `icon` | When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. | `boolean \| IconName` | `undefined` | +| `icon` | `icon` | When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. | `boolean \| string` | `undefined` | | `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | | `kind` | `kind` | Specifies the kind of the component, which will apply to top border and icon. | `"brand" \| "danger" \| "info" \| "success" \| "warning"` | `"brand"` | | `label` *(required)* | `label` | Specifies an accessible name for the component. | `string` | `undefined` | diff --git a/packages/calcite-components/src/components/block-section/block-section.tsx b/packages/calcite-components/src/components/block-section/block-section.tsx index fe1a3842b85..b5ef39a1837 100644 --- a/packages/calcite-components/src/components/block-section/block-section.tsx +++ b/packages/calcite-components/src/components/block-section/block-section.tsx @@ -28,7 +28,7 @@ import { setComponentLoaded, setUpLoadableComponent, } from "../../utils/loadable"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { BlockSectionMessages } from "./assets/block-section/t9n"; import { BlockSectionToggleDisplay } from "./interfaces"; import { CSS, ICONS, IDS } from "./resources"; @@ -50,13 +50,13 @@ export class BlockSection implements LocalizedComponent, T9nComponent, LoadableC // -------------------------------------------------------------------------- /** Specifies an icon to display at the end of the component. */ - @Prop({ reflect: true }) iconEnd: IconName; + @Prop({ reflect: true }) iconEnd: IconNameOrString; /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl: FlipContext; /** Specifies an icon to display at the start of the component. */ - @Prop({ reflect: true }) iconStart: IconName; + @Prop({ reflect: true }) iconStart: IconNameOrString; /** * When `true`, expands the component and its contents. diff --git a/packages/calcite-components/src/components/block-section/readme.md b/packages/calcite-components/src/components/block-section/readme.md index 2039d8daa41..9df4f6b6195 100644 --- a/packages/calcite-components/src/components/block-section/readme.md +++ b/packages/calcite-components/src/components/block-section/readme.md @@ -6,16 +6,16 @@ For comprehensive guidance on using and implementing `calcite-block-section`, re ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `iconEnd` | `icon-end` | Specifies an icon to display at the end of the component. | `CamelCaseIcons \| "date-time" \| "i12-x" \| "i14-x" \| "i18-x" \| "i1-x" \| "i2-d-explore" \| "i2-x" \| "i360-view" \| "i3-d-glasses" \| "i4-x" \| "i8-x" \| "a-z" \| "a-z-down" \| "a-z-up" \| "a3-landscape" \| "a3-portrait" \| "a4-landscape" \| "a4-portrait" \| "absolute-direction" \| "absolute-elevation" \| "access-string-results" \| "activity-monitor" \| "actual-size" \| "add-and-update-features" \| "add-constant" \| "add-features" \| "add-in" \| "add-in-edit" \| "add-in-new" \| "add-layer" \| "add-layer-service" \| "add-raster-variable" \| "add-rasters" \| "add-reaction" \| "add-text" \| "add-to-model" \| "address-book" \| "alert-off-circle-f" \| "all-servers" \| "analysis-overlay" \| "annotate-tool" \| "ansi-a-landscape" \| "ansi-a-portrait" \| "ansi-b-landscape" \| "ansi-b-portrait" \| "antenna-height" \| "app-gear" \| "app-launcher" \| "app-run" \| "app-update" \| "apply-changes" \| "apply-selection-to-existing-view" \| "arcgis-data-store" \| "arcgis-online" \| "arrow-bold-down" \| "arrow-bold-left" \| "arrow-bold-right" \| "arrow-bold-up" \| "arrow-circle-down" \| "arrow-circle-down-f" \| "arrow-double-diagonal1" \| "arrow-double-diagonal2" \| "arrow-double-horizontal" \| "arrow-double-vertical" \| "arrow-down" \| "arrow-down-left" \| "arrow-down-right" \| "arrow-left" \| "arrow-right" \| "arrow-right-left" \| "arrow-up" \| "arrow-up-down" \| "arrow-up-left" \| "arrow-up-right" \| "asterisk-large" \| "asterisk-small" \| "attachment-plus" \| "auto-layout" \| "battery-charging" \| "bear-left" \| "bear-right" \| "beginning-f" \| "bell-f" \| "bell-off" \| "bookmark-f" \| "border-radius-fully-rounded" \| "border-radius-rounded" \| "border-radius-sharp" \| "box-chart" \| "box-chart-series" \| "brackets-curly" \| "break-recurrence" \| "bring-forward" \| "bring-to-front" \| "browser-map" \| "brush-mark" \| "brush-mark-plus" \| "brush-tip" \| "bullet-point" \| "bullet-point-large" \| "camera-flash-off" \| "camera-flash-on" \| "camera-plus" \| "camera-switch-front-back" \| "camera-unlock" \| "caret-double-horizontal" \| "caret-double-vertical" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-square-down" \| "caret-square-left" \| "caret-square-right" \| "caret-square-up" \| "caret-up" \| "catalog-dataset" \| "center-align" \| "center-horizontal" \| "center-vertical" \| "change-detection" \| "change-font-size" \| "chart-gear" \| "chart-magnifying-glass" \| "check-circle" \| "check-circle-f" \| "check-extent" \| "check-layer" \| "check-shield" \| "check-square" \| "check-square-f" \| "chevron-down" \| "chevron-down-left" \| "chevron-down-right" \| "chevron-end" \| "chevron-left" \| "chevron-right" \| "chevron-start" \| "chevron-up" \| "chevron-up-left" \| "chevron-up-right" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chord-diagram" \| "circle-f" \| "circle-area" \| "circle-disallowed" \| "circle-inset-large" \| "circle-inset-medium" \| "circle-inset-small" \| "circle-pause" \| "circle-pause-f" \| "circle-stop" \| "circle-stop-f" \| "classify-objects" \| "classify-pixels" \| "clear-selection" \| "clipboard-brackets" \| "clock-down" \| "clock-forward" \| "clock-up" \| "cloud-data" \| "cloud-server" \| "code-branch" \| "code-branch-edit" \| "collaboration-distributed" \| "collaboration-user" \| "color-coded-map" \| "color-correction" \| "column-settings" \| "community-link-chart-layout" \| "compass-needle" \| "compass-north-circle" \| "conditional-rules" \| "conditional-rules-path" \| "conference-room" \| "configure-editing" \| "configure-grid-unit" \| "configure-popup" \| "content-full" \| "content-inline" \| "content-large" \| "content-medium" \| "content-minimal" \| "content-none" \| "content-side-by-side" \| "content-small" \| "contingent-values" \| "coordinate-system" \| "copy-to-clipboard" \| "credit-card" \| "cursor-click" \| "cursor-lock" \| "cursor-marquee" \| "cursor-minus" \| "cursor-plus" \| "cursor-selection" \| "custom-print" \| "cut-and-fill-volume-calculation" \| "data-card" \| "data-check" \| "data-clock-chart" \| "data-cloud" \| "data-folder" \| "data-magnifying-glass" \| "data-raster" \| "debug-script" \| "decrease-link-chart-symbol-size" \| "deep-learning" \| "deep-learning-project" \| "derived-value" \| "developer-credentials" \| "diamond-inset-large" \| "diamond-inset-medium" \| "diamond-inset-small" \| "dimensions-unit" \| "dimensions-wall" \| "display-selection-lock" \| "display-selection-unlock" \| "dissolve-features" \| "distance-type" \| "distribute-height-evenly" \| "distribute-width-evenly" \| "dock-bottom" \| "dock-left" \| "dock-right" \| "double-float" \| "download-to" \| "drive-time" \| "drive-time-largest" \| "drive-time-smallest" \| "drive-time-threshold" \| "drive-time-x-bar" \| "driving-distance" \| "driving-time" \| "drone-fixed-wing" \| "drone-flying-wing" \| "drone-quadcopter" \| "drone-quadcopter-top" \| "edit-attributes" \| "edit-geometry" \| "elevator-down" \| "elevator-up" \| "ellipsis-circle" \| "email-address" \| "embedded-card" \| "embedded-content" \| "embedded-live-content" \| "employee-id" \| "enable-disable-feature-selection" \| "end-f" \| "escalator-down" \| "escalator-up" \| "exclamation-mark-circle" \| "exclamation-mark-circle-f" \| "exclamation-mark-triangle" \| "exclamation-mark-triangle-f" \| "exclamation-point" \| "exclamation-point-f" \| "exit-highway-left" \| "exit-highway-right" \| "expression-defined-color" \| "extend-trim" \| "extent-filter" \| "face-id" \| "feature-details" \| "feature-layer" \| "file-archive" \| "file-cad" \| "file-code" \| "file-csv" \| "file-data" \| "file-ecd" \| "file-excel" \| "file-gpx" \| "file-image" \| "file-kml" \| "file-magnifying-glass" \| "file-pdf" \| "file-pdf-plus" \| "file-pitemx" \| "file-ppt" \| "file-report" \| "file-report-generic" \| "file-shape" \| "file-sound" \| "file-sqlite" \| "file-text" \| "file-user" \| "file-video" \| "file-word" \| "file-xml" \| "file-zip" \| "files-csv-collection" \| "filter-expand" \| "find-path" \| "flip-vertical" \| "floor-plan" \| "folder-f" \| "folder-archive" \| "folder-magnifying-glass" \| "folder-move" \| "folder-new" \| "folder-open" \| "folder-open-f" \| "folder-plus" \| "folder-star" \| "folder-video" \| "follow-pause" \| "follow-play" \| "force-directed-link-chart-layout" \| "fork-left" \| "fork-middle" \| "fork-right" \| "form-dropdown" \| "form-elements" \| "form-field" \| "form-field-multiline" \| "form-field-off" \| "forward-f" \| "four-by-one-grid" \| "four-by-three-grid" \| "four-by-two-grid" \| "frame-export" \| "freehand-area" \| "full-screen" \| "full-screen-exit" \| "function-editor" \| "gauge-summary" \| "geoanalytics-server" \| "geoevent-server" \| "geographic-link-chart-layout" \| "geonet-question" \| "gis-server" \| "gps-off" \| "gps-on" \| "gps-on-f" \| "graph-axis" \| "graph-bar100-stacked" \| "graph-bar" \| "graph-bar-side-by-side" \| "graph-bar-stacked" \| "graph-box-mean-lines" \| "graph-box-side-by-side" \| "graph-guides" \| "graph-histogram" \| "graph-line-series" \| "graph-moving-average" \| "graph-pie-slice" \| "graph-scatter-plot" \| "graph-time-series" \| "grid-diamond" \| "grid-hexagon" \| "grid-triangle" \| "grid-unit" \| "ground-control-point" \| "group-form" \| "group-form-plus" \| "group-items" \| "group-layers" \| "group-layout-elements" \| "group-x" \| "h3-hexagon" \| "handle-vertical" \| "heading-layout" \| "heading-rtl" \| "heart-f" \| "heat-chart" \| "heavy-rain" \| "heavy-snow" \| "hexagon2-inset-large" \| "hexagon2-inset-medium" \| "hexagon2-inset-small" \| "hexagon-inset-large" \| "hexagon-inset-medium" \| "hexagon-inset-small" \| "hide-derived-value" \| "hide-empty" \| "hide-layers" \| "hide-parameters" \| "hierarchical-link-chart-layout" \| "highlighter-tip" \| "highway-change" \| "highway-change-right" \| "hillshade-effect" \| "horizontal-distribute" \| "hourglass-active" \| "hourglass-expired" \| "image-chips" \| "image-collection-explorer" \| "image-display-order" \| "image-layer" \| "image-magnifying-glass" \| "image-mensuration" \| "image-pin" \| "image-plus" \| "image-segmentation" \| "image-server" \| "image-space" \| "image-unit" \| "increase-link-chart-symbol-size" \| "information-f" \| "information-letter" \| "initiative-template" \| "joined-view-layer" \| "knowledge-graph" \| "knowledge-graph-dashboard" \| "knowledge-graph-data-model" \| "knowledge-graph-data-store" \| "knowledge-graph-export" \| "knowledge-graph-import" \| "knowledge-graph-new" \| "knowledge-graph-relationship" \| "knowledge-layer" \| "knowledge-server" \| "knowledge-studio" \| "label-off" \| "language-translate" \| "lasso-select" \| "layer-basemap" \| "layer-broken" \| "layer-filter" \| "layer-graphics" \| "layer-hide" \| "layer-kml" \| "layer-line" \| "layer-line-service" \| "layer-map" \| "layer-map-service" \| "layer-points" \| "layer-polygon" \| "layer-polygon-service" \| "layer-service" \| "layer-settings" \| "layer-zoom-to" \| "layers-editable" \| "layers-f" \| "layers-reference" \| "layout-compact" \| "layout-horizontal" \| "layout-spacious" \| "layout-vertical" \| "left-align" \| "left-edge" \| "left-left" \| "left-right" \| "legend-left" \| "legend-plus" \| "legend-right" \| "light-rain" \| "light-snow" \| "line-check" \| "line-dashed" \| "line-dotted" \| "line-of-sight" \| "line-solid" \| "line-straight" \| "link-chart" \| "link-chart-expand" \| "link-chart-from-template" \| "list-bullet" \| "list-button" \| "list-check" \| "list-check-all" \| "list-merge" \| "list-number" \| "list-number-rtl" \| "list-radio" \| "list-rectangle" \| "list-show-all" \| "livestream-video-layer" \| "location-sharing" \| "location-sharing-f" \| "location-sharing-off" \| "lock-f" \| "ltr-elements-align" \| "ltr-paragraph-align" \| "magnifying-glass" \| "magnifying-glass-minus" \| "magnifying-glass-plus" \| "map-contents" \| "map-from-template" \| "map-level-settings" \| "map-pin" \| "map-space" \| "mask-inside" \| "mask-outside" \| "maximum-graph" \| "maximum-territory-distance" \| "measure-area" \| "measure-building-height-shadow" \| "measure-building-height-top-base" \| "measure-building-height-top-shadow" \| "measure-line" \| "media-layer" \| "mega-phone" \| "members-brackets" \| "merge-details" \| "merge-on-highway" \| "merge-on-highway-right" \| "merge-units" \| "microphone-plus" \| "min-distance-between-centers" \| "minimum-graph" \| "minus-circle" \| "minus-circle-f" \| "minus-square" \| "minus-square-f" \| "miscellaneous-collection" \| "mission-server" \| "mobile-off" \| "mobile-vibrate" \| "model-edit" \| "modify-associations" \| "move-from-basemap" \| "move-to-basemap" \| "move-up" \| "move-up-all" \| "multidimensional-raster" \| "multiple-variables" \| "music-note" \| "new-link-chart" \| "new-model" \| "new-raster-function-template" \| "new-training" \| "no-attachment" \| "no-image" \| "no-map" \| "nodes-link" \| "nodes-merge" \| "nodes-unlink" \| "nodes-unmerge" \| "notebook-server" \| "notebook-snapshot" \| "notepad-add" \| "notepad-edit" \| "number-circle1" \| "number-circle1-f" \| "number-circle2" \| "number-circle2-f" \| "number-circle3" \| "number-circle3-f" \| "number-circle4" \| "number-circle4-f" \| "number-circle5" \| "number-circle5-f" \| "number-circle6" \| "number-circle6-f" \| "number-circle7" \| "number-circle7-f" \| "number-circle8" \| "number-circle8-f" \| "number-circle9" \| "number-circle9-f" \| "number-of-territories" \| "object-detection" \| "objectstore-data-store" \| "on-the-ground-elevation" \| "open-book" \| "oriented-imagery-layer" \| "oriented-imagery-widget" \| "overlap-features" \| "overwrite-features" \| "overwrite-project" \| "paint-bucket" \| "palette-check" \| "pan-drag" \| "parcel-layer" \| "partly-cloudy" \| "paste-with-attribute" \| "paste-without-attribute" \| "pause-f" \| "pen-mark" \| "pen-mark-plus" \| "pen-tip" \| "pencil-mark" \| "pencil-mark-plus" \| "pencil-square" \| "pencil-tip" \| "personal-homepage" \| "pie-chart" \| "pin-plus" \| "pin-tear" \| "pin-tear-f" \| "play-f" \| "plus-circle" \| "plus-square" \| "point-line" \| "polygon-area" \| "polygon-line-check" \| "polygon-select" \| "polygon-vertices" \| "pop-up1" \| "pop-up-blank" \| "pop-up-blank-f" \| "premium-content-user-credit" \| "presentation-x" \| "print-preview" \| "processing-templates" \| "profile-variables" \| "project-mission" \| "project-template" \| "puzzle-piece" \| "qr-code" \| "qt-code" \| "question-f" \| "question-mark" \| "radial-tree-link-chart-layout" \| "rain-snow" \| "rain-thunder" \| "ramp-left" \| "ramp-right" \| "raster-analysis" \| "raster-function" \| "raster-function-template" \| "raster-function-template-play" \| "read-only-non-editable" \| "rectangle-area" \| "rectangle-plus" \| "recycle-bin" \| "refresh-f" \| "relational-data-store" \| "relative-direction" \| "relative-to-ground-elevation" \| "relative-to-scene-elevation" \| "remove-from-list" \| "remove-linkchart" \| "reorder-cards" \| "reorder-grid" \| "reorder-stack" \| "replace-image" \| "reshape-add-geometry" \| "reshape-subtract-geometry" \| "reshape-tool" \| "resize-area" \| "reverse-f" \| "ribbon-rosette" \| "right-align" \| "right-angle" \| "right-edge" \| "right-left" \| "right-right" \| "rings-largest" \| "rings-smallest" \| "rings-threshold" \| "rings-x-bar" \| "road-sign" \| "rotate-device" \| "round-about" \| "round-about-right" \| "rounded-rectangle" \| "route-from" \| "route-to" \| "rss-f" \| "rtl-elements-align" \| "rtl-paragraph-align" \| "running-outline" \| "rural-driving-distance" \| "rural-driving-time" \| "satellite0-f" \| "satellite1-f" \| "satellite2-f" \| "satellite3-f" \| "save-as" \| "scan-area" \| "scan-barcode" \| "scan-corridor" \| "scan-crosshatch" \| "scan-perimeter" \| "scan-vertical" \| "screenshot-mode" \| "select-by-attributes" \| "select-category" \| "select-column" \| "select-range" \| "select-visible" \| "selected-items-filter" \| "selection-filter" \| "selection-manager" \| "selection-set" \| "selection-x" \| "send-backwards" \| "send-to-back" \| "serial-port" \| "server-lock" \| "share-ios" \| "sharp-left" \| "sharp-right" \| "shield-coin" \| "shopping-cart" \| "show-all-parameters" \| "show-column" \| "show-derived-value" \| "show-multiple-layers-at-a-time" \| "show-one-layer-at-a-time" \| "show-required-parameters" \| "sign-in" \| "sign-out" \| "simple-link-chart-layout" \| "sky-plot" \| "sliders-horizontal" \| "smart-camera" \| "smart-form" \| "smart-tree-link-chart-layout" \| "snap-to-grid" \| "snap-to-pixel" \| "snap-to-point" \| "snow-thunder" \| "sort-ascending" \| "sort-ascending-arrow" \| "sort-descending" \| "sort-descending-arrow" \| "sound-low" \| "sound-off" \| "sound-unavailable" \| "spatiotemporal-data-store" \| "speech-bubble" \| "speech-bubble-check" \| "speech-bubble-exclamation" \| "speech-bubble-like" \| "speech-bubble-plus" \| "speech-bubble-social" \| "speech-bubbles" \| "split-features" \| "split-geometry" \| "split-units" \| "square-f" \| "square-area" \| "square-inset-large" \| "square-inset-medium" \| "square-inset-small" \| "stairs-down" \| "stairs-up" \| "star-f" \| "star-circle" \| "stop-square" \| "stop-square-f" \| "stored-as-new-query" \| "stored-query" \| "sub-fields" \| "subheading-rtl" \| "suitability-analysis-output" \| "summarize-center-and-dispersion1" \| "summarize-center-and-dispersion2" \| "summarize-center-and-dispersion3" \| "system-management" \| "tabbed-view" \| "take-pedestrian-ramp" \| "territory-buffer-distance" \| "test-data" \| "text-bold" \| "text-button" \| "text-dashed-underline" \| "text-large" \| "text-medium" \| "text-paragraph-large" \| "text-small" \| "text-solid-underline" \| "three-by-one-grid" \| "three-by-three-grid" \| "three-by-two-grid" \| "thumbs-down" \| "thumbs-up" \| "tile-cache-data-store" \| "tile-layer" \| "tiled-imagery-layer" \| "time-filter" \| "time-zone" \| "toggle-off" \| "toggle-on" \| "tour-pin-tear" \| "transverse-hexagon" \| "trapezoid-area" \| "trucking-distance" \| "trucking-time" \| "u-turn" \| "u-turn-right" \| "ungroup-items" \| "ungroup-layers" \| "ungroup-layout-elements" \| "update-features" \| "update-project" \| "upload-to" \| "urban-model" \| "usb-security-key" \| "user-calendar" \| "user-down" \| "user-key" \| "user-minus" \| "user-plus" \| "user-to-device" \| "user-up" \| "user-x" \| "utility-network" \| "utility-network-trace" \| "validate-utility-network-topology" \| "vertex-check" \| "vertex-edit" \| "vertex-gps" \| "vertex-move" \| "vertex-plus" \| "vertex-x" \| "vertical-distribute" \| "video-layer" \| "video-plus" \| "video-server" \| "video-single-server" \| "video-web" \| "view-associations" \| "view-hide" \| "view-mixed" \| "view-visible" \| "walk-through-door" \| "walking-distance" \| "walking-time" \| "widgets-group" \| "widgets-source" \| "widgets-tabs" \| "workflow-diagram" \| "workflow-manager-server" \| "x-axis-guide" \| "x-bar" \| "x-circle" \| "x-circle-f" \| "x-octagon" \| "x-octagon-f" \| "y-axis-guide" \| "zoom-in-fixed" \| "zoom-out-fixed" \| "zoom-to-object"` | `undefined` | -| `iconFlipRtl` | `icon-flip-rtl` | Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). | `"both" \| "end" \| "start"` | `undefined` | -| `iconStart` | `icon-start` | Specifies an icon to display at the start of the component. | `CamelCaseIcons \| "date-time" \| "i12-x" \| "i14-x" \| "i18-x" \| "i1-x" \| "i2-d-explore" \| "i2-x" \| "i360-view" \| "i3-d-glasses" \| "i4-x" \| "i8-x" \| "a-z" \| "a-z-down" \| "a-z-up" \| "a3-landscape" \| "a3-portrait" \| "a4-landscape" \| "a4-portrait" \| "absolute-direction" \| "absolute-elevation" \| "access-string-results" \| "activity-monitor" \| "actual-size" \| "add-and-update-features" \| "add-constant" \| "add-features" \| "add-in" \| "add-in-edit" \| "add-in-new" \| "add-layer" \| "add-layer-service" \| "add-raster-variable" \| "add-rasters" \| "add-reaction" \| "add-text" \| "add-to-model" \| "address-book" \| "alert-off-circle-f" \| "all-servers" \| "analysis-overlay" \| "annotate-tool" \| "ansi-a-landscape" \| "ansi-a-portrait" \| "ansi-b-landscape" \| "ansi-b-portrait" \| "antenna-height" \| "app-gear" \| "app-launcher" \| "app-run" \| "app-update" \| "apply-changes" \| "apply-selection-to-existing-view" \| "arcgis-data-store" \| "arcgis-online" \| "arrow-bold-down" \| "arrow-bold-left" \| "arrow-bold-right" \| "arrow-bold-up" \| "arrow-circle-down" \| "arrow-circle-down-f" \| "arrow-double-diagonal1" \| "arrow-double-diagonal2" \| "arrow-double-horizontal" \| "arrow-double-vertical" \| "arrow-down" \| "arrow-down-left" \| "arrow-down-right" \| "arrow-left" \| "arrow-right" \| "arrow-right-left" \| "arrow-up" \| "arrow-up-down" \| "arrow-up-left" \| "arrow-up-right" \| "asterisk-large" \| "asterisk-small" \| "attachment-plus" \| "auto-layout" \| "battery-charging" \| "bear-left" \| "bear-right" \| "beginning-f" \| "bell-f" \| "bell-off" \| "bookmark-f" \| "border-radius-fully-rounded" \| "border-radius-rounded" \| "border-radius-sharp" \| "box-chart" \| "box-chart-series" \| "brackets-curly" \| "break-recurrence" \| "bring-forward" \| "bring-to-front" \| "browser-map" \| "brush-mark" \| "brush-mark-plus" \| "brush-tip" \| "bullet-point" \| "bullet-point-large" \| "camera-flash-off" \| "camera-flash-on" \| "camera-plus" \| "camera-switch-front-back" \| "camera-unlock" \| "caret-double-horizontal" \| "caret-double-vertical" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-square-down" \| "caret-square-left" \| "caret-square-right" \| "caret-square-up" \| "caret-up" \| "catalog-dataset" \| "center-align" \| "center-horizontal" \| "center-vertical" \| "change-detection" \| "change-font-size" \| "chart-gear" \| "chart-magnifying-glass" \| "check-circle" \| "check-circle-f" \| "check-extent" \| "check-layer" \| "check-shield" \| "check-square" \| "check-square-f" \| "chevron-down" \| "chevron-down-left" \| "chevron-down-right" \| "chevron-end" \| "chevron-left" \| "chevron-right" \| "chevron-start" \| "chevron-up" \| "chevron-up-left" \| "chevron-up-right" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chord-diagram" \| "circle-f" \| "circle-area" \| "circle-disallowed" \| "circle-inset-large" \| "circle-inset-medium" \| "circle-inset-small" \| "circle-pause" \| "circle-pause-f" \| "circle-stop" \| "circle-stop-f" \| "classify-objects" \| "classify-pixels" \| "clear-selection" \| "clipboard-brackets" \| "clock-down" \| "clock-forward" \| "clock-up" \| "cloud-data" \| "cloud-server" \| "code-branch" \| "code-branch-edit" \| "collaboration-distributed" \| "collaboration-user" \| "color-coded-map" \| "color-correction" \| "column-settings" \| "community-link-chart-layout" \| "compass-needle" \| "compass-north-circle" \| "conditional-rules" \| "conditional-rules-path" \| "conference-room" \| "configure-editing" \| "configure-grid-unit" \| "configure-popup" \| "content-full" \| "content-inline" \| "content-large" \| "content-medium" \| "content-minimal" \| "content-none" \| "content-side-by-side" \| "content-small" \| "contingent-values" \| "coordinate-system" \| "copy-to-clipboard" \| "credit-card" \| "cursor-click" \| "cursor-lock" \| "cursor-marquee" \| "cursor-minus" \| "cursor-plus" \| "cursor-selection" \| "custom-print" \| "cut-and-fill-volume-calculation" \| "data-card" \| "data-check" \| "data-clock-chart" \| "data-cloud" \| "data-folder" \| "data-magnifying-glass" \| "data-raster" \| "debug-script" \| "decrease-link-chart-symbol-size" \| "deep-learning" \| "deep-learning-project" \| "derived-value" \| "developer-credentials" \| "diamond-inset-large" \| "diamond-inset-medium" \| "diamond-inset-small" \| "dimensions-unit" \| "dimensions-wall" \| "display-selection-lock" \| "display-selection-unlock" \| "dissolve-features" \| "distance-type" \| "distribute-height-evenly" \| "distribute-width-evenly" \| "dock-bottom" \| "dock-left" \| "dock-right" \| "double-float" \| "download-to" \| "drive-time" \| "drive-time-largest" \| "drive-time-smallest" \| "drive-time-threshold" \| "drive-time-x-bar" \| "driving-distance" \| "driving-time" \| "drone-fixed-wing" \| "drone-flying-wing" \| "drone-quadcopter" \| "drone-quadcopter-top" \| "edit-attributes" \| "edit-geometry" \| "elevator-down" \| "elevator-up" \| "ellipsis-circle" \| "email-address" \| "embedded-card" \| "embedded-content" \| "embedded-live-content" \| "employee-id" \| "enable-disable-feature-selection" \| "end-f" \| "escalator-down" \| "escalator-up" \| "exclamation-mark-circle" \| "exclamation-mark-circle-f" \| "exclamation-mark-triangle" \| "exclamation-mark-triangle-f" \| "exclamation-point" \| "exclamation-point-f" \| "exit-highway-left" \| "exit-highway-right" \| "expression-defined-color" \| "extend-trim" \| "extent-filter" \| "face-id" \| "feature-details" \| "feature-layer" \| "file-archive" \| "file-cad" \| "file-code" \| "file-csv" \| "file-data" \| "file-ecd" \| "file-excel" \| "file-gpx" \| "file-image" \| "file-kml" \| "file-magnifying-glass" \| "file-pdf" \| "file-pdf-plus" \| "file-pitemx" \| "file-ppt" \| "file-report" \| "file-report-generic" \| "file-shape" \| "file-sound" \| "file-sqlite" \| "file-text" \| "file-user" \| "file-video" \| "file-word" \| "file-xml" \| "file-zip" \| "files-csv-collection" \| "filter-expand" \| "find-path" \| "flip-vertical" \| "floor-plan" \| "folder-f" \| "folder-archive" \| "folder-magnifying-glass" \| "folder-move" \| "folder-new" \| "folder-open" \| "folder-open-f" \| "folder-plus" \| "folder-star" \| "folder-video" \| "follow-pause" \| "follow-play" \| "force-directed-link-chart-layout" \| "fork-left" \| "fork-middle" \| "fork-right" \| "form-dropdown" \| "form-elements" \| "form-field" \| "form-field-multiline" \| "form-field-off" \| "forward-f" \| "four-by-one-grid" \| "four-by-three-grid" \| "four-by-two-grid" \| "frame-export" \| "freehand-area" \| "full-screen" \| "full-screen-exit" \| "function-editor" \| "gauge-summary" \| "geoanalytics-server" \| "geoevent-server" \| "geographic-link-chart-layout" \| "geonet-question" \| "gis-server" \| "gps-off" \| "gps-on" \| "gps-on-f" \| "graph-axis" \| "graph-bar100-stacked" \| "graph-bar" \| "graph-bar-side-by-side" \| "graph-bar-stacked" \| "graph-box-mean-lines" \| "graph-box-side-by-side" \| "graph-guides" \| "graph-histogram" \| "graph-line-series" \| "graph-moving-average" \| "graph-pie-slice" \| "graph-scatter-plot" \| "graph-time-series" \| "grid-diamond" \| "grid-hexagon" \| "grid-triangle" \| "grid-unit" \| "ground-control-point" \| "group-form" \| "group-form-plus" \| "group-items" \| "group-layers" \| "group-layout-elements" \| "group-x" \| "h3-hexagon" \| "handle-vertical" \| "heading-layout" \| "heading-rtl" \| "heart-f" \| "heat-chart" \| "heavy-rain" \| "heavy-snow" \| "hexagon2-inset-large" \| "hexagon2-inset-medium" \| "hexagon2-inset-small" \| "hexagon-inset-large" \| "hexagon-inset-medium" \| "hexagon-inset-small" \| "hide-derived-value" \| "hide-empty" \| "hide-layers" \| "hide-parameters" \| "hierarchical-link-chart-layout" \| "highlighter-tip" \| "highway-change" \| "highway-change-right" \| "hillshade-effect" \| "horizontal-distribute" \| "hourglass-active" \| "hourglass-expired" \| "image-chips" \| "image-collection-explorer" \| "image-display-order" \| "image-layer" \| "image-magnifying-glass" \| "image-mensuration" \| "image-pin" \| "image-plus" \| "image-segmentation" \| "image-server" \| "image-space" \| "image-unit" \| "increase-link-chart-symbol-size" \| "information-f" \| "information-letter" \| "initiative-template" \| "joined-view-layer" \| "knowledge-graph" \| "knowledge-graph-dashboard" \| "knowledge-graph-data-model" \| "knowledge-graph-data-store" \| "knowledge-graph-export" \| "knowledge-graph-import" \| "knowledge-graph-new" \| "knowledge-graph-relationship" \| "knowledge-layer" \| "knowledge-server" \| "knowledge-studio" \| "label-off" \| "language-translate" \| "lasso-select" \| "layer-basemap" \| "layer-broken" \| "layer-filter" \| "layer-graphics" \| "layer-hide" \| "layer-kml" \| "layer-line" \| "layer-line-service" \| "layer-map" \| "layer-map-service" \| "layer-points" \| "layer-polygon" \| "layer-polygon-service" \| "layer-service" \| "layer-settings" \| "layer-zoom-to" \| "layers-editable" \| "layers-f" \| "layers-reference" \| "layout-compact" \| "layout-horizontal" \| "layout-spacious" \| "layout-vertical" \| "left-align" \| "left-edge" \| "left-left" \| "left-right" \| "legend-left" \| "legend-plus" \| "legend-right" \| "light-rain" \| "light-snow" \| "line-check" \| "line-dashed" \| "line-dotted" \| "line-of-sight" \| "line-solid" \| "line-straight" \| "link-chart" \| "link-chart-expand" \| "link-chart-from-template" \| "list-bullet" \| "list-button" \| "list-check" \| "list-check-all" \| "list-merge" \| "list-number" \| "list-number-rtl" \| "list-radio" \| "list-rectangle" \| "list-show-all" \| "livestream-video-layer" \| "location-sharing" \| "location-sharing-f" \| "location-sharing-off" \| "lock-f" \| "ltr-elements-align" \| "ltr-paragraph-align" \| "magnifying-glass" \| "magnifying-glass-minus" \| "magnifying-glass-plus" \| "map-contents" \| "map-from-template" \| "map-level-settings" \| "map-pin" \| "map-space" \| "mask-inside" \| "mask-outside" \| "maximum-graph" \| "maximum-territory-distance" \| "measure-area" \| "measure-building-height-shadow" \| "measure-building-height-top-base" \| "measure-building-height-top-shadow" \| "measure-line" \| "media-layer" \| "mega-phone" \| "members-brackets" \| "merge-details" \| "merge-on-highway" \| "merge-on-highway-right" \| "merge-units" \| "microphone-plus" \| "min-distance-between-centers" \| "minimum-graph" \| "minus-circle" \| "minus-circle-f" \| "minus-square" \| "minus-square-f" \| "miscellaneous-collection" \| "mission-server" \| "mobile-off" \| "mobile-vibrate" \| "model-edit" \| "modify-associations" \| "move-from-basemap" \| "move-to-basemap" \| "move-up" \| "move-up-all" \| "multidimensional-raster" \| "multiple-variables" \| "music-note" \| "new-link-chart" \| "new-model" \| "new-raster-function-template" \| "new-training" \| "no-attachment" \| "no-image" \| "no-map" \| "nodes-link" \| "nodes-merge" \| "nodes-unlink" \| "nodes-unmerge" \| "notebook-server" \| "notebook-snapshot" \| "notepad-add" \| "notepad-edit" \| "number-circle1" \| "number-circle1-f" \| "number-circle2" \| "number-circle2-f" \| "number-circle3" \| "number-circle3-f" \| "number-circle4" \| "number-circle4-f" \| "number-circle5" \| "number-circle5-f" \| "number-circle6" \| "number-circle6-f" \| "number-circle7" \| "number-circle7-f" \| "number-circle8" \| "number-circle8-f" \| "number-circle9" \| "number-circle9-f" \| "number-of-territories" \| "object-detection" \| "objectstore-data-store" \| "on-the-ground-elevation" \| "open-book" \| "oriented-imagery-layer" \| "oriented-imagery-widget" \| "overlap-features" \| "overwrite-features" \| "overwrite-project" \| "paint-bucket" \| "palette-check" \| "pan-drag" \| "parcel-layer" \| "partly-cloudy" \| "paste-with-attribute" \| "paste-without-attribute" \| "pause-f" \| "pen-mark" \| "pen-mark-plus" \| "pen-tip" \| "pencil-mark" \| "pencil-mark-plus" \| "pencil-square" \| "pencil-tip" \| "personal-homepage" \| "pie-chart" \| "pin-plus" \| "pin-tear" \| "pin-tear-f" \| "play-f" \| "plus-circle" \| "plus-square" \| "point-line" \| "polygon-area" \| "polygon-line-check" \| "polygon-select" \| "polygon-vertices" \| "pop-up1" \| "pop-up-blank" \| "pop-up-blank-f" \| "premium-content-user-credit" \| "presentation-x" \| "print-preview" \| "processing-templates" \| "profile-variables" \| "project-mission" \| "project-template" \| "puzzle-piece" \| "qr-code" \| "qt-code" \| "question-f" \| "question-mark" \| "radial-tree-link-chart-layout" \| "rain-snow" \| "rain-thunder" \| "ramp-left" \| "ramp-right" \| "raster-analysis" \| "raster-function" \| "raster-function-template" \| "raster-function-template-play" \| "read-only-non-editable" \| "rectangle-area" \| "rectangle-plus" \| "recycle-bin" \| "refresh-f" \| "relational-data-store" \| "relative-direction" \| "relative-to-ground-elevation" \| "relative-to-scene-elevation" \| "remove-from-list" \| "remove-linkchart" \| "reorder-cards" \| "reorder-grid" \| "reorder-stack" \| "replace-image" \| "reshape-add-geometry" \| "reshape-subtract-geometry" \| "reshape-tool" \| "resize-area" \| "reverse-f" \| "ribbon-rosette" \| "right-align" \| "right-angle" \| "right-edge" \| "right-left" \| "right-right" \| "rings-largest" \| "rings-smallest" \| "rings-threshold" \| "rings-x-bar" \| "road-sign" \| "rotate-device" \| "round-about" \| "round-about-right" \| "rounded-rectangle" \| "route-from" \| "route-to" \| "rss-f" \| "rtl-elements-align" \| "rtl-paragraph-align" \| "running-outline" \| "rural-driving-distance" \| "rural-driving-time" \| "satellite0-f" \| "satellite1-f" \| "satellite2-f" \| "satellite3-f" \| "save-as" \| "scan-area" \| "scan-barcode" \| "scan-corridor" \| "scan-crosshatch" \| "scan-perimeter" \| "scan-vertical" \| "screenshot-mode" \| "select-by-attributes" \| "select-category" \| "select-column" \| "select-range" \| "select-visible" \| "selected-items-filter" \| "selection-filter" \| "selection-manager" \| "selection-set" \| "selection-x" \| "send-backwards" \| "send-to-back" \| "serial-port" \| "server-lock" \| "share-ios" \| "sharp-left" \| "sharp-right" \| "shield-coin" \| "shopping-cart" \| "show-all-parameters" \| "show-column" \| "show-derived-value" \| "show-multiple-layers-at-a-time" \| "show-one-layer-at-a-time" \| "show-required-parameters" \| "sign-in" \| "sign-out" \| "simple-link-chart-layout" \| "sky-plot" \| "sliders-horizontal" \| "smart-camera" \| "smart-form" \| "smart-tree-link-chart-layout" \| "snap-to-grid" \| "snap-to-pixel" \| "snap-to-point" \| "snow-thunder" \| "sort-ascending" \| "sort-ascending-arrow" \| "sort-descending" \| "sort-descending-arrow" \| "sound-low" \| "sound-off" \| "sound-unavailable" \| "spatiotemporal-data-store" \| "speech-bubble" \| "speech-bubble-check" \| "speech-bubble-exclamation" \| "speech-bubble-like" \| "speech-bubble-plus" \| "speech-bubble-social" \| "speech-bubbles" \| "split-features" \| "split-geometry" \| "split-units" \| "square-f" \| "square-area" \| "square-inset-large" \| "square-inset-medium" \| "square-inset-small" \| "stairs-down" \| "stairs-up" \| "star-f" \| "star-circle" \| "stop-square" \| "stop-square-f" \| "stored-as-new-query" \| "stored-query" \| "sub-fields" \| "subheading-rtl" \| "suitability-analysis-output" \| "summarize-center-and-dispersion1" \| "summarize-center-and-dispersion2" \| "summarize-center-and-dispersion3" \| "system-management" \| "tabbed-view" \| "take-pedestrian-ramp" \| "territory-buffer-distance" \| "test-data" \| "text-bold" \| "text-button" \| "text-dashed-underline" \| "text-large" \| "text-medium" \| "text-paragraph-large" \| "text-small" \| "text-solid-underline" \| "three-by-one-grid" \| "three-by-three-grid" \| "three-by-two-grid" \| "thumbs-down" \| "thumbs-up" \| "tile-cache-data-store" \| "tile-layer" \| "tiled-imagery-layer" \| "time-filter" \| "time-zone" \| "toggle-off" \| "toggle-on" \| "tour-pin-tear" \| "transverse-hexagon" \| "trapezoid-area" \| "trucking-distance" \| "trucking-time" \| "u-turn" \| "u-turn-right" \| "ungroup-items" \| "ungroup-layers" \| "ungroup-layout-elements" \| "update-features" \| "update-project" \| "upload-to" \| "urban-model" \| "usb-security-key" \| "user-calendar" \| "user-down" \| "user-key" \| "user-minus" \| "user-plus" \| "user-to-device" \| "user-up" \| "user-x" \| "utility-network" \| "utility-network-trace" \| "validate-utility-network-topology" \| "vertex-check" \| "vertex-edit" \| "vertex-gps" \| "vertex-move" \| "vertex-plus" \| "vertex-x" \| "vertical-distribute" \| "video-layer" \| "video-plus" \| "video-server" \| "video-single-server" \| "video-web" \| "view-associations" \| "view-hide" \| "view-mixed" \| "view-visible" \| "walk-through-door" \| "walking-distance" \| "walking-time" \| "widgets-group" \| "widgets-source" \| "widgets-tabs" \| "workflow-diagram" \| "workflow-manager-server" \| "x-axis-guide" \| "x-bar" \| "x-circle" \| "x-circle-f" \| "x-octagon" \| "x-octagon-f" \| "y-axis-guide" \| "zoom-in-fixed" \| "zoom-out-fixed" \| "zoom-to-object"` | `undefined` | -| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `BlockSectionMessages` | `undefined` | -| `open` | `open` | When `true`, expands the component and its contents. | `boolean` | `false` | -| `status` | `status` | **[DEPRECATED]** Use `icon-start` instead.

Displays a status-related indicator icon. | `"idle" \| "invalid" \| "valid"` | `undefined` | -| `text` | `text` | The component header text. | `string` | `undefined` | -| `toggleDisplay` | `toggle-display` | Specifies how the component's toggle is displayed, where: `"button"` sets the toggle to a selectable header, and `"switch"` sets the toggle to a switch. | `"button" \| "switch"` | `"button"` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| `iconEnd` | `icon-end` | Specifies an icon to display at the end of the component. | `string` | `undefined` | +| `iconFlipRtl` | `icon-flip-rtl` | Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). | `"both" \| "end" \| "start"` | `undefined` | +| `iconStart` | `icon-start` | Specifies an icon to display at the start of the component. | `string` | `undefined` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `BlockSectionMessages` | `undefined` | +| `open` | `open` | When `true`, expands the component and its contents. | `boolean` | `false` | +| `status` | `status` | **[DEPRECATED]** Use `icon-start` instead.

Displays a status-related indicator icon. | `"idle" \| "invalid" \| "valid"` | `undefined` | +| `text` | `text` | The component header text. | `string` | `undefined` | +| `toggleDisplay` | `toggle-display` | Specifies how the component's toggle is displayed, where: `"button"` sets the toggle to a selectable header, and `"switch"` sets the toggle to a switch. | `"button" \| "switch"` | `"button"` | ## Events diff --git a/packages/calcite-components/src/components/block/block.e2e.ts b/packages/calcite-components/src/components/block/block.e2e.ts index d632af846e7..714121b03a4 100644 --- a/packages/calcite-components/src/components/block/block.e2e.ts +++ b/packages/calcite-components/src/components/block/block.e2e.ts @@ -323,6 +323,29 @@ describe("calcite-block", () => { const actionAssignedSlot = await page.$eval("calcite-action", (action) => action.assignedSlot.name); expect(actionAssignedSlot).toBe(SLOTS.headerMenuActions); }); + + it("applies correct header spacing when heading or description properties are present", async () => { + const page = await newE2EPage(); + + await page.setContent(``); + + const block = await page.find("calcite-block"); + const header = await page.find(`calcite-block >>> .${CSS.header}`); + block.setAttribute("heading", "test-heading"); + await page.waitForChanges(); + + expect(header).toHaveClass(CSS.headerHasText); + + block.removeAttribute("heading"); + await page.waitForChanges(); + + expect(header).not.toHaveClass(CSS.headerHasText); + + block.setAttribute("description", "test-description"); + await page.waitForChanges(); + + expect(header).toHaveClass(CSS.headerHasText); + }); }); it("should allow the CSS custom property to be overridden when applied to :root", async () => { diff --git a/packages/calcite-components/src/components/block/block.scss b/packages/calcite-components/src/components/block/block.scss index 040a6a47569..2cafa01e263 100644 --- a/packages/calcite-components/src/components/block/block.scss +++ b/packages/calcite-components/src/components/block/block.scss @@ -23,6 +23,10 @@ @apply justify-start; } +.header--has-text { + padding: var(--calcite-spacing-md); +} + .header, .toggle { grid-area: header; @@ -194,11 +198,4 @@ calcite-action-menu { } } -:host([heading]), -:host([description]) { - .header { - padding: var(--calcite-spacing-md); - } -} - @include base-component(); diff --git a/packages/calcite-components/src/components/block/block.tsx b/packages/calcite-components/src/components/block/block.tsx index c06303aaa8e..ab7eab7f5b1 100644 --- a/packages/calcite-components/src/components/block/block.tsx +++ b/packages/calcite-components/src/components/block/block.tsx @@ -48,7 +48,7 @@ import { import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent"; import { OverlayPositioning } from "../../utils/floating-ui"; import { FlipContext } from "../interfaces"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { CSS, ICONS, IDS, SLOTS } from "./resources"; import { BlockMessages } from "./assets/block/t9n"; @@ -107,13 +107,13 @@ export class Block @Prop({ reflect: true }) headingLevel: HeadingLevel; /** Specifies an icon to display at the end of the component. */ - @Prop({ reflect: true }) iconEnd: IconName; + @Prop({ reflect: true }) iconEnd: IconNameOrString; /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl: FlipContext; /** Specifies an icon to display at the start of the component. */ - @Prop({ reflect: true }) iconStart: IconName; + @Prop({ reflect: true }) iconStart: IconNameOrString; /** * When `true`, a busy indicator is displayed. @@ -411,12 +411,15 @@ export class Block } render(): VNode { - const { collapsible, el, loading, open, heading, messages } = this; + const { collapsible, el, loading, open, heading, messages, description } = this; const toggleLabel = open ? messages.collapse : messages.expand; const headerContent = ( -
+
{this.renderIcon("start")} {this.renderContentStart()} {this.renderLoaderStatusIcon()} diff --git a/packages/calcite-components/src/components/block/readme.md b/packages/calcite-components/src/components/block/readme.md index d1c160ed5bf..a2eaf2c9948 100644 --- a/packages/calcite-components/src/components/block/readme.md +++ b/packages/calcite-components/src/components/block/readme.md @@ -6,22 +6,22 @@ For comprehensive guidance on using and implementing `calcite-block`, refer to t ## Properties -| Property | Attribute | Description | Type | Default | -| ---------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | -| `collapsible` | `collapsible` | When `true`, the component is collapsible. | `boolean` | `false` | -| `description` | `description` | A description for the component, which displays below the heading. | `string` | `undefined` | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `dragHandle` | `drag-handle` | When `true`, displays a drag handle in the header. | `boolean` | `false` | -| `heading` *(required)* | `heading` | The component header text. | `string` | `undefined` | -| `headingLevel` | `heading-level` | Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | -| `iconEnd` | `icon-end` | Specifies an icon to display at the end of the component. | `CamelCaseIcons \| "date-time" \| "i12-x" \| "i14-x" \| "i18-x" \| "i1-x" \| "i2-d-explore" \| "i2-x" \| "i360-view" \| "i3-d-glasses" \| "i4-x" \| "i8-x" \| "a-z" \| "a-z-down" \| "a-z-up" \| "a3-landscape" \| "a3-portrait" \| "a4-landscape" \| "a4-portrait" \| "absolute-direction" \| "absolute-elevation" \| "access-string-results" \| "activity-monitor" \| "actual-size" \| "add-and-update-features" \| "add-constant" \| "add-features" \| "add-in" \| "add-in-edit" \| "add-in-new" \| "add-layer" \| "add-layer-service" \| "add-raster-variable" \| "add-rasters" \| "add-reaction" \| "add-text" \| "add-to-model" \| "address-book" \| "alert-off-circle-f" \| "all-servers" \| "analysis-overlay" \| "annotate-tool" \| "ansi-a-landscape" \| "ansi-a-portrait" \| "ansi-b-landscape" \| "ansi-b-portrait" \| "antenna-height" \| "app-gear" \| "app-launcher" \| "app-run" \| "app-update" \| "apply-changes" \| "apply-selection-to-existing-view" \| "arcgis-data-store" \| "arcgis-online" \| "arrow-bold-down" \| "arrow-bold-left" \| "arrow-bold-right" \| "arrow-bold-up" \| "arrow-circle-down" \| "arrow-circle-down-f" \| "arrow-double-diagonal1" \| "arrow-double-diagonal2" \| "arrow-double-horizontal" \| "arrow-double-vertical" \| "arrow-down" \| "arrow-down-left" \| "arrow-down-right" \| "arrow-left" \| "arrow-right" \| "arrow-right-left" \| "arrow-up" \| "arrow-up-down" \| "arrow-up-left" \| "arrow-up-right" \| "asterisk-large" \| "asterisk-small" \| "attachment-plus" \| "auto-layout" \| "battery-charging" \| "bear-left" \| "bear-right" \| "beginning-f" \| "bell-f" \| "bell-off" \| "bookmark-f" \| "border-radius-fully-rounded" \| "border-radius-rounded" \| "border-radius-sharp" \| "box-chart" \| "box-chart-series" \| "brackets-curly" \| "break-recurrence" \| "bring-forward" \| "bring-to-front" \| "browser-map" \| "brush-mark" \| "brush-mark-plus" \| "brush-tip" \| "bullet-point" \| "bullet-point-large" \| "camera-flash-off" \| "camera-flash-on" \| "camera-plus" \| "camera-switch-front-back" \| "camera-unlock" \| "caret-double-horizontal" \| "caret-double-vertical" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-square-down" \| "caret-square-left" \| "caret-square-right" \| "caret-square-up" \| "caret-up" \| "catalog-dataset" \| "center-align" \| "center-horizontal" \| "center-vertical" \| "change-detection" \| "change-font-size" \| "chart-gear" \| "chart-magnifying-glass" \| "check-circle" \| "check-circle-f" \| "check-extent" \| "check-layer" \| "check-shield" \| "check-square" \| "check-square-f" \| "chevron-down" \| "chevron-down-left" \| "chevron-down-right" \| "chevron-end" \| "chevron-left" \| "chevron-right" \| "chevron-start" \| "chevron-up" \| "chevron-up-left" \| "chevron-up-right" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chord-diagram" \| "circle-f" \| "circle-area" \| "circle-disallowed" \| "circle-inset-large" \| "circle-inset-medium" \| "circle-inset-small" \| "circle-pause" \| "circle-pause-f" \| "circle-stop" \| "circle-stop-f" \| "classify-objects" \| "classify-pixels" \| "clear-selection" \| "clipboard-brackets" \| "clock-down" \| "clock-forward" \| "clock-up" \| "cloud-data" \| "cloud-server" \| "code-branch" \| "code-branch-edit" \| "collaboration-distributed" \| "collaboration-user" \| "color-coded-map" \| "color-correction" \| "column-settings" \| "community-link-chart-layout" \| "compass-needle" \| "compass-north-circle" \| "conditional-rules" \| "conditional-rules-path" \| "conference-room" \| "configure-editing" \| "configure-grid-unit" \| "configure-popup" \| "content-full" \| "content-inline" \| "content-large" \| "content-medium" \| "content-minimal" \| "content-none" \| "content-side-by-side" \| "content-small" \| "contingent-values" \| "coordinate-system" \| "copy-to-clipboard" \| "credit-card" \| "cursor-click" \| "cursor-lock" \| "cursor-marquee" \| "cursor-minus" \| "cursor-plus" \| "cursor-selection" \| "custom-print" \| "cut-and-fill-volume-calculation" \| "data-card" \| "data-check" \| "data-clock-chart" \| "data-cloud" \| "data-folder" \| "data-magnifying-glass" \| "data-raster" \| "debug-script" \| "decrease-link-chart-symbol-size" \| "deep-learning" \| "deep-learning-project" \| "derived-value" \| "developer-credentials" \| "diamond-inset-large" \| "diamond-inset-medium" \| "diamond-inset-small" \| "dimensions-unit" \| "dimensions-wall" \| "display-selection-lock" \| "display-selection-unlock" \| "dissolve-features" \| "distance-type" \| "distribute-height-evenly" \| "distribute-width-evenly" \| "dock-bottom" \| "dock-left" \| "dock-right" \| "double-float" \| "download-to" \| "drive-time" \| "drive-time-largest" \| "drive-time-smallest" \| "drive-time-threshold" \| "drive-time-x-bar" \| "driving-distance" \| "driving-time" \| "drone-fixed-wing" \| "drone-flying-wing" \| "drone-quadcopter" \| "drone-quadcopter-top" \| "edit-attributes" \| "edit-geometry" \| "elevator-down" \| "elevator-up" \| "ellipsis-circle" \| "email-address" \| "embedded-card" \| "embedded-content" \| "embedded-live-content" \| "employee-id" \| "enable-disable-feature-selection" \| "end-f" \| "escalator-down" \| "escalator-up" \| "exclamation-mark-circle" \| "exclamation-mark-circle-f" \| "exclamation-mark-triangle" \| "exclamation-mark-triangle-f" \| "exclamation-point" \| "exclamation-point-f" \| "exit-highway-left" \| "exit-highway-right" \| "expression-defined-color" \| "extend-trim" \| "extent-filter" \| "face-id" \| "feature-details" \| "feature-layer" \| "file-archive" \| "file-cad" \| "file-code" \| "file-csv" \| "file-data" \| "file-ecd" \| "file-excel" \| "file-gpx" \| "file-image" \| "file-kml" \| "file-magnifying-glass" \| "file-pdf" \| "file-pdf-plus" \| "file-pitemx" \| "file-ppt" \| "file-report" \| "file-report-generic" \| "file-shape" \| "file-sound" \| "file-sqlite" \| "file-text" \| "file-user" \| "file-video" \| "file-word" \| "file-xml" \| "file-zip" \| "files-csv-collection" \| "filter-expand" \| "find-path" \| "flip-vertical" \| "floor-plan" \| "folder-f" \| "folder-archive" \| "folder-magnifying-glass" \| "folder-move" \| "folder-new" \| "folder-open" \| "folder-open-f" \| "folder-plus" \| "folder-star" \| "folder-video" \| "follow-pause" \| "follow-play" \| "force-directed-link-chart-layout" \| "fork-left" \| "fork-middle" \| "fork-right" \| "form-dropdown" \| "form-elements" \| "form-field" \| "form-field-multiline" \| "form-field-off" \| "forward-f" \| "four-by-one-grid" \| "four-by-three-grid" \| "four-by-two-grid" \| "frame-export" \| "freehand-area" \| "full-screen" \| "full-screen-exit" \| "function-editor" \| "gauge-summary" \| "geoanalytics-server" \| "geoevent-server" \| "geographic-link-chart-layout" \| "geonet-question" \| "gis-server" \| "gps-off" \| "gps-on" \| "gps-on-f" \| "graph-axis" \| "graph-bar100-stacked" \| "graph-bar" \| "graph-bar-side-by-side" \| "graph-bar-stacked" \| "graph-box-mean-lines" \| "graph-box-side-by-side" \| "graph-guides" \| "graph-histogram" \| "graph-line-series" \| "graph-moving-average" \| "graph-pie-slice" \| "graph-scatter-plot" \| "graph-time-series" \| "grid-diamond" \| "grid-hexagon" \| "grid-triangle" \| "grid-unit" \| "ground-control-point" \| "group-form" \| "group-form-plus" \| "group-items" \| "group-layers" \| "group-layout-elements" \| "group-x" \| "h3-hexagon" \| "handle-vertical" \| "heading-layout" \| "heading-rtl" \| "heart-f" \| "heat-chart" \| "heavy-rain" \| "heavy-snow" \| "hexagon2-inset-large" \| "hexagon2-inset-medium" \| "hexagon2-inset-small" \| "hexagon-inset-large" \| "hexagon-inset-medium" \| "hexagon-inset-small" \| "hide-derived-value" \| "hide-empty" \| "hide-layers" \| "hide-parameters" \| "hierarchical-link-chart-layout" \| "highlighter-tip" \| "highway-change" \| "highway-change-right" \| "hillshade-effect" \| "horizontal-distribute" \| "hourglass-active" \| "hourglass-expired" \| "image-chips" \| "image-collection-explorer" \| "image-display-order" \| "image-layer" \| "image-magnifying-glass" \| "image-mensuration" \| "image-pin" \| "image-plus" \| "image-segmentation" \| "image-server" \| "image-space" \| "image-unit" \| "increase-link-chart-symbol-size" \| "information-f" \| "information-letter" \| "initiative-template" \| "joined-view-layer" \| "knowledge-graph" \| "knowledge-graph-dashboard" \| "knowledge-graph-data-model" \| "knowledge-graph-data-store" \| "knowledge-graph-export" \| "knowledge-graph-import" \| "knowledge-graph-new" \| "knowledge-graph-relationship" \| "knowledge-layer" \| "knowledge-server" \| "knowledge-studio" \| "label-off" \| "language-translate" \| "lasso-select" \| "layer-basemap" \| "layer-broken" \| "layer-filter" \| "layer-graphics" \| "layer-hide" \| "layer-kml" \| "layer-line" \| "layer-line-service" \| "layer-map" \| "layer-map-service" \| "layer-points" \| "layer-polygon" \| "layer-polygon-service" \| "layer-service" \| "layer-settings" \| "layer-zoom-to" \| "layers-editable" \| "layers-f" \| "layers-reference" \| "layout-compact" \| "layout-horizontal" \| "layout-spacious" \| "layout-vertical" \| "left-align" \| "left-edge" \| "left-left" \| "left-right" \| "legend-left" \| "legend-plus" \| "legend-right" \| "light-rain" \| "light-snow" \| "line-check" \| "line-dashed" \| "line-dotted" \| "line-of-sight" \| "line-solid" \| "line-straight" \| "link-chart" \| "link-chart-expand" \| "link-chart-from-template" \| "list-bullet" \| "list-button" \| "list-check" \| "list-check-all" \| "list-merge" \| "list-number" \| "list-number-rtl" \| "list-radio" \| "list-rectangle" \| "list-show-all" \| "livestream-video-layer" \| "location-sharing" \| "location-sharing-f" \| "location-sharing-off" \| "lock-f" \| "ltr-elements-align" \| "ltr-paragraph-align" \| "magnifying-glass" \| "magnifying-glass-minus" \| "magnifying-glass-plus" \| "map-contents" \| "map-from-template" \| "map-level-settings" \| "map-pin" \| "map-space" \| "mask-inside" \| "mask-outside" \| "maximum-graph" \| "maximum-territory-distance" \| "measure-area" \| "measure-building-height-shadow" \| "measure-building-height-top-base" \| "measure-building-height-top-shadow" \| "measure-line" \| "media-layer" \| "mega-phone" \| "members-brackets" \| "merge-details" \| "merge-on-highway" \| "merge-on-highway-right" \| "merge-units" \| "microphone-plus" \| "min-distance-between-centers" \| "minimum-graph" \| "minus-circle" \| "minus-circle-f" \| "minus-square" \| "minus-square-f" \| "miscellaneous-collection" \| "mission-server" \| "mobile-off" \| "mobile-vibrate" \| "model-edit" \| "modify-associations" \| "move-from-basemap" \| "move-to-basemap" \| "move-up" \| "move-up-all" \| "multidimensional-raster" \| "multiple-variables" \| "music-note" \| "new-link-chart" \| "new-model" \| "new-raster-function-template" \| "new-training" \| "no-attachment" \| "no-image" \| "no-map" \| "nodes-link" \| "nodes-merge" \| "nodes-unlink" \| "nodes-unmerge" \| "notebook-server" \| "notebook-snapshot" \| "notepad-add" \| "notepad-edit" \| "number-circle1" \| "number-circle1-f" \| "number-circle2" \| "number-circle2-f" \| "number-circle3" \| "number-circle3-f" \| "number-circle4" \| "number-circle4-f" \| "number-circle5" \| "number-circle5-f" \| "number-circle6" \| "number-circle6-f" \| "number-circle7" \| "number-circle7-f" \| "number-circle8" \| "number-circle8-f" \| "number-circle9" \| "number-circle9-f" \| "number-of-territories" \| "object-detection" \| "objectstore-data-store" \| "on-the-ground-elevation" \| "open-book" \| "oriented-imagery-layer" \| "oriented-imagery-widget" \| "overlap-features" \| "overwrite-features" \| "overwrite-project" \| "paint-bucket" \| "palette-check" \| "pan-drag" \| "parcel-layer" \| "partly-cloudy" \| "paste-with-attribute" \| "paste-without-attribute" \| "pause-f" \| "pen-mark" \| "pen-mark-plus" \| "pen-tip" \| "pencil-mark" \| "pencil-mark-plus" \| "pencil-square" \| "pencil-tip" \| "personal-homepage" \| "pie-chart" \| "pin-plus" \| "pin-tear" \| "pin-tear-f" \| "play-f" \| "plus-circle" \| "plus-square" \| "point-line" \| "polygon-area" \| "polygon-line-check" \| "polygon-select" \| "polygon-vertices" \| "pop-up1" \| "pop-up-blank" \| "pop-up-blank-f" \| "premium-content-user-credit" \| "presentation-x" \| "print-preview" \| "processing-templates" \| "profile-variables" \| "project-mission" \| "project-template" \| "puzzle-piece" \| "qr-code" \| "qt-code" \| "question-f" \| "question-mark" \| "radial-tree-link-chart-layout" \| "rain-snow" \| "rain-thunder" \| "ramp-left" \| "ramp-right" \| "raster-analysis" \| "raster-function" \| "raster-function-template" \| "raster-function-template-play" \| "read-only-non-editable" \| "rectangle-area" \| "rectangle-plus" \| "recycle-bin" \| "refresh-f" \| "relational-data-store" \| "relative-direction" \| "relative-to-ground-elevation" \| "relative-to-scene-elevation" \| "remove-from-list" \| "remove-linkchart" \| "reorder-cards" \| "reorder-grid" \| "reorder-stack" \| "replace-image" \| "reshape-add-geometry" \| "reshape-subtract-geometry" \| "reshape-tool" \| "resize-area" \| "reverse-f" \| "ribbon-rosette" \| "right-align" \| "right-angle" \| "right-edge" \| "right-left" \| "right-right" \| "rings-largest" \| "rings-smallest" \| "rings-threshold" \| "rings-x-bar" \| "road-sign" \| "rotate-device" \| "round-about" \| "round-about-right" \| "rounded-rectangle" \| "route-from" \| "route-to" \| "rss-f" \| "rtl-elements-align" \| "rtl-paragraph-align" \| "running-outline" \| "rural-driving-distance" \| "rural-driving-time" \| "satellite0-f" \| "satellite1-f" \| "satellite2-f" \| "satellite3-f" \| "save-as" \| "scan-area" \| "scan-barcode" \| "scan-corridor" \| "scan-crosshatch" \| "scan-perimeter" \| "scan-vertical" \| "screenshot-mode" \| "select-by-attributes" \| "select-category" \| "select-column" \| "select-range" \| "select-visible" \| "selected-items-filter" \| "selection-filter" \| "selection-manager" \| "selection-set" \| "selection-x" \| "send-backwards" \| "send-to-back" \| "serial-port" \| "server-lock" \| "share-ios" \| "sharp-left" \| "sharp-right" \| "shield-coin" \| "shopping-cart" \| "show-all-parameters" \| "show-column" \| "show-derived-value" \| "show-multiple-layers-at-a-time" \| "show-one-layer-at-a-time" \| "show-required-parameters" \| "sign-in" \| "sign-out" \| "simple-link-chart-layout" \| "sky-plot" \| "sliders-horizontal" \| "smart-camera" \| "smart-form" \| "smart-tree-link-chart-layout" \| "snap-to-grid" \| "snap-to-pixel" \| "snap-to-point" \| "snow-thunder" \| "sort-ascending" \| "sort-ascending-arrow" \| "sort-descending" \| "sort-descending-arrow" \| "sound-low" \| "sound-off" \| "sound-unavailable" \| "spatiotemporal-data-store" \| "speech-bubble" \| "speech-bubble-check" \| "speech-bubble-exclamation" \| "speech-bubble-like" \| "speech-bubble-plus" \| "speech-bubble-social" \| "speech-bubbles" \| "split-features" \| "split-geometry" \| "split-units" \| "square-f" \| "square-area" \| "square-inset-large" \| "square-inset-medium" \| "square-inset-small" \| "stairs-down" \| "stairs-up" \| "star-f" \| "star-circle" \| "stop-square" \| "stop-square-f" \| "stored-as-new-query" \| "stored-query" \| "sub-fields" \| "subheading-rtl" \| "suitability-analysis-output" \| "summarize-center-and-dispersion1" \| "summarize-center-and-dispersion2" \| "summarize-center-and-dispersion3" \| "system-management" \| "tabbed-view" \| "take-pedestrian-ramp" \| "territory-buffer-distance" \| "test-data" \| "text-bold" \| "text-button" \| "text-dashed-underline" \| "text-large" \| "text-medium" \| "text-paragraph-large" \| "text-small" \| "text-solid-underline" \| "three-by-one-grid" \| "three-by-three-grid" \| "three-by-two-grid" \| "thumbs-down" \| "thumbs-up" \| "tile-cache-data-store" \| "tile-layer" \| "tiled-imagery-layer" \| "time-filter" \| "time-zone" \| "toggle-off" \| "toggle-on" \| "tour-pin-tear" \| "transverse-hexagon" \| "trapezoid-area" \| "trucking-distance" \| "trucking-time" \| "u-turn" \| "u-turn-right" \| "ungroup-items" \| "ungroup-layers" \| "ungroup-layout-elements" \| "update-features" \| "update-project" \| "upload-to" \| "urban-model" \| "usb-security-key" \| "user-calendar" \| "user-down" \| "user-key" \| "user-minus" \| "user-plus" \| "user-to-device" \| "user-up" \| "user-x" \| "utility-network" \| "utility-network-trace" \| "validate-utility-network-topology" \| "vertex-check" \| "vertex-edit" \| "vertex-gps" \| "vertex-move" \| "vertex-plus" \| "vertex-x" \| "vertical-distribute" \| "video-layer" \| "video-plus" \| "video-server" \| "video-single-server" \| "video-web" \| "view-associations" \| "view-hide" \| "view-mixed" \| "view-visible" \| "walk-through-door" \| "walking-distance" \| "walking-time" \| "widgets-group" \| "widgets-source" \| "widgets-tabs" \| "workflow-diagram" \| "workflow-manager-server" \| "x-axis-guide" \| "x-bar" \| "x-circle" \| "x-circle-f" \| "x-octagon" \| "x-octagon-f" \| "y-axis-guide" \| "zoom-in-fixed" \| "zoom-out-fixed" \| "zoom-to-object"` | `undefined` | -| `iconFlipRtl` | `icon-flip-rtl` | Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). | `"both" \| "end" \| "start"` | `undefined` | -| `iconStart` | `icon-start` | Specifies an icon to display at the start of the component. | `CamelCaseIcons \| "date-time" \| "i12-x" \| "i14-x" \| "i18-x" \| "i1-x" \| "i2-d-explore" \| "i2-x" \| "i360-view" \| "i3-d-glasses" \| "i4-x" \| "i8-x" \| "a-z" \| "a-z-down" \| "a-z-up" \| "a3-landscape" \| "a3-portrait" \| "a4-landscape" \| "a4-portrait" \| "absolute-direction" \| "absolute-elevation" \| "access-string-results" \| "activity-monitor" \| "actual-size" \| "add-and-update-features" \| "add-constant" \| "add-features" \| "add-in" \| "add-in-edit" \| "add-in-new" \| "add-layer" \| "add-layer-service" \| "add-raster-variable" \| "add-rasters" \| "add-reaction" \| "add-text" \| "add-to-model" \| "address-book" \| "alert-off-circle-f" \| "all-servers" \| "analysis-overlay" \| "annotate-tool" \| "ansi-a-landscape" \| "ansi-a-portrait" \| "ansi-b-landscape" \| "ansi-b-portrait" \| "antenna-height" \| "app-gear" \| "app-launcher" \| "app-run" \| "app-update" \| "apply-changes" \| "apply-selection-to-existing-view" \| "arcgis-data-store" \| "arcgis-online" \| "arrow-bold-down" \| "arrow-bold-left" \| "arrow-bold-right" \| "arrow-bold-up" \| "arrow-circle-down" \| "arrow-circle-down-f" \| "arrow-double-diagonal1" \| "arrow-double-diagonal2" \| "arrow-double-horizontal" \| "arrow-double-vertical" \| "arrow-down" \| "arrow-down-left" \| "arrow-down-right" \| "arrow-left" \| "arrow-right" \| "arrow-right-left" \| "arrow-up" \| "arrow-up-down" \| "arrow-up-left" \| "arrow-up-right" \| "asterisk-large" \| "asterisk-small" \| "attachment-plus" \| "auto-layout" \| "battery-charging" \| "bear-left" \| "bear-right" \| "beginning-f" \| "bell-f" \| "bell-off" \| "bookmark-f" \| "border-radius-fully-rounded" \| "border-radius-rounded" \| "border-radius-sharp" \| "box-chart" \| "box-chart-series" \| "brackets-curly" \| "break-recurrence" \| "bring-forward" \| "bring-to-front" \| "browser-map" \| "brush-mark" \| "brush-mark-plus" \| "brush-tip" \| "bullet-point" \| "bullet-point-large" \| "camera-flash-off" \| "camera-flash-on" \| "camera-plus" \| "camera-switch-front-back" \| "camera-unlock" \| "caret-double-horizontal" \| "caret-double-vertical" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-square-down" \| "caret-square-left" \| "caret-square-right" \| "caret-square-up" \| "caret-up" \| "catalog-dataset" \| "center-align" \| "center-horizontal" \| "center-vertical" \| "change-detection" \| "change-font-size" \| "chart-gear" \| "chart-magnifying-glass" \| "check-circle" \| "check-circle-f" \| "check-extent" \| "check-layer" \| "check-shield" \| "check-square" \| "check-square-f" \| "chevron-down" \| "chevron-down-left" \| "chevron-down-right" \| "chevron-end" \| "chevron-left" \| "chevron-right" \| "chevron-start" \| "chevron-up" \| "chevron-up-left" \| "chevron-up-right" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chord-diagram" \| "circle-f" \| "circle-area" \| "circle-disallowed" \| "circle-inset-large" \| "circle-inset-medium" \| "circle-inset-small" \| "circle-pause" \| "circle-pause-f" \| "circle-stop" \| "circle-stop-f" \| "classify-objects" \| "classify-pixels" \| "clear-selection" \| "clipboard-brackets" \| "clock-down" \| "clock-forward" \| "clock-up" \| "cloud-data" \| "cloud-server" \| "code-branch" \| "code-branch-edit" \| "collaboration-distributed" \| "collaboration-user" \| "color-coded-map" \| "color-correction" \| "column-settings" \| "community-link-chart-layout" \| "compass-needle" \| "compass-north-circle" \| "conditional-rules" \| "conditional-rules-path" \| "conference-room" \| "configure-editing" \| "configure-grid-unit" \| "configure-popup" \| "content-full" \| "content-inline" \| "content-large" \| "content-medium" \| "content-minimal" \| "content-none" \| "content-side-by-side" \| "content-small" \| "contingent-values" \| "coordinate-system" \| "copy-to-clipboard" \| "credit-card" \| "cursor-click" \| "cursor-lock" \| "cursor-marquee" \| "cursor-minus" \| "cursor-plus" \| "cursor-selection" \| "custom-print" \| "cut-and-fill-volume-calculation" \| "data-card" \| "data-check" \| "data-clock-chart" \| "data-cloud" \| "data-folder" \| "data-magnifying-glass" \| "data-raster" \| "debug-script" \| "decrease-link-chart-symbol-size" \| "deep-learning" \| "deep-learning-project" \| "derived-value" \| "developer-credentials" \| "diamond-inset-large" \| "diamond-inset-medium" \| "diamond-inset-small" \| "dimensions-unit" \| "dimensions-wall" \| "display-selection-lock" \| "display-selection-unlock" \| "dissolve-features" \| "distance-type" \| "distribute-height-evenly" \| "distribute-width-evenly" \| "dock-bottom" \| "dock-left" \| "dock-right" \| "double-float" \| "download-to" \| "drive-time" \| "drive-time-largest" \| "drive-time-smallest" \| "drive-time-threshold" \| "drive-time-x-bar" \| "driving-distance" \| "driving-time" \| "drone-fixed-wing" \| "drone-flying-wing" \| "drone-quadcopter" \| "drone-quadcopter-top" \| "edit-attributes" \| "edit-geometry" \| "elevator-down" \| "elevator-up" \| "ellipsis-circle" \| "email-address" \| "embedded-card" \| "embedded-content" \| "embedded-live-content" \| "employee-id" \| "enable-disable-feature-selection" \| "end-f" \| "escalator-down" \| "escalator-up" \| "exclamation-mark-circle" \| "exclamation-mark-circle-f" \| "exclamation-mark-triangle" \| "exclamation-mark-triangle-f" \| "exclamation-point" \| "exclamation-point-f" \| "exit-highway-left" \| "exit-highway-right" \| "expression-defined-color" \| "extend-trim" \| "extent-filter" \| "face-id" \| "feature-details" \| "feature-layer" \| "file-archive" \| "file-cad" \| "file-code" \| "file-csv" \| "file-data" \| "file-ecd" \| "file-excel" \| "file-gpx" \| "file-image" \| "file-kml" \| "file-magnifying-glass" \| "file-pdf" \| "file-pdf-plus" \| "file-pitemx" \| "file-ppt" \| "file-report" \| "file-report-generic" \| "file-shape" \| "file-sound" \| "file-sqlite" \| "file-text" \| "file-user" \| "file-video" \| "file-word" \| "file-xml" \| "file-zip" \| "files-csv-collection" \| "filter-expand" \| "find-path" \| "flip-vertical" \| "floor-plan" \| "folder-f" \| "folder-archive" \| "folder-magnifying-glass" \| "folder-move" \| "folder-new" \| "folder-open" \| "folder-open-f" \| "folder-plus" \| "folder-star" \| "folder-video" \| "follow-pause" \| "follow-play" \| "force-directed-link-chart-layout" \| "fork-left" \| "fork-middle" \| "fork-right" \| "form-dropdown" \| "form-elements" \| "form-field" \| "form-field-multiline" \| "form-field-off" \| "forward-f" \| "four-by-one-grid" \| "four-by-three-grid" \| "four-by-two-grid" \| "frame-export" \| "freehand-area" \| "full-screen" \| "full-screen-exit" \| "function-editor" \| "gauge-summary" \| "geoanalytics-server" \| "geoevent-server" \| "geographic-link-chart-layout" \| "geonet-question" \| "gis-server" \| "gps-off" \| "gps-on" \| "gps-on-f" \| "graph-axis" \| "graph-bar100-stacked" \| "graph-bar" \| "graph-bar-side-by-side" \| "graph-bar-stacked" \| "graph-box-mean-lines" \| "graph-box-side-by-side" \| "graph-guides" \| "graph-histogram" \| "graph-line-series" \| "graph-moving-average" \| "graph-pie-slice" \| "graph-scatter-plot" \| "graph-time-series" \| "grid-diamond" \| "grid-hexagon" \| "grid-triangle" \| "grid-unit" \| "ground-control-point" \| "group-form" \| "group-form-plus" \| "group-items" \| "group-layers" \| "group-layout-elements" \| "group-x" \| "h3-hexagon" \| "handle-vertical" \| "heading-layout" \| "heading-rtl" \| "heart-f" \| "heat-chart" \| "heavy-rain" \| "heavy-snow" \| "hexagon2-inset-large" \| "hexagon2-inset-medium" \| "hexagon2-inset-small" \| "hexagon-inset-large" \| "hexagon-inset-medium" \| "hexagon-inset-small" \| "hide-derived-value" \| "hide-empty" \| "hide-layers" \| "hide-parameters" \| "hierarchical-link-chart-layout" \| "highlighter-tip" \| "highway-change" \| "highway-change-right" \| "hillshade-effect" \| "horizontal-distribute" \| "hourglass-active" \| "hourglass-expired" \| "image-chips" \| "image-collection-explorer" \| "image-display-order" \| "image-layer" \| "image-magnifying-glass" \| "image-mensuration" \| "image-pin" \| "image-plus" \| "image-segmentation" \| "image-server" \| "image-space" \| "image-unit" \| "increase-link-chart-symbol-size" \| "information-f" \| "information-letter" \| "initiative-template" \| "joined-view-layer" \| "knowledge-graph" \| "knowledge-graph-dashboard" \| "knowledge-graph-data-model" \| "knowledge-graph-data-store" \| "knowledge-graph-export" \| "knowledge-graph-import" \| "knowledge-graph-new" \| "knowledge-graph-relationship" \| "knowledge-layer" \| "knowledge-server" \| "knowledge-studio" \| "label-off" \| "language-translate" \| "lasso-select" \| "layer-basemap" \| "layer-broken" \| "layer-filter" \| "layer-graphics" \| "layer-hide" \| "layer-kml" \| "layer-line" \| "layer-line-service" \| "layer-map" \| "layer-map-service" \| "layer-points" \| "layer-polygon" \| "layer-polygon-service" \| "layer-service" \| "layer-settings" \| "layer-zoom-to" \| "layers-editable" \| "layers-f" \| "layers-reference" \| "layout-compact" \| "layout-horizontal" \| "layout-spacious" \| "layout-vertical" \| "left-align" \| "left-edge" \| "left-left" \| "left-right" \| "legend-left" \| "legend-plus" \| "legend-right" \| "light-rain" \| "light-snow" \| "line-check" \| "line-dashed" \| "line-dotted" \| "line-of-sight" \| "line-solid" \| "line-straight" \| "link-chart" \| "link-chart-expand" \| "link-chart-from-template" \| "list-bullet" \| "list-button" \| "list-check" \| "list-check-all" \| "list-merge" \| "list-number" \| "list-number-rtl" \| "list-radio" \| "list-rectangle" \| "list-show-all" \| "livestream-video-layer" \| "location-sharing" \| "location-sharing-f" \| "location-sharing-off" \| "lock-f" \| "ltr-elements-align" \| "ltr-paragraph-align" \| "magnifying-glass" \| "magnifying-glass-minus" \| "magnifying-glass-plus" \| "map-contents" \| "map-from-template" \| "map-level-settings" \| "map-pin" \| "map-space" \| "mask-inside" \| "mask-outside" \| "maximum-graph" \| "maximum-territory-distance" \| "measure-area" \| "measure-building-height-shadow" \| "measure-building-height-top-base" \| "measure-building-height-top-shadow" \| "measure-line" \| "media-layer" \| "mega-phone" \| "members-brackets" \| "merge-details" \| "merge-on-highway" \| "merge-on-highway-right" \| "merge-units" \| "microphone-plus" \| "min-distance-between-centers" \| "minimum-graph" \| "minus-circle" \| "minus-circle-f" \| "minus-square" \| "minus-square-f" \| "miscellaneous-collection" \| "mission-server" \| "mobile-off" \| "mobile-vibrate" \| "model-edit" \| "modify-associations" \| "move-from-basemap" \| "move-to-basemap" \| "move-up" \| "move-up-all" \| "multidimensional-raster" \| "multiple-variables" \| "music-note" \| "new-link-chart" \| "new-model" \| "new-raster-function-template" \| "new-training" \| "no-attachment" \| "no-image" \| "no-map" \| "nodes-link" \| "nodes-merge" \| "nodes-unlink" \| "nodes-unmerge" \| "notebook-server" \| "notebook-snapshot" \| "notepad-add" \| "notepad-edit" \| "number-circle1" \| "number-circle1-f" \| "number-circle2" \| "number-circle2-f" \| "number-circle3" \| "number-circle3-f" \| "number-circle4" \| "number-circle4-f" \| "number-circle5" \| "number-circle5-f" \| "number-circle6" \| "number-circle6-f" \| "number-circle7" \| "number-circle7-f" \| "number-circle8" \| "number-circle8-f" \| "number-circle9" \| "number-circle9-f" \| "number-of-territories" \| "object-detection" \| "objectstore-data-store" \| "on-the-ground-elevation" \| "open-book" \| "oriented-imagery-layer" \| "oriented-imagery-widget" \| "overlap-features" \| "overwrite-features" \| "overwrite-project" \| "paint-bucket" \| "palette-check" \| "pan-drag" \| "parcel-layer" \| "partly-cloudy" \| "paste-with-attribute" \| "paste-without-attribute" \| "pause-f" \| "pen-mark" \| "pen-mark-plus" \| "pen-tip" \| "pencil-mark" \| "pencil-mark-plus" \| "pencil-square" \| "pencil-tip" \| "personal-homepage" \| "pie-chart" \| "pin-plus" \| "pin-tear" \| "pin-tear-f" \| "play-f" \| "plus-circle" \| "plus-square" \| "point-line" \| "polygon-area" \| "polygon-line-check" \| "polygon-select" \| "polygon-vertices" \| "pop-up1" \| "pop-up-blank" \| "pop-up-blank-f" \| "premium-content-user-credit" \| "presentation-x" \| "print-preview" \| "processing-templates" \| "profile-variables" \| "project-mission" \| "project-template" \| "puzzle-piece" \| "qr-code" \| "qt-code" \| "question-f" \| "question-mark" \| "radial-tree-link-chart-layout" \| "rain-snow" \| "rain-thunder" \| "ramp-left" \| "ramp-right" \| "raster-analysis" \| "raster-function" \| "raster-function-template" \| "raster-function-template-play" \| "read-only-non-editable" \| "rectangle-area" \| "rectangle-plus" \| "recycle-bin" \| "refresh-f" \| "relational-data-store" \| "relative-direction" \| "relative-to-ground-elevation" \| "relative-to-scene-elevation" \| "remove-from-list" \| "remove-linkchart" \| "reorder-cards" \| "reorder-grid" \| "reorder-stack" \| "replace-image" \| "reshape-add-geometry" \| "reshape-subtract-geometry" \| "reshape-tool" \| "resize-area" \| "reverse-f" \| "ribbon-rosette" \| "right-align" \| "right-angle" \| "right-edge" \| "right-left" \| "right-right" \| "rings-largest" \| "rings-smallest" \| "rings-threshold" \| "rings-x-bar" \| "road-sign" \| "rotate-device" \| "round-about" \| "round-about-right" \| "rounded-rectangle" \| "route-from" \| "route-to" \| "rss-f" \| "rtl-elements-align" \| "rtl-paragraph-align" \| "running-outline" \| "rural-driving-distance" \| "rural-driving-time" \| "satellite0-f" \| "satellite1-f" \| "satellite2-f" \| "satellite3-f" \| "save-as" \| "scan-area" \| "scan-barcode" \| "scan-corridor" \| "scan-crosshatch" \| "scan-perimeter" \| "scan-vertical" \| "screenshot-mode" \| "select-by-attributes" \| "select-category" \| "select-column" \| "select-range" \| "select-visible" \| "selected-items-filter" \| "selection-filter" \| "selection-manager" \| "selection-set" \| "selection-x" \| "send-backwards" \| "send-to-back" \| "serial-port" \| "server-lock" \| "share-ios" \| "sharp-left" \| "sharp-right" \| "shield-coin" \| "shopping-cart" \| "show-all-parameters" \| "show-column" \| "show-derived-value" \| "show-multiple-layers-at-a-time" \| "show-one-layer-at-a-time" \| "show-required-parameters" \| "sign-in" \| "sign-out" \| "simple-link-chart-layout" \| "sky-plot" \| "sliders-horizontal" \| "smart-camera" \| "smart-form" \| "smart-tree-link-chart-layout" \| "snap-to-grid" \| "snap-to-pixel" \| "snap-to-point" \| "snow-thunder" \| "sort-ascending" \| "sort-ascending-arrow" \| "sort-descending" \| "sort-descending-arrow" \| "sound-low" \| "sound-off" \| "sound-unavailable" \| "spatiotemporal-data-store" \| "speech-bubble" \| "speech-bubble-check" \| "speech-bubble-exclamation" \| "speech-bubble-like" \| "speech-bubble-plus" \| "speech-bubble-social" \| "speech-bubbles" \| "split-features" \| "split-geometry" \| "split-units" \| "square-f" \| "square-area" \| "square-inset-large" \| "square-inset-medium" \| "square-inset-small" \| "stairs-down" \| "stairs-up" \| "star-f" \| "star-circle" \| "stop-square" \| "stop-square-f" \| "stored-as-new-query" \| "stored-query" \| "sub-fields" \| "subheading-rtl" \| "suitability-analysis-output" \| "summarize-center-and-dispersion1" \| "summarize-center-and-dispersion2" \| "summarize-center-and-dispersion3" \| "system-management" \| "tabbed-view" \| "take-pedestrian-ramp" \| "territory-buffer-distance" \| "test-data" \| "text-bold" \| "text-button" \| "text-dashed-underline" \| "text-large" \| "text-medium" \| "text-paragraph-large" \| "text-small" \| "text-solid-underline" \| "three-by-one-grid" \| "three-by-three-grid" \| "three-by-two-grid" \| "thumbs-down" \| "thumbs-up" \| "tile-cache-data-store" \| "tile-layer" \| "tiled-imagery-layer" \| "time-filter" \| "time-zone" \| "toggle-off" \| "toggle-on" \| "tour-pin-tear" \| "transverse-hexagon" \| "trapezoid-area" \| "trucking-distance" \| "trucking-time" \| "u-turn" \| "u-turn-right" \| "ungroup-items" \| "ungroup-layers" \| "ungroup-layout-elements" \| "update-features" \| "update-project" \| "upload-to" \| "urban-model" \| "usb-security-key" \| "user-calendar" \| "user-down" \| "user-key" \| "user-minus" \| "user-plus" \| "user-to-device" \| "user-up" \| "user-x" \| "utility-network" \| "utility-network-trace" \| "validate-utility-network-topology" \| "vertex-check" \| "vertex-edit" \| "vertex-gps" \| "vertex-move" \| "vertex-plus" \| "vertex-x" \| "vertical-distribute" \| "video-layer" \| "video-plus" \| "video-server" \| "video-single-server" \| "video-web" \| "view-associations" \| "view-hide" \| "view-mixed" \| "view-visible" \| "walk-through-door" \| "walking-distance" \| "walking-time" \| "widgets-group" \| "widgets-source" \| "widgets-tabs" \| "workflow-diagram" \| "workflow-manager-server" \| "x-axis-guide" \| "x-bar" \| "x-circle" \| "x-circle-f" \| "x-octagon" \| "x-octagon-f" \| "y-axis-guide" \| "zoom-in-fixed" \| "zoom-out-fixed" \| "zoom-to-object"` | `undefined` | -| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | -| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `BlockMessages` | `undefined` | -| `open` | `open` | When `true`, expands the component and its contents. | `boolean` | `false` | -| `overlayPositioning` | `overlay-positioning` | Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. | `"absolute" \| "fixed"` | `"absolute"` | -| `status` | `status` | **[DEPRECATED]** Use `icon-start` instead.

Displays a status-related indicator icon. | `"idle" \| "invalid" \| "valid"` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ---------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | +| `collapsible` | `collapsible` | When `true`, the component is collapsible. | `boolean` | `false` | +| `description` | `description` | A description for the component, which displays below the heading. | `string` | `undefined` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `dragHandle` | `drag-handle` | When `true`, displays a drag handle in the header. | `boolean` | `false` | +| `heading` *(required)* | `heading` | The component header text. | `string` | `undefined` | +| `headingLevel` | `heading-level` | Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | +| `iconEnd` | `icon-end` | Specifies an icon to display at the end of the component. | `string` | `undefined` | +| `iconFlipRtl` | `icon-flip-rtl` | Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). | `"both" \| "end" \| "start"` | `undefined` | +| `iconStart` | `icon-start` | Specifies an icon to display at the start of the component. | `string` | `undefined` | +| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `BlockMessages` | `undefined` | +| `open` | `open` | When `true`, expands the component and its contents. | `boolean` | `false` | +| `overlayPositioning` | `overlay-positioning` | Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. | `"absolute" \| "fixed"` | `"absolute"` | +| `status` | `status` | **[DEPRECATED]** Use `icon-start` instead.

Displays a status-related indicator icon. | `"idle" \| "invalid" \| "valid"` | `undefined` | ## Events diff --git a/packages/calcite-components/src/components/block/resources.ts b/packages/calcite-components/src/components/block/resources.ts index aced6eb14ae..77610777c5b 100644 --- a/packages/calcite-components/src/components/block/resources.ts +++ b/packages/calcite-components/src/components/block/resources.ts @@ -14,6 +14,7 @@ export const CSS = { description: "description", header: "header", headerContainer: "header-container", + headerHasText: "header--has-text", heading: "heading", icon: "icon", iconStart: "icon--start", diff --git a/packages/calcite-components/src/components/button/button.e2e.ts b/packages/calcite-components/src/components/button/button.e2e.ts index 04a4abf7cef..7ac027ca14c 100644 --- a/packages/calcite-components/src/components/button/button.e2e.ts +++ b/packages/calcite-components/src/components/button/button.e2e.ts @@ -1,5 +1,5 @@ import { E2EElement, newE2EPage } from "@stencil/core/testing"; -import { accessible, disabled, HYDRATED_ATTR, labelable, defaults, hidden, t9n } from "../../tests/commonTests"; +import { accessible, defaults, disabled, hidden, HYDRATED_ATTR, labelable, t9n } from "../../tests/commonTests"; import { GlobalTestProps } from "../../tests/utils"; import { html } from "../../../support/formatting"; import { CSS } from "./resources"; @@ -587,63 +587,18 @@ describe("calcite-button", () => { }); }); - describe("when loading changes", () => { - it("should render loader with loading-in class when new value is true", async () => { - const page = await newE2EPage(); - await page.setContent(` - - - Go! - `); - const button1 = await page.find("calcite-button[id='one-icon']"); - const button2 = await page.find("calcite-button[id='two-icons']"); - const button3 = await page.find("calcite-button[id='icons-and-text']"); - await button1.setProperty("loading", true); - await button2.setProperty("loading", true); - await button3.setProperty("loading", true); - await page.waitForChanges(); - const loader1 = await page.find(`calcite-button[id='one-icon'] >>> .${CSS.buttonLoader} calcite-loader`); - const loader2 = await page.find(`calcite-button[id='two-icons'] >>> .${CSS.buttonLoader} calcite-loader`); - const loader3 = await page.find(`calcite-button[id='icons-and-text'] >>> .${CSS.buttonLoader} calcite-loader`); - expect(loader1).toHaveClass(CSS.loadingIn); - expect(loader2).toHaveClass(CSS.loadingIn); - expect(loader3).toHaveClass(CSS.loadingIn); - }); + it("should remove calcite-loader from dom when `loading` is false", async () => { + const page = await newE2EPage(); + await page.setContent(``); + const element = await page.find("calcite-button"); + const loaderSelector = `calcite-button >>> .${CSS.buttonLoader}`; - it("should render loader with loading-out class when new value is false", async () => { - const page = await newE2EPage(); - await page.setContent(` - - - Go! - `); - await page.waitForChanges(); - const button1 = await page.find("calcite-button[id='one-icon']"); - const button2 = await page.find("calcite-button[id='two-icons']"); - const button3 = await page.find("calcite-button[id='icons-and-text']"); - const loader1 = await page.find(`calcite-button[id='one-icon'] >>> .${CSS.buttonLoader} calcite-loader`); - const loader2 = await page.find(`calcite-button[id='two-icons'] >>> .${CSS.buttonLoader} calcite-loader`); - const loader3 = await page.find(`calcite-button[id='icons-and-text'] >>> .${CSS.buttonLoader} calcite-loader`); - await button1.setProperty("loading", false); - await button2.setProperty("loading", false); - await button3.setProperty("loading", false); - await page.waitForChanges(); - expect(loader1).toHaveClass(CSS.loadingOut); - expect(loader2).toHaveClass(CSS.loadingOut); - expect(loader3).toHaveClass(CSS.loadingOut); - }); + expect(await page.find(loaderSelector)).toBeTruthy(); - it("should remove calcite-loader from dom when new value is false", async () => { - const page = await newE2EPage(); - await page.setContent(``); - const animationDurationInMs = 300; - const element = await page.find("calcite-button"); - await element.setProperty("loading", false); - await page.waitForChanges(); - await page.waitForTimeout(animationDurationInMs); - const loader = await page.find(`calcite-button >>> .${CSS.buttonLoader} calcite-loader`); - expect(loader).toBeNull(); - }); + await element.setProperty("loading", false); + await page.waitForChanges(); + + expect(await page.find(loaderSelector)).toBeNull(); }); describe("form integration", () => { diff --git a/packages/calcite-components/src/components/button/button.scss b/packages/calcite-components/src/components/button/button.scss index 0aa653194a4..5a01a0740b2 100644 --- a/packages/calcite-components/src/components/button/button.scss +++ b/packages/calcite-components/src/components/button/button.scss @@ -191,18 +191,6 @@ @apply flex; calcite-loader { @apply m-0; - transition: - inline-size var(--calcite-internal-animation-timing-slow) ease-in-out, - opacity var(--calcite-internal-animation-timing-slow) ease-in-out, - transform var(--calcite-internal-animation-timing-slow) ease-in-out; - &.loading-in { - animation-name: loader-in; - animation-duration: var(--calcite-internal-animation-timing-slow); - } - &.loading-out { - animation-name: loader-out; - animation-duration: var(--calcite-internal-animation-timing-slow); - } } } diff --git a/packages/calcite-components/src/components/button/button.tsx b/packages/calcite-components/src/components/button/button.tsx index d655278282a..474aa659add 100644 --- a/packages/calcite-components/src/components/button/button.tsx +++ b/packages/calcite-components/src/components/button/button.tsx @@ -36,7 +36,7 @@ import { } from "../../utils/t9n"; import { Appearance, FlipContext, Kind, Scale, Width } from "../interfaces"; import { toAriaBoolean } from "../../utils/dom"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { isBrowser } from "../../utils/browser"; import { ButtonMessages } from "./assets/button/t9n"; import { ButtonAlignment } from "./interfaces"; @@ -118,13 +118,13 @@ export class Button @Prop({ reflect: true }) href: string; /** Specifies an icon to display at the end of the component. */ - @Prop({ reflect: true }) iconEnd: IconName; + @Prop({ reflect: true }) iconEnd: IconNameOrString; /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl: FlipContext; /** Specifies an icon to display at the start of the component. */ - @Prop({ reflect: true }) iconStart: IconName; + @Prop({ reflect: true }) iconStart: IconNameOrString; /** * When `true`, a busy indicator is displayed and interaction is disabled. @@ -181,18 +181,6 @@ export class Button // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module @Prop({ mutable: true }) messageOverrides: Partial; - @Watch("loading") - loadingChanged(newValue: boolean, oldValue: boolean): void { - if (!!newValue && !oldValue) { - this.hasLoader = true; - } - if (!newValue && !!oldValue) { - window.setTimeout(() => { - this.hasLoader = false; - }, 300); - } - } - @Watch("messageOverrides") onMessagesChange(): void { /** referred in t9n util */ @@ -208,7 +196,6 @@ export class Button connectInteractive(this); connectLocalized(this); connectMessages(this); - this.hasLoader = this.loading; this.setupTextContentObserver(); connectLabel(this); this.formEl = findAssociatedForm(this); @@ -244,7 +231,7 @@ export class Button render(): VNode { const childElType = this.href ? "a" : "button"; const Tag = childElType; - const loaderNode = this.hasLoader ? ( + const loaderNode = this.loading ? (
. | `boolean \| string` | `false` | -| `form` | `form` | The `id` of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | `string` | `undefined` | -| `href` | `href` | Specifies the URL of the linked resource, which can be set as an absolute or relative path. | `string` | `undefined` | -| `iconEnd` | `icon-end` | Specifies an icon to display at the end of the component. | `CamelCaseIcons \| "date-time" \| "i12-x" \| "i14-x" \| "i18-x" \| "i1-x" \| "i2-d-explore" \| "i2-x" \| "i360-view" \| "i3-d-glasses" \| "i4-x" \| "i8-x" \| "a-z" \| "a-z-down" \| "a-z-up" \| "a3-landscape" \| "a3-portrait" \| "a4-landscape" \| "a4-portrait" \| "absolute-direction" \| "absolute-elevation" \| "access-string-results" \| "activity-monitor" \| "actual-size" \| "add-and-update-features" \| "add-constant" \| "add-features" \| "add-in" \| "add-in-edit" \| "add-in-new" \| "add-layer" \| "add-layer-service" \| "add-raster-variable" \| "add-rasters" \| "add-reaction" \| "add-text" \| "add-to-model" \| "address-book" \| "alert-off-circle-f" \| "all-servers" \| "analysis-overlay" \| "annotate-tool" \| "ansi-a-landscape" \| "ansi-a-portrait" \| "ansi-b-landscape" \| "ansi-b-portrait" \| "antenna-height" \| "app-gear" \| "app-launcher" \| "app-run" \| "app-update" \| "apply-changes" \| "apply-selection-to-existing-view" \| "arcgis-data-store" \| "arcgis-online" \| "arrow-bold-down" \| "arrow-bold-left" \| "arrow-bold-right" \| "arrow-bold-up" \| "arrow-circle-down" \| "arrow-circle-down-f" \| "arrow-double-diagonal1" \| "arrow-double-diagonal2" \| "arrow-double-horizontal" \| "arrow-double-vertical" \| "arrow-down" \| "arrow-down-left" \| "arrow-down-right" \| "arrow-left" \| "arrow-right" \| "arrow-right-left" \| "arrow-up" \| "arrow-up-down" \| "arrow-up-left" \| "arrow-up-right" \| "asterisk-large" \| "asterisk-small" \| "attachment-plus" \| "auto-layout" \| "battery-charging" \| "bear-left" \| "bear-right" \| "beginning-f" \| "bell-f" \| "bell-off" \| "bookmark-f" \| "border-radius-fully-rounded" \| "border-radius-rounded" \| "border-radius-sharp" \| "box-chart" \| "box-chart-series" \| "brackets-curly" \| "break-recurrence" \| "bring-forward" \| "bring-to-front" \| "browser-map" \| "brush-mark" \| "brush-mark-plus" \| "brush-tip" \| "bullet-point" \| "bullet-point-large" \| "camera-flash-off" \| "camera-flash-on" \| "camera-plus" \| "camera-switch-front-back" \| "camera-unlock" \| "caret-double-horizontal" \| "caret-double-vertical" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-square-down" \| "caret-square-left" \| "caret-square-right" \| "caret-square-up" \| "caret-up" \| "catalog-dataset" \| "center-align" \| "center-horizontal" \| "center-vertical" \| "change-detection" \| "change-font-size" \| "chart-gear" \| "chart-magnifying-glass" \| "check-circle" \| "check-circle-f" \| "check-extent" \| "check-layer" \| "check-shield" \| "check-square" \| "check-square-f" \| "chevron-down" \| "chevron-down-left" \| "chevron-down-right" \| "chevron-end" \| "chevron-left" \| "chevron-right" \| "chevron-start" \| "chevron-up" \| "chevron-up-left" \| "chevron-up-right" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chord-diagram" \| "circle-f" \| "circle-area" \| "circle-disallowed" \| "circle-inset-large" \| "circle-inset-medium" \| "circle-inset-small" \| "circle-pause" \| "circle-pause-f" \| "circle-stop" \| "circle-stop-f" \| "classify-objects" \| "classify-pixels" \| "clear-selection" \| "clipboard-brackets" \| "clock-down" \| "clock-forward" \| "clock-up" \| "cloud-data" \| "cloud-server" \| "code-branch" \| "code-branch-edit" \| "collaboration-distributed" \| "collaboration-user" \| "color-coded-map" \| "color-correction" \| "column-settings" \| "community-link-chart-layout" \| "compass-needle" \| "compass-north-circle" \| "conditional-rules" \| "conditional-rules-path" \| "conference-room" \| "configure-editing" \| "configure-grid-unit" \| "configure-popup" \| "content-full" \| "content-inline" \| "content-large" \| "content-medium" \| "content-minimal" \| "content-none" \| "content-side-by-side" \| "content-small" \| "contingent-values" \| "coordinate-system" \| "copy-to-clipboard" \| "credit-card" \| "cursor-click" \| "cursor-lock" \| "cursor-marquee" \| "cursor-minus" \| "cursor-plus" \| "cursor-selection" \| "custom-print" \| "cut-and-fill-volume-calculation" \| "data-card" \| "data-check" \| "data-clock-chart" \| "data-cloud" \| "data-folder" \| "data-magnifying-glass" \| "data-raster" \| "debug-script" \| "decrease-link-chart-symbol-size" \| "deep-learning" \| "deep-learning-project" \| "derived-value" \| "developer-credentials" \| "diamond-inset-large" \| "diamond-inset-medium" \| "diamond-inset-small" \| "dimensions-unit" \| "dimensions-wall" \| "display-selection-lock" \| "display-selection-unlock" \| "dissolve-features" \| "distance-type" \| "distribute-height-evenly" \| "distribute-width-evenly" \| "dock-bottom" \| "dock-left" \| "dock-right" \| "double-float" \| "download-to" \| "drive-time" \| "drive-time-largest" \| "drive-time-smallest" \| "drive-time-threshold" \| "drive-time-x-bar" \| "driving-distance" \| "driving-time" \| "drone-fixed-wing" \| "drone-flying-wing" \| "drone-quadcopter" \| "drone-quadcopter-top" \| "edit-attributes" \| "edit-geometry" \| "elevator-down" \| "elevator-up" \| "ellipsis-circle" \| "email-address" \| "embedded-card" \| "embedded-content" \| "embedded-live-content" \| "employee-id" \| "enable-disable-feature-selection" \| "end-f" \| "escalator-down" \| "escalator-up" \| "exclamation-mark-circle" \| "exclamation-mark-circle-f" \| "exclamation-mark-triangle" \| "exclamation-mark-triangle-f" \| "exclamation-point" \| "exclamation-point-f" \| "exit-highway-left" \| "exit-highway-right" \| "expression-defined-color" \| "extend-trim" \| "extent-filter" \| "face-id" \| "feature-details" \| "feature-layer" \| "file-archive" \| "file-cad" \| "file-code" \| "file-csv" \| "file-data" \| "file-ecd" \| "file-excel" \| "file-gpx" \| "file-image" \| "file-kml" \| "file-magnifying-glass" \| "file-pdf" \| "file-pdf-plus" \| "file-pitemx" \| "file-ppt" \| "file-report" \| "file-report-generic" \| "file-shape" \| "file-sound" \| "file-sqlite" \| "file-text" \| "file-user" \| "file-video" \| "file-word" \| "file-xml" \| "file-zip" \| "files-csv-collection" \| "filter-expand" \| "find-path" \| "flip-vertical" \| "floor-plan" \| "folder-f" \| "folder-archive" \| "folder-magnifying-glass" \| "folder-move" \| "folder-new" \| "folder-open" \| "folder-open-f" \| "folder-plus" \| "folder-star" \| "folder-video" \| "follow-pause" \| "follow-play" \| "force-directed-link-chart-layout" \| "fork-left" \| "fork-middle" \| "fork-right" \| "form-dropdown" \| "form-elements" \| "form-field" \| "form-field-multiline" \| "form-field-off" \| "forward-f" \| "four-by-one-grid" \| "four-by-three-grid" \| "four-by-two-grid" \| "frame-export" \| "freehand-area" \| "full-screen" \| "full-screen-exit" \| "function-editor" \| "gauge-summary" \| "geoanalytics-server" \| "geoevent-server" \| "geographic-link-chart-layout" \| "geonet-question" \| "gis-server" \| "gps-off" \| "gps-on" \| "gps-on-f" \| "graph-axis" \| "graph-bar100-stacked" \| "graph-bar" \| "graph-bar-side-by-side" \| "graph-bar-stacked" \| "graph-box-mean-lines" \| "graph-box-side-by-side" \| "graph-guides" \| "graph-histogram" \| "graph-line-series" \| "graph-moving-average" \| "graph-pie-slice" \| "graph-scatter-plot" \| "graph-time-series" \| "grid-diamond" \| "grid-hexagon" \| "grid-triangle" \| "grid-unit" \| "ground-control-point" \| "group-form" \| "group-form-plus" \| "group-items" \| "group-layers" \| "group-layout-elements" \| "group-x" \| "h3-hexagon" \| "handle-vertical" \| "heading-layout" \| "heading-rtl" \| "heart-f" \| "heat-chart" \| "heavy-rain" \| "heavy-snow" \| "hexagon2-inset-large" \| "hexagon2-inset-medium" \| "hexagon2-inset-small" \| "hexagon-inset-large" \| "hexagon-inset-medium" \| "hexagon-inset-small" \| "hide-derived-value" \| "hide-empty" \| "hide-layers" \| "hide-parameters" \| "hierarchical-link-chart-layout" \| "highlighter-tip" \| "highway-change" \| "highway-change-right" \| "hillshade-effect" \| "horizontal-distribute" \| "hourglass-active" \| "hourglass-expired" \| "image-chips" \| "image-collection-explorer" \| "image-display-order" \| "image-layer" \| "image-magnifying-glass" \| "image-mensuration" \| "image-pin" \| "image-plus" \| "image-segmentation" \| "image-server" \| "image-space" \| "image-unit" \| "increase-link-chart-symbol-size" \| "information-f" \| "information-letter" \| "initiative-template" \| "joined-view-layer" \| "knowledge-graph" \| "knowledge-graph-dashboard" \| "knowledge-graph-data-model" \| "knowledge-graph-data-store" \| "knowledge-graph-export" \| "knowledge-graph-import" \| "knowledge-graph-new" \| "knowledge-graph-relationship" \| "knowledge-layer" \| "knowledge-server" \| "knowledge-studio" \| "label-off" \| "language-translate" \| "lasso-select" \| "layer-basemap" \| "layer-broken" \| "layer-filter" \| "layer-graphics" \| "layer-hide" \| "layer-kml" \| "layer-line" \| "layer-line-service" \| "layer-map" \| "layer-map-service" \| "layer-points" \| "layer-polygon" \| "layer-polygon-service" \| "layer-service" \| "layer-settings" \| "layer-zoom-to" \| "layers-editable" \| "layers-f" \| "layers-reference" \| "layout-compact" \| "layout-horizontal" \| "layout-spacious" \| "layout-vertical" \| "left-align" \| "left-edge" \| "left-left" \| "left-right" \| "legend-left" \| "legend-plus" \| "legend-right" \| "light-rain" \| "light-snow" \| "line-check" \| "line-dashed" \| "line-dotted" \| "line-of-sight" \| "line-solid" \| "line-straight" \| "link-chart" \| "link-chart-expand" \| "link-chart-from-template" \| "list-bullet" \| "list-button" \| "list-check" \| "list-check-all" \| "list-merge" \| "list-number" \| "list-number-rtl" \| "list-radio" \| "list-rectangle" \| "list-show-all" \| "livestream-video-layer" \| "location-sharing" \| "location-sharing-f" \| "location-sharing-off" \| "lock-f" \| "ltr-elements-align" \| "ltr-paragraph-align" \| "magnifying-glass" \| "magnifying-glass-minus" \| "magnifying-glass-plus" \| "map-contents" \| "map-from-template" \| "map-level-settings" \| "map-pin" \| "map-space" \| "mask-inside" \| "mask-outside" \| "maximum-graph" \| "maximum-territory-distance" \| "measure-area" \| "measure-building-height-shadow" \| "measure-building-height-top-base" \| "measure-building-height-top-shadow" \| "measure-line" \| "media-layer" \| "mega-phone" \| "members-brackets" \| "merge-details" \| "merge-on-highway" \| "merge-on-highway-right" \| "merge-units" \| "microphone-plus" \| "min-distance-between-centers" \| "minimum-graph" \| "minus-circle" \| "minus-circle-f" \| "minus-square" \| "minus-square-f" \| "miscellaneous-collection" \| "mission-server" \| "mobile-off" \| "mobile-vibrate" \| "model-edit" \| "modify-associations" \| "move-from-basemap" \| "move-to-basemap" \| "move-up" \| "move-up-all" \| "multidimensional-raster" \| "multiple-variables" \| "music-note" \| "new-link-chart" \| "new-model" \| "new-raster-function-template" \| "new-training" \| "no-attachment" \| "no-image" \| "no-map" \| "nodes-link" \| "nodes-merge" \| "nodes-unlink" \| "nodes-unmerge" \| "notebook-server" \| "notebook-snapshot" \| "notepad-add" \| "notepad-edit" \| "number-circle1" \| "number-circle1-f" \| "number-circle2" \| "number-circle2-f" \| "number-circle3" \| "number-circle3-f" \| "number-circle4" \| "number-circle4-f" \| "number-circle5" \| "number-circle5-f" \| "number-circle6" \| "number-circle6-f" \| "number-circle7" \| "number-circle7-f" \| "number-circle8" \| "number-circle8-f" \| "number-circle9" \| "number-circle9-f" \| "number-of-territories" \| "object-detection" \| "objectstore-data-store" \| "on-the-ground-elevation" \| "open-book" \| "oriented-imagery-layer" \| "oriented-imagery-widget" \| "overlap-features" \| "overwrite-features" \| "overwrite-project" \| "paint-bucket" \| "palette-check" \| "pan-drag" \| "parcel-layer" \| "partly-cloudy" \| "paste-with-attribute" \| "paste-without-attribute" \| "pause-f" \| "pen-mark" \| "pen-mark-plus" \| "pen-tip" \| "pencil-mark" \| "pencil-mark-plus" \| "pencil-square" \| "pencil-tip" \| "personal-homepage" \| "pie-chart" \| "pin-plus" \| "pin-tear" \| "pin-tear-f" \| "play-f" \| "plus-circle" \| "plus-square" \| "point-line" \| "polygon-area" \| "polygon-line-check" \| "polygon-select" \| "polygon-vertices" \| "pop-up1" \| "pop-up-blank" \| "pop-up-blank-f" \| "premium-content-user-credit" \| "presentation-x" \| "print-preview" \| "processing-templates" \| "profile-variables" \| "project-mission" \| "project-template" \| "puzzle-piece" \| "qr-code" \| "qt-code" \| "question-f" \| "question-mark" \| "radial-tree-link-chart-layout" \| "rain-snow" \| "rain-thunder" \| "ramp-left" \| "ramp-right" \| "raster-analysis" \| "raster-function" \| "raster-function-template" \| "raster-function-template-play" \| "read-only-non-editable" \| "rectangle-area" \| "rectangle-plus" \| "recycle-bin" \| "refresh-f" \| "relational-data-store" \| "relative-direction" \| "relative-to-ground-elevation" \| "relative-to-scene-elevation" \| "remove-from-list" \| "remove-linkchart" \| "reorder-cards" \| "reorder-grid" \| "reorder-stack" \| "replace-image" \| "reshape-add-geometry" \| "reshape-subtract-geometry" \| "reshape-tool" \| "resize-area" \| "reverse-f" \| "ribbon-rosette" \| "right-align" \| "right-angle" \| "right-edge" \| "right-left" \| "right-right" \| "rings-largest" \| "rings-smallest" \| "rings-threshold" \| "rings-x-bar" \| "road-sign" \| "rotate-device" \| "round-about" \| "round-about-right" \| "rounded-rectangle" \| "route-from" \| "route-to" \| "rss-f" \| "rtl-elements-align" \| "rtl-paragraph-align" \| "running-outline" \| "rural-driving-distance" \| "rural-driving-time" \| "satellite0-f" \| "satellite1-f" \| "satellite2-f" \| "satellite3-f" \| "save-as" \| "scan-area" \| "scan-barcode" \| "scan-corridor" \| "scan-crosshatch" \| "scan-perimeter" \| "scan-vertical" \| "screenshot-mode" \| "select-by-attributes" \| "select-category" \| "select-column" \| "select-range" \| "select-visible" \| "selected-items-filter" \| "selection-filter" \| "selection-manager" \| "selection-set" \| "selection-x" \| "send-backwards" \| "send-to-back" \| "serial-port" \| "server-lock" \| "share-ios" \| "sharp-left" \| "sharp-right" \| "shield-coin" \| "shopping-cart" \| "show-all-parameters" \| "show-column" \| "show-derived-value" \| "show-multiple-layers-at-a-time" \| "show-one-layer-at-a-time" \| "show-required-parameters" \| "sign-in" \| "sign-out" \| "simple-link-chart-layout" \| "sky-plot" \| "sliders-horizontal" \| "smart-camera" \| "smart-form" \| "smart-tree-link-chart-layout" \| "snap-to-grid" \| "snap-to-pixel" \| "snap-to-point" \| "snow-thunder" \| "sort-ascending" \| "sort-ascending-arrow" \| "sort-descending" \| "sort-descending-arrow" \| "sound-low" \| "sound-off" \| "sound-unavailable" \| "spatiotemporal-data-store" \| "speech-bubble" \| "speech-bubble-check" \| "speech-bubble-exclamation" \| "speech-bubble-like" \| "speech-bubble-plus" \| "speech-bubble-social" \| "speech-bubbles" \| "split-features" \| "split-geometry" \| "split-units" \| "square-f" \| "square-area" \| "square-inset-large" \| "square-inset-medium" \| "square-inset-small" \| "stairs-down" \| "stairs-up" \| "star-f" \| "star-circle" \| "stop-square" \| "stop-square-f" \| "stored-as-new-query" \| "stored-query" \| "sub-fields" \| "subheading-rtl" \| "suitability-analysis-output" \| "summarize-center-and-dispersion1" \| "summarize-center-and-dispersion2" \| "summarize-center-and-dispersion3" \| "system-management" \| "tabbed-view" \| "take-pedestrian-ramp" \| "territory-buffer-distance" \| "test-data" \| "text-bold" \| "text-button" \| "text-dashed-underline" \| "text-large" \| "text-medium" \| "text-paragraph-large" \| "text-small" \| "text-solid-underline" \| "three-by-one-grid" \| "three-by-three-grid" \| "three-by-two-grid" \| "thumbs-down" \| "thumbs-up" \| "tile-cache-data-store" \| "tile-layer" \| "tiled-imagery-layer" \| "time-filter" \| "time-zone" \| "toggle-off" \| "toggle-on" \| "tour-pin-tear" \| "transverse-hexagon" \| "trapezoid-area" \| "trucking-distance" \| "trucking-time" \| "u-turn" \| "u-turn-right" \| "ungroup-items" \| "ungroup-layers" \| "ungroup-layout-elements" \| "update-features" \| "update-project" \| "upload-to" \| "urban-model" \| "usb-security-key" \| "user-calendar" \| "user-down" \| "user-key" \| "user-minus" \| "user-plus" \| "user-to-device" \| "user-up" \| "user-x" \| "utility-network" \| "utility-network-trace" \| "validate-utility-network-topology" \| "vertex-check" \| "vertex-edit" \| "vertex-gps" \| "vertex-move" \| "vertex-plus" \| "vertex-x" \| "vertical-distribute" \| "video-layer" \| "video-plus" \| "video-server" \| "video-single-server" \| "video-web" \| "view-associations" \| "view-hide" \| "view-mixed" \| "view-visible" \| "walk-through-door" \| "walking-distance" \| "walking-time" \| "widgets-group" \| "widgets-source" \| "widgets-tabs" \| "workflow-diagram" \| "workflow-manager-server" \| "x-axis-guide" \| "x-bar" \| "x-circle" \| "x-circle-f" \| "x-octagon" \| "x-octagon-f" \| "y-axis-guide" \| "zoom-in-fixed" \| "zoom-out-fixed" \| "zoom-to-object"` | `undefined` | -| `iconFlipRtl` | `icon-flip-rtl` | Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). | `"both" \| "end" \| "start"` | `undefined` | -| `iconStart` | `icon-start` | Specifies an icon to display at the start of the component. | `CamelCaseIcons \| "date-time" \| "i12-x" \| "i14-x" \| "i18-x" \| "i1-x" \| "i2-d-explore" \| "i2-x" \| "i360-view" \| "i3-d-glasses" \| "i4-x" \| "i8-x" \| "a-z" \| "a-z-down" \| "a-z-up" \| "a3-landscape" \| "a3-portrait" \| "a4-landscape" \| "a4-portrait" \| "absolute-direction" \| "absolute-elevation" \| "access-string-results" \| "activity-monitor" \| "actual-size" \| "add-and-update-features" \| "add-constant" \| "add-features" \| "add-in" \| "add-in-edit" \| "add-in-new" \| "add-layer" \| "add-layer-service" \| "add-raster-variable" \| "add-rasters" \| "add-reaction" \| "add-text" \| "add-to-model" \| "address-book" \| "alert-off-circle-f" \| "all-servers" \| "analysis-overlay" \| "annotate-tool" \| "ansi-a-landscape" \| "ansi-a-portrait" \| "ansi-b-landscape" \| "ansi-b-portrait" \| "antenna-height" \| "app-gear" \| "app-launcher" \| "app-run" \| "app-update" \| "apply-changes" \| "apply-selection-to-existing-view" \| "arcgis-data-store" \| "arcgis-online" \| "arrow-bold-down" \| "arrow-bold-left" \| "arrow-bold-right" \| "arrow-bold-up" \| "arrow-circle-down" \| "arrow-circle-down-f" \| "arrow-double-diagonal1" \| "arrow-double-diagonal2" \| "arrow-double-horizontal" \| "arrow-double-vertical" \| "arrow-down" \| "arrow-down-left" \| "arrow-down-right" \| "arrow-left" \| "arrow-right" \| "arrow-right-left" \| "arrow-up" \| "arrow-up-down" \| "arrow-up-left" \| "arrow-up-right" \| "asterisk-large" \| "asterisk-small" \| "attachment-plus" \| "auto-layout" \| "battery-charging" \| "bear-left" \| "bear-right" \| "beginning-f" \| "bell-f" \| "bell-off" \| "bookmark-f" \| "border-radius-fully-rounded" \| "border-radius-rounded" \| "border-radius-sharp" \| "box-chart" \| "box-chart-series" \| "brackets-curly" \| "break-recurrence" \| "bring-forward" \| "bring-to-front" \| "browser-map" \| "brush-mark" \| "brush-mark-plus" \| "brush-tip" \| "bullet-point" \| "bullet-point-large" \| "camera-flash-off" \| "camera-flash-on" \| "camera-plus" \| "camera-switch-front-back" \| "camera-unlock" \| "caret-double-horizontal" \| "caret-double-vertical" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-square-down" \| "caret-square-left" \| "caret-square-right" \| "caret-square-up" \| "caret-up" \| "catalog-dataset" \| "center-align" \| "center-horizontal" \| "center-vertical" \| "change-detection" \| "change-font-size" \| "chart-gear" \| "chart-magnifying-glass" \| "check-circle" \| "check-circle-f" \| "check-extent" \| "check-layer" \| "check-shield" \| "check-square" \| "check-square-f" \| "chevron-down" \| "chevron-down-left" \| "chevron-down-right" \| "chevron-end" \| "chevron-left" \| "chevron-right" \| "chevron-start" \| "chevron-up" \| "chevron-up-left" \| "chevron-up-right" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chord-diagram" \| "circle-f" \| "circle-area" \| "circle-disallowed" \| "circle-inset-large" \| "circle-inset-medium" \| "circle-inset-small" \| "circle-pause" \| "circle-pause-f" \| "circle-stop" \| "circle-stop-f" \| "classify-objects" \| "classify-pixels" \| "clear-selection" \| "clipboard-brackets" \| "clock-down" \| "clock-forward" \| "clock-up" \| "cloud-data" \| "cloud-server" \| "code-branch" \| "code-branch-edit" \| "collaboration-distributed" \| "collaboration-user" \| "color-coded-map" \| "color-correction" \| "column-settings" \| "community-link-chart-layout" \| "compass-needle" \| "compass-north-circle" \| "conditional-rules" \| "conditional-rules-path" \| "conference-room" \| "configure-editing" \| "configure-grid-unit" \| "configure-popup" \| "content-full" \| "content-inline" \| "content-large" \| "content-medium" \| "content-minimal" \| "content-none" \| "content-side-by-side" \| "content-small" \| "contingent-values" \| "coordinate-system" \| "copy-to-clipboard" \| "credit-card" \| "cursor-click" \| "cursor-lock" \| "cursor-marquee" \| "cursor-minus" \| "cursor-plus" \| "cursor-selection" \| "custom-print" \| "cut-and-fill-volume-calculation" \| "data-card" \| "data-check" \| "data-clock-chart" \| "data-cloud" \| "data-folder" \| "data-magnifying-glass" \| "data-raster" \| "debug-script" \| "decrease-link-chart-symbol-size" \| "deep-learning" \| "deep-learning-project" \| "derived-value" \| "developer-credentials" \| "diamond-inset-large" \| "diamond-inset-medium" \| "diamond-inset-small" \| "dimensions-unit" \| "dimensions-wall" \| "display-selection-lock" \| "display-selection-unlock" \| "dissolve-features" \| "distance-type" \| "distribute-height-evenly" \| "distribute-width-evenly" \| "dock-bottom" \| "dock-left" \| "dock-right" \| "double-float" \| "download-to" \| "drive-time" \| "drive-time-largest" \| "drive-time-smallest" \| "drive-time-threshold" \| "drive-time-x-bar" \| "driving-distance" \| "driving-time" \| "drone-fixed-wing" \| "drone-flying-wing" \| "drone-quadcopter" \| "drone-quadcopter-top" \| "edit-attributes" \| "edit-geometry" \| "elevator-down" \| "elevator-up" \| "ellipsis-circle" \| "email-address" \| "embedded-card" \| "embedded-content" \| "embedded-live-content" \| "employee-id" \| "enable-disable-feature-selection" \| "end-f" \| "escalator-down" \| "escalator-up" \| "exclamation-mark-circle" \| "exclamation-mark-circle-f" \| "exclamation-mark-triangle" \| "exclamation-mark-triangle-f" \| "exclamation-point" \| "exclamation-point-f" \| "exit-highway-left" \| "exit-highway-right" \| "expression-defined-color" \| "extend-trim" \| "extent-filter" \| "face-id" \| "feature-details" \| "feature-layer" \| "file-archive" \| "file-cad" \| "file-code" \| "file-csv" \| "file-data" \| "file-ecd" \| "file-excel" \| "file-gpx" \| "file-image" \| "file-kml" \| "file-magnifying-glass" \| "file-pdf" \| "file-pdf-plus" \| "file-pitemx" \| "file-ppt" \| "file-report" \| "file-report-generic" \| "file-shape" \| "file-sound" \| "file-sqlite" \| "file-text" \| "file-user" \| "file-video" \| "file-word" \| "file-xml" \| "file-zip" \| "files-csv-collection" \| "filter-expand" \| "find-path" \| "flip-vertical" \| "floor-plan" \| "folder-f" \| "folder-archive" \| "folder-magnifying-glass" \| "folder-move" \| "folder-new" \| "folder-open" \| "folder-open-f" \| "folder-plus" \| "folder-star" \| "folder-video" \| "follow-pause" \| "follow-play" \| "force-directed-link-chart-layout" \| "fork-left" \| "fork-middle" \| "fork-right" \| "form-dropdown" \| "form-elements" \| "form-field" \| "form-field-multiline" \| "form-field-off" \| "forward-f" \| "four-by-one-grid" \| "four-by-three-grid" \| "four-by-two-grid" \| "frame-export" \| "freehand-area" \| "full-screen" \| "full-screen-exit" \| "function-editor" \| "gauge-summary" \| "geoanalytics-server" \| "geoevent-server" \| "geographic-link-chart-layout" \| "geonet-question" \| "gis-server" \| "gps-off" \| "gps-on" \| "gps-on-f" \| "graph-axis" \| "graph-bar100-stacked" \| "graph-bar" \| "graph-bar-side-by-side" \| "graph-bar-stacked" \| "graph-box-mean-lines" \| "graph-box-side-by-side" \| "graph-guides" \| "graph-histogram" \| "graph-line-series" \| "graph-moving-average" \| "graph-pie-slice" \| "graph-scatter-plot" \| "graph-time-series" \| "grid-diamond" \| "grid-hexagon" \| "grid-triangle" \| "grid-unit" \| "ground-control-point" \| "group-form" \| "group-form-plus" \| "group-items" \| "group-layers" \| "group-layout-elements" \| "group-x" \| "h3-hexagon" \| "handle-vertical" \| "heading-layout" \| "heading-rtl" \| "heart-f" \| "heat-chart" \| "heavy-rain" \| "heavy-snow" \| "hexagon2-inset-large" \| "hexagon2-inset-medium" \| "hexagon2-inset-small" \| "hexagon-inset-large" \| "hexagon-inset-medium" \| "hexagon-inset-small" \| "hide-derived-value" \| "hide-empty" \| "hide-layers" \| "hide-parameters" \| "hierarchical-link-chart-layout" \| "highlighter-tip" \| "highway-change" \| "highway-change-right" \| "hillshade-effect" \| "horizontal-distribute" \| "hourglass-active" \| "hourglass-expired" \| "image-chips" \| "image-collection-explorer" \| "image-display-order" \| "image-layer" \| "image-magnifying-glass" \| "image-mensuration" \| "image-pin" \| "image-plus" \| "image-segmentation" \| "image-server" \| "image-space" \| "image-unit" \| "increase-link-chart-symbol-size" \| "information-f" \| "information-letter" \| "initiative-template" \| "joined-view-layer" \| "knowledge-graph" \| "knowledge-graph-dashboard" \| "knowledge-graph-data-model" \| "knowledge-graph-data-store" \| "knowledge-graph-export" \| "knowledge-graph-import" \| "knowledge-graph-new" \| "knowledge-graph-relationship" \| "knowledge-layer" \| "knowledge-server" \| "knowledge-studio" \| "label-off" \| "language-translate" \| "lasso-select" \| "layer-basemap" \| "layer-broken" \| "layer-filter" \| "layer-graphics" \| "layer-hide" \| "layer-kml" \| "layer-line" \| "layer-line-service" \| "layer-map" \| "layer-map-service" \| "layer-points" \| "layer-polygon" \| "layer-polygon-service" \| "layer-service" \| "layer-settings" \| "layer-zoom-to" \| "layers-editable" \| "layers-f" \| "layers-reference" \| "layout-compact" \| "layout-horizontal" \| "layout-spacious" \| "layout-vertical" \| "left-align" \| "left-edge" \| "left-left" \| "left-right" \| "legend-left" \| "legend-plus" \| "legend-right" \| "light-rain" \| "light-snow" \| "line-check" \| "line-dashed" \| "line-dotted" \| "line-of-sight" \| "line-solid" \| "line-straight" \| "link-chart" \| "link-chart-expand" \| "link-chart-from-template" \| "list-bullet" \| "list-button" \| "list-check" \| "list-check-all" \| "list-merge" \| "list-number" \| "list-number-rtl" \| "list-radio" \| "list-rectangle" \| "list-show-all" \| "livestream-video-layer" \| "location-sharing" \| "location-sharing-f" \| "location-sharing-off" \| "lock-f" \| "ltr-elements-align" \| "ltr-paragraph-align" \| "magnifying-glass" \| "magnifying-glass-minus" \| "magnifying-glass-plus" \| "map-contents" \| "map-from-template" \| "map-level-settings" \| "map-pin" \| "map-space" \| "mask-inside" \| "mask-outside" \| "maximum-graph" \| "maximum-territory-distance" \| "measure-area" \| "measure-building-height-shadow" \| "measure-building-height-top-base" \| "measure-building-height-top-shadow" \| "measure-line" \| "media-layer" \| "mega-phone" \| "members-brackets" \| "merge-details" \| "merge-on-highway" \| "merge-on-highway-right" \| "merge-units" \| "microphone-plus" \| "min-distance-between-centers" \| "minimum-graph" \| "minus-circle" \| "minus-circle-f" \| "minus-square" \| "minus-square-f" \| "miscellaneous-collection" \| "mission-server" \| "mobile-off" \| "mobile-vibrate" \| "model-edit" \| "modify-associations" \| "move-from-basemap" \| "move-to-basemap" \| "move-up" \| "move-up-all" \| "multidimensional-raster" \| "multiple-variables" \| "music-note" \| "new-link-chart" \| "new-model" \| "new-raster-function-template" \| "new-training" \| "no-attachment" \| "no-image" \| "no-map" \| "nodes-link" \| "nodes-merge" \| "nodes-unlink" \| "nodes-unmerge" \| "notebook-server" \| "notebook-snapshot" \| "notepad-add" \| "notepad-edit" \| "number-circle1" \| "number-circle1-f" \| "number-circle2" \| "number-circle2-f" \| "number-circle3" \| "number-circle3-f" \| "number-circle4" \| "number-circle4-f" \| "number-circle5" \| "number-circle5-f" \| "number-circle6" \| "number-circle6-f" \| "number-circle7" \| "number-circle7-f" \| "number-circle8" \| "number-circle8-f" \| "number-circle9" \| "number-circle9-f" \| "number-of-territories" \| "object-detection" \| "objectstore-data-store" \| "on-the-ground-elevation" \| "open-book" \| "oriented-imagery-layer" \| "oriented-imagery-widget" \| "overlap-features" \| "overwrite-features" \| "overwrite-project" \| "paint-bucket" \| "palette-check" \| "pan-drag" \| "parcel-layer" \| "partly-cloudy" \| "paste-with-attribute" \| "paste-without-attribute" \| "pause-f" \| "pen-mark" \| "pen-mark-plus" \| "pen-tip" \| "pencil-mark" \| "pencil-mark-plus" \| "pencil-square" \| "pencil-tip" \| "personal-homepage" \| "pie-chart" \| "pin-plus" \| "pin-tear" \| "pin-tear-f" \| "play-f" \| "plus-circle" \| "plus-square" \| "point-line" \| "polygon-area" \| "polygon-line-check" \| "polygon-select" \| "polygon-vertices" \| "pop-up1" \| "pop-up-blank" \| "pop-up-blank-f" \| "premium-content-user-credit" \| "presentation-x" \| "print-preview" \| "processing-templates" \| "profile-variables" \| "project-mission" \| "project-template" \| "puzzle-piece" \| "qr-code" \| "qt-code" \| "question-f" \| "question-mark" \| "radial-tree-link-chart-layout" \| "rain-snow" \| "rain-thunder" \| "ramp-left" \| "ramp-right" \| "raster-analysis" \| "raster-function" \| "raster-function-template" \| "raster-function-template-play" \| "read-only-non-editable" \| "rectangle-area" \| "rectangle-plus" \| "recycle-bin" \| "refresh-f" \| "relational-data-store" \| "relative-direction" \| "relative-to-ground-elevation" \| "relative-to-scene-elevation" \| "remove-from-list" \| "remove-linkchart" \| "reorder-cards" \| "reorder-grid" \| "reorder-stack" \| "replace-image" \| "reshape-add-geometry" \| "reshape-subtract-geometry" \| "reshape-tool" \| "resize-area" \| "reverse-f" \| "ribbon-rosette" \| "right-align" \| "right-angle" \| "right-edge" \| "right-left" \| "right-right" \| "rings-largest" \| "rings-smallest" \| "rings-threshold" \| "rings-x-bar" \| "road-sign" \| "rotate-device" \| "round-about" \| "round-about-right" \| "rounded-rectangle" \| "route-from" \| "route-to" \| "rss-f" \| "rtl-elements-align" \| "rtl-paragraph-align" \| "running-outline" \| "rural-driving-distance" \| "rural-driving-time" \| "satellite0-f" \| "satellite1-f" \| "satellite2-f" \| "satellite3-f" \| "save-as" \| "scan-area" \| "scan-barcode" \| "scan-corridor" \| "scan-crosshatch" \| "scan-perimeter" \| "scan-vertical" \| "screenshot-mode" \| "select-by-attributes" \| "select-category" \| "select-column" \| "select-range" \| "select-visible" \| "selected-items-filter" \| "selection-filter" \| "selection-manager" \| "selection-set" \| "selection-x" \| "send-backwards" \| "send-to-back" \| "serial-port" \| "server-lock" \| "share-ios" \| "sharp-left" \| "sharp-right" \| "shield-coin" \| "shopping-cart" \| "show-all-parameters" \| "show-column" \| "show-derived-value" \| "show-multiple-layers-at-a-time" \| "show-one-layer-at-a-time" \| "show-required-parameters" \| "sign-in" \| "sign-out" \| "simple-link-chart-layout" \| "sky-plot" \| "sliders-horizontal" \| "smart-camera" \| "smart-form" \| "smart-tree-link-chart-layout" \| "snap-to-grid" \| "snap-to-pixel" \| "snap-to-point" \| "snow-thunder" \| "sort-ascending" \| "sort-ascending-arrow" \| "sort-descending" \| "sort-descending-arrow" \| "sound-low" \| "sound-off" \| "sound-unavailable" \| "spatiotemporal-data-store" \| "speech-bubble" \| "speech-bubble-check" \| "speech-bubble-exclamation" \| "speech-bubble-like" \| "speech-bubble-plus" \| "speech-bubble-social" \| "speech-bubbles" \| "split-features" \| "split-geometry" \| "split-units" \| "square-f" \| "square-area" \| "square-inset-large" \| "square-inset-medium" \| "square-inset-small" \| "stairs-down" \| "stairs-up" \| "star-f" \| "star-circle" \| "stop-square" \| "stop-square-f" \| "stored-as-new-query" \| "stored-query" \| "sub-fields" \| "subheading-rtl" \| "suitability-analysis-output" \| "summarize-center-and-dispersion1" \| "summarize-center-and-dispersion2" \| "summarize-center-and-dispersion3" \| "system-management" \| "tabbed-view" \| "take-pedestrian-ramp" \| "territory-buffer-distance" \| "test-data" \| "text-bold" \| "text-button" \| "text-dashed-underline" \| "text-large" \| "text-medium" \| "text-paragraph-large" \| "text-small" \| "text-solid-underline" \| "three-by-one-grid" \| "three-by-three-grid" \| "three-by-two-grid" \| "thumbs-down" \| "thumbs-up" \| "tile-cache-data-store" \| "tile-layer" \| "tiled-imagery-layer" \| "time-filter" \| "time-zone" \| "toggle-off" \| "toggle-on" \| "tour-pin-tear" \| "transverse-hexagon" \| "trapezoid-area" \| "trucking-distance" \| "trucking-time" \| "u-turn" \| "u-turn-right" \| "ungroup-items" \| "ungroup-layers" \| "ungroup-layout-elements" \| "update-features" \| "update-project" \| "upload-to" \| "urban-model" \| "usb-security-key" \| "user-calendar" \| "user-down" \| "user-key" \| "user-minus" \| "user-plus" \| "user-to-device" \| "user-up" \| "user-x" \| "utility-network" \| "utility-network-trace" \| "validate-utility-network-topology" \| "vertex-check" \| "vertex-edit" \| "vertex-gps" \| "vertex-move" \| "vertex-plus" \| "vertex-x" \| "vertical-distribute" \| "video-layer" \| "video-plus" \| "video-server" \| "video-single-server" \| "video-web" \| "view-associations" \| "view-hide" \| "view-mixed" \| "view-visible" \| "walk-through-door" \| "walking-distance" \| "walking-time" \| "widgets-group" \| "widgets-source" \| "widgets-tabs" \| "workflow-diagram" \| "workflow-manager-server" \| "x-axis-guide" \| "x-bar" \| "x-circle" \| "x-circle-f" \| "x-octagon" \| "x-octagon-f" \| "y-axis-guide" \| "zoom-in-fixed" \| "zoom-out-fixed" \| "zoom-to-object"` | `undefined` | -| `kind` | `kind` | Specifies the kind of the component, which will apply to the border and background if applicable. | `"brand" \| "danger" \| "inverse" \| "neutral"` | `"brand"` | -| `label` | `label` | Accessible name for the component. | `string` | `undefined` | -| `loading` | `loading` | When `true`, a busy indicator is displayed and interaction is disabled. | `boolean` | `false` | -| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ButtonMessages` | `undefined` | -| `name` | `name` | Specifies the name of the component on form submission. | `string` | `undefined` | -| `rel` | `rel` | Defines the relationship between the `href` value and the current document. | `string` | `undefined` | -| `round` | `round` | When `true`, adds a round style to the component. | `boolean` | `false` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `splitChild` | `split-child` | Specifies if the component is a child of a `calcite-split-button`. | `"primary" \| "secondary" \| boolean` | `false` | -| `target` | `target` | Specifies where to open the linked document defined in the `href` property. | `string` | `undefined` | -| `type` | `type` | Specifies the default behavior of the component. | `string` | `"button"` | -| `width` | `width` | Specifies the width of the component. | `"auto" \| "full" \| "half"` | `"auto"` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------- | +| `alignment` | `alignment` | Specifies the alignment of the component's elements. | `"center" \| "end" \| "icon-end-space-between" \| "icon-start-space-between" \| "space-between" \| "start"` | `"center"` | +| `appearance` | `appearance` | Specifies the appearance style of the component. | `"outline" \| "outline-fill" \| "solid" \| "transparent"` | `"solid"` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `download` | `download` | Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value: Without a value, the browser will suggest a filename/extension See . | `boolean \| string` | `false` | +| `form` | `form` | The `id` of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | `string` | `undefined` | +| `href` | `href` | Specifies the URL of the linked resource, which can be set as an absolute or relative path. | `string` | `undefined` | +| `iconEnd` | `icon-end` | Specifies an icon to display at the end of the component. | `string` | `undefined` | +| `iconFlipRtl` | `icon-flip-rtl` | Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). | `"both" \| "end" \| "start"` | `undefined` | +| `iconStart` | `icon-start` | Specifies an icon to display at the start of the component. | `string` | `undefined` | +| `kind` | `kind` | Specifies the kind of the component, which will apply to the border and background if applicable. | `"brand" \| "danger" \| "inverse" \| "neutral"` | `"brand"` | +| `label` | `label` | Accessible name for the component. | `string` | `undefined` | +| `loading` | `loading` | When `true`, a busy indicator is displayed and interaction is disabled. | `boolean` | `false` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ButtonMessages` | `undefined` | +| `name` | `name` | Specifies the name of the component on form submission. | `string` | `undefined` | +| `rel` | `rel` | Defines the relationship between the `href` value and the current document. | `string` | `undefined` | +| `round` | `round` | When `true`, adds a round style to the component. | `boolean` | `false` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `splitChild` | `split-child` | Specifies if the component is a child of a `calcite-split-button`. | `"primary" \| "secondary" \| boolean` | `false` | +| `target` | `target` | Specifies where to open the linked document defined in the `href` property. | `string` | `undefined` | +| `type` | `type` | Specifies the default behavior of the component. | `string` | `"button"` | +| `width` | `width` | Specifies the width of the component. | `"auto" \| "full" \| "half"` | `"auto"` | ## Methods diff --git a/packages/calcite-components/src/components/card/card.tsx b/packages/calcite-components/src/components/card/card.tsx index f19ba3a9348..da851ee380f 100644 --- a/packages/calcite-components/src/components/card/card.tsx +++ b/packages/calcite-components/src/components/card/card.tsx @@ -35,7 +35,7 @@ import { updateHostInteraction, } from "../../utils/interactive"; import { isActivationKey } from "../../utils/key"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { CSS, ICONS, SLOTS } from "./resources"; import { CardMessages } from "./assets/card/t9n"; @@ -277,7 +277,7 @@ export class Card } private renderSelectionIcon(): VNode { - const icon: IconName = + const icon: IconNameOrString = this.selectionMode === "multiple" && this.selected ? ICONS.selected : this.selectionMode === "multiple" diff --git a/packages/calcite-components/src/components/chip/chip.tsx b/packages/calcite-components/src/components/chip/chip.tsx index 4a6cdaab93b..c3a2523c9c6 100644 --- a/packages/calcite-components/src/components/chip/chip.tsx +++ b/packages/calcite-components/src/components/chip/chip.tsx @@ -37,7 +37,7 @@ import { import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { isActivationKey } from "../../utils/key"; import { getIconScale } from "../../utils/component"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { isBrowser } from "../../utils/browser"; import { ChipMessages } from "./assets/chip/t9n"; import { CSS, SLOTS, ICONS } from "./resources"; @@ -74,7 +74,7 @@ export class Chip @Prop({ reflect: true }) closable = false; /** Specifies an icon to display. */ - @Prop({ reflect: true }) icon: IconName; + @Prop({ reflect: true }) icon: IconNameOrString; /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl = false; diff --git a/packages/calcite-components/src/components/chip/readme.md b/packages/calcite-components/src/components/chip/readme.md index 2f8f6f57ce1..cf7dd42c029 100644 --- a/packages/calcite-components/src/components/chip/readme.md +++ b/packages/calcite-components/src/components/chip/readme.md @@ -6,20 +6,20 @@ For comprehensive guidance on using and implementing `calcite-chip`, refer to th ## Properties -| Property | Attribute | Description | Type | Default | -| -------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `appearance` | `appearance` | Specifies the appearance style of the component. | `"outline" \| "outline-fill" \| "solid"` | `"solid"` | -| `closable` | `closable` | When `true`, a close button is added to the component. | `boolean` | `false` | -| `closed` | `closed` | When `true`, hides the component. | `boolean` | `false` | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `icon` | `icon` | Specifies an icon to display. | `CamelCaseIcons \| "date-time" \| "i12-x" \| "i14-x" \| "i18-x" \| "i1-x" \| "i2-d-explore" \| "i2-x" \| "i360-view" \| "i3-d-glasses" \| "i4-x" \| "i8-x" \| "a-z" \| "a-z-down" \| "a-z-up" \| "a3-landscape" \| "a3-portrait" \| "a4-landscape" \| "a4-portrait" \| "absolute-direction" \| "absolute-elevation" \| "access-string-results" \| "activity-monitor" \| "actual-size" \| "add-and-update-features" \| "add-constant" \| "add-features" \| "add-in" \| "add-in-edit" \| "add-in-new" \| "add-layer" \| "add-layer-service" \| "add-raster-variable" \| "add-rasters" \| "add-reaction" \| "add-text" \| "add-to-model" \| "address-book" \| "alert-off-circle-f" \| "all-servers" \| "analysis-overlay" \| "annotate-tool" \| "ansi-a-landscape" \| "ansi-a-portrait" \| "ansi-b-landscape" \| "ansi-b-portrait" \| "antenna-height" \| "app-gear" \| "app-launcher" \| "app-run" \| "app-update" \| "apply-changes" \| "apply-selection-to-existing-view" \| "arcgis-data-store" \| "arcgis-online" \| "arrow-bold-down" \| "arrow-bold-left" \| "arrow-bold-right" \| "arrow-bold-up" \| "arrow-circle-down" \| "arrow-circle-down-f" \| "arrow-double-diagonal1" \| "arrow-double-diagonal2" \| "arrow-double-horizontal" \| "arrow-double-vertical" \| "arrow-down" \| "arrow-down-left" \| "arrow-down-right" \| "arrow-left" \| "arrow-right" \| "arrow-right-left" \| "arrow-up" \| "arrow-up-down" \| "arrow-up-left" \| "arrow-up-right" \| "asterisk-large" \| "asterisk-small" \| "attachment-plus" \| "auto-layout" \| "battery-charging" \| "bear-left" \| "bear-right" \| "beginning-f" \| "bell-f" \| "bell-off" \| "bookmark-f" \| "border-radius-fully-rounded" \| "border-radius-rounded" \| "border-radius-sharp" \| "box-chart" \| "box-chart-series" \| "brackets-curly" \| "break-recurrence" \| "bring-forward" \| "bring-to-front" \| "browser-map" \| "brush-mark" \| "brush-mark-plus" \| "brush-tip" \| "bullet-point" \| "bullet-point-large" \| "camera-flash-off" \| "camera-flash-on" \| "camera-plus" \| "camera-switch-front-back" \| "camera-unlock" \| "caret-double-horizontal" \| "caret-double-vertical" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-square-down" \| "caret-square-left" \| "caret-square-right" \| "caret-square-up" \| "caret-up" \| "catalog-dataset" \| "center-align" \| "center-horizontal" \| "center-vertical" \| "change-detection" \| "change-font-size" \| "chart-gear" \| "chart-magnifying-glass" \| "check-circle" \| "check-circle-f" \| "check-extent" \| "check-layer" \| "check-shield" \| "check-square" \| "check-square-f" \| "chevron-down" \| "chevron-down-left" \| "chevron-down-right" \| "chevron-end" \| "chevron-left" \| "chevron-right" \| "chevron-start" \| "chevron-up" \| "chevron-up-left" \| "chevron-up-right" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chord-diagram" \| "circle-f" \| "circle-area" \| "circle-disallowed" \| "circle-inset-large" \| "circle-inset-medium" \| "circle-inset-small" \| "circle-pause" \| "circle-pause-f" \| "circle-stop" \| "circle-stop-f" \| "classify-objects" \| "classify-pixels" \| "clear-selection" \| "clipboard-brackets" \| "clock-down" \| "clock-forward" \| "clock-up" \| "cloud-data" \| "cloud-server" \| "code-branch" \| "code-branch-edit" \| "collaboration-distributed" \| "collaboration-user" \| "color-coded-map" \| "color-correction" \| "column-settings" \| "community-link-chart-layout" \| "compass-needle" \| "compass-north-circle" \| "conditional-rules" \| "conditional-rules-path" \| "conference-room" \| "configure-editing" \| "configure-grid-unit" \| "configure-popup" \| "content-full" \| "content-inline" \| "content-large" \| "content-medium" \| "content-minimal" \| "content-none" \| "content-side-by-side" \| "content-small" \| "contingent-values" \| "coordinate-system" \| "copy-to-clipboard" \| "credit-card" \| "cursor-click" \| "cursor-lock" \| "cursor-marquee" \| "cursor-minus" \| "cursor-plus" \| "cursor-selection" \| "custom-print" \| "cut-and-fill-volume-calculation" \| "data-card" \| "data-check" \| "data-clock-chart" \| "data-cloud" \| "data-folder" \| "data-magnifying-glass" \| "data-raster" \| "debug-script" \| "decrease-link-chart-symbol-size" \| "deep-learning" \| "deep-learning-project" \| "derived-value" \| "developer-credentials" \| "diamond-inset-large" \| "diamond-inset-medium" \| "diamond-inset-small" \| "dimensions-unit" \| "dimensions-wall" \| "display-selection-lock" \| "display-selection-unlock" \| "dissolve-features" \| "distance-type" \| "distribute-height-evenly" \| "distribute-width-evenly" \| "dock-bottom" \| "dock-left" \| "dock-right" \| "double-float" \| "download-to" \| "drive-time" \| "drive-time-largest" \| "drive-time-smallest" \| "drive-time-threshold" \| "drive-time-x-bar" \| "driving-distance" \| "driving-time" \| "drone-fixed-wing" \| "drone-flying-wing" \| "drone-quadcopter" \| "drone-quadcopter-top" \| "edit-attributes" \| "edit-geometry" \| "elevator-down" \| "elevator-up" \| "ellipsis-circle" \| "email-address" \| "embedded-card" \| "embedded-content" \| "embedded-live-content" \| "employee-id" \| "enable-disable-feature-selection" \| "end-f" \| "escalator-down" \| "escalator-up" \| "exclamation-mark-circle" \| "exclamation-mark-circle-f" \| "exclamation-mark-triangle" \| "exclamation-mark-triangle-f" \| "exclamation-point" \| "exclamation-point-f" \| "exit-highway-left" \| "exit-highway-right" \| "expression-defined-color" \| "extend-trim" \| "extent-filter" \| "face-id" \| "feature-details" \| "feature-layer" \| "file-archive" \| "file-cad" \| "file-code" \| "file-csv" \| "file-data" \| "file-ecd" \| "file-excel" \| "file-gpx" \| "file-image" \| "file-kml" \| "file-magnifying-glass" \| "file-pdf" \| "file-pdf-plus" \| "file-pitemx" \| "file-ppt" \| "file-report" \| "file-report-generic" \| "file-shape" \| "file-sound" \| "file-sqlite" \| "file-text" \| "file-user" \| "file-video" \| "file-word" \| "file-xml" \| "file-zip" \| "files-csv-collection" \| "filter-expand" \| "find-path" \| "flip-vertical" \| "floor-plan" \| "folder-f" \| "folder-archive" \| "folder-magnifying-glass" \| "folder-move" \| "folder-new" \| "folder-open" \| "folder-open-f" \| "folder-plus" \| "folder-star" \| "folder-video" \| "follow-pause" \| "follow-play" \| "force-directed-link-chart-layout" \| "fork-left" \| "fork-middle" \| "fork-right" \| "form-dropdown" \| "form-elements" \| "form-field" \| "form-field-multiline" \| "form-field-off" \| "forward-f" \| "four-by-one-grid" \| "four-by-three-grid" \| "four-by-two-grid" \| "frame-export" \| "freehand-area" \| "full-screen" \| "full-screen-exit" \| "function-editor" \| "gauge-summary" \| "geoanalytics-server" \| "geoevent-server" \| "geographic-link-chart-layout" \| "geonet-question" \| "gis-server" \| "gps-off" \| "gps-on" \| "gps-on-f" \| "graph-axis" \| "graph-bar100-stacked" \| "graph-bar" \| "graph-bar-side-by-side" \| "graph-bar-stacked" \| "graph-box-mean-lines" \| "graph-box-side-by-side" \| "graph-guides" \| "graph-histogram" \| "graph-line-series" \| "graph-moving-average" \| "graph-pie-slice" \| "graph-scatter-plot" \| "graph-time-series" \| "grid-diamond" \| "grid-hexagon" \| "grid-triangle" \| "grid-unit" \| "ground-control-point" \| "group-form" \| "group-form-plus" \| "group-items" \| "group-layers" \| "group-layout-elements" \| "group-x" \| "h3-hexagon" \| "handle-vertical" \| "heading-layout" \| "heading-rtl" \| "heart-f" \| "heat-chart" \| "heavy-rain" \| "heavy-snow" \| "hexagon2-inset-large" \| "hexagon2-inset-medium" \| "hexagon2-inset-small" \| "hexagon-inset-large" \| "hexagon-inset-medium" \| "hexagon-inset-small" \| "hide-derived-value" \| "hide-empty" \| "hide-layers" \| "hide-parameters" \| "hierarchical-link-chart-layout" \| "highlighter-tip" \| "highway-change" \| "highway-change-right" \| "hillshade-effect" \| "horizontal-distribute" \| "hourglass-active" \| "hourglass-expired" \| "image-chips" \| "image-collection-explorer" \| "image-display-order" \| "image-layer" \| "image-magnifying-glass" \| "image-mensuration" \| "image-pin" \| "image-plus" \| "image-segmentation" \| "image-server" \| "image-space" \| "image-unit" \| "increase-link-chart-symbol-size" \| "information-f" \| "information-letter" \| "initiative-template" \| "joined-view-layer" \| "knowledge-graph" \| "knowledge-graph-dashboard" \| "knowledge-graph-data-model" \| "knowledge-graph-data-store" \| "knowledge-graph-export" \| "knowledge-graph-import" \| "knowledge-graph-new" \| "knowledge-graph-relationship" \| "knowledge-layer" \| "knowledge-server" \| "knowledge-studio" \| "label-off" \| "language-translate" \| "lasso-select" \| "layer-basemap" \| "layer-broken" \| "layer-filter" \| "layer-graphics" \| "layer-hide" \| "layer-kml" \| "layer-line" \| "layer-line-service" \| "layer-map" \| "layer-map-service" \| "layer-points" \| "layer-polygon" \| "layer-polygon-service" \| "layer-service" \| "layer-settings" \| "layer-zoom-to" \| "layers-editable" \| "layers-f" \| "layers-reference" \| "layout-compact" \| "layout-horizontal" \| "layout-spacious" \| "layout-vertical" \| "left-align" \| "left-edge" \| "left-left" \| "left-right" \| "legend-left" \| "legend-plus" \| "legend-right" \| "light-rain" \| "light-snow" \| "line-check" \| "line-dashed" \| "line-dotted" \| "line-of-sight" \| "line-solid" \| "line-straight" \| "link-chart" \| "link-chart-expand" \| "link-chart-from-template" \| "list-bullet" \| "list-button" \| "list-check" \| "list-check-all" \| "list-merge" \| "list-number" \| "list-number-rtl" \| "list-radio" \| "list-rectangle" \| "list-show-all" \| "livestream-video-layer" \| "location-sharing" \| "location-sharing-f" \| "location-sharing-off" \| "lock-f" \| "ltr-elements-align" \| "ltr-paragraph-align" \| "magnifying-glass" \| "magnifying-glass-minus" \| "magnifying-glass-plus" \| "map-contents" \| "map-from-template" \| "map-level-settings" \| "map-pin" \| "map-space" \| "mask-inside" \| "mask-outside" \| "maximum-graph" \| "maximum-territory-distance" \| "measure-area" \| "measure-building-height-shadow" \| "measure-building-height-top-base" \| "measure-building-height-top-shadow" \| "measure-line" \| "media-layer" \| "mega-phone" \| "members-brackets" \| "merge-details" \| "merge-on-highway" \| "merge-on-highway-right" \| "merge-units" \| "microphone-plus" \| "min-distance-between-centers" \| "minimum-graph" \| "minus-circle" \| "minus-circle-f" \| "minus-square" \| "minus-square-f" \| "miscellaneous-collection" \| "mission-server" \| "mobile-off" \| "mobile-vibrate" \| "model-edit" \| "modify-associations" \| "move-from-basemap" \| "move-to-basemap" \| "move-up" \| "move-up-all" \| "multidimensional-raster" \| "multiple-variables" \| "music-note" \| "new-link-chart" \| "new-model" \| "new-raster-function-template" \| "new-training" \| "no-attachment" \| "no-image" \| "no-map" \| "nodes-link" \| "nodes-merge" \| "nodes-unlink" \| "nodes-unmerge" \| "notebook-server" \| "notebook-snapshot" \| "notepad-add" \| "notepad-edit" \| "number-circle1" \| "number-circle1-f" \| "number-circle2" \| "number-circle2-f" \| "number-circle3" \| "number-circle3-f" \| "number-circle4" \| "number-circle4-f" \| "number-circle5" \| "number-circle5-f" \| "number-circle6" \| "number-circle6-f" \| "number-circle7" \| "number-circle7-f" \| "number-circle8" \| "number-circle8-f" \| "number-circle9" \| "number-circle9-f" \| "number-of-territories" \| "object-detection" \| "objectstore-data-store" \| "on-the-ground-elevation" \| "open-book" \| "oriented-imagery-layer" \| "oriented-imagery-widget" \| "overlap-features" \| "overwrite-features" \| "overwrite-project" \| "paint-bucket" \| "palette-check" \| "pan-drag" \| "parcel-layer" \| "partly-cloudy" \| "paste-with-attribute" \| "paste-without-attribute" \| "pause-f" \| "pen-mark" \| "pen-mark-plus" \| "pen-tip" \| "pencil-mark" \| "pencil-mark-plus" \| "pencil-square" \| "pencil-tip" \| "personal-homepage" \| "pie-chart" \| "pin-plus" \| "pin-tear" \| "pin-tear-f" \| "play-f" \| "plus-circle" \| "plus-square" \| "point-line" \| "polygon-area" \| "polygon-line-check" \| "polygon-select" \| "polygon-vertices" \| "pop-up1" \| "pop-up-blank" \| "pop-up-blank-f" \| "premium-content-user-credit" \| "presentation-x" \| "print-preview" \| "processing-templates" \| "profile-variables" \| "project-mission" \| "project-template" \| "puzzle-piece" \| "qr-code" \| "qt-code" \| "question-f" \| "question-mark" \| "radial-tree-link-chart-layout" \| "rain-snow" \| "rain-thunder" \| "ramp-left" \| "ramp-right" \| "raster-analysis" \| "raster-function" \| "raster-function-template" \| "raster-function-template-play" \| "read-only-non-editable" \| "rectangle-area" \| "rectangle-plus" \| "recycle-bin" \| "refresh-f" \| "relational-data-store" \| "relative-direction" \| "relative-to-ground-elevation" \| "relative-to-scene-elevation" \| "remove-from-list" \| "remove-linkchart" \| "reorder-cards" \| "reorder-grid" \| "reorder-stack" \| "replace-image" \| "reshape-add-geometry" \| "reshape-subtract-geometry" \| "reshape-tool" \| "resize-area" \| "reverse-f" \| "ribbon-rosette" \| "right-align" \| "right-angle" \| "right-edge" \| "right-left" \| "right-right" \| "rings-largest" \| "rings-smallest" \| "rings-threshold" \| "rings-x-bar" \| "road-sign" \| "rotate-device" \| "round-about" \| "round-about-right" \| "rounded-rectangle" \| "route-from" \| "route-to" \| "rss-f" \| "rtl-elements-align" \| "rtl-paragraph-align" \| "running-outline" \| "rural-driving-distance" \| "rural-driving-time" \| "satellite0-f" \| "satellite1-f" \| "satellite2-f" \| "satellite3-f" \| "save-as" \| "scan-area" \| "scan-barcode" \| "scan-corridor" \| "scan-crosshatch" \| "scan-perimeter" \| "scan-vertical" \| "screenshot-mode" \| "select-by-attributes" \| "select-category" \| "select-column" \| "select-range" \| "select-visible" \| "selected-items-filter" \| "selection-filter" \| "selection-manager" \| "selection-set" \| "selection-x" \| "send-backwards" \| "send-to-back" \| "serial-port" \| "server-lock" \| "share-ios" \| "sharp-left" \| "sharp-right" \| "shield-coin" \| "shopping-cart" \| "show-all-parameters" \| "show-column" \| "show-derived-value" \| "show-multiple-layers-at-a-time" \| "show-one-layer-at-a-time" \| "show-required-parameters" \| "sign-in" \| "sign-out" \| "simple-link-chart-layout" \| "sky-plot" \| "sliders-horizontal" \| "smart-camera" \| "smart-form" \| "smart-tree-link-chart-layout" \| "snap-to-grid" \| "snap-to-pixel" \| "snap-to-point" \| "snow-thunder" \| "sort-ascending" \| "sort-ascending-arrow" \| "sort-descending" \| "sort-descending-arrow" \| "sound-low" \| "sound-off" \| "sound-unavailable" \| "spatiotemporal-data-store" \| "speech-bubble" \| "speech-bubble-check" \| "speech-bubble-exclamation" \| "speech-bubble-like" \| "speech-bubble-plus" \| "speech-bubble-social" \| "speech-bubbles" \| "split-features" \| "split-geometry" \| "split-units" \| "square-f" \| "square-area" \| "square-inset-large" \| "square-inset-medium" \| "square-inset-small" \| "stairs-down" \| "stairs-up" \| "star-f" \| "star-circle" \| "stop-square" \| "stop-square-f" \| "stored-as-new-query" \| "stored-query" \| "sub-fields" \| "subheading-rtl" \| "suitability-analysis-output" \| "summarize-center-and-dispersion1" \| "summarize-center-and-dispersion2" \| "summarize-center-and-dispersion3" \| "system-management" \| "tabbed-view" \| "take-pedestrian-ramp" \| "territory-buffer-distance" \| "test-data" \| "text-bold" \| "text-button" \| "text-dashed-underline" \| "text-large" \| "text-medium" \| "text-paragraph-large" \| "text-small" \| "text-solid-underline" \| "three-by-one-grid" \| "three-by-three-grid" \| "three-by-two-grid" \| "thumbs-down" \| "thumbs-up" \| "tile-cache-data-store" \| "tile-layer" \| "tiled-imagery-layer" \| "time-filter" \| "time-zone" \| "toggle-off" \| "toggle-on" \| "tour-pin-tear" \| "transverse-hexagon" \| "trapezoid-area" \| "trucking-distance" \| "trucking-time" \| "u-turn" \| "u-turn-right" \| "ungroup-items" \| "ungroup-layers" \| "ungroup-layout-elements" \| "update-features" \| "update-project" \| "upload-to" \| "urban-model" \| "usb-security-key" \| "user-calendar" \| "user-down" \| "user-key" \| "user-minus" \| "user-plus" \| "user-to-device" \| "user-up" \| "user-x" \| "utility-network" \| "utility-network-trace" \| "validate-utility-network-topology" \| "vertex-check" \| "vertex-edit" \| "vertex-gps" \| "vertex-move" \| "vertex-plus" \| "vertex-x" \| "vertical-distribute" \| "video-layer" \| "video-plus" \| "video-server" \| "video-single-server" \| "video-web" \| "view-associations" \| "view-hide" \| "view-mixed" \| "view-visible" \| "walk-through-door" \| "walking-distance" \| "walking-time" \| "widgets-group" \| "widgets-source" \| "widgets-tabs" \| "workflow-diagram" \| "workflow-manager-server" \| "x-axis-guide" \| "x-bar" \| "x-circle" \| "x-circle-f" \| "x-octagon" \| "x-octagon-f" \| "y-axis-guide" \| "zoom-in-fixed" \| "zoom-out-fixed" \| "zoom-to-object"` | `undefined` | -| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | -| `kind` | `kind` | Specifies the kind of the component, which will apply to border and background if applicable. | `"brand" \| "inverse" \| "neutral"` | `"neutral"` | -| `label` | `label` | Accessible name for the component. | `string` | `undefined` | -| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ChipMessages` | `undefined` | -| `scale` | `scale` | Specifies the size of the component. When contained in a parent `calcite-chip-group` inherits the parent's `scale` value. | `"l" \| "m" \| "s"` | `"m"` | -| `selected` | `selected` | When `true`, the component is selected. | `boolean` | `false` | -| `value` *(required)* | `value` | The component's value. | `any` | `undefined` | +| Property | Attribute | Description | Type | Default | +| -------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------- | +| `appearance` | `appearance` | Specifies the appearance style of the component. | `"outline" \| "outline-fill" \| "solid"` | `"solid"` | +| `closable` | `closable` | When `true`, a close button is added to the component. | `boolean` | `false` | +| `closed` | `closed` | When `true`, hides the component. | `boolean` | `false` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `icon` | `icon` | Specifies an icon to display. | `string` | `undefined` | +| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | +| `kind` | `kind` | Specifies the kind of the component, which will apply to border and background if applicable. | `"brand" \| "inverse" \| "neutral"` | `"neutral"` | +| `label` | `label` | Accessible name for the component. | `string` | `undefined` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ChipMessages` | `undefined` | +| `scale` | `scale` | Specifies the size of the component. When contained in a parent `calcite-chip-group` inherits the parent's `scale` value. | `"l" \| "m" \| "s"` | `"m"` | +| `selected` | `selected` | When `true`, the component is selected. | `boolean` | `false` | +| `value` *(required)* | `value` | The component's value. | `any` | `undefined` | ## Events diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.tsx b/packages/calcite-components/src/components/combobox-item/combobox-item.tsx index cf7ddfc459b..06413312969 100644 --- a/packages/calcite-components/src/components/combobox-item/combobox-item.tsx +++ b/packages/calcite-components/src/components/combobox-item/combobox-item.tsx @@ -27,7 +27,7 @@ import { ComboboxChildElement } from "../combobox/interfaces"; import { getAncestors, getDepth, isSingleLike } from "../combobox/utils"; import { Scale, SelectionMode } from "../interfaces"; import { getIconScale } from "../../utils/component"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { CSS, SLOTS } from "./resources"; /** @@ -60,6 +60,11 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon /** When `true`, interaction is prevented and the component is displayed with lower opacity. */ @Prop({ reflect: true }) disabled = false; + @Watch("disabled") + handleDisabledChange(): void { + this.calciteInternalComboboxItemChange.emit(); + } + /** * When `true`, omits the component from the `calcite-combobox` filtered search results. */ @@ -76,7 +81,7 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon @Prop({ reflect: true }) guid = guid(); /** Specifies an icon to display. */ - @Prop({ reflect: true }) icon: IconName; + @Prop({ reflect: true }) icon: IconNameOrString; /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl = false; @@ -177,6 +182,13 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon */ @Event({ cancelable: false }) calciteComboboxItemChange: EventEmitter; + /** + * Fires whenever a property the parent combobox needs to know about is changed. + * + * @internal + */ + @Event({ cancelable: false }) calciteInternalComboboxItemChange: EventEmitter; + // -------------------------------------------------------------------------- // // Private Methods @@ -203,7 +215,7 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon // // -------------------------------------------------------------------------- - renderIcon(iconPath: IconName): VNode { + renderIcon(iconPath: IconNameOrString): VNode { return this.icon ? ( { }); await page.waitForChanges(); }); + + it("allow selecting an item that was previously disabled", async () => { + const page = await newE2EPage(); + await page.setContent(html` + + + + + + `); + const combobox = await page.find("calcite-combobox"); + + await combobox.click(); + const item3 = await page.find("calcite-combobox-item[disabled]"); + await item3.click(); + + expect(await combobox.getProperty("value")).toBe(""); + + await item3.setProperty("disabled", false); + await page.waitForChanges(); + + await item3.click(); + + expect(await combobox.getProperty("value")).toBe("three"); + }); }); diff --git a/packages/calcite-components/src/components/combobox/combobox.scss b/packages/calcite-components/src/components/combobox/combobox.scss index cec2a8608b2..2aec13c66b8 100644 --- a/packages/calcite-components/src/components/combobox/combobox.scss +++ b/packages/calcite-components/src/components/combobox/combobox.scss @@ -160,6 +160,10 @@ padding-inline: var(--calcite-combobox-item-spacing-unit-l); } +.placeholder-icon { + color: var(--calcite-color-text-3); +} + .input-wrap { @apply flex flex-grow items-center; } diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx index 6ef191bbc20..448794d32c3 100644 --- a/packages/calcite-components/src/components/combobox/combobox.tsx +++ b/packages/calcite-components/src/components/combobox/combobox.tsx @@ -68,7 +68,7 @@ import { Scale, SelectionMode, Status } from "../interfaces"; import { CSS as XButtonCSS, XButton } from "../functional/XButton"; import { componentOnReady, getIconScale } from "../../utils/component"; import { Validation } from "../functional/Validation"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { ComboboxMessages } from "./assets/combobox/t9n"; import { ComboboxChildElement, SelectionDisplay } from "./interfaces"; import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, CSS, IDS } from "./resources"; @@ -188,7 +188,7 @@ export class Combobox @Prop() placeholder: string; /** Specifies the placeholder icon for the input. */ - @Prop({ reflect: true }) placeholderIcon: IconName; + @Prop({ reflect: true }) placeholderIcon: IconNameOrString; /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) placeholderIconFlipRtl = false; @@ -205,7 +205,7 @@ export class Combobox @Prop() validationMessage: string; /** Specifies the validation icon to display under the component. */ - @Prop({ reflect: true }) validationIcon: IconName | boolean; + @Prop({ reflect: true }) validationIcon: IconNameOrString | boolean; /** * The current validation state of the component. @@ -397,6 +397,14 @@ export class Combobox this.toggleSelection(target, target.selected); } + @Listen("calciteInternalComboboxItemChange") + calciteInternalComboboxItemChangeHandler( + event: CustomEvent, + ): void { + event.stopPropagation(); + this.updateItems(); + } + //-------------------------------------------------------------------------- // // Public Methods @@ -1696,17 +1704,21 @@ export class Combobox } renderSelectedOrPlaceholderIcon(): VNode { - const { selectedItems, placeholderIcon, placeholderIconFlipRtl } = this; + const { open, placeholderIcon, placeholderIconFlipRtl, selectedItems } = this; const selectedItem = selectedItems[0]; const selectedIcon = selectedItem?.icon; + const showPlaceholder = placeholderIcon && (open || !selectedItem); return ( this.showingInlineIcon && ( diff --git a/packages/calcite-components/src/components/combobox/readme.md b/packages/calcite-components/src/components/combobox/readme.md index b624f4c8e10..83c264da4bf 100644 --- a/packages/calcite-components/src/components/combobox/readme.md +++ b/packages/calcite-components/src/components/combobox/readme.md @@ -6,35 +6,35 @@ For comprehensive guidance on using and implementing `calcite-combobox`, refer t ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------------ | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `allowCustomValues` | `allow-custom-values` | When `true`, allows entry of custom values, which are not in the original set of items. | `boolean` | `undefined` | -| `clearDisabled` | `clear-disabled` | When `true`, the value-clearing will be disabled. | `boolean` | `false` | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `filterText` | `filter-text` | Text for the component's filter input field. | `string` | `""` | -| `filteredItems` | -- | Specifies the component's filtered items. | `HTMLCalciteComboboxItemElement[]` | `[]` | -| `flipPlacements` | -- | Defines the available placements that can be used when a flip occurs. | `FlipPlacement[]` | `undefined` | -| `form` | `form` | The `id` of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | `string` | `undefined` | -| `label` *(required)* | `label` | Accessible name for the component. | `string` | `undefined` | -| `maxItems` | `max-items` | Specifies the maximum number of `calcite-combobox-item`s (including nested children) to display before displaying a scrollbar. | `number` | `0` | -| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ComboboxMessages` | `undefined` | -| `name` | `name` | Specifies the name of the component. Required to pass the component's `value` on form submission. | `string` | `undefined` | -| `open` | `open` | When `true`, displays and positions the component. | `boolean` | `false` | -| `overlayPositioning` | `overlay-positioning` | Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. | `"absolute" \| "fixed"` | `"absolute"` | -| `placeholder` | `placeholder` | Specifies the placeholder text for the input. | `string` | `undefined` | -| `placeholderIcon` | `placeholder-icon` | Specifies the placeholder icon for the input. | `CamelCaseIcons \| "date-time" \| "i12-x" \| "i14-x" \| "i18-x" \| "i1-x" \| "i2-d-explore" \| "i2-x" \| "i360-view" \| "i3-d-glasses" \| "i4-x" \| "i8-x" \| "a-z" \| "a-z-down" \| "a-z-up" \| "a3-landscape" \| "a3-portrait" \| "a4-landscape" \| "a4-portrait" \| "absolute-direction" \| "absolute-elevation" \| "access-string-results" \| "activity-monitor" \| "actual-size" \| "add-and-update-features" \| "add-constant" \| "add-features" \| "add-in" \| "add-in-edit" \| "add-in-new" \| "add-layer" \| "add-layer-service" \| "add-raster-variable" \| "add-rasters" \| "add-reaction" \| "add-text" \| "add-to-model" \| "address-book" \| "alert-off-circle-f" \| "all-servers" \| "analysis-overlay" \| "annotate-tool" \| "ansi-a-landscape" \| "ansi-a-portrait" \| "ansi-b-landscape" \| "ansi-b-portrait" \| "antenna-height" \| "app-gear" \| "app-launcher" \| "app-run" \| "app-update" \| "apply-changes" \| "apply-selection-to-existing-view" \| "arcgis-data-store" \| "arcgis-online" \| "arrow-bold-down" \| "arrow-bold-left" \| "arrow-bold-right" \| "arrow-bold-up" \| "arrow-circle-down" \| "arrow-circle-down-f" \| "arrow-double-diagonal1" \| "arrow-double-diagonal2" \| "arrow-double-horizontal" \| "arrow-double-vertical" \| "arrow-down" \| "arrow-down-left" \| "arrow-down-right" \| "arrow-left" \| "arrow-right" \| "arrow-right-left" \| "arrow-up" \| "arrow-up-down" \| "arrow-up-left" \| "arrow-up-right" \| "asterisk-large" \| "asterisk-small" \| "attachment-plus" \| "auto-layout" \| "battery-charging" \| "bear-left" \| "bear-right" \| "beginning-f" \| "bell-f" \| "bell-off" \| "bookmark-f" \| "border-radius-fully-rounded" \| "border-radius-rounded" \| "border-radius-sharp" \| "box-chart" \| "box-chart-series" \| "brackets-curly" \| "break-recurrence" \| "bring-forward" \| "bring-to-front" \| "browser-map" \| "brush-mark" \| "brush-mark-plus" \| "brush-tip" \| "bullet-point" \| "bullet-point-large" \| "camera-flash-off" \| "camera-flash-on" \| "camera-plus" \| "camera-switch-front-back" \| "camera-unlock" \| "caret-double-horizontal" \| "caret-double-vertical" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-square-down" \| "caret-square-left" \| "caret-square-right" \| "caret-square-up" \| "caret-up" \| "catalog-dataset" \| "center-align" \| "center-horizontal" \| "center-vertical" \| "change-detection" \| "change-font-size" \| "chart-gear" \| "chart-magnifying-glass" \| "check-circle" \| "check-circle-f" \| "check-extent" \| "check-layer" \| "check-shield" \| "check-square" \| "check-square-f" \| "chevron-down" \| "chevron-down-left" \| "chevron-down-right" \| "chevron-end" \| "chevron-left" \| "chevron-right" \| "chevron-start" \| "chevron-up" \| "chevron-up-left" \| "chevron-up-right" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chord-diagram" \| "circle-f" \| "circle-area" \| "circle-disallowed" \| "circle-inset-large" \| "circle-inset-medium" \| "circle-inset-small" \| "circle-pause" \| "circle-pause-f" \| "circle-stop" \| "circle-stop-f" \| "classify-objects" \| "classify-pixels" \| "clear-selection" \| "clipboard-brackets" \| "clock-down" \| "clock-forward" \| "clock-up" \| "cloud-data" \| "cloud-server" \| "code-branch" \| "code-branch-edit" \| "collaboration-distributed" \| "collaboration-user" \| "color-coded-map" \| "color-correction" \| "column-settings" \| "community-link-chart-layout" \| "compass-needle" \| "compass-north-circle" \| "conditional-rules" \| "conditional-rules-path" \| "conference-room" \| "configure-editing" \| "configure-grid-unit" \| "configure-popup" \| "content-full" \| "content-inline" \| "content-large" \| "content-medium" \| "content-minimal" \| "content-none" \| "content-side-by-side" \| "content-small" \| "contingent-values" \| "coordinate-system" \| "copy-to-clipboard" \| "credit-card" \| "cursor-click" \| "cursor-lock" \| "cursor-marquee" \| "cursor-minus" \| "cursor-plus" \| "cursor-selection" \| "custom-print" \| "cut-and-fill-volume-calculation" \| "data-card" \| "data-check" \| "data-clock-chart" \| "data-cloud" \| "data-folder" \| "data-magnifying-glass" \| "data-raster" \| "debug-script" \| "decrease-link-chart-symbol-size" \| "deep-learning" \| "deep-learning-project" \| "derived-value" \| "developer-credentials" \| "diamond-inset-large" \| "diamond-inset-medium" \| "diamond-inset-small" \| "dimensions-unit" \| "dimensions-wall" \| "display-selection-lock" \| "display-selection-unlock" \| "dissolve-features" \| "distance-type" \| "distribute-height-evenly" \| "distribute-width-evenly" \| "dock-bottom" \| "dock-left" \| "dock-right" \| "double-float" \| "download-to" \| "drive-time" \| "drive-time-largest" \| "drive-time-smallest" \| "drive-time-threshold" \| "drive-time-x-bar" \| "driving-distance" \| "driving-time" \| "drone-fixed-wing" \| "drone-flying-wing" \| "drone-quadcopter" \| "drone-quadcopter-top" \| "edit-attributes" \| "edit-geometry" \| "elevator-down" \| "elevator-up" \| "ellipsis-circle" \| "email-address" \| "embedded-card" \| "embedded-content" \| "embedded-live-content" \| "employee-id" \| "enable-disable-feature-selection" \| "end-f" \| "escalator-down" \| "escalator-up" \| "exclamation-mark-circle" \| "exclamation-mark-circle-f" \| "exclamation-mark-triangle" \| "exclamation-mark-triangle-f" \| "exclamation-point" \| "exclamation-point-f" \| "exit-highway-left" \| "exit-highway-right" \| "expression-defined-color" \| "extend-trim" \| "extent-filter" \| "face-id" \| "feature-details" \| "feature-layer" \| "file-archive" \| "file-cad" \| "file-code" \| "file-csv" \| "file-data" \| "file-ecd" \| "file-excel" \| "file-gpx" \| "file-image" \| "file-kml" \| "file-magnifying-glass" \| "file-pdf" \| "file-pdf-plus" \| "file-pitemx" \| "file-ppt" \| "file-report" \| "file-report-generic" \| "file-shape" \| "file-sound" \| "file-sqlite" \| "file-text" \| "file-user" \| "file-video" \| "file-word" \| "file-xml" \| "file-zip" \| "files-csv-collection" \| "filter-expand" \| "find-path" \| "flip-vertical" \| "floor-plan" \| "folder-f" \| "folder-archive" \| "folder-magnifying-glass" \| "folder-move" \| "folder-new" \| "folder-open" \| "folder-open-f" \| "folder-plus" \| "folder-star" \| "folder-video" \| "follow-pause" \| "follow-play" \| "force-directed-link-chart-layout" \| "fork-left" \| "fork-middle" \| "fork-right" \| "form-dropdown" \| "form-elements" \| "form-field" \| "form-field-multiline" \| "form-field-off" \| "forward-f" \| "four-by-one-grid" \| "four-by-three-grid" \| "four-by-two-grid" \| "frame-export" \| "freehand-area" \| "full-screen" \| "full-screen-exit" \| "function-editor" \| "gauge-summary" \| "geoanalytics-server" \| "geoevent-server" \| "geographic-link-chart-layout" \| "geonet-question" \| "gis-server" \| "gps-off" \| "gps-on" \| "gps-on-f" \| "graph-axis" \| "graph-bar100-stacked" \| "graph-bar" \| "graph-bar-side-by-side" \| "graph-bar-stacked" \| "graph-box-mean-lines" \| "graph-box-side-by-side" \| "graph-guides" \| "graph-histogram" \| "graph-line-series" \| "graph-moving-average" \| "graph-pie-slice" \| "graph-scatter-plot" \| "graph-time-series" \| "grid-diamond" \| "grid-hexagon" \| "grid-triangle" \| "grid-unit" \| "ground-control-point" \| "group-form" \| "group-form-plus" \| "group-items" \| "group-layers" \| "group-layout-elements" \| "group-x" \| "h3-hexagon" \| "handle-vertical" \| "heading-layout" \| "heading-rtl" \| "heart-f" \| "heat-chart" \| "heavy-rain" \| "heavy-snow" \| "hexagon2-inset-large" \| "hexagon2-inset-medium" \| "hexagon2-inset-small" \| "hexagon-inset-large" \| "hexagon-inset-medium" \| "hexagon-inset-small" \| "hide-derived-value" \| "hide-empty" \| "hide-layers" \| "hide-parameters" \| "hierarchical-link-chart-layout" \| "highlighter-tip" \| "highway-change" \| "highway-change-right" \| "hillshade-effect" \| "horizontal-distribute" \| "hourglass-active" \| "hourglass-expired" \| "image-chips" \| "image-collection-explorer" \| "image-display-order" \| "image-layer" \| "image-magnifying-glass" \| "image-mensuration" \| "image-pin" \| "image-plus" \| "image-segmentation" \| "image-server" \| "image-space" \| "image-unit" \| "increase-link-chart-symbol-size" \| "information-f" \| "information-letter" \| "initiative-template" \| "joined-view-layer" \| "knowledge-graph" \| "knowledge-graph-dashboard" \| "knowledge-graph-data-model" \| "knowledge-graph-data-store" \| "knowledge-graph-export" \| "knowledge-graph-import" \| "knowledge-graph-new" \| "knowledge-graph-relationship" \| "knowledge-layer" \| "knowledge-server" \| "knowledge-studio" \| "label-off" \| "language-translate" \| "lasso-select" \| "layer-basemap" \| "layer-broken" \| "layer-filter" \| "layer-graphics" \| "layer-hide" \| "layer-kml" \| "layer-line" \| "layer-line-service" \| "layer-map" \| "layer-map-service" \| "layer-points" \| "layer-polygon" \| "layer-polygon-service" \| "layer-service" \| "layer-settings" \| "layer-zoom-to" \| "layers-editable" \| "layers-f" \| "layers-reference" \| "layout-compact" \| "layout-horizontal" \| "layout-spacious" \| "layout-vertical" \| "left-align" \| "left-edge" \| "left-left" \| "left-right" \| "legend-left" \| "legend-plus" \| "legend-right" \| "light-rain" \| "light-snow" \| "line-check" \| "line-dashed" \| "line-dotted" \| "line-of-sight" \| "line-solid" \| "line-straight" \| "link-chart" \| "link-chart-expand" \| "link-chart-from-template" \| "list-bullet" \| "list-button" \| "list-check" \| "list-check-all" \| "list-merge" \| "list-number" \| "list-number-rtl" \| "list-radio" \| "list-rectangle" \| "list-show-all" \| "livestream-video-layer" \| "location-sharing" \| "location-sharing-f" \| "location-sharing-off" \| "lock-f" \| "ltr-elements-align" \| "ltr-paragraph-align" \| "magnifying-glass" \| "magnifying-glass-minus" \| "magnifying-glass-plus" \| "map-contents" \| "map-from-template" \| "map-level-settings" \| "map-pin" \| "map-space" \| "mask-inside" \| "mask-outside" \| "maximum-graph" \| "maximum-territory-distance" \| "measure-area" \| "measure-building-height-shadow" \| "measure-building-height-top-base" \| "measure-building-height-top-shadow" \| "measure-line" \| "media-layer" \| "mega-phone" \| "members-brackets" \| "merge-details" \| "merge-on-highway" \| "merge-on-highway-right" \| "merge-units" \| "microphone-plus" \| "min-distance-between-centers" \| "minimum-graph" \| "minus-circle" \| "minus-circle-f" \| "minus-square" \| "minus-square-f" \| "miscellaneous-collection" \| "mission-server" \| "mobile-off" \| "mobile-vibrate" \| "model-edit" \| "modify-associations" \| "move-from-basemap" \| "move-to-basemap" \| "move-up" \| "move-up-all" \| "multidimensional-raster" \| "multiple-variables" \| "music-note" \| "new-link-chart" \| "new-model" \| "new-raster-function-template" \| "new-training" \| "no-attachment" \| "no-image" \| "no-map" \| "nodes-link" \| "nodes-merge" \| "nodes-unlink" \| "nodes-unmerge" \| "notebook-server" \| "notebook-snapshot" \| "notepad-add" \| "notepad-edit" \| "number-circle1" \| "number-circle1-f" \| "number-circle2" \| "number-circle2-f" \| "number-circle3" \| "number-circle3-f" \| "number-circle4" \| "number-circle4-f" \| "number-circle5" \| "number-circle5-f" \| "number-circle6" \| "number-circle6-f" \| "number-circle7" \| "number-circle7-f" \| "number-circle8" \| "number-circle8-f" \| "number-circle9" \| "number-circle9-f" \| "number-of-territories" \| "object-detection" \| "objectstore-data-store" \| "on-the-ground-elevation" \| "open-book" \| "oriented-imagery-layer" \| "oriented-imagery-widget" \| "overlap-features" \| "overwrite-features" \| "overwrite-project" \| "paint-bucket" \| "palette-check" \| "pan-drag" \| "parcel-layer" \| "partly-cloudy" \| "paste-with-attribute" \| "paste-without-attribute" \| "pause-f" \| "pen-mark" \| "pen-mark-plus" \| "pen-tip" \| "pencil-mark" \| "pencil-mark-plus" \| "pencil-square" \| "pencil-tip" \| "personal-homepage" \| "pie-chart" \| "pin-plus" \| "pin-tear" \| "pin-tear-f" \| "play-f" \| "plus-circle" \| "plus-square" \| "point-line" \| "polygon-area" \| "polygon-line-check" \| "polygon-select" \| "polygon-vertices" \| "pop-up1" \| "pop-up-blank" \| "pop-up-blank-f" \| "premium-content-user-credit" \| "presentation-x" \| "print-preview" \| "processing-templates" \| "profile-variables" \| "project-mission" \| "project-template" \| "puzzle-piece" \| "qr-code" \| "qt-code" \| "question-f" \| "question-mark" \| "radial-tree-link-chart-layout" \| "rain-snow" \| "rain-thunder" \| "ramp-left" \| "ramp-right" \| "raster-analysis" \| "raster-function" \| "raster-function-template" \| "raster-function-template-play" \| "read-only-non-editable" \| "rectangle-area" \| "rectangle-plus" \| "recycle-bin" \| "refresh-f" \| "relational-data-store" \| "relative-direction" \| "relative-to-ground-elevation" \| "relative-to-scene-elevation" \| "remove-from-list" \| "remove-linkchart" \| "reorder-cards" \| "reorder-grid" \| "reorder-stack" \| "replace-image" \| "reshape-add-geometry" \| "reshape-subtract-geometry" \| "reshape-tool" \| "resize-area" \| "reverse-f" \| "ribbon-rosette" \| "right-align" \| "right-angle" \| "right-edge" \| "right-left" \| "right-right" \| "rings-largest" \| "rings-smallest" \| "rings-threshold" \| "rings-x-bar" \| "road-sign" \| "rotate-device" \| "round-about" \| "round-about-right" \| "rounded-rectangle" \| "route-from" \| "route-to" \| "rss-f" \| "rtl-elements-align" \| "rtl-paragraph-align" \| "running-outline" \| "rural-driving-distance" \| "rural-driving-time" \| "satellite0-f" \| "satellite1-f" \| "satellite2-f" \| "satellite3-f" \| "save-as" \| "scan-area" \| "scan-barcode" \| "scan-corridor" \| "scan-crosshatch" \| "scan-perimeter" \| "scan-vertical" \| "screenshot-mode" \| "select-by-attributes" \| "select-category" \| "select-column" \| "select-range" \| "select-visible" \| "selected-items-filter" \| "selection-filter" \| "selection-manager" \| "selection-set" \| "selection-x" \| "send-backwards" \| "send-to-back" \| "serial-port" \| "server-lock" \| "share-ios" \| "sharp-left" \| "sharp-right" \| "shield-coin" \| "shopping-cart" \| "show-all-parameters" \| "show-column" \| "show-derived-value" \| "show-multiple-layers-at-a-time" \| "show-one-layer-at-a-time" \| "show-required-parameters" \| "sign-in" \| "sign-out" \| "simple-link-chart-layout" \| "sky-plot" \| "sliders-horizontal" \| "smart-camera" \| "smart-form" \| "smart-tree-link-chart-layout" \| "snap-to-grid" \| "snap-to-pixel" \| "snap-to-point" \| "snow-thunder" \| "sort-ascending" \| "sort-ascending-arrow" \| "sort-descending" \| "sort-descending-arrow" \| "sound-low" \| "sound-off" \| "sound-unavailable" \| "spatiotemporal-data-store" \| "speech-bubble" \| "speech-bubble-check" \| "speech-bubble-exclamation" \| "speech-bubble-like" \| "speech-bubble-plus" \| "speech-bubble-social" \| "speech-bubbles" \| "split-features" \| "split-geometry" \| "split-units" \| "square-f" \| "square-area" \| "square-inset-large" \| "square-inset-medium" \| "square-inset-small" \| "stairs-down" \| "stairs-up" \| "star-f" \| "star-circle" \| "stop-square" \| "stop-square-f" \| "stored-as-new-query" \| "stored-query" \| "sub-fields" \| "subheading-rtl" \| "suitability-analysis-output" \| "summarize-center-and-dispersion1" \| "summarize-center-and-dispersion2" \| "summarize-center-and-dispersion3" \| "system-management" \| "tabbed-view" \| "take-pedestrian-ramp" \| "territory-buffer-distance" \| "test-data" \| "text-bold" \| "text-button" \| "text-dashed-underline" \| "text-large" \| "text-medium" \| "text-paragraph-large" \| "text-small" \| "text-solid-underline" \| "three-by-one-grid" \| "three-by-three-grid" \| "three-by-two-grid" \| "thumbs-down" \| "thumbs-up" \| "tile-cache-data-store" \| "tile-layer" \| "tiled-imagery-layer" \| "time-filter" \| "time-zone" \| "toggle-off" \| "toggle-on" \| "tour-pin-tear" \| "transverse-hexagon" \| "trapezoid-area" \| "trucking-distance" \| "trucking-time" \| "u-turn" \| "u-turn-right" \| "ungroup-items" \| "ungroup-layers" \| "ungroup-layout-elements" \| "update-features" \| "update-project" \| "upload-to" \| "urban-model" \| "usb-security-key" \| "user-calendar" \| "user-down" \| "user-key" \| "user-minus" \| "user-plus" \| "user-to-device" \| "user-up" \| "user-x" \| "utility-network" \| "utility-network-trace" \| "validate-utility-network-topology" \| "vertex-check" \| "vertex-edit" \| "vertex-gps" \| "vertex-move" \| "vertex-plus" \| "vertex-x" \| "vertical-distribute" \| "video-layer" \| "video-plus" \| "video-server" \| "video-single-server" \| "video-web" \| "view-associations" \| "view-hide" \| "view-mixed" \| "view-visible" \| "walk-through-door" \| "walking-distance" \| "walking-time" \| "widgets-group" \| "widgets-source" \| "widgets-tabs" \| "workflow-diagram" \| "workflow-manager-server" \| "x-axis-guide" \| "x-bar" \| "x-circle" \| "x-circle-f" \| "x-octagon" \| "x-octagon-f" \| "y-axis-guide" \| "zoom-in-fixed" \| "zoom-out-fixed" \| "zoom-to-object"` | `undefined` | -| `placeholderIconFlipRtl` | `placeholder-icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | -| `readOnly` | `read-only` | When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified. | `boolean` | `false` | -| `required` | `required` | When `true`, the component must have a value in order for the form to submit. | `boolean` | `false` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `selectedItems` | -- | Specifies the component's selected items. | `HTMLCalciteComboboxItemElement[]` | `[]` | -| `selectionDisplay` | `selection-display` | When `selectionMode` is `"ancestors"` or `"multiple"`, specifies the display of multiple `calcite-combobox-item` selections, where: `"all"` displays all selections with individual `calcite-chip`s, `"fit"` displays individual `calcite-chip`s that scale to the component's size, including a non-closable `calcite-chip`, which provides the number of additional `calcite-combobox-item` selections not visually displayed, and `"single"` displays one `calcite-chip` with the total number of selections. | `"all" \| "fit" \| "single"` | `"all"` | -| `selectionMode` | `selection-mode` | Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"ancestors"` allows multiple selections, but shows ancestors of selected items as selected, with only deepest children shown in chips. | `"ancestors" \| "multiple" \| "single" \| "single-persist"` | `"multiple"` | -| `status` | `status` | Specifies the status of the input field, which determines message and icons. | `"idle" \| "invalid" \| "valid"` | `"idle"` | -| `validationIcon` | `validation-icon` | Specifies the validation icon to display under the component. | `boolean \| IconName` | `undefined` | -| `validationMessage` | `validation-message` | Specifies the validation message to display under the component. | `string` | `undefined` | -| `validity` | -- | The current validation state of the component. | `{ valid: boolean; badInput: boolean; customError: boolean; patternMismatch: boolean; rangeOverflow: boolean; rangeUnderflow: boolean; stepMismatch: boolean; tooLong: boolean; tooShort: boolean; typeMismatch: boolean; valueMissing: boolean; }` | `{ valid: false, badInput: false, customError: false, patternMismatch: false, rangeOverflow: false, rangeUnderflow: false, stepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false, valueMissing: false, }` | -| `value` | `value` | The component's value(s) from the selected `calcite-combobox-item`(s). | `string \| string[]` | `null` | +| Property | Attribute | Description | Type | Default | +| ------------------------ | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `allowCustomValues` | `allow-custom-values` | When `true`, allows entry of custom values, which are not in the original set of items. | `boolean` | `undefined` | +| `clearDisabled` | `clear-disabled` | When `true`, the value-clearing will be disabled. | `boolean` | `false` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `filterText` | `filter-text` | Text for the component's filter input field. | `string` | `""` | +| `filteredItems` | -- | Specifies the component's filtered items. | `HTMLCalciteComboboxItemElement[]` | `[]` | +| `flipPlacements` | -- | Defines the available placements that can be used when a flip occurs. | `FlipPlacement[]` | `undefined` | +| `form` | `form` | The `id` of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | `string` | `undefined` | +| `label` *(required)* | `label` | Accessible name for the component. | `string` | `undefined` | +| `maxItems` | `max-items` | Specifies the maximum number of `calcite-combobox-item`s (including nested children) to display before displaying a scrollbar. | `number` | `0` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ComboboxMessages` | `undefined` | +| `name` | `name` | Specifies the name of the component. Required to pass the component's `value` on form submission. | `string` | `undefined` | +| `open` | `open` | When `true`, displays and positions the component. | `boolean` | `false` | +| `overlayPositioning` | `overlay-positioning` | Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. | `"absolute" \| "fixed"` | `"absolute"` | +| `placeholder` | `placeholder` | Specifies the placeholder text for the input. | `string` | `undefined` | +| `placeholderIcon` | `placeholder-icon` | Specifies the placeholder icon for the input. | `string` | `undefined` | +| `placeholderIconFlipRtl` | `placeholder-icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | +| `readOnly` | `read-only` | When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified. | `boolean` | `false` | +| `required` | `required` | When `true`, the component must have a value in order for the form to submit. | `boolean` | `false` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `selectedItems` | -- | Specifies the component's selected items. | `HTMLCalciteComboboxItemElement[]` | `[]` | +| `selectionDisplay` | `selection-display` | When `selectionMode` is `"ancestors"` or `"multiple"`, specifies the display of multiple `calcite-combobox-item` selections, where: `"all"` displays all selections with individual `calcite-chip`s, `"fit"` displays individual `calcite-chip`s that scale to the component's size, including a non-closable `calcite-chip`, which provides the number of additional `calcite-combobox-item` selections not visually displayed, and `"single"` displays one `calcite-chip` with the total number of selections. | `"all" \| "fit" \| "single"` | `"all"` | +| `selectionMode` | `selection-mode` | Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"ancestors"` allows multiple selections, but shows ancestors of selected items as selected, with only deepest children shown in chips. | `"ancestors" \| "multiple" \| "single" \| "single-persist"` | `"multiple"` | +| `status` | `status` | Specifies the status of the input field, which determines message and icons. | `"idle" \| "invalid" \| "valid"` | `"idle"` | +| `validationIcon` | `validation-icon` | Specifies the validation icon to display under the component. | `boolean \| string` | `undefined` | +| `validationMessage` | `validation-message` | Specifies the validation message to display under the component. | `string` | `undefined` | +| `validity` | -- | The current validation state of the component. | `{ valid: boolean; badInput: boolean; customError: boolean; patternMismatch: boolean; rangeOverflow: boolean; rangeUnderflow: boolean; stepMismatch: boolean; tooLong: boolean; tooShort: boolean; typeMismatch: boolean; valueMissing: boolean; }` | `{ valid: false, badInput: false, customError: false, patternMismatch: false, rangeOverflow: false, rangeUnderflow: false, stepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false, valueMissing: false, }` | +| `value` | `value` | The component's value(s) from the selected `calcite-combobox-item`(s). | `string \| string[]` | `null` | ## Events diff --git a/packages/calcite-components/src/components/combobox/resources.ts b/packages/calcite-components/src/components/combobox/resources.ts index ab1e41d4513..6786eae9d78 100644 --- a/packages/calcite-components/src/components/combobox/resources.ts +++ b/packages/calcite-components/src/components/combobox/resources.ts @@ -9,6 +9,8 @@ export const CSS = { selectionDisplaySingle: "selection-display-single", listContainer: "list-container", icon: "icon", + placeholderIcon: "placeholder-icon", + selectedIcon: "selected-icon", }; export const IDS = { diff --git a/packages/calcite-components/src/components/dialog/readme.md b/packages/calcite-components/src/components/dialog/readme.md index d5b60ae6a2f..04ef5a5b278 100644 --- a/packages/calcite-components/src/components/dialog/readme.md +++ b/packages/calcite-components/src/components/dialog/readme.md @@ -99,6 +99,7 @@ Type: `Promise` | Name | Description | | ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `--calcite-dialog-border-color` | Specifies the component's border color. | +| `--calcite-dialog-content-space` | Specifies the padding of the component's content. | | `--calcite-dialog-footer-space` | Specifies the padding of the component's footer. | | `--calcite-dialog-scrim-background-color` | Specifies the background color of the component's scrim. | | `--calcite-dialog-size-x` | Specifies the width of the component, using `px`, `em`, `rem`, `vw`, or `%`. Does not exceed the viewport's width - applies when `placement="cover"` is set. | diff --git a/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx b/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx index ad2b0d0ce29..5d33490d6dc 100644 --- a/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx +++ b/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx @@ -26,7 +26,7 @@ import { InteractiveContainer, updateHostInteraction, } from "../../utils/interactive"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { CSS } from "./resources"; /** @@ -60,10 +60,10 @@ export class DropdownItem implements InteractiveComponent, LoadableComponent { @Prop({ reflect: true }) iconFlipRtl: FlipContext; /** Specifies an icon to display at the start of the component. */ - @Prop({ reflect: true }) iconStart: IconName; + @Prop({ reflect: true }) iconStart: IconNameOrString; /** Specifies an icon to display at the end of the component. */ - @Prop({ reflect: true }) iconEnd: IconName; + @Prop({ reflect: true }) iconEnd: IconNameOrString; /** Accessible name for the component. */ @Prop() label: string; diff --git a/packages/calcite-components/src/components/dropdown-item/readme.md b/packages/calcite-components/src/components/dropdown-item/readme.md index a420e1dc4be..cc75f3d2d2b 100644 --- a/packages/calcite-components/src/components/dropdown-item/readme.md +++ b/packages/calcite-components/src/components/dropdown-item/readme.md @@ -6,17 +6,17 @@ For comprehensive guidance on using and implementing `calcite-dropdown-item`, re ## Properties -| Property | Attribute | Description | Type | Default | -| ------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `href` | `href` | Specifies the URL of the linked resource, which can be set as an absolute or relative path. Determines if the component will render as an anchor. | `string` | `undefined` | -| `iconEnd` | `icon-end` | Specifies an icon to display at the end of the component. | `CamelCaseIcons \| "date-time" \| "i12-x" \| "i14-x" \| "i18-x" \| "i1-x" \| "i2-d-explore" \| "i2-x" \| "i360-view" \| "i3-d-glasses" \| "i4-x" \| "i8-x" \| "a-z" \| "a-z-down" \| "a-z-up" \| "a3-landscape" \| "a3-portrait" \| "a4-landscape" \| "a4-portrait" \| "absolute-direction" \| "absolute-elevation" \| "access-string-results" \| "activity-monitor" \| "actual-size" \| "add-and-update-features" \| "add-constant" \| "add-features" \| "add-in" \| "add-in-edit" \| "add-in-new" \| "add-layer" \| "add-layer-service" \| "add-raster-variable" \| "add-rasters" \| "add-reaction" \| "add-text" \| "add-to-model" \| "address-book" \| "alert-off-circle-f" \| "all-servers" \| "analysis-overlay" \| "annotate-tool" \| "ansi-a-landscape" \| "ansi-a-portrait" \| "ansi-b-landscape" \| "ansi-b-portrait" \| "antenna-height" \| "app-gear" \| "app-launcher" \| "app-run" \| "app-update" \| "apply-changes" \| "apply-selection-to-existing-view" \| "arcgis-data-store" \| "arcgis-online" \| "arrow-bold-down" \| "arrow-bold-left" \| "arrow-bold-right" \| "arrow-bold-up" \| "arrow-circle-down" \| "arrow-circle-down-f" \| "arrow-double-diagonal1" \| "arrow-double-diagonal2" \| "arrow-double-horizontal" \| "arrow-double-vertical" \| "arrow-down" \| "arrow-down-left" \| "arrow-down-right" \| "arrow-left" \| "arrow-right" \| "arrow-right-left" \| "arrow-up" \| "arrow-up-down" \| "arrow-up-left" \| "arrow-up-right" \| "asterisk-large" \| "asterisk-small" \| "attachment-plus" \| "auto-layout" \| "battery-charging" \| "bear-left" \| "bear-right" \| "beginning-f" \| "bell-f" \| "bell-off" \| "bookmark-f" \| "border-radius-fully-rounded" \| "border-radius-rounded" \| "border-radius-sharp" \| "box-chart" \| "box-chart-series" \| "brackets-curly" \| "break-recurrence" \| "bring-forward" \| "bring-to-front" \| "browser-map" \| "brush-mark" \| "brush-mark-plus" \| "brush-tip" \| "bullet-point" \| "bullet-point-large" \| "camera-flash-off" \| "camera-flash-on" \| "camera-plus" \| "camera-switch-front-back" \| "camera-unlock" \| "caret-double-horizontal" \| "caret-double-vertical" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-square-down" \| "caret-square-left" \| "caret-square-right" \| "caret-square-up" \| "caret-up" \| "catalog-dataset" \| "center-align" \| "center-horizontal" \| "center-vertical" \| "change-detection" \| "change-font-size" \| "chart-gear" \| "chart-magnifying-glass" \| "check-circle" \| "check-circle-f" \| "check-extent" \| "check-layer" \| "check-shield" \| "check-square" \| "check-square-f" \| "chevron-down" \| "chevron-down-left" \| "chevron-down-right" \| "chevron-end" \| "chevron-left" \| "chevron-right" \| "chevron-start" \| "chevron-up" \| "chevron-up-left" \| "chevron-up-right" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chord-diagram" \| "circle-f" \| "circle-area" \| "circle-disallowed" \| "circle-inset-large" \| "circle-inset-medium" \| "circle-inset-small" \| "circle-pause" \| "circle-pause-f" \| "circle-stop" \| "circle-stop-f" \| "classify-objects" \| "classify-pixels" \| "clear-selection" \| "clipboard-brackets" \| "clock-down" \| "clock-forward" \| "clock-up" \| "cloud-data" \| "cloud-server" \| "code-branch" \| "code-branch-edit" \| "collaboration-distributed" \| "collaboration-user" \| "color-coded-map" \| "color-correction" \| "column-settings" \| "community-link-chart-layout" \| "compass-needle" \| "compass-north-circle" \| "conditional-rules" \| "conditional-rules-path" \| "conference-room" \| "configure-editing" \| "configure-grid-unit" \| "configure-popup" \| "content-full" \| "content-inline" \| "content-large" \| "content-medium" \| "content-minimal" \| "content-none" \| "content-side-by-side" \| "content-small" \| "contingent-values" \| "coordinate-system" \| "copy-to-clipboard" \| "credit-card" \| "cursor-click" \| "cursor-lock" \| "cursor-marquee" \| "cursor-minus" \| "cursor-plus" \| "cursor-selection" \| "custom-print" \| "cut-and-fill-volume-calculation" \| "data-card" \| "data-check" \| "data-clock-chart" \| "data-cloud" \| "data-folder" \| "data-magnifying-glass" \| "data-raster" \| "debug-script" \| "decrease-link-chart-symbol-size" \| "deep-learning" \| "deep-learning-project" \| "derived-value" \| "developer-credentials" \| "diamond-inset-large" \| "diamond-inset-medium" \| "diamond-inset-small" \| "dimensions-unit" \| "dimensions-wall" \| "display-selection-lock" \| "display-selection-unlock" \| "dissolve-features" \| "distance-type" \| "distribute-height-evenly" \| "distribute-width-evenly" \| "dock-bottom" \| "dock-left" \| "dock-right" \| "double-float" \| "download-to" \| "drive-time" \| "drive-time-largest" \| "drive-time-smallest" \| "drive-time-threshold" \| "drive-time-x-bar" \| "driving-distance" \| "driving-time" \| "drone-fixed-wing" \| "drone-flying-wing" \| "drone-quadcopter" \| "drone-quadcopter-top" \| "edit-attributes" \| "edit-geometry" \| "elevator-down" \| "elevator-up" \| "ellipsis-circle" \| "email-address" \| "embedded-card" \| "embedded-content" \| "embedded-live-content" \| "employee-id" \| "enable-disable-feature-selection" \| "end-f" \| "escalator-down" \| "escalator-up" \| "exclamation-mark-circle" \| "exclamation-mark-circle-f" \| "exclamation-mark-triangle" \| "exclamation-mark-triangle-f" \| "exclamation-point" \| "exclamation-point-f" \| "exit-highway-left" \| "exit-highway-right" \| "expression-defined-color" \| "extend-trim" \| "extent-filter" \| "face-id" \| "feature-details" \| "feature-layer" \| "file-archive" \| "file-cad" \| "file-code" \| "file-csv" \| "file-data" \| "file-ecd" \| "file-excel" \| "file-gpx" \| "file-image" \| "file-kml" \| "file-magnifying-glass" \| "file-pdf" \| "file-pdf-plus" \| "file-pitemx" \| "file-ppt" \| "file-report" \| "file-report-generic" \| "file-shape" \| "file-sound" \| "file-sqlite" \| "file-text" \| "file-user" \| "file-video" \| "file-word" \| "file-xml" \| "file-zip" \| "files-csv-collection" \| "filter-expand" \| "find-path" \| "flip-vertical" \| "floor-plan" \| "folder-f" \| "folder-archive" \| "folder-magnifying-glass" \| "folder-move" \| "folder-new" \| "folder-open" \| "folder-open-f" \| "folder-plus" \| "folder-star" \| "folder-video" \| "follow-pause" \| "follow-play" \| "force-directed-link-chart-layout" \| "fork-left" \| "fork-middle" \| "fork-right" \| "form-dropdown" \| "form-elements" \| "form-field" \| "form-field-multiline" \| "form-field-off" \| "forward-f" \| "four-by-one-grid" \| "four-by-three-grid" \| "four-by-two-grid" \| "frame-export" \| "freehand-area" \| "full-screen" \| "full-screen-exit" \| "function-editor" \| "gauge-summary" \| "geoanalytics-server" \| "geoevent-server" \| "geographic-link-chart-layout" \| "geonet-question" \| "gis-server" \| "gps-off" \| "gps-on" \| "gps-on-f" \| "graph-axis" \| "graph-bar100-stacked" \| "graph-bar" \| "graph-bar-side-by-side" \| "graph-bar-stacked" \| "graph-box-mean-lines" \| "graph-box-side-by-side" \| "graph-guides" \| "graph-histogram" \| "graph-line-series" \| "graph-moving-average" \| "graph-pie-slice" \| "graph-scatter-plot" \| "graph-time-series" \| "grid-diamond" \| "grid-hexagon" \| "grid-triangle" \| "grid-unit" \| "ground-control-point" \| "group-form" \| "group-form-plus" \| "group-items" \| "group-layers" \| "group-layout-elements" \| "group-x" \| "h3-hexagon" \| "handle-vertical" \| "heading-layout" \| "heading-rtl" \| "heart-f" \| "heat-chart" \| "heavy-rain" \| "heavy-snow" \| "hexagon2-inset-large" \| "hexagon2-inset-medium" \| "hexagon2-inset-small" \| "hexagon-inset-large" \| "hexagon-inset-medium" \| "hexagon-inset-small" \| "hide-derived-value" \| "hide-empty" \| "hide-layers" \| "hide-parameters" \| "hierarchical-link-chart-layout" \| "highlighter-tip" \| "highway-change" \| "highway-change-right" \| "hillshade-effect" \| "horizontal-distribute" \| "hourglass-active" \| "hourglass-expired" \| "image-chips" \| "image-collection-explorer" \| "image-display-order" \| "image-layer" \| "image-magnifying-glass" \| "image-mensuration" \| "image-pin" \| "image-plus" \| "image-segmentation" \| "image-server" \| "image-space" \| "image-unit" \| "increase-link-chart-symbol-size" \| "information-f" \| "information-letter" \| "initiative-template" \| "joined-view-layer" \| "knowledge-graph" \| "knowledge-graph-dashboard" \| "knowledge-graph-data-model" \| "knowledge-graph-data-store" \| "knowledge-graph-export" \| "knowledge-graph-import" \| "knowledge-graph-new" \| "knowledge-graph-relationship" \| "knowledge-layer" \| "knowledge-server" \| "knowledge-studio" \| "label-off" \| "language-translate" \| "lasso-select" \| "layer-basemap" \| "layer-broken" \| "layer-filter" \| "layer-graphics" \| "layer-hide" \| "layer-kml" \| "layer-line" \| "layer-line-service" \| "layer-map" \| "layer-map-service" \| "layer-points" \| "layer-polygon" \| "layer-polygon-service" \| "layer-service" \| "layer-settings" \| "layer-zoom-to" \| "layers-editable" \| "layers-f" \| "layers-reference" \| "layout-compact" \| "layout-horizontal" \| "layout-spacious" \| "layout-vertical" \| "left-align" \| "left-edge" \| "left-left" \| "left-right" \| "legend-left" \| "legend-plus" \| "legend-right" \| "light-rain" \| "light-snow" \| "line-check" \| "line-dashed" \| "line-dotted" \| "line-of-sight" \| "line-solid" \| "line-straight" \| "link-chart" \| "link-chart-expand" \| "link-chart-from-template" \| "list-bullet" \| "list-button" \| "list-check" \| "list-check-all" \| "list-merge" \| "list-number" \| "list-number-rtl" \| "list-radio" \| "list-rectangle" \| "list-show-all" \| "livestream-video-layer" \| "location-sharing" \| "location-sharing-f" \| "location-sharing-off" \| "lock-f" \| "ltr-elements-align" \| "ltr-paragraph-align" \| "magnifying-glass" \| "magnifying-glass-minus" \| "magnifying-glass-plus" \| "map-contents" \| "map-from-template" \| "map-level-settings" \| "map-pin" \| "map-space" \| "mask-inside" \| "mask-outside" \| "maximum-graph" \| "maximum-territory-distance" \| "measure-area" \| "measure-building-height-shadow" \| "measure-building-height-top-base" \| "measure-building-height-top-shadow" \| "measure-line" \| "media-layer" \| "mega-phone" \| "members-brackets" \| "merge-details" \| "merge-on-highway" \| "merge-on-highway-right" \| "merge-units" \| "microphone-plus" \| "min-distance-between-centers" \| "minimum-graph" \| "minus-circle" \| "minus-circle-f" \| "minus-square" \| "minus-square-f" \| "miscellaneous-collection" \| "mission-server" \| "mobile-off" \| "mobile-vibrate" \| "model-edit" \| "modify-associations" \| "move-from-basemap" \| "move-to-basemap" \| "move-up" \| "move-up-all" \| "multidimensional-raster" \| "multiple-variables" \| "music-note" \| "new-link-chart" \| "new-model" \| "new-raster-function-template" \| "new-training" \| "no-attachment" \| "no-image" \| "no-map" \| "nodes-link" \| "nodes-merge" \| "nodes-unlink" \| "nodes-unmerge" \| "notebook-server" \| "notebook-snapshot" \| "notepad-add" \| "notepad-edit" \| "number-circle1" \| "number-circle1-f" \| "number-circle2" \| "number-circle2-f" \| "number-circle3" \| "number-circle3-f" \| "number-circle4" \| "number-circle4-f" \| "number-circle5" \| "number-circle5-f" \| "number-circle6" \| "number-circle6-f" \| "number-circle7" \| "number-circle7-f" \| "number-circle8" \| "number-circle8-f" \| "number-circle9" \| "number-circle9-f" \| "number-of-territories" \| "object-detection" \| "objectstore-data-store" \| "on-the-ground-elevation" \| "open-book" \| "oriented-imagery-layer" \| "oriented-imagery-widget" \| "overlap-features" \| "overwrite-features" \| "overwrite-project" \| "paint-bucket" \| "palette-check" \| "pan-drag" \| "parcel-layer" \| "partly-cloudy" \| "paste-with-attribute" \| "paste-without-attribute" \| "pause-f" \| "pen-mark" \| "pen-mark-plus" \| "pen-tip" \| "pencil-mark" \| "pencil-mark-plus" \| "pencil-square" \| "pencil-tip" \| "personal-homepage" \| "pie-chart" \| "pin-plus" \| "pin-tear" \| "pin-tear-f" \| "play-f" \| "plus-circle" \| "plus-square" \| "point-line" \| "polygon-area" \| "polygon-line-check" \| "polygon-select" \| "polygon-vertices" \| "pop-up1" \| "pop-up-blank" \| "pop-up-blank-f" \| "premium-content-user-credit" \| "presentation-x" \| "print-preview" \| "processing-templates" \| "profile-variables" \| "project-mission" \| "project-template" \| "puzzle-piece" \| "qr-code" \| "qt-code" \| "question-f" \| "question-mark" \| "radial-tree-link-chart-layout" \| "rain-snow" \| "rain-thunder" \| "ramp-left" \| "ramp-right" \| "raster-analysis" \| "raster-function" \| "raster-function-template" \| "raster-function-template-play" \| "read-only-non-editable" \| "rectangle-area" \| "rectangle-plus" \| "recycle-bin" \| "refresh-f" \| "relational-data-store" \| "relative-direction" \| "relative-to-ground-elevation" \| "relative-to-scene-elevation" \| "remove-from-list" \| "remove-linkchart" \| "reorder-cards" \| "reorder-grid" \| "reorder-stack" \| "replace-image" \| "reshape-add-geometry" \| "reshape-subtract-geometry" \| "reshape-tool" \| "resize-area" \| "reverse-f" \| "ribbon-rosette" \| "right-align" \| "right-angle" \| "right-edge" \| "right-left" \| "right-right" \| "rings-largest" \| "rings-smallest" \| "rings-threshold" \| "rings-x-bar" \| "road-sign" \| "rotate-device" \| "round-about" \| "round-about-right" \| "rounded-rectangle" \| "route-from" \| "route-to" \| "rss-f" \| "rtl-elements-align" \| "rtl-paragraph-align" \| "running-outline" \| "rural-driving-distance" \| "rural-driving-time" \| "satellite0-f" \| "satellite1-f" \| "satellite2-f" \| "satellite3-f" \| "save-as" \| "scan-area" \| "scan-barcode" \| "scan-corridor" \| "scan-crosshatch" \| "scan-perimeter" \| "scan-vertical" \| "screenshot-mode" \| "select-by-attributes" \| "select-category" \| "select-column" \| "select-range" \| "select-visible" \| "selected-items-filter" \| "selection-filter" \| "selection-manager" \| "selection-set" \| "selection-x" \| "send-backwards" \| "send-to-back" \| "serial-port" \| "server-lock" \| "share-ios" \| "sharp-left" \| "sharp-right" \| "shield-coin" \| "shopping-cart" \| "show-all-parameters" \| "show-column" \| "show-derived-value" \| "show-multiple-layers-at-a-time" \| "show-one-layer-at-a-time" \| "show-required-parameters" \| "sign-in" \| "sign-out" \| "simple-link-chart-layout" \| "sky-plot" \| "sliders-horizontal" \| "smart-camera" \| "smart-form" \| "smart-tree-link-chart-layout" \| "snap-to-grid" \| "snap-to-pixel" \| "snap-to-point" \| "snow-thunder" \| "sort-ascending" \| "sort-ascending-arrow" \| "sort-descending" \| "sort-descending-arrow" \| "sound-low" \| "sound-off" \| "sound-unavailable" \| "spatiotemporal-data-store" \| "speech-bubble" \| "speech-bubble-check" \| "speech-bubble-exclamation" \| "speech-bubble-like" \| "speech-bubble-plus" \| "speech-bubble-social" \| "speech-bubbles" \| "split-features" \| "split-geometry" \| "split-units" \| "square-f" \| "square-area" \| "square-inset-large" \| "square-inset-medium" \| "square-inset-small" \| "stairs-down" \| "stairs-up" \| "star-f" \| "star-circle" \| "stop-square" \| "stop-square-f" \| "stored-as-new-query" \| "stored-query" \| "sub-fields" \| "subheading-rtl" \| "suitability-analysis-output" \| "summarize-center-and-dispersion1" \| "summarize-center-and-dispersion2" \| "summarize-center-and-dispersion3" \| "system-management" \| "tabbed-view" \| "take-pedestrian-ramp" \| "territory-buffer-distance" \| "test-data" \| "text-bold" \| "text-button" \| "text-dashed-underline" \| "text-large" \| "text-medium" \| "text-paragraph-large" \| "text-small" \| "text-solid-underline" \| "three-by-one-grid" \| "three-by-three-grid" \| "three-by-two-grid" \| "thumbs-down" \| "thumbs-up" \| "tile-cache-data-store" \| "tile-layer" \| "tiled-imagery-layer" \| "time-filter" \| "time-zone" \| "toggle-off" \| "toggle-on" \| "tour-pin-tear" \| "transverse-hexagon" \| "trapezoid-area" \| "trucking-distance" \| "trucking-time" \| "u-turn" \| "u-turn-right" \| "ungroup-items" \| "ungroup-layers" \| "ungroup-layout-elements" \| "update-features" \| "update-project" \| "upload-to" \| "urban-model" \| "usb-security-key" \| "user-calendar" \| "user-down" \| "user-key" \| "user-minus" \| "user-plus" \| "user-to-device" \| "user-up" \| "user-x" \| "utility-network" \| "utility-network-trace" \| "validate-utility-network-topology" \| "vertex-check" \| "vertex-edit" \| "vertex-gps" \| "vertex-move" \| "vertex-plus" \| "vertex-x" \| "vertical-distribute" \| "video-layer" \| "video-plus" \| "video-server" \| "video-single-server" \| "video-web" \| "view-associations" \| "view-hide" \| "view-mixed" \| "view-visible" \| "walk-through-door" \| "walking-distance" \| "walking-time" \| "widgets-group" \| "widgets-source" \| "widgets-tabs" \| "workflow-diagram" \| "workflow-manager-server" \| "x-axis-guide" \| "x-bar" \| "x-circle" \| "x-circle-f" \| "x-octagon" \| "x-octagon-f" \| "y-axis-guide" \| "zoom-in-fixed" \| "zoom-out-fixed" \| "zoom-to-object"` | `undefined` | -| `iconFlipRtl` | `icon-flip-rtl` | Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). | `"both" \| "end" \| "start"` | `undefined` | -| `iconStart` | `icon-start` | Specifies an icon to display at the start of the component. | `CamelCaseIcons \| "date-time" \| "i12-x" \| "i14-x" \| "i18-x" \| "i1-x" \| "i2-d-explore" \| "i2-x" \| "i360-view" \| "i3-d-glasses" \| "i4-x" \| "i8-x" \| "a-z" \| "a-z-down" \| "a-z-up" \| "a3-landscape" \| "a3-portrait" \| "a4-landscape" \| "a4-portrait" \| "absolute-direction" \| "absolute-elevation" \| "access-string-results" \| "activity-monitor" \| "actual-size" \| "add-and-update-features" \| "add-constant" \| "add-features" \| "add-in" \| "add-in-edit" \| "add-in-new" \| "add-layer" \| "add-layer-service" \| "add-raster-variable" \| "add-rasters" \| "add-reaction" \| "add-text" \| "add-to-model" \| "address-book" \| "alert-off-circle-f" \| "all-servers" \| "analysis-overlay" \| "annotate-tool" \| "ansi-a-landscape" \| "ansi-a-portrait" \| "ansi-b-landscape" \| "ansi-b-portrait" \| "antenna-height" \| "app-gear" \| "app-launcher" \| "app-run" \| "app-update" \| "apply-changes" \| "apply-selection-to-existing-view" \| "arcgis-data-store" \| "arcgis-online" \| "arrow-bold-down" \| "arrow-bold-left" \| "arrow-bold-right" \| "arrow-bold-up" \| "arrow-circle-down" \| "arrow-circle-down-f" \| "arrow-double-diagonal1" \| "arrow-double-diagonal2" \| "arrow-double-horizontal" \| "arrow-double-vertical" \| "arrow-down" \| "arrow-down-left" \| "arrow-down-right" \| "arrow-left" \| "arrow-right" \| "arrow-right-left" \| "arrow-up" \| "arrow-up-down" \| "arrow-up-left" \| "arrow-up-right" \| "asterisk-large" \| "asterisk-small" \| "attachment-plus" \| "auto-layout" \| "battery-charging" \| "bear-left" \| "bear-right" \| "beginning-f" \| "bell-f" \| "bell-off" \| "bookmark-f" \| "border-radius-fully-rounded" \| "border-radius-rounded" \| "border-radius-sharp" \| "box-chart" \| "box-chart-series" \| "brackets-curly" \| "break-recurrence" \| "bring-forward" \| "bring-to-front" \| "browser-map" \| "brush-mark" \| "brush-mark-plus" \| "brush-tip" \| "bullet-point" \| "bullet-point-large" \| "camera-flash-off" \| "camera-flash-on" \| "camera-plus" \| "camera-switch-front-back" \| "camera-unlock" \| "caret-double-horizontal" \| "caret-double-vertical" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-square-down" \| "caret-square-left" \| "caret-square-right" \| "caret-square-up" \| "caret-up" \| "catalog-dataset" \| "center-align" \| "center-horizontal" \| "center-vertical" \| "change-detection" \| "change-font-size" \| "chart-gear" \| "chart-magnifying-glass" \| "check-circle" \| "check-circle-f" \| "check-extent" \| "check-layer" \| "check-shield" \| "check-square" \| "check-square-f" \| "chevron-down" \| "chevron-down-left" \| "chevron-down-right" \| "chevron-end" \| "chevron-left" \| "chevron-right" \| "chevron-start" \| "chevron-up" \| "chevron-up-left" \| "chevron-up-right" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chord-diagram" \| "circle-f" \| "circle-area" \| "circle-disallowed" \| "circle-inset-large" \| "circle-inset-medium" \| "circle-inset-small" \| "circle-pause" \| "circle-pause-f" \| "circle-stop" \| "circle-stop-f" \| "classify-objects" \| "classify-pixels" \| "clear-selection" \| "clipboard-brackets" \| "clock-down" \| "clock-forward" \| "clock-up" \| "cloud-data" \| "cloud-server" \| "code-branch" \| "code-branch-edit" \| "collaboration-distributed" \| "collaboration-user" \| "color-coded-map" \| "color-correction" \| "column-settings" \| "community-link-chart-layout" \| "compass-needle" \| "compass-north-circle" \| "conditional-rules" \| "conditional-rules-path" \| "conference-room" \| "configure-editing" \| "configure-grid-unit" \| "configure-popup" \| "content-full" \| "content-inline" \| "content-large" \| "content-medium" \| "content-minimal" \| "content-none" \| "content-side-by-side" \| "content-small" \| "contingent-values" \| "coordinate-system" \| "copy-to-clipboard" \| "credit-card" \| "cursor-click" \| "cursor-lock" \| "cursor-marquee" \| "cursor-minus" \| "cursor-plus" \| "cursor-selection" \| "custom-print" \| "cut-and-fill-volume-calculation" \| "data-card" \| "data-check" \| "data-clock-chart" \| "data-cloud" \| "data-folder" \| "data-magnifying-glass" \| "data-raster" \| "debug-script" \| "decrease-link-chart-symbol-size" \| "deep-learning" \| "deep-learning-project" \| "derived-value" \| "developer-credentials" \| "diamond-inset-large" \| "diamond-inset-medium" \| "diamond-inset-small" \| "dimensions-unit" \| "dimensions-wall" \| "display-selection-lock" \| "display-selection-unlock" \| "dissolve-features" \| "distance-type" \| "distribute-height-evenly" \| "distribute-width-evenly" \| "dock-bottom" \| "dock-left" \| "dock-right" \| "double-float" \| "download-to" \| "drive-time" \| "drive-time-largest" \| "drive-time-smallest" \| "drive-time-threshold" \| "drive-time-x-bar" \| "driving-distance" \| "driving-time" \| "drone-fixed-wing" \| "drone-flying-wing" \| "drone-quadcopter" \| "drone-quadcopter-top" \| "edit-attributes" \| "edit-geometry" \| "elevator-down" \| "elevator-up" \| "ellipsis-circle" \| "email-address" \| "embedded-card" \| "embedded-content" \| "embedded-live-content" \| "employee-id" \| "enable-disable-feature-selection" \| "end-f" \| "escalator-down" \| "escalator-up" \| "exclamation-mark-circle" \| "exclamation-mark-circle-f" \| "exclamation-mark-triangle" \| "exclamation-mark-triangle-f" \| "exclamation-point" \| "exclamation-point-f" \| "exit-highway-left" \| "exit-highway-right" \| "expression-defined-color" \| "extend-trim" \| "extent-filter" \| "face-id" \| "feature-details" \| "feature-layer" \| "file-archive" \| "file-cad" \| "file-code" \| "file-csv" \| "file-data" \| "file-ecd" \| "file-excel" \| "file-gpx" \| "file-image" \| "file-kml" \| "file-magnifying-glass" \| "file-pdf" \| "file-pdf-plus" \| "file-pitemx" \| "file-ppt" \| "file-report" \| "file-report-generic" \| "file-shape" \| "file-sound" \| "file-sqlite" \| "file-text" \| "file-user" \| "file-video" \| "file-word" \| "file-xml" \| "file-zip" \| "files-csv-collection" \| "filter-expand" \| "find-path" \| "flip-vertical" \| "floor-plan" \| "folder-f" \| "folder-archive" \| "folder-magnifying-glass" \| "folder-move" \| "folder-new" \| "folder-open" \| "folder-open-f" \| "folder-plus" \| "folder-star" \| "folder-video" \| "follow-pause" \| "follow-play" \| "force-directed-link-chart-layout" \| "fork-left" \| "fork-middle" \| "fork-right" \| "form-dropdown" \| "form-elements" \| "form-field" \| "form-field-multiline" \| "form-field-off" \| "forward-f" \| "four-by-one-grid" \| "four-by-three-grid" \| "four-by-two-grid" \| "frame-export" \| "freehand-area" \| "full-screen" \| "full-screen-exit" \| "function-editor" \| "gauge-summary" \| "geoanalytics-server" \| "geoevent-server" \| "geographic-link-chart-layout" \| "geonet-question" \| "gis-server" \| "gps-off" \| "gps-on" \| "gps-on-f" \| "graph-axis" \| "graph-bar100-stacked" \| "graph-bar" \| "graph-bar-side-by-side" \| "graph-bar-stacked" \| "graph-box-mean-lines" \| "graph-box-side-by-side" \| "graph-guides" \| "graph-histogram" \| "graph-line-series" \| "graph-moving-average" \| "graph-pie-slice" \| "graph-scatter-plot" \| "graph-time-series" \| "grid-diamond" \| "grid-hexagon" \| "grid-triangle" \| "grid-unit" \| "ground-control-point" \| "group-form" \| "group-form-plus" \| "group-items" \| "group-layers" \| "group-layout-elements" \| "group-x" \| "h3-hexagon" \| "handle-vertical" \| "heading-layout" \| "heading-rtl" \| "heart-f" \| "heat-chart" \| "heavy-rain" \| "heavy-snow" \| "hexagon2-inset-large" \| "hexagon2-inset-medium" \| "hexagon2-inset-small" \| "hexagon-inset-large" \| "hexagon-inset-medium" \| "hexagon-inset-small" \| "hide-derived-value" \| "hide-empty" \| "hide-layers" \| "hide-parameters" \| "hierarchical-link-chart-layout" \| "highlighter-tip" \| "highway-change" \| "highway-change-right" \| "hillshade-effect" \| "horizontal-distribute" \| "hourglass-active" \| "hourglass-expired" \| "image-chips" \| "image-collection-explorer" \| "image-display-order" \| "image-layer" \| "image-magnifying-glass" \| "image-mensuration" \| "image-pin" \| "image-plus" \| "image-segmentation" \| "image-server" \| "image-space" \| "image-unit" \| "increase-link-chart-symbol-size" \| "information-f" \| "information-letter" \| "initiative-template" \| "joined-view-layer" \| "knowledge-graph" \| "knowledge-graph-dashboard" \| "knowledge-graph-data-model" \| "knowledge-graph-data-store" \| "knowledge-graph-export" \| "knowledge-graph-import" \| "knowledge-graph-new" \| "knowledge-graph-relationship" \| "knowledge-layer" \| "knowledge-server" \| "knowledge-studio" \| "label-off" \| "language-translate" \| "lasso-select" \| "layer-basemap" \| "layer-broken" \| "layer-filter" \| "layer-graphics" \| "layer-hide" \| "layer-kml" \| "layer-line" \| "layer-line-service" \| "layer-map" \| "layer-map-service" \| "layer-points" \| "layer-polygon" \| "layer-polygon-service" \| "layer-service" \| "layer-settings" \| "layer-zoom-to" \| "layers-editable" \| "layers-f" \| "layers-reference" \| "layout-compact" \| "layout-horizontal" \| "layout-spacious" \| "layout-vertical" \| "left-align" \| "left-edge" \| "left-left" \| "left-right" \| "legend-left" \| "legend-plus" \| "legend-right" \| "light-rain" \| "light-snow" \| "line-check" \| "line-dashed" \| "line-dotted" \| "line-of-sight" \| "line-solid" \| "line-straight" \| "link-chart" \| "link-chart-expand" \| "link-chart-from-template" \| "list-bullet" \| "list-button" \| "list-check" \| "list-check-all" \| "list-merge" \| "list-number" \| "list-number-rtl" \| "list-radio" \| "list-rectangle" \| "list-show-all" \| "livestream-video-layer" \| "location-sharing" \| "location-sharing-f" \| "location-sharing-off" \| "lock-f" \| "ltr-elements-align" \| "ltr-paragraph-align" \| "magnifying-glass" \| "magnifying-glass-minus" \| "magnifying-glass-plus" \| "map-contents" \| "map-from-template" \| "map-level-settings" \| "map-pin" \| "map-space" \| "mask-inside" \| "mask-outside" \| "maximum-graph" \| "maximum-territory-distance" \| "measure-area" \| "measure-building-height-shadow" \| "measure-building-height-top-base" \| "measure-building-height-top-shadow" \| "measure-line" \| "media-layer" \| "mega-phone" \| "members-brackets" \| "merge-details" \| "merge-on-highway" \| "merge-on-highway-right" \| "merge-units" \| "microphone-plus" \| "min-distance-between-centers" \| "minimum-graph" \| "minus-circle" \| "minus-circle-f" \| "minus-square" \| "minus-square-f" \| "miscellaneous-collection" \| "mission-server" \| "mobile-off" \| "mobile-vibrate" \| "model-edit" \| "modify-associations" \| "move-from-basemap" \| "move-to-basemap" \| "move-up" \| "move-up-all" \| "multidimensional-raster" \| "multiple-variables" \| "music-note" \| "new-link-chart" \| "new-model" \| "new-raster-function-template" \| "new-training" \| "no-attachment" \| "no-image" \| "no-map" \| "nodes-link" \| "nodes-merge" \| "nodes-unlink" \| "nodes-unmerge" \| "notebook-server" \| "notebook-snapshot" \| "notepad-add" \| "notepad-edit" \| "number-circle1" \| "number-circle1-f" \| "number-circle2" \| "number-circle2-f" \| "number-circle3" \| "number-circle3-f" \| "number-circle4" \| "number-circle4-f" \| "number-circle5" \| "number-circle5-f" \| "number-circle6" \| "number-circle6-f" \| "number-circle7" \| "number-circle7-f" \| "number-circle8" \| "number-circle8-f" \| "number-circle9" \| "number-circle9-f" \| "number-of-territories" \| "object-detection" \| "objectstore-data-store" \| "on-the-ground-elevation" \| "open-book" \| "oriented-imagery-layer" \| "oriented-imagery-widget" \| "overlap-features" \| "overwrite-features" \| "overwrite-project" \| "paint-bucket" \| "palette-check" \| "pan-drag" \| "parcel-layer" \| "partly-cloudy" \| "paste-with-attribute" \| "paste-without-attribute" \| "pause-f" \| "pen-mark" \| "pen-mark-plus" \| "pen-tip" \| "pencil-mark" \| "pencil-mark-plus" \| "pencil-square" \| "pencil-tip" \| "personal-homepage" \| "pie-chart" \| "pin-plus" \| "pin-tear" \| "pin-tear-f" \| "play-f" \| "plus-circle" \| "plus-square" \| "point-line" \| "polygon-area" \| "polygon-line-check" \| "polygon-select" \| "polygon-vertices" \| "pop-up1" \| "pop-up-blank" \| "pop-up-blank-f" \| "premium-content-user-credit" \| "presentation-x" \| "print-preview" \| "processing-templates" \| "profile-variables" \| "project-mission" \| "project-template" \| "puzzle-piece" \| "qr-code" \| "qt-code" \| "question-f" \| "question-mark" \| "radial-tree-link-chart-layout" \| "rain-snow" \| "rain-thunder" \| "ramp-left" \| "ramp-right" \| "raster-analysis" \| "raster-function" \| "raster-function-template" \| "raster-function-template-play" \| "read-only-non-editable" \| "rectangle-area" \| "rectangle-plus" \| "recycle-bin" \| "refresh-f" \| "relational-data-store" \| "relative-direction" \| "relative-to-ground-elevation" \| "relative-to-scene-elevation" \| "remove-from-list" \| "remove-linkchart" \| "reorder-cards" \| "reorder-grid" \| "reorder-stack" \| "replace-image" \| "reshape-add-geometry" \| "reshape-subtract-geometry" \| "reshape-tool" \| "resize-area" \| "reverse-f" \| "ribbon-rosette" \| "right-align" \| "right-angle" \| "right-edge" \| "right-left" \| "right-right" \| "rings-largest" \| "rings-smallest" \| "rings-threshold" \| "rings-x-bar" \| "road-sign" \| "rotate-device" \| "round-about" \| "round-about-right" \| "rounded-rectangle" \| "route-from" \| "route-to" \| "rss-f" \| "rtl-elements-align" \| "rtl-paragraph-align" \| "running-outline" \| "rural-driving-distance" \| "rural-driving-time" \| "satellite0-f" \| "satellite1-f" \| "satellite2-f" \| "satellite3-f" \| "save-as" \| "scan-area" \| "scan-barcode" \| "scan-corridor" \| "scan-crosshatch" \| "scan-perimeter" \| "scan-vertical" \| "screenshot-mode" \| "select-by-attributes" \| "select-category" \| "select-column" \| "select-range" \| "select-visible" \| "selected-items-filter" \| "selection-filter" \| "selection-manager" \| "selection-set" \| "selection-x" \| "send-backwards" \| "send-to-back" \| "serial-port" \| "server-lock" \| "share-ios" \| "sharp-left" \| "sharp-right" \| "shield-coin" \| "shopping-cart" \| "show-all-parameters" \| "show-column" \| "show-derived-value" \| "show-multiple-layers-at-a-time" \| "show-one-layer-at-a-time" \| "show-required-parameters" \| "sign-in" \| "sign-out" \| "simple-link-chart-layout" \| "sky-plot" \| "sliders-horizontal" \| "smart-camera" \| "smart-form" \| "smart-tree-link-chart-layout" \| "snap-to-grid" \| "snap-to-pixel" \| "snap-to-point" \| "snow-thunder" \| "sort-ascending" \| "sort-ascending-arrow" \| "sort-descending" \| "sort-descending-arrow" \| "sound-low" \| "sound-off" \| "sound-unavailable" \| "spatiotemporal-data-store" \| "speech-bubble" \| "speech-bubble-check" \| "speech-bubble-exclamation" \| "speech-bubble-like" \| "speech-bubble-plus" \| "speech-bubble-social" \| "speech-bubbles" \| "split-features" \| "split-geometry" \| "split-units" \| "square-f" \| "square-area" \| "square-inset-large" \| "square-inset-medium" \| "square-inset-small" \| "stairs-down" \| "stairs-up" \| "star-f" \| "star-circle" \| "stop-square" \| "stop-square-f" \| "stored-as-new-query" \| "stored-query" \| "sub-fields" \| "subheading-rtl" \| "suitability-analysis-output" \| "summarize-center-and-dispersion1" \| "summarize-center-and-dispersion2" \| "summarize-center-and-dispersion3" \| "system-management" \| "tabbed-view" \| "take-pedestrian-ramp" \| "territory-buffer-distance" \| "test-data" \| "text-bold" \| "text-button" \| "text-dashed-underline" \| "text-large" \| "text-medium" \| "text-paragraph-large" \| "text-small" \| "text-solid-underline" \| "three-by-one-grid" \| "three-by-three-grid" \| "three-by-two-grid" \| "thumbs-down" \| "thumbs-up" \| "tile-cache-data-store" \| "tile-layer" \| "tiled-imagery-layer" \| "time-filter" \| "time-zone" \| "toggle-off" \| "toggle-on" \| "tour-pin-tear" \| "transverse-hexagon" \| "trapezoid-area" \| "trucking-distance" \| "trucking-time" \| "u-turn" \| "u-turn-right" \| "ungroup-items" \| "ungroup-layers" \| "ungroup-layout-elements" \| "update-features" \| "update-project" \| "upload-to" \| "urban-model" \| "usb-security-key" \| "user-calendar" \| "user-down" \| "user-key" \| "user-minus" \| "user-plus" \| "user-to-device" \| "user-up" \| "user-x" \| "utility-network" \| "utility-network-trace" \| "validate-utility-network-topology" \| "vertex-check" \| "vertex-edit" \| "vertex-gps" \| "vertex-move" \| "vertex-plus" \| "vertex-x" \| "vertical-distribute" \| "video-layer" \| "video-plus" \| "video-server" \| "video-single-server" \| "video-web" \| "view-associations" \| "view-hide" \| "view-mixed" \| "view-visible" \| "walk-through-door" \| "walking-distance" \| "walking-time" \| "widgets-group" \| "widgets-source" \| "widgets-tabs" \| "workflow-diagram" \| "workflow-manager-server" \| "x-axis-guide" \| "x-bar" \| "x-circle" \| "x-circle-f" \| "x-octagon" \| "x-octagon-f" \| "y-axis-guide" \| "zoom-in-fixed" \| "zoom-out-fixed" \| "zoom-to-object"` | `undefined` | -| `label` | `label` | Accessible name for the component. | `string` | `undefined` | -| `rel` | `rel` | Specifies the relationship to the linked document defined in `href`. | `string` | `undefined` | -| `selected` | `selected` | When `true`, the component is selected. | `boolean` | `false` | -| `target` | `target` | Specifies the frame or window to open the linked document. | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `href` | `href` | Specifies the URL of the linked resource, which can be set as an absolute or relative path. Determines if the component will render as an anchor. | `string` | `undefined` | +| `iconEnd` | `icon-end` | Specifies an icon to display at the end of the component. | `string` | `undefined` | +| `iconFlipRtl` | `icon-flip-rtl` | Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). | `"both" \| "end" \| "start"` | `undefined` | +| `iconStart` | `icon-start` | Specifies an icon to display at the start of the component. | `string` | `undefined` | +| `label` | `label` | Accessible name for the component. | `string` | `undefined` | +| `rel` | `rel` | Specifies the relationship to the linked document defined in `href`. | `string` | `undefined` | +| `selected` | `selected` | When `true`, the component is selected. | `boolean` | `false` | +| `target` | `target` | Specifies the frame or window to open the linked document. | `string` | `undefined` | ## Events diff --git a/packages/calcite-components/src/components/dropdown/dropdown.tsx b/packages/calcite-components/src/components/dropdown/dropdown.tsx index cca3ae0ee3d..2ac1b0420f0 100644 --- a/packages/calcite-components/src/components/dropdown/dropdown.tsx +++ b/packages/calcite-components/src/components/dropdown/dropdown.tsx @@ -11,7 +11,12 @@ import { VNode, Watch, } from "@stencil/core"; -import { focusElement, focusElementInGroup, toAriaBoolean } from "../../utils/dom"; +import { + focusElement, + focusElementInGroup, + focusFirstTabbable, + toAriaBoolean, +} from "../../utils/dom"; import { connectFloatingUI, defaultMenuPlacement, @@ -188,7 +193,7 @@ export class Dropdown @Method() async setFocus(): Promise { await componentFocusable(this); - this.el.focus(); + focusFirstTabbable(this.referenceEl); } //-------------------------------------------------------------------------- diff --git a/packages/calcite-components/src/components/fab/fab.tsx b/packages/calcite-components/src/components/fab/fab.tsx index 0b80f5f25c5..ae9f2abb8af 100755 --- a/packages/calcite-components/src/components/fab/fab.tsx +++ b/packages/calcite-components/src/components/fab/fab.tsx @@ -14,7 +14,7 @@ import { setUpLoadableComponent, } from "../../utils/loadable"; import { Appearance, Kind, Scale } from "../interfaces"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { CSS, ICONS } from "./resources"; @Component({ @@ -50,7 +50,7 @@ export class Fab implements InteractiveComponent, LoadableComponent { * * @default "plus" */ - @Prop({ reflect: true }) icon: IconName = ICONS.plus; + @Prop({ reflect: true }) icon: IconNameOrString = ICONS.plus; /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl = false; diff --git a/packages/calcite-components/src/components/fab/readme.md b/packages/calcite-components/src/components/fab/readme.md index 4a6b02785ee..cdd36a7833f 100644 --- a/packages/calcite-components/src/components/fab/readme.md +++ b/packages/calcite-components/src/components/fab/readme.md @@ -6,18 +6,18 @@ For comprehensive guidance on using and implementing `calcite-fab`, refer to the ## Properties -| Property | Attribute | Description | Type | Default | -| ------------- | --------------- | -------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | -| `appearance` | `appearance` | Specifies the appearance style of the component. | `"outline-fill" \| "solid"` | `"solid"` | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `icon` | `icon` | Specifies an icon to display. | `CamelCaseIcons \| "date-time" \| "i12-x" \| "i14-x" \| "i18-x" \| "i1-x" \| "i2-d-explore" \| "i2-x" \| "i360-view" \| "i3-d-glasses" \| "i4-x" \| "i8-x" \| "a-z" \| "a-z-down" \| "a-z-up" \| "a3-landscape" \| "a3-portrait" \| "a4-landscape" \| "a4-portrait" \| "absolute-direction" \| "absolute-elevation" \| "access-string-results" \| "activity-monitor" \| "actual-size" \| "add-and-update-features" \| "add-constant" \| "add-features" \| "add-in" \| "add-in-edit" \| "add-in-new" \| "add-layer" \| "add-layer-service" \| "add-raster-variable" \| "add-rasters" \| "add-reaction" \| "add-text" \| "add-to-model" \| "address-book" \| "alert-off-circle-f" \| "all-servers" \| "analysis-overlay" \| "annotate-tool" \| "ansi-a-landscape" \| "ansi-a-portrait" \| "ansi-b-landscape" \| "ansi-b-portrait" \| "antenna-height" \| "app-gear" \| "app-launcher" \| "app-run" \| "app-update" \| "apply-changes" \| "apply-selection-to-existing-view" \| "arcgis-data-store" \| "arcgis-online" \| "arrow-bold-down" \| "arrow-bold-left" \| "arrow-bold-right" \| "arrow-bold-up" \| "arrow-circle-down" \| "arrow-circle-down-f" \| "arrow-double-diagonal1" \| "arrow-double-diagonal2" \| "arrow-double-horizontal" \| "arrow-double-vertical" \| "arrow-down" \| "arrow-down-left" \| "arrow-down-right" \| "arrow-left" \| "arrow-right" \| "arrow-right-left" \| "arrow-up" \| "arrow-up-down" \| "arrow-up-left" \| "arrow-up-right" \| "asterisk-large" \| "asterisk-small" \| "attachment-plus" \| "auto-layout" \| "battery-charging" \| "bear-left" \| "bear-right" \| "beginning-f" \| "bell-f" \| "bell-off" \| "bookmark-f" \| "border-radius-fully-rounded" \| "border-radius-rounded" \| "border-radius-sharp" \| "box-chart" \| "box-chart-series" \| "brackets-curly" \| "break-recurrence" \| "bring-forward" \| "bring-to-front" \| "browser-map" \| "brush-mark" \| "brush-mark-plus" \| "brush-tip" \| "bullet-point" \| "bullet-point-large" \| "camera-flash-off" \| "camera-flash-on" \| "camera-plus" \| "camera-switch-front-back" \| "camera-unlock" \| "caret-double-horizontal" \| "caret-double-vertical" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-square-down" \| "caret-square-left" \| "caret-square-right" \| "caret-square-up" \| "caret-up" \| "catalog-dataset" \| "center-align" \| "center-horizontal" \| "center-vertical" \| "change-detection" \| "change-font-size" \| "chart-gear" \| "chart-magnifying-glass" \| "check-circle" \| "check-circle-f" \| "check-extent" \| "check-layer" \| "check-shield" \| "check-square" \| "check-square-f" \| "chevron-down" \| "chevron-down-left" \| "chevron-down-right" \| "chevron-end" \| "chevron-left" \| "chevron-right" \| "chevron-start" \| "chevron-up" \| "chevron-up-left" \| "chevron-up-right" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chord-diagram" \| "circle-f" \| "circle-area" \| "circle-disallowed" \| "circle-inset-large" \| "circle-inset-medium" \| "circle-inset-small" \| "circle-pause" \| "circle-pause-f" \| "circle-stop" \| "circle-stop-f" \| "classify-objects" \| "classify-pixels" \| "clear-selection" \| "clipboard-brackets" \| "clock-down" \| "clock-forward" \| "clock-up" \| "cloud-data" \| "cloud-server" \| "code-branch" \| "code-branch-edit" \| "collaboration-distributed" \| "collaboration-user" \| "color-coded-map" \| "color-correction" \| "column-settings" \| "community-link-chart-layout" \| "compass-needle" \| "compass-north-circle" \| "conditional-rules" \| "conditional-rules-path" \| "conference-room" \| "configure-editing" \| "configure-grid-unit" \| "configure-popup" \| "content-full" \| "content-inline" \| "content-large" \| "content-medium" \| "content-minimal" \| "content-none" \| "content-side-by-side" \| "content-small" \| "contingent-values" \| "coordinate-system" \| "copy-to-clipboard" \| "credit-card" \| "cursor-click" \| "cursor-lock" \| "cursor-marquee" \| "cursor-minus" \| "cursor-plus" \| "cursor-selection" \| "custom-print" \| "cut-and-fill-volume-calculation" \| "data-card" \| "data-check" \| "data-clock-chart" \| "data-cloud" \| "data-folder" \| "data-magnifying-glass" \| "data-raster" \| "debug-script" \| "decrease-link-chart-symbol-size" \| "deep-learning" \| "deep-learning-project" \| "derived-value" \| "developer-credentials" \| "diamond-inset-large" \| "diamond-inset-medium" \| "diamond-inset-small" \| "dimensions-unit" \| "dimensions-wall" \| "display-selection-lock" \| "display-selection-unlock" \| "dissolve-features" \| "distance-type" \| "distribute-height-evenly" \| "distribute-width-evenly" \| "dock-bottom" \| "dock-left" \| "dock-right" \| "double-float" \| "download-to" \| "drive-time" \| "drive-time-largest" \| "drive-time-smallest" \| "drive-time-threshold" \| "drive-time-x-bar" \| "driving-distance" \| "driving-time" \| "drone-fixed-wing" \| "drone-flying-wing" \| "drone-quadcopter" \| "drone-quadcopter-top" \| "edit-attributes" \| "edit-geometry" \| "elevator-down" \| "elevator-up" \| "ellipsis-circle" \| "email-address" \| "embedded-card" \| "embedded-content" \| "embedded-live-content" \| "employee-id" \| "enable-disable-feature-selection" \| "end-f" \| "escalator-down" \| "escalator-up" \| "exclamation-mark-circle" \| "exclamation-mark-circle-f" \| "exclamation-mark-triangle" \| "exclamation-mark-triangle-f" \| "exclamation-point" \| "exclamation-point-f" \| "exit-highway-left" \| "exit-highway-right" \| "expression-defined-color" \| "extend-trim" \| "extent-filter" \| "face-id" \| "feature-details" \| "feature-layer" \| "file-archive" \| "file-cad" \| "file-code" \| "file-csv" \| "file-data" \| "file-ecd" \| "file-excel" \| "file-gpx" \| "file-image" \| "file-kml" \| "file-magnifying-glass" \| "file-pdf" \| "file-pdf-plus" \| "file-pitemx" \| "file-ppt" \| "file-report" \| "file-report-generic" \| "file-shape" \| "file-sound" \| "file-sqlite" \| "file-text" \| "file-user" \| "file-video" \| "file-word" \| "file-xml" \| "file-zip" \| "files-csv-collection" \| "filter-expand" \| "find-path" \| "flip-vertical" \| "floor-plan" \| "folder-f" \| "folder-archive" \| "folder-magnifying-glass" \| "folder-move" \| "folder-new" \| "folder-open" \| "folder-open-f" \| "folder-plus" \| "folder-star" \| "folder-video" \| "follow-pause" \| "follow-play" \| "force-directed-link-chart-layout" \| "fork-left" \| "fork-middle" \| "fork-right" \| "form-dropdown" \| "form-elements" \| "form-field" \| "form-field-multiline" \| "form-field-off" \| "forward-f" \| "four-by-one-grid" \| "four-by-three-grid" \| "four-by-two-grid" \| "frame-export" \| "freehand-area" \| "full-screen" \| "full-screen-exit" \| "function-editor" \| "gauge-summary" \| "geoanalytics-server" \| "geoevent-server" \| "geographic-link-chart-layout" \| "geonet-question" \| "gis-server" \| "gps-off" \| "gps-on" \| "gps-on-f" \| "graph-axis" \| "graph-bar100-stacked" \| "graph-bar" \| "graph-bar-side-by-side" \| "graph-bar-stacked" \| "graph-box-mean-lines" \| "graph-box-side-by-side" \| "graph-guides" \| "graph-histogram" \| "graph-line-series" \| "graph-moving-average" \| "graph-pie-slice" \| "graph-scatter-plot" \| "graph-time-series" \| "grid-diamond" \| "grid-hexagon" \| "grid-triangle" \| "grid-unit" \| "ground-control-point" \| "group-form" \| "group-form-plus" \| "group-items" \| "group-layers" \| "group-layout-elements" \| "group-x" \| "h3-hexagon" \| "handle-vertical" \| "heading-layout" \| "heading-rtl" \| "heart-f" \| "heat-chart" \| "heavy-rain" \| "heavy-snow" \| "hexagon2-inset-large" \| "hexagon2-inset-medium" \| "hexagon2-inset-small" \| "hexagon-inset-large" \| "hexagon-inset-medium" \| "hexagon-inset-small" \| "hide-derived-value" \| "hide-empty" \| "hide-layers" \| "hide-parameters" \| "hierarchical-link-chart-layout" \| "highlighter-tip" \| "highway-change" \| "highway-change-right" \| "hillshade-effect" \| "horizontal-distribute" \| "hourglass-active" \| "hourglass-expired" \| "image-chips" \| "image-collection-explorer" \| "image-display-order" \| "image-layer" \| "image-magnifying-glass" \| "image-mensuration" \| "image-pin" \| "image-plus" \| "image-segmentation" \| "image-server" \| "image-space" \| "image-unit" \| "increase-link-chart-symbol-size" \| "information-f" \| "information-letter" \| "initiative-template" \| "joined-view-layer" \| "knowledge-graph" \| "knowledge-graph-dashboard" \| "knowledge-graph-data-model" \| "knowledge-graph-data-store" \| "knowledge-graph-export" \| "knowledge-graph-import" \| "knowledge-graph-new" \| "knowledge-graph-relationship" \| "knowledge-layer" \| "knowledge-server" \| "knowledge-studio" \| "label-off" \| "language-translate" \| "lasso-select" \| "layer-basemap" \| "layer-broken" \| "layer-filter" \| "layer-graphics" \| "layer-hide" \| "layer-kml" \| "layer-line" \| "layer-line-service" \| "layer-map" \| "layer-map-service" \| "layer-points" \| "layer-polygon" \| "layer-polygon-service" \| "layer-service" \| "layer-settings" \| "layer-zoom-to" \| "layers-editable" \| "layers-f" \| "layers-reference" \| "layout-compact" \| "layout-horizontal" \| "layout-spacious" \| "layout-vertical" \| "left-align" \| "left-edge" \| "left-left" \| "left-right" \| "legend-left" \| "legend-plus" \| "legend-right" \| "light-rain" \| "light-snow" \| "line-check" \| "line-dashed" \| "line-dotted" \| "line-of-sight" \| "line-solid" \| "line-straight" \| "link-chart" \| "link-chart-expand" \| "link-chart-from-template" \| "list-bullet" \| "list-button" \| "list-check" \| "list-check-all" \| "list-merge" \| "list-number" \| "list-number-rtl" \| "list-radio" \| "list-rectangle" \| "list-show-all" \| "livestream-video-layer" \| "location-sharing" \| "location-sharing-f" \| "location-sharing-off" \| "lock-f" \| "ltr-elements-align" \| "ltr-paragraph-align" \| "magnifying-glass" \| "magnifying-glass-minus" \| "magnifying-glass-plus" \| "map-contents" \| "map-from-template" \| "map-level-settings" \| "map-pin" \| "map-space" \| "mask-inside" \| "mask-outside" \| "maximum-graph" \| "maximum-territory-distance" \| "measure-area" \| "measure-building-height-shadow" \| "measure-building-height-top-base" \| "measure-building-height-top-shadow" \| "measure-line" \| "media-layer" \| "mega-phone" \| "members-brackets" \| "merge-details" \| "merge-on-highway" \| "merge-on-highway-right" \| "merge-units" \| "microphone-plus" \| "min-distance-between-centers" \| "minimum-graph" \| "minus-circle" \| "minus-circle-f" \| "minus-square" \| "minus-square-f" \| "miscellaneous-collection" \| "mission-server" \| "mobile-off" \| "mobile-vibrate" \| "model-edit" \| "modify-associations" \| "move-from-basemap" \| "move-to-basemap" \| "move-up" \| "move-up-all" \| "multidimensional-raster" \| "multiple-variables" \| "music-note" \| "new-link-chart" \| "new-model" \| "new-raster-function-template" \| "new-training" \| "no-attachment" \| "no-image" \| "no-map" \| "nodes-link" \| "nodes-merge" \| "nodes-unlink" \| "nodes-unmerge" \| "notebook-server" \| "notebook-snapshot" \| "notepad-add" \| "notepad-edit" \| "number-circle1" \| "number-circle1-f" \| "number-circle2" \| "number-circle2-f" \| "number-circle3" \| "number-circle3-f" \| "number-circle4" \| "number-circle4-f" \| "number-circle5" \| "number-circle5-f" \| "number-circle6" \| "number-circle6-f" \| "number-circle7" \| "number-circle7-f" \| "number-circle8" \| "number-circle8-f" \| "number-circle9" \| "number-circle9-f" \| "number-of-territories" \| "object-detection" \| "objectstore-data-store" \| "on-the-ground-elevation" \| "open-book" \| "oriented-imagery-layer" \| "oriented-imagery-widget" \| "overlap-features" \| "overwrite-features" \| "overwrite-project" \| "paint-bucket" \| "palette-check" \| "pan-drag" \| "parcel-layer" \| "partly-cloudy" \| "paste-with-attribute" \| "paste-without-attribute" \| "pause-f" \| "pen-mark" \| "pen-mark-plus" \| "pen-tip" \| "pencil-mark" \| "pencil-mark-plus" \| "pencil-square" \| "pencil-tip" \| "personal-homepage" \| "pie-chart" \| "pin-plus" \| "pin-tear" \| "pin-tear-f" \| "play-f" \| "plus-circle" \| "plus-square" \| "point-line" \| "polygon-area" \| "polygon-line-check" \| "polygon-select" \| "polygon-vertices" \| "pop-up1" \| "pop-up-blank" \| "pop-up-blank-f" \| "premium-content-user-credit" \| "presentation-x" \| "print-preview" \| "processing-templates" \| "profile-variables" \| "project-mission" \| "project-template" \| "puzzle-piece" \| "qr-code" \| "qt-code" \| "question-f" \| "question-mark" \| "radial-tree-link-chart-layout" \| "rain-snow" \| "rain-thunder" \| "ramp-left" \| "ramp-right" \| "raster-analysis" \| "raster-function" \| "raster-function-template" \| "raster-function-template-play" \| "read-only-non-editable" \| "rectangle-area" \| "rectangle-plus" \| "recycle-bin" \| "refresh-f" \| "relational-data-store" \| "relative-direction" \| "relative-to-ground-elevation" \| "relative-to-scene-elevation" \| "remove-from-list" \| "remove-linkchart" \| "reorder-cards" \| "reorder-grid" \| "reorder-stack" \| "replace-image" \| "reshape-add-geometry" \| "reshape-subtract-geometry" \| "reshape-tool" \| "resize-area" \| "reverse-f" \| "ribbon-rosette" \| "right-align" \| "right-angle" \| "right-edge" \| "right-left" \| "right-right" \| "rings-largest" \| "rings-smallest" \| "rings-threshold" \| "rings-x-bar" \| "road-sign" \| "rotate-device" \| "round-about" \| "round-about-right" \| "rounded-rectangle" \| "route-from" \| "route-to" \| "rss-f" \| "rtl-elements-align" \| "rtl-paragraph-align" \| "running-outline" \| "rural-driving-distance" \| "rural-driving-time" \| "satellite0-f" \| "satellite1-f" \| "satellite2-f" \| "satellite3-f" \| "save-as" \| "scan-area" \| "scan-barcode" \| "scan-corridor" \| "scan-crosshatch" \| "scan-perimeter" \| "scan-vertical" \| "screenshot-mode" \| "select-by-attributes" \| "select-category" \| "select-column" \| "select-range" \| "select-visible" \| "selected-items-filter" \| "selection-filter" \| "selection-manager" \| "selection-set" \| "selection-x" \| "send-backwards" \| "send-to-back" \| "serial-port" \| "server-lock" \| "share-ios" \| "sharp-left" \| "sharp-right" \| "shield-coin" \| "shopping-cart" \| "show-all-parameters" \| "show-column" \| "show-derived-value" \| "show-multiple-layers-at-a-time" \| "show-one-layer-at-a-time" \| "show-required-parameters" \| "sign-in" \| "sign-out" \| "simple-link-chart-layout" \| "sky-plot" \| "sliders-horizontal" \| "smart-camera" \| "smart-form" \| "smart-tree-link-chart-layout" \| "snap-to-grid" \| "snap-to-pixel" \| "snap-to-point" \| "snow-thunder" \| "sort-ascending" \| "sort-ascending-arrow" \| "sort-descending" \| "sort-descending-arrow" \| "sound-low" \| "sound-off" \| "sound-unavailable" \| "spatiotemporal-data-store" \| "speech-bubble" \| "speech-bubble-check" \| "speech-bubble-exclamation" \| "speech-bubble-like" \| "speech-bubble-plus" \| "speech-bubble-social" \| "speech-bubbles" \| "split-features" \| "split-geometry" \| "split-units" \| "square-f" \| "square-area" \| "square-inset-large" \| "square-inset-medium" \| "square-inset-small" \| "stairs-down" \| "stairs-up" \| "star-f" \| "star-circle" \| "stop-square" \| "stop-square-f" \| "stored-as-new-query" \| "stored-query" \| "sub-fields" \| "subheading-rtl" \| "suitability-analysis-output" \| "summarize-center-and-dispersion1" \| "summarize-center-and-dispersion2" \| "summarize-center-and-dispersion3" \| "system-management" \| "tabbed-view" \| "take-pedestrian-ramp" \| "territory-buffer-distance" \| "test-data" \| "text-bold" \| "text-button" \| "text-dashed-underline" \| "text-large" \| "text-medium" \| "text-paragraph-large" \| "text-small" \| "text-solid-underline" \| "three-by-one-grid" \| "three-by-three-grid" \| "three-by-two-grid" \| "thumbs-down" \| "thumbs-up" \| "tile-cache-data-store" \| "tile-layer" \| "tiled-imagery-layer" \| "time-filter" \| "time-zone" \| "toggle-off" \| "toggle-on" \| "tour-pin-tear" \| "transverse-hexagon" \| "trapezoid-area" \| "trucking-distance" \| "trucking-time" \| "u-turn" \| "u-turn-right" \| "ungroup-items" \| "ungroup-layers" \| "ungroup-layout-elements" \| "update-features" \| "update-project" \| "upload-to" \| "urban-model" \| "usb-security-key" \| "user-calendar" \| "user-down" \| "user-key" \| "user-minus" \| "user-plus" \| "user-to-device" \| "user-up" \| "user-x" \| "utility-network" \| "utility-network-trace" \| "validate-utility-network-topology" \| "vertex-check" \| "vertex-edit" \| "vertex-gps" \| "vertex-move" \| "vertex-plus" \| "vertex-x" \| "vertical-distribute" \| "video-layer" \| "video-plus" \| "video-server" \| "video-single-server" \| "video-web" \| "view-associations" \| "view-hide" \| "view-mixed" \| "view-visible" \| "walk-through-door" \| "walking-distance" \| "walking-time" \| "widgets-group" \| "widgets-source" \| "widgets-tabs" \| "workflow-diagram" \| "workflow-manager-server" \| "x-axis-guide" \| "x-bar" \| "x-circle" \| "x-circle-f" \| "x-octagon" \| "x-octagon-f" \| "y-axis-guide" \| "zoom-in-fixed" \| "zoom-out-fixed" \| "zoom-to-object"` | `ICONS.plus` | -| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | -| `kind` | `kind` | Specifies the kind of the component, which will apply to border and background. | `"brand" \| "danger" \| "inverse" \| "neutral"` | `"brand"` | -| `label` | `label` | Accessible name for the component. | `string` | `undefined` | -| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `text` | `text` | Specifies text to accompany the component's icon. | `string` | `undefined` | -| `textEnabled` | `text-enabled` | When `true`, displays the `text` value in the component. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ------------- | --------------- | -------------------------------------------------------------------------------------------- | ----------------------------------------------- | ------------ | +| `appearance` | `appearance` | Specifies the appearance style of the component. | `"outline-fill" \| "solid"` | `"solid"` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `icon` | `icon` | Specifies an icon to display. | `string` | `ICONS.plus` | +| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | +| `kind` | `kind` | Specifies the kind of the component, which will apply to border and background. | `"brand" \| "danger" \| "inverse" \| "neutral"` | `"brand"` | +| `label` | `label` | Accessible name for the component. | `string` | `undefined` | +| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `text` | `text` | Specifies text to accompany the component's icon. | `string` | `undefined` | +| `textEnabled` | `text-enabled` | When `true`, displays the `text` value in the component. | `boolean` | `false` | ## Methods diff --git a/packages/calcite-components/src/components/functional/Validation.tsx b/packages/calcite-components/src/components/functional/Validation.tsx index e666b63a299..05d8b53636c 100644 --- a/packages/calcite-components/src/components/functional/Validation.tsx +++ b/packages/calcite-components/src/components/functional/Validation.tsx @@ -1,12 +1,12 @@ import { FunctionalComponent, h } from "@stencil/core"; import { JSXBase } from "@stencil/core/internal"; import { Scale, Status } from "../interfaces"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; interface ValidationProps extends JSXBase.HTMLAttributes { scale: Scale; status: Status; - icon?: IconName | boolean; + icon?: IconNameOrString | boolean; id?: string; message: string; } diff --git a/packages/calcite-components/src/components/icon/icon.tsx b/packages/calcite-components/src/components/icon/icon.tsx index 44f11c4ac70..942bd08878e 100644 --- a/packages/calcite-components/src/components/icon/icon.tsx +++ b/packages/calcite-components/src/components/icon/icon.tsx @@ -6,7 +6,7 @@ import { Scale } from "../interfaces"; import { isBrowser } from "../../utils/browser"; import { CSS } from "./resources"; import { fetchIcon, getCachedIconData, scaleToPx } from "./utils"; -import { IconName } from "./interfaces"; +import { IconNameOrString } from "./interfaces"; @Component({ tag: "calcite-icon", @@ -29,7 +29,7 @@ export class Icon { @Prop({ reflect: true, }) - icon: IconName = null; + icon: IconNameOrString = null; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). diff --git a/packages/calcite-components/src/components/icon/interfaces.ts b/packages/calcite-components/src/components/icon/interfaces.ts index 27071f99f02..3eec116ad83 100644 --- a/packages/calcite-components/src/components/icon/interfaces.ts +++ b/packages/calcite-components/src/components/icon/interfaces.ts @@ -13,3 +13,4 @@ type CamelCaseIcons = ExtractBaseIcon; type KebabCaseIcons = KebabCase; export type IconName = KebabCaseIcons | CamelCaseIcons; +export type IconNameOrString = IconName | string; diff --git a/packages/calcite-components/src/components/icon/readme.md b/packages/calcite-components/src/components/icon/readme.md index 3c352237ad9..3e2d71d7bf7 100644 --- a/packages/calcite-components/src/components/icon/readme.md +++ b/packages/calcite-components/src/components/icon/readme.md @@ -6,12 +6,12 @@ For comprehensive guidance on using and implementing `calcite-icon`, refer to th ## Properties -| Property | Attribute | Description | Type | Default | -| ----------- | ------------ | ------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `flipRtl` | `flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | -| `icon` | `icon` | Displays a specific icon. | `CamelCaseIcons \| "date-time" \| "i12-x" \| "i14-x" \| "i18-x" \| "i1-x" \| "i2-d-explore" \| "i2-x" \| "i360-view" \| "i3-d-glasses" \| "i4-x" \| "i8-x" \| "a-z" \| "a-z-down" \| "a-z-up" \| "a3-landscape" \| "a3-portrait" \| "a4-landscape" \| "a4-portrait" \| "absolute-direction" \| "absolute-elevation" \| "access-string-results" \| "activity-monitor" \| "actual-size" \| "add-and-update-features" \| "add-constant" \| "add-features" \| "add-in" \| "add-in-edit" \| "add-in-new" \| "add-layer" \| "add-layer-service" \| "add-raster-variable" \| "add-rasters" \| "add-reaction" \| "add-text" \| "add-to-model" \| "address-book" \| "alert-off-circle-f" \| "all-servers" \| "analysis-overlay" \| "annotate-tool" \| "ansi-a-landscape" \| "ansi-a-portrait" \| "ansi-b-landscape" \| "ansi-b-portrait" \| "antenna-height" \| "app-gear" \| "app-launcher" \| "app-run" \| "app-update" \| "apply-changes" \| "apply-selection-to-existing-view" \| "arcgis-data-store" \| "arcgis-online" \| "arrow-bold-down" \| "arrow-bold-left" \| "arrow-bold-right" \| "arrow-bold-up" \| "arrow-circle-down" \| "arrow-circle-down-f" \| "arrow-double-diagonal1" \| "arrow-double-diagonal2" \| "arrow-double-horizontal" \| "arrow-double-vertical" \| "arrow-down" \| "arrow-down-left" \| "arrow-down-right" \| "arrow-left" \| "arrow-right" \| "arrow-right-left" \| "arrow-up" \| "arrow-up-down" \| "arrow-up-left" \| "arrow-up-right" \| "asterisk-large" \| "asterisk-small" \| "attachment-plus" \| "auto-layout" \| "battery-charging" \| "bear-left" \| "bear-right" \| "beginning-f" \| "bell-f" \| "bell-off" \| "bookmark-f" \| "border-radius-fully-rounded" \| "border-radius-rounded" \| "border-radius-sharp" \| "box-chart" \| "box-chart-series" \| "brackets-curly" \| "break-recurrence" \| "bring-forward" \| "bring-to-front" \| "browser-map" \| "brush-mark" \| "brush-mark-plus" \| "brush-tip" \| "bullet-point" \| "bullet-point-large" \| "camera-flash-off" \| "camera-flash-on" \| "camera-plus" \| "camera-switch-front-back" \| "camera-unlock" \| "caret-double-horizontal" \| "caret-double-vertical" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-square-down" \| "caret-square-left" \| "caret-square-right" \| "caret-square-up" \| "caret-up" \| "catalog-dataset" \| "center-align" \| "center-horizontal" \| "center-vertical" \| "change-detection" \| "change-font-size" \| "chart-gear" \| "chart-magnifying-glass" \| "check-circle" \| "check-circle-f" \| "check-extent" \| "check-layer" \| "check-shield" \| "check-square" \| "check-square-f" \| "chevron-down" \| "chevron-down-left" \| "chevron-down-right" \| "chevron-end" \| "chevron-left" \| "chevron-right" \| "chevron-start" \| "chevron-up" \| "chevron-up-left" \| "chevron-up-right" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chord-diagram" \| "circle-f" \| "circle-area" \| "circle-disallowed" \| "circle-inset-large" \| "circle-inset-medium" \| "circle-inset-small" \| "circle-pause" \| "circle-pause-f" \| "circle-stop" \| "circle-stop-f" \| "classify-objects" \| "classify-pixels" \| "clear-selection" \| "clipboard-brackets" \| "clock-down" \| "clock-forward" \| "clock-up" \| "cloud-data" \| "cloud-server" \| "code-branch" \| "code-branch-edit" \| "collaboration-distributed" \| "collaboration-user" \| "color-coded-map" \| "color-correction" \| "column-settings" \| "community-link-chart-layout" \| "compass-needle" \| "compass-north-circle" \| "conditional-rules" \| "conditional-rules-path" \| "conference-room" \| "configure-editing" \| "configure-grid-unit" \| "configure-popup" \| "content-full" \| "content-inline" \| "content-large" \| "content-medium" \| "content-minimal" \| "content-none" \| "content-side-by-side" \| "content-small" \| "contingent-values" \| "coordinate-system" \| "copy-to-clipboard" \| "credit-card" \| "cursor-click" \| "cursor-lock" \| "cursor-marquee" \| "cursor-minus" \| "cursor-plus" \| "cursor-selection" \| "custom-print" \| "cut-and-fill-volume-calculation" \| "data-card" \| "data-check" \| "data-clock-chart" \| "data-cloud" \| "data-folder" \| "data-magnifying-glass" \| "data-raster" \| "debug-script" \| "decrease-link-chart-symbol-size" \| "deep-learning" \| "deep-learning-project" \| "derived-value" \| "developer-credentials" \| "diamond-inset-large" \| "diamond-inset-medium" \| "diamond-inset-small" \| "dimensions-unit" \| "dimensions-wall" \| "display-selection-lock" \| "display-selection-unlock" \| "dissolve-features" \| "distance-type" \| "distribute-height-evenly" \| "distribute-width-evenly" \| "dock-bottom" \| "dock-left" \| "dock-right" \| "double-float" \| "download-to" \| "drive-time" \| "drive-time-largest" \| "drive-time-smallest" \| "drive-time-threshold" \| "drive-time-x-bar" \| "driving-distance" \| "driving-time" \| "drone-fixed-wing" \| "drone-flying-wing" \| "drone-quadcopter" \| "drone-quadcopter-top" \| "edit-attributes" \| "edit-geometry" \| "elevator-down" \| "elevator-up" \| "ellipsis-circle" \| "email-address" \| "embedded-card" \| "embedded-content" \| "embedded-live-content" \| "employee-id" \| "enable-disable-feature-selection" \| "end-f" \| "escalator-down" \| "escalator-up" \| "exclamation-mark-circle" \| "exclamation-mark-circle-f" \| "exclamation-mark-triangle" \| "exclamation-mark-triangle-f" \| "exclamation-point" \| "exclamation-point-f" \| "exit-highway-left" \| "exit-highway-right" \| "expression-defined-color" \| "extend-trim" \| "extent-filter" \| "face-id" \| "feature-details" \| "feature-layer" \| "file-archive" \| "file-cad" \| "file-code" \| "file-csv" \| "file-data" \| "file-ecd" \| "file-excel" \| "file-gpx" \| "file-image" \| "file-kml" \| "file-magnifying-glass" \| "file-pdf" \| "file-pdf-plus" \| "file-pitemx" \| "file-ppt" \| "file-report" \| "file-report-generic" \| "file-shape" \| "file-sound" \| "file-sqlite" \| "file-text" \| "file-user" \| "file-video" \| "file-word" \| "file-xml" \| "file-zip" \| "files-csv-collection" \| "filter-expand" \| "find-path" \| "flip-vertical" \| "floor-plan" \| "folder-f" \| "folder-archive" \| "folder-magnifying-glass" \| "folder-move" \| "folder-new" \| "folder-open" \| "folder-open-f" \| "folder-plus" \| "folder-star" \| "folder-video" \| "follow-pause" \| "follow-play" \| "force-directed-link-chart-layout" \| "fork-left" \| "fork-middle" \| "fork-right" \| "form-dropdown" \| "form-elements" \| "form-field" \| "form-field-multiline" \| "form-field-off" \| "forward-f" \| "four-by-one-grid" \| "four-by-three-grid" \| "four-by-two-grid" \| "frame-export" \| "freehand-area" \| "full-screen" \| "full-screen-exit" \| "function-editor" \| "gauge-summary" \| "geoanalytics-server" \| "geoevent-server" \| "geographic-link-chart-layout" \| "geonet-question" \| "gis-server" \| "gps-off" \| "gps-on" \| "gps-on-f" \| "graph-axis" \| "graph-bar100-stacked" \| "graph-bar" \| "graph-bar-side-by-side" \| "graph-bar-stacked" \| "graph-box-mean-lines" \| "graph-box-side-by-side" \| "graph-guides" \| "graph-histogram" \| "graph-line-series" \| "graph-moving-average" \| "graph-pie-slice" \| "graph-scatter-plot" \| "graph-time-series" \| "grid-diamond" \| "grid-hexagon" \| "grid-triangle" \| "grid-unit" \| "ground-control-point" \| "group-form" \| "group-form-plus" \| "group-items" \| "group-layers" \| "group-layout-elements" \| "group-x" \| "h3-hexagon" \| "handle-vertical" \| "heading-layout" \| "heading-rtl" \| "heart-f" \| "heat-chart" \| "heavy-rain" \| "heavy-snow" \| "hexagon2-inset-large" \| "hexagon2-inset-medium" \| "hexagon2-inset-small" \| "hexagon-inset-large" \| "hexagon-inset-medium" \| "hexagon-inset-small" \| "hide-derived-value" \| "hide-empty" \| "hide-layers" \| "hide-parameters" \| "hierarchical-link-chart-layout" \| "highlighter-tip" \| "highway-change" \| "highway-change-right" \| "hillshade-effect" \| "horizontal-distribute" \| "hourglass-active" \| "hourglass-expired" \| "image-chips" \| "image-collection-explorer" \| "image-display-order" \| "image-layer" \| "image-magnifying-glass" \| "image-mensuration" \| "image-pin" \| "image-plus" \| "image-segmentation" \| "image-server" \| "image-space" \| "image-unit" \| "increase-link-chart-symbol-size" \| "information-f" \| "information-letter" \| "initiative-template" \| "joined-view-layer" \| "knowledge-graph" \| "knowledge-graph-dashboard" \| "knowledge-graph-data-model" \| "knowledge-graph-data-store" \| "knowledge-graph-export" \| "knowledge-graph-import" \| "knowledge-graph-new" \| "knowledge-graph-relationship" \| "knowledge-layer" \| "knowledge-server" \| "knowledge-studio" \| "label-off" \| "language-translate" \| "lasso-select" \| "layer-basemap" \| "layer-broken" \| "layer-filter" \| "layer-graphics" \| "layer-hide" \| "layer-kml" \| "layer-line" \| "layer-line-service" \| "layer-map" \| "layer-map-service" \| "layer-points" \| "layer-polygon" \| "layer-polygon-service" \| "layer-service" \| "layer-settings" \| "layer-zoom-to" \| "layers-editable" \| "layers-f" \| "layers-reference" \| "layout-compact" \| "layout-horizontal" \| "layout-spacious" \| "layout-vertical" \| "left-align" \| "left-edge" \| "left-left" \| "left-right" \| "legend-left" \| "legend-plus" \| "legend-right" \| "light-rain" \| "light-snow" \| "line-check" \| "line-dashed" \| "line-dotted" \| "line-of-sight" \| "line-solid" \| "line-straight" \| "link-chart" \| "link-chart-expand" \| "link-chart-from-template" \| "list-bullet" \| "list-button" \| "list-check" \| "list-check-all" \| "list-merge" \| "list-number" \| "list-number-rtl" \| "list-radio" \| "list-rectangle" \| "list-show-all" \| "livestream-video-layer" \| "location-sharing" \| "location-sharing-f" \| "location-sharing-off" \| "lock-f" \| "ltr-elements-align" \| "ltr-paragraph-align" \| "magnifying-glass" \| "magnifying-glass-minus" \| "magnifying-glass-plus" \| "map-contents" \| "map-from-template" \| "map-level-settings" \| "map-pin" \| "map-space" \| "mask-inside" \| "mask-outside" \| "maximum-graph" \| "maximum-territory-distance" \| "measure-area" \| "measure-building-height-shadow" \| "measure-building-height-top-base" \| "measure-building-height-top-shadow" \| "measure-line" \| "media-layer" \| "mega-phone" \| "members-brackets" \| "merge-details" \| "merge-on-highway" \| "merge-on-highway-right" \| "merge-units" \| "microphone-plus" \| "min-distance-between-centers" \| "minimum-graph" \| "minus-circle" \| "minus-circle-f" \| "minus-square" \| "minus-square-f" \| "miscellaneous-collection" \| "mission-server" \| "mobile-off" \| "mobile-vibrate" \| "model-edit" \| "modify-associations" \| "move-from-basemap" \| "move-to-basemap" \| "move-up" \| "move-up-all" \| "multidimensional-raster" \| "multiple-variables" \| "music-note" \| "new-link-chart" \| "new-model" \| "new-raster-function-template" \| "new-training" \| "no-attachment" \| "no-image" \| "no-map" \| "nodes-link" \| "nodes-merge" \| "nodes-unlink" \| "nodes-unmerge" \| "notebook-server" \| "notebook-snapshot" \| "notepad-add" \| "notepad-edit" \| "number-circle1" \| "number-circle1-f" \| "number-circle2" \| "number-circle2-f" \| "number-circle3" \| "number-circle3-f" \| "number-circle4" \| "number-circle4-f" \| "number-circle5" \| "number-circle5-f" \| "number-circle6" \| "number-circle6-f" \| "number-circle7" \| "number-circle7-f" \| "number-circle8" \| "number-circle8-f" \| "number-circle9" \| "number-circle9-f" \| "number-of-territories" \| "object-detection" \| "objectstore-data-store" \| "on-the-ground-elevation" \| "open-book" \| "oriented-imagery-layer" \| "oriented-imagery-widget" \| "overlap-features" \| "overwrite-features" \| "overwrite-project" \| "paint-bucket" \| "palette-check" \| "pan-drag" \| "parcel-layer" \| "partly-cloudy" \| "paste-with-attribute" \| "paste-without-attribute" \| "pause-f" \| "pen-mark" \| "pen-mark-plus" \| "pen-tip" \| "pencil-mark" \| "pencil-mark-plus" \| "pencil-square" \| "pencil-tip" \| "personal-homepage" \| "pie-chart" \| "pin-plus" \| "pin-tear" \| "pin-tear-f" \| "play-f" \| "plus-circle" \| "plus-square" \| "point-line" \| "polygon-area" \| "polygon-line-check" \| "polygon-select" \| "polygon-vertices" \| "pop-up1" \| "pop-up-blank" \| "pop-up-blank-f" \| "premium-content-user-credit" \| "presentation-x" \| "print-preview" \| "processing-templates" \| "profile-variables" \| "project-mission" \| "project-template" \| "puzzle-piece" \| "qr-code" \| "qt-code" \| "question-f" \| "question-mark" \| "radial-tree-link-chart-layout" \| "rain-snow" \| "rain-thunder" \| "ramp-left" \| "ramp-right" \| "raster-analysis" \| "raster-function" \| "raster-function-template" \| "raster-function-template-play" \| "read-only-non-editable" \| "rectangle-area" \| "rectangle-plus" \| "recycle-bin" \| "refresh-f" \| "relational-data-store" \| "relative-direction" \| "relative-to-ground-elevation" \| "relative-to-scene-elevation" \| "remove-from-list" \| "remove-linkchart" \| "reorder-cards" \| "reorder-grid" \| "reorder-stack" \| "replace-image" \| "reshape-add-geometry" \| "reshape-subtract-geometry" \| "reshape-tool" \| "resize-area" \| "reverse-f" \| "ribbon-rosette" \| "right-align" \| "right-angle" \| "right-edge" \| "right-left" \| "right-right" \| "rings-largest" \| "rings-smallest" \| "rings-threshold" \| "rings-x-bar" \| "road-sign" \| "rotate-device" \| "round-about" \| "round-about-right" \| "rounded-rectangle" \| "route-from" \| "route-to" \| "rss-f" \| "rtl-elements-align" \| "rtl-paragraph-align" \| "running-outline" \| "rural-driving-distance" \| "rural-driving-time" \| "satellite0-f" \| "satellite1-f" \| "satellite2-f" \| "satellite3-f" \| "save-as" \| "scan-area" \| "scan-barcode" \| "scan-corridor" \| "scan-crosshatch" \| "scan-perimeter" \| "scan-vertical" \| "screenshot-mode" \| "select-by-attributes" \| "select-category" \| "select-column" \| "select-range" \| "select-visible" \| "selected-items-filter" \| "selection-filter" \| "selection-manager" \| "selection-set" \| "selection-x" \| "send-backwards" \| "send-to-back" \| "serial-port" \| "server-lock" \| "share-ios" \| "sharp-left" \| "sharp-right" \| "shield-coin" \| "shopping-cart" \| "show-all-parameters" \| "show-column" \| "show-derived-value" \| "show-multiple-layers-at-a-time" \| "show-one-layer-at-a-time" \| "show-required-parameters" \| "sign-in" \| "sign-out" \| "simple-link-chart-layout" \| "sky-plot" \| "sliders-horizontal" \| "smart-camera" \| "smart-form" \| "smart-tree-link-chart-layout" \| "snap-to-grid" \| "snap-to-pixel" \| "snap-to-point" \| "snow-thunder" \| "sort-ascending" \| "sort-ascending-arrow" \| "sort-descending" \| "sort-descending-arrow" \| "sound-low" \| "sound-off" \| "sound-unavailable" \| "spatiotemporal-data-store" \| "speech-bubble" \| "speech-bubble-check" \| "speech-bubble-exclamation" \| "speech-bubble-like" \| "speech-bubble-plus" \| "speech-bubble-social" \| "speech-bubbles" \| "split-features" \| "split-geometry" \| "split-units" \| "square-f" \| "square-area" \| "square-inset-large" \| "square-inset-medium" \| "square-inset-small" \| "stairs-down" \| "stairs-up" \| "star-f" \| "star-circle" \| "stop-square" \| "stop-square-f" \| "stored-as-new-query" \| "stored-query" \| "sub-fields" \| "subheading-rtl" \| "suitability-analysis-output" \| "summarize-center-and-dispersion1" \| "summarize-center-and-dispersion2" \| "summarize-center-and-dispersion3" \| "system-management" \| "tabbed-view" \| "take-pedestrian-ramp" \| "territory-buffer-distance" \| "test-data" \| "text-bold" \| "text-button" \| "text-dashed-underline" \| "text-large" \| "text-medium" \| "text-paragraph-large" \| "text-small" \| "text-solid-underline" \| "three-by-one-grid" \| "three-by-three-grid" \| "three-by-two-grid" \| "thumbs-down" \| "thumbs-up" \| "tile-cache-data-store" \| "tile-layer" \| "tiled-imagery-layer" \| "time-filter" \| "time-zone" \| "toggle-off" \| "toggle-on" \| "tour-pin-tear" \| "transverse-hexagon" \| "trapezoid-area" \| "trucking-distance" \| "trucking-time" \| "u-turn" \| "u-turn-right" \| "ungroup-items" \| "ungroup-layers" \| "ungroup-layout-elements" \| "update-features" \| "update-project" \| "upload-to" \| "urban-model" \| "usb-security-key" \| "user-calendar" \| "user-down" \| "user-key" \| "user-minus" \| "user-plus" \| "user-to-device" \| "user-up" \| "user-x" \| "utility-network" \| "utility-network-trace" \| "validate-utility-network-topology" \| "vertex-check" \| "vertex-edit" \| "vertex-gps" \| "vertex-move" \| "vertex-plus" \| "vertex-x" \| "vertical-distribute" \| "video-layer" \| "video-plus" \| "video-server" \| "video-single-server" \| "video-web" \| "view-associations" \| "view-hide" \| "view-mixed" \| "view-visible" \| "walk-through-door" \| "walking-distance" \| "walking-time" \| "widgets-group" \| "widgets-source" \| "widgets-tabs" \| "workflow-diagram" \| "workflow-manager-server" \| "x-axis-guide" \| "x-bar" \| "x-circle" \| "x-circle-f" \| "x-octagon" \| "x-octagon-f" \| "y-axis-guide" \| "zoom-in-fixed" \| "zoom-out-fixed" \| "zoom-to-object"` | `null` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `textLabel` | `text-label` | Accessible name for the component. It is recommended to set this value if your icon is semantic. | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ----------- | ------------ | ------------------------------------------------------------------------------------------------ | ------------------- | ----------- | +| `flipRtl` | `flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | +| `icon` | `icon` | Displays a specific icon. | `string` | `null` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `textLabel` | `text-label` | Accessible name for the component. It is recommended to set this value if your icon is semantic. | `string` | `undefined` | ## CSS Custom Properties diff --git a/packages/calcite-components/src/components/icon/utils.ts b/packages/calcite-components/src/components/icon/utils.ts index 0602f44e0f7..91d418256cb 100644 --- a/packages/calcite-components/src/components/icon/utils.ts +++ b/packages/calcite-components/src/components/icon/utils.ts @@ -1,10 +1,10 @@ import { CalciteIconPath } from "@esri/calcite-ui-icons"; import { getAssetPath } from "@stencil/core"; import { Scale } from "../interfaces"; -import { IconName } from "./interfaces"; +import { IconNameOrString } from "./interfaces"; export interface FetchIconProps { - icon: IconName; + icon: IconNameOrString; scale: Scale; } diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx index 063196f811d..f0ffa1e9f23 100644 --- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx +++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx @@ -87,7 +87,7 @@ import { guid } from "../../utils/guid"; import { getIconScale } from "../../utils/component"; import { Status } from "../interfaces"; import { Validation } from "../functional/Validation"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { syncHiddenFormInput } from "../input/common/input"; import { isBrowser } from "../../utils/browser"; import { normalizeToCurrentCentury, isTwoDigitYear } from "./utils"; @@ -279,7 +279,7 @@ export class InputDatePicker @Prop() validationMessage: string; /** Specifies the validation icon to display under the component. */ - @Prop({ reflect: true }) validationIcon: IconName | boolean; + @Prop({ reflect: true }) validationIcon: IconNameOrString | boolean; /** * The current validation state of the component. diff --git a/packages/calcite-components/src/components/input-date-picker/readme.md b/packages/calcite-components/src/components/input-date-picker/readme.md index 28c58f96207..2343038180f 100644 --- a/packages/calcite-components/src/components/input-date-picker/readme.md +++ b/packages/calcite-components/src/components/input-date-picker/readme.md @@ -30,7 +30,7 @@ For comprehensive guidance on using and implementing `calcite-input-date-picker` | `required` | `required` | When `true`, the component must have a value in order for the form to submit. | `boolean` | `false` | | `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | | `status` | `status` | Specifies the status of the input field, which determines message and icons. | `"idle" \| "invalid" \| "valid"` | `"idle"` | -| `validationIcon` | `validation-icon` | Specifies the validation icon to display under the component. | `boolean \| IconName` | `undefined` | +| `validationIcon` | `validation-icon` | Specifies the validation icon to display under the component. | `boolean \| string` | `undefined` | | `validationMessage` | `validation-message` | Specifies the validation message to display under the component. | `string` | `undefined` | | `validity` | -- | The current validation state of the component. | `{ valid: boolean; badInput: boolean; customError: boolean; patternMismatch: boolean; rangeOverflow: boolean; rangeUnderflow: boolean; stepMismatch: boolean; tooLong: boolean; tooShort: boolean; typeMismatch: boolean; valueMissing: boolean; }` | `{ valid: false, badInput: false, customError: false, patternMismatch: false, rangeOverflow: false, rangeUnderflow: false, stepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false, valueMissing: false, }` | | `value` | `value` | Selected date as a string in ISO format (`"yyyy-mm-dd"`). | `string \| string[]` | `""` | @@ -54,14 +54,16 @@ Updates the position of the component. #### Parameters -| Name | Type | Description | -| --------- | --------- | ----------- | -| `delayed` | `boolean` | | +| Name | Type | Description | +| --------- | --------- | -------------------------------------- | +| `delayed` | `boolean` | If true, the repositioning is delayed. | #### Returns Type: `Promise` +void + ### `setFocus() => Promise` Sets focus on the component. diff --git a/packages/calcite-components/src/components/input-message/input-message.tsx b/packages/calcite-components/src/components/input-message/input-message.tsx index 8719748bc7f..acce2c1862f 100644 --- a/packages/calcite-components/src/components/input-message/input-message.tsx +++ b/packages/calcite-components/src/components/input-message/input-message.tsx @@ -1,7 +1,7 @@ import { Component, Element, h, Host, Prop, VNode, Watch } from "@stencil/core"; import { setRequestedIcon } from "../../utils/dom"; import { Scale, Status } from "../interfaces"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { StatusIconDefaults } from "./interfaces"; /** @@ -20,7 +20,7 @@ export class InputMessage { //-------------------------------------------------------------------------- /** Specifies an icon to display. */ - @Prop({ reflect: true }) icon: IconName | boolean; + @Prop({ reflect: true }) icon: IconNameOrString | boolean; /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl = false; @@ -66,7 +66,7 @@ export class InputMessage { @Element() el: HTMLCalciteInputMessageElement; /** the computed icon to render */ - private requestedIcon?: IconName; + private requestedIcon?: IconNameOrString; //-------------------------------------------------------------------------- // @@ -74,7 +74,7 @@ export class InputMessage { // //-------------------------------------------------------------------------- - private renderIcon(iconName: IconName): VNode { + private renderIcon(iconName: IconNameOrString): VNode { if (iconName) { return ( this.setDisabledAction()); diff --git a/packages/calcite-components/src/components/input-text/readme.md b/packages/calcite-components/src/components/input-text/readme.md index 70aaafea823..e172010ef84 100644 --- a/packages/calcite-components/src/components/input-text/readme.md +++ b/packages/calcite-components/src/components/input-text/readme.md @@ -14,7 +14,7 @@ For comprehensive guidance on using and implementing `calcite-input-text`, refer | `clearable` | `clearable` | When `true`, a clear button is displayed when the component has a value. | `boolean` | `false` | | `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | | `form` | `form` | The `id` of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | `string` | `undefined` | -| `icon` | `icon` | Specifies an icon to display. | `boolean \| IconName` | `undefined` | +| `icon` | `icon` | Specifies an icon to display. | `boolean \| string` | `undefined` | | `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | | `label` | `label` | Accessible name for the component's button or hyperlink. | `string` | `undefined` | | `loading` | `loading` | When `true`, the component is in the loading state and `calcite-progress` is displayed. | `boolean` | `false` | @@ -30,7 +30,7 @@ For comprehensive guidance on using and implementing `calcite-input-text`, refer | `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | | `status` | `status` | Specifies the status of the input field, which determines message and icons. | `"idle" \| "invalid" \| "valid"` | `"idle"` | | `suffixText` | `suffix-text` | Adds text to the end of the component. | `string` | `undefined` | -| `validationIcon` | `validation-icon` | Specifies the validation icon to display under the component. | `boolean \| IconName` | `undefined` | +| `validationIcon` | `validation-icon` | Specifies the validation icon to display under the component. | `boolean \| string` | `undefined` | | `validationMessage` | `validation-message` | Specifies the validation message to display under the component. | `string` | `undefined` | | `validity` | -- | The current validation state of the component. | `{ valid: boolean; badInput: boolean; customError: boolean; patternMismatch: boolean; rangeOverflow: boolean; rangeUnderflow: boolean; stepMismatch: boolean; tooLong: boolean; tooShort: boolean; typeMismatch: boolean; valueMissing: boolean; }` | `{ valid: false, badInput: false, customError: false, patternMismatch: false, rangeOverflow: false, rangeUnderflow: false, stepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false, valueMissing: false, }` | | `value` | `value` | The component's value. | `string` | `""` | diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx index 9d679f42075..56a6969ff00 100644 --- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx +++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx @@ -80,7 +80,7 @@ import { decimalPlaces } from "../../utils/math"; import { getIconScale } from "../../utils/component"; import { Validation } from "../functional/Validation"; import { focusFirstTabbable } from "../../utils/dom"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { syncHiddenFormInput } from "../input/common/input"; import { CSS, IDS } from "./resources"; import { InputTimePickerMessages } from "./assets/input-time-picker/t9n"; @@ -270,7 +270,7 @@ export class InputTimePicker @Prop() validationMessage: string; /** Specifies the validation icon to display under the component. */ - @Prop({ reflect: true }) validationIcon: IconName | boolean; + @Prop({ reflect: true }) validationIcon: IconNameOrString | boolean; /** * The current validation state of the component. diff --git a/packages/calcite-components/src/components/input-time-picker/readme.md b/packages/calcite-components/src/components/input-time-picker/readme.md index 9eb48f9a400..167e188ec8f 100644 --- a/packages/calcite-components/src/components/input-time-picker/readme.md +++ b/packages/calcite-components/src/components/input-time-picker/readme.md @@ -18,13 +18,13 @@ For comprehensive guidance on using and implementing `calcite-input-time-picker` | `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "latn"` | `undefined` | | `open` | `open` | When `true`, displays the `calcite-time-picker` component. | `boolean` | `false` | | `overlayPositioning` | `overlay-positioning` | Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. | `"absolute" \| "fixed"` | `"absolute"` | -| `placement` | `placement` | Determines where the popover will be positioned relative to the input. | `"auto" \| "top" \| "bottom" \| "left" \| "right" \| "top-start" \| "top-end" \| "bottom-start" \| "bottom-end" \| "left-start" \| "left-end" \| "right-start" \| "right-end" \| "leading" \| "trailing" \| "auto-start" \| "auto-end" \| "leading-start" \| "leading-end" \| "trailing-end" \| "trailing-start"` | `"auto"` | +| `placement` | `placement` | Determines where the popover will be positioned relative to the input. | `"auto" \| "top" \| "bottom" \| "right" \| "left" \| "top-start" \| "top-end" \| "bottom-start" \| "bottom-end" \| "right-start" \| "right-end" \| "left-start" \| "left-end" \| "leading" \| "trailing" \| "auto-start" \| "auto-end" \| "leading-start" \| "leading-end" \| "trailing-end" \| "trailing-start"` | `"auto"` | | `readOnly` | `read-only` | When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified. | `boolean` | `false` | | `required` | `required` | When `true`, the component must have a value in order for the form to submit. | `boolean` | `false` | | `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | | `status` | `status` | Specifies the status of the input field, which determines message and icons. | `"idle" \| "invalid" \| "valid"` | `"idle"` | | `step` | `step` | Specifies the granularity the component's `value` must adhere to (in seconds). | `number` | `60` | -| `validationIcon` | `validation-icon` | Specifies the validation icon to display under the component. | `boolean \| IconName` | `undefined` | +| `validationIcon` | `validation-icon` | Specifies the validation icon to display under the component. | `boolean \| string` | `undefined` | | `validationMessage` | `validation-message` | Specifies the validation message to display under the component. | `string` | `undefined` | | `validity` | -- | The current validation state of the component. | `{ valid: boolean; badInput: boolean; customError: boolean; patternMismatch: boolean; rangeOverflow: boolean; rangeUnderflow: boolean; stepMismatch: boolean; tooLong: boolean; tooShort: boolean; typeMismatch: boolean; valueMissing: boolean; }` | `{ valid: false, badInput: false, customError: false, patternMismatch: false, rangeOverflow: false, rangeUnderflow: false, stepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false, valueMissing: false, }` | | `value` | `value` | The time value in ISO (24-hour) format. | `string` | `null` | @@ -47,9 +47,9 @@ Updates the position of the component. #### Parameters -| Name | Type | Description | -| --------- | --------- | ----------- | -| `delayed` | `boolean` | | +| Name | Type | Description | +| --------- | --------- | --------------------------------- | +| `delayed` | `boolean` | If true, delay the repositioning. | #### Returns diff --git a/packages/calcite-components/src/components/input-time-zone/assets/input-time-zone/t9n/messages.json b/packages/calcite-components/src/components/input-time-zone/assets/input-time-zone/t9n/messages.json index 93a716c624d..35414aee98c 100644 --- a/packages/calcite-components/src/components/input-time-zone/assets/input-time-zone/t9n/messages.json +++ b/packages/calcite-components/src/components/input-time-zone/assets/input-time-zone/t9n/messages.json @@ -1,6 +1,7 @@ { "chooseTimeZone": "Choose time zone.", "offsetPlaceholder": "Search by city, region or offset", + "regionPlaceholder": "Search by city, country, region or offset", "namePlaceholder": "Search by time zone", "timeZoneLabel": "({offset}) {cities}", "Africa/Abidjan": "Abidjan", @@ -431,5 +432,264 @@ "Pacific/Tongatapu": "Tongatapu", "Pacific/Truk": "Truk", "Pacific/Wake": "Wake", - "Pacific/Wallis": "Wallis" + "Pacific/Wallis": "Wallis", + "Africa": "Africa", + "America": "America", + "Antarctica": "Antarctica", + "Arctic": "Arctic", + "Asia": "Asia", + "Atlantic": "Atlantic", + "Australia": "Australia", + "Europe": "Europe", + "Indian": "Indian", + "Pacific": "Pacific", + "AD": "Andorra", + "AE": "United Arab Emirates", + "AF": "Afghanistan", + "AG": "Antigua and Barbuda", + "AI": "Anguilla", + "AL": "Albania", + "AM": "Armenia", + "AO": "Angola", + "AQ": "Antarctica", + "AR": "Argentina", + "AS": "American Samoa", + "AT": "Austria", + "AU": "Australia", + "AW": "Aruba", + "AX": "Åland Islands", + "AZ": "Azerbaijan", + "BA": "Bosnia and Herzegovina", + "BB": "Barbados", + "BD": "Bangladesh", + "BE": "Belgium", + "BF": "Burkina Faso", + "BG": "Bulgaria", + "BH": "Bahrain", + "BI": "Burundi", + "BJ": "Benin", + "BL": "Saint Barthélemy", + "BM": "Bermuda", + "BN": "Brunei", + "BO": "Bolivia", + "BQ": "Bonaire, Sint Eustatius and Saba", + "BR": "Brazil", + "BS": "Bahamas", + "BT": "Bhutan", + "BV": "Bouvet Island", + "BW": "Botswana", + "BY": "Belarus", + "BZ": "Belize", + "CA": "Canada", + "CC": "Cocos (Keeling) Islands", + "CD": "Democratic Republic of the Congo", + "CF": "Central African Republic", + "CG": "Republic of the Congo", + "CH": "Switzerland", + "CI": "Côte d'Ivoire", + "CK": "Cook Islands", + "CL": "Chile", + "CM": "Cameroon", + "CN": "China", + "CO": "Colombia", + "CR": "Costa Rica", + "CU": "Cuba", + "CV": "Cape Verde", + "CW": "Curaçao", + "CX": "Christmas Island", + "CY": "Cyprus", + "CZ": "Czech Republic", + "DE": "Germany", + "DJ": "Djibouti", + "DK": "Denmark", + "DM": "Dominica", + "DO": "Dominican Republic", + "DZ": "Algeria", + "EC": "Ecuador", + "EE": "Estonia", + "EG": "Egypt", + "EH": "Western Sahara", + "ER": "Eritrea", + "ES": "Spain", + "ET": "Ethiopia", + "FI": "Finland", + "FJ": "Fiji", + "FK": "Falkland Islands", + "FM": "Micronesia", + "FO": "Faroe Islands", + "FR": "France", + "GA": "Gabon", + "GB": "United Kingdom", + "GD": "Grenada", + "GE": "Georgia", + "GF": "French Guiana", + "GG": "Guernsey", + "GH": "Ghana", + "GI": "Gibraltar", + "GL": "Greenland", + "GM": "Gambia", + "GN": "Guinea", + "GP": "Guadeloupe", + "GQ": "Equatorial Guinea", + "GR": "Greece", + "GS": "South Georgia and the South Sandwich Islands", + "GT": "Guatemala", + "GU": "Guam", + "GW": "Guinea-Bissau", + "GY": "Guyana", + "HK": "Hong Kong", + "HM": "Heard Island and McDonald Islands", + "HN": "Honduras", + "HR": "Croatia", + "HT": "Haiti", + "HU": "Hungary", + "ID": "Indonesia", + "IE": "Ireland", + "IL": "Israel", + "IM": "Isle of Man", + "IN": "India", + "IO": "British Indian Ocean Territory", + "IQ": "Iraq", + "IR": "Iran", + "IS": "Iceland", + "IT": "Italy", + "JE": "Jersey", + "JM": "Jamaica", + "JO": "Jordan", + "JP": "Japan", + "KE": "Kenya", + "KG": "Kyrgyzstan", + "KH": "Cambodia", + "KI": "Kiribati", + "KM": "Comoros", + "KN": "Saint Kitts and Nevis", + "KP": "North Korea", + "KR": "South Korea", + "KW": "Kuwait", + "KY": "Cayman Islands", + "KZ": "Kazakhstan", + "LA": "Laos", + "LB": "Lebanon", + "LC": "Saint Lucia", + "LI": "Liechtenstein", + "LK": "Sri Lanka", + "LR": "Liberia", + "LS": "Lesotho", + "LT": "Lithuania", + "LU": "Luxembourg", + "LV": "Latvia", + "LY": "Libya", + "MA": "Morocco", + "MC": "Monaco", + "MD": "Moldova", + "ME": "Montenegro", + "MF": "Saint Martin", + "MG": "Madagascar", + "MH": "Marshall Islands", + "MK": "North Macedonia", + "ML": "Mali", + "MM": "Myanmar", + "MN": "Mongolia", + "MO": "Macau", + "MP": "Northern Mariana Islands", + "MQ": "Martinique", + "MR": "Mauritania", + "MS": "Montserrat", + "MT": "Malta", + "MU": "Mauritius", + "MV": "Maldives", + "MW": "Malawi", + "MX": "Mexico", + "MY": "Malaysia", + "MZ": "Mozambique", + "NA": "Namibia", + "NC": "New Caledonia", + "NE": "Niger", + "NF": "Norfolk Island", + "NG": "Nigeria", + "NI": "Nicaragua", + "NL": "Netherlands", + "NO": "Norway", + "NP": "Nepal", + "NR": "Nauru", + "NU": "Niue", + "NZ": "New Zealand", + "OM": "Oman", + "PA": "Panama", + "PE": "Peru", + "PF": "French Polynesia", + "PG": "Papua New Guinea", + "PH": "Philippines", + "PK": "Pakistan", + "PL": "Poland", + "PM": "Saint Pierre and Miquelon", + "PN": "Pitcairn Islands", + "PR": "Puerto Rico", + "PS": "Palestine", + "PT": "Portugal", + "PW": "Palau", + "PY": "Paraguay", + "QA": "Qatar", + "RE": "Réunion", + "RO": "Romania", + "RS": "Serbia", + "RU": "Russia", + "RW": "Rwanda", + "SA": "Saudi Arabia", + "SB": "Solomon Islands", + "SC": "Seychelles", + "SD": "Sudan", + "SE": "Sweden", + "SG": "Singapore", + "SH": "Saint Helena", + "SI": "Slovenia", + "SJ": "Svalbard and Jan Mayen", + "SK": "Slovakia", + "SL": "Sierra Leone", + "SM": "San Marino", + "SN": "Senegal", + "SO": "Somalia", + "SR": "Suriname", + "SS": "South Sudan", + "ST": "São Tomé and Príncipe", + "SV": "El Salvador", + "SX": "Sint Maarten", + "SY": "Syria", + "SZ": "Eswatini", + "TC": "Turks and Caicos Islands", + "TD": "Chad", + "TF": "French Southern Territories", + "TG": "Togo", + "TH": "Thailand", + "TJ": "Tajikistan", + "TK": "Tokelau", + "TL": "Timor-Leste", + "TM": "Turkmenistan", + "TN": "Tunisia", + "TO": "Tonga", + "TR": "Turkey", + "TT": "Trinidad and Tobago", + "TV": "Tuvalu", + "TW": "Taiwan", + "TZ": "Tanzania", + "UA": "Ukraine", + "UG": "Uganda", + "UM": "United States Minor Outlying Islands", + "US": "United States", + "UY": "Uruguay", + "UZ": "Uzbekistan", + "VA": "Vatican City", + "VC": "Saint Vincent and the Grenadines", + "VE": "Venezuela", + "VG": "British Virgin Islands", + "VI": "United States Virgin Islands", + "VN": "Vietnam", + "VU": "Vanuatu", + "WF": "Wallis and Futuna", + "WS": "Samoa", + "YE": "Yemen", + "YT": "Mayotte", + "ZA": "South Africa", + "ZM": "Zambia", + "ZW": "Zimbabwe" } diff --git a/packages/calcite-components/src/components/input-time-zone/assets/input-time-zone/t9n/messages_en.json b/packages/calcite-components/src/components/input-time-zone/assets/input-time-zone/t9n/messages_en.json index 93a716c624d..35414aee98c 100644 --- a/packages/calcite-components/src/components/input-time-zone/assets/input-time-zone/t9n/messages_en.json +++ b/packages/calcite-components/src/components/input-time-zone/assets/input-time-zone/t9n/messages_en.json @@ -1,6 +1,7 @@ { "chooseTimeZone": "Choose time zone.", "offsetPlaceholder": "Search by city, region or offset", + "regionPlaceholder": "Search by city, country, region or offset", "namePlaceholder": "Search by time zone", "timeZoneLabel": "({offset}) {cities}", "Africa/Abidjan": "Abidjan", @@ -431,5 +432,264 @@ "Pacific/Tongatapu": "Tongatapu", "Pacific/Truk": "Truk", "Pacific/Wake": "Wake", - "Pacific/Wallis": "Wallis" + "Pacific/Wallis": "Wallis", + "Africa": "Africa", + "America": "America", + "Antarctica": "Antarctica", + "Arctic": "Arctic", + "Asia": "Asia", + "Atlantic": "Atlantic", + "Australia": "Australia", + "Europe": "Europe", + "Indian": "Indian", + "Pacific": "Pacific", + "AD": "Andorra", + "AE": "United Arab Emirates", + "AF": "Afghanistan", + "AG": "Antigua and Barbuda", + "AI": "Anguilla", + "AL": "Albania", + "AM": "Armenia", + "AO": "Angola", + "AQ": "Antarctica", + "AR": "Argentina", + "AS": "American Samoa", + "AT": "Austria", + "AU": "Australia", + "AW": "Aruba", + "AX": "Åland Islands", + "AZ": "Azerbaijan", + "BA": "Bosnia and Herzegovina", + "BB": "Barbados", + "BD": "Bangladesh", + "BE": "Belgium", + "BF": "Burkina Faso", + "BG": "Bulgaria", + "BH": "Bahrain", + "BI": "Burundi", + "BJ": "Benin", + "BL": "Saint Barthélemy", + "BM": "Bermuda", + "BN": "Brunei", + "BO": "Bolivia", + "BQ": "Bonaire, Sint Eustatius and Saba", + "BR": "Brazil", + "BS": "Bahamas", + "BT": "Bhutan", + "BV": "Bouvet Island", + "BW": "Botswana", + "BY": "Belarus", + "BZ": "Belize", + "CA": "Canada", + "CC": "Cocos (Keeling) Islands", + "CD": "Democratic Republic of the Congo", + "CF": "Central African Republic", + "CG": "Republic of the Congo", + "CH": "Switzerland", + "CI": "Côte d'Ivoire", + "CK": "Cook Islands", + "CL": "Chile", + "CM": "Cameroon", + "CN": "China", + "CO": "Colombia", + "CR": "Costa Rica", + "CU": "Cuba", + "CV": "Cape Verde", + "CW": "Curaçao", + "CX": "Christmas Island", + "CY": "Cyprus", + "CZ": "Czech Republic", + "DE": "Germany", + "DJ": "Djibouti", + "DK": "Denmark", + "DM": "Dominica", + "DO": "Dominican Republic", + "DZ": "Algeria", + "EC": "Ecuador", + "EE": "Estonia", + "EG": "Egypt", + "EH": "Western Sahara", + "ER": "Eritrea", + "ES": "Spain", + "ET": "Ethiopia", + "FI": "Finland", + "FJ": "Fiji", + "FK": "Falkland Islands", + "FM": "Micronesia", + "FO": "Faroe Islands", + "FR": "France", + "GA": "Gabon", + "GB": "United Kingdom", + "GD": "Grenada", + "GE": "Georgia", + "GF": "French Guiana", + "GG": "Guernsey", + "GH": "Ghana", + "GI": "Gibraltar", + "GL": "Greenland", + "GM": "Gambia", + "GN": "Guinea", + "GP": "Guadeloupe", + "GQ": "Equatorial Guinea", + "GR": "Greece", + "GS": "South Georgia and the South Sandwich Islands", + "GT": "Guatemala", + "GU": "Guam", + "GW": "Guinea-Bissau", + "GY": "Guyana", + "HK": "Hong Kong", + "HM": "Heard Island and McDonald Islands", + "HN": "Honduras", + "HR": "Croatia", + "HT": "Haiti", + "HU": "Hungary", + "ID": "Indonesia", + "IE": "Ireland", + "IL": "Israel", + "IM": "Isle of Man", + "IN": "India", + "IO": "British Indian Ocean Territory", + "IQ": "Iraq", + "IR": "Iran", + "IS": "Iceland", + "IT": "Italy", + "JE": "Jersey", + "JM": "Jamaica", + "JO": "Jordan", + "JP": "Japan", + "KE": "Kenya", + "KG": "Kyrgyzstan", + "KH": "Cambodia", + "KI": "Kiribati", + "KM": "Comoros", + "KN": "Saint Kitts and Nevis", + "KP": "North Korea", + "KR": "South Korea", + "KW": "Kuwait", + "KY": "Cayman Islands", + "KZ": "Kazakhstan", + "LA": "Laos", + "LB": "Lebanon", + "LC": "Saint Lucia", + "LI": "Liechtenstein", + "LK": "Sri Lanka", + "LR": "Liberia", + "LS": "Lesotho", + "LT": "Lithuania", + "LU": "Luxembourg", + "LV": "Latvia", + "LY": "Libya", + "MA": "Morocco", + "MC": "Monaco", + "MD": "Moldova", + "ME": "Montenegro", + "MF": "Saint Martin", + "MG": "Madagascar", + "MH": "Marshall Islands", + "MK": "North Macedonia", + "ML": "Mali", + "MM": "Myanmar", + "MN": "Mongolia", + "MO": "Macau", + "MP": "Northern Mariana Islands", + "MQ": "Martinique", + "MR": "Mauritania", + "MS": "Montserrat", + "MT": "Malta", + "MU": "Mauritius", + "MV": "Maldives", + "MW": "Malawi", + "MX": "Mexico", + "MY": "Malaysia", + "MZ": "Mozambique", + "NA": "Namibia", + "NC": "New Caledonia", + "NE": "Niger", + "NF": "Norfolk Island", + "NG": "Nigeria", + "NI": "Nicaragua", + "NL": "Netherlands", + "NO": "Norway", + "NP": "Nepal", + "NR": "Nauru", + "NU": "Niue", + "NZ": "New Zealand", + "OM": "Oman", + "PA": "Panama", + "PE": "Peru", + "PF": "French Polynesia", + "PG": "Papua New Guinea", + "PH": "Philippines", + "PK": "Pakistan", + "PL": "Poland", + "PM": "Saint Pierre and Miquelon", + "PN": "Pitcairn Islands", + "PR": "Puerto Rico", + "PS": "Palestine", + "PT": "Portugal", + "PW": "Palau", + "PY": "Paraguay", + "QA": "Qatar", + "RE": "Réunion", + "RO": "Romania", + "RS": "Serbia", + "RU": "Russia", + "RW": "Rwanda", + "SA": "Saudi Arabia", + "SB": "Solomon Islands", + "SC": "Seychelles", + "SD": "Sudan", + "SE": "Sweden", + "SG": "Singapore", + "SH": "Saint Helena", + "SI": "Slovenia", + "SJ": "Svalbard and Jan Mayen", + "SK": "Slovakia", + "SL": "Sierra Leone", + "SM": "San Marino", + "SN": "Senegal", + "SO": "Somalia", + "SR": "Suriname", + "SS": "South Sudan", + "ST": "São Tomé and Príncipe", + "SV": "El Salvador", + "SX": "Sint Maarten", + "SY": "Syria", + "SZ": "Eswatini", + "TC": "Turks and Caicos Islands", + "TD": "Chad", + "TF": "French Southern Territories", + "TG": "Togo", + "TH": "Thailand", + "TJ": "Tajikistan", + "TK": "Tokelau", + "TL": "Timor-Leste", + "TM": "Turkmenistan", + "TN": "Tunisia", + "TO": "Tonga", + "TR": "Turkey", + "TT": "Trinidad and Tobago", + "TV": "Tuvalu", + "TW": "Taiwan", + "TZ": "Tanzania", + "UA": "Ukraine", + "UG": "Uganda", + "UM": "United States Minor Outlying Islands", + "US": "United States", + "UY": "Uruguay", + "UZ": "Uzbekistan", + "VA": "Vatican City", + "VC": "Saint Vincent and the Grenadines", + "VE": "Venezuela", + "VG": "British Virgin Islands", + "VI": "United States Virgin Islands", + "VN": "Vietnam", + "VU": "Vanuatu", + "WF": "Wallis and Futuna", + "WS": "Samoa", + "YE": "Yemen", + "YT": "Mayotte", + "ZA": "South Africa", + "ZM": "Zambia", + "ZW": "Zimbabwe" } diff --git a/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts b/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts index d2a0feb9cd5..da4b93d456e 100644 --- a/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts +++ b/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts @@ -14,7 +14,7 @@ import { } from "../../tests/commonTests"; import { TagAndPage } from "../../tests/commonTests/interfaces"; import { DEBOUNCE } from "../../utils/resources"; -import { toUserFriendlyName } from "./utils"; +import { getCity, toUserFriendlyName } from "./utils"; /* * **Notes** @@ -319,6 +319,71 @@ describe("calcite-input-time-zone", () => { expect(await timeZoneItem.getProperty("textLabel")).toMatch(toUserFriendlyName(testTimeZoneItems[0].name)); }); }); + + describe("region", () => { + describe("selects user's matching time zone name on initialization", () => { + testTimeZoneItems.forEach(({ name }) => { + it(`selects default time zone for "${name}"`, async () => { + const page = await newE2EPage(); + await page.emulateTimezone(name); + await page.setContent( + await overrideSupportedTimeZones(html``), + ); + await page.waitForChanges(); + + const input = await page.find("calcite-input-time-zone"); + expect(await input.getProperty("value")).toBe(name); + + const timeZoneItem = await page.find("calcite-input-time-zone >>> calcite-combobox-item[selected]"); + + expect(await timeZoneItem.getProperty("textLabel")).toMatch(toUserFriendlyName(getCity(name))); + }); + }); + }); + + it("allows users to preselect a time zone by name", async () => { + const page = await newE2EPage(); + await page.emulateTimezone(testTimeZoneItems[0].name); + await page.setContent( + await overrideSupportedTimeZones( + html``, + ), + ); + + const input = await page.find("calcite-input-time-zone"); + + expect(await input.getProperty("value")).toBe(testTimeZoneItems[1].name); + + const timeZoneItem = await page.find("calcite-input-time-zone >>> calcite-combobox-item[selected]"); + + expect(await timeZoneItem.getProperty("textLabel")).toMatch( + toUserFriendlyName(getCity(testTimeZoneItems[1].name)), + ); + }); + + it("ignores invalid values", async () => { + const page = await newE2EPage(); + await page.emulateTimezone(testTimeZoneItems[0].name); + await page.setContent( + await overrideSupportedTimeZones( + html``, + ), + ); + + const input = await page.find("calcite-input-time-zone"); + + expect(await input.getProperty("value")).toBe(testTimeZoneItems[0].name); + + const timeZoneItem = await page.find("calcite-input-time-zone >>> calcite-combobox-item[selected]"); + + expect(await timeZoneItem.getProperty("textLabel")).toMatch( + toUserFriendlyName(getCity(testTimeZoneItems[0].name)), + ); + }); + }); }); describe("clearable", () => { diff --git a/packages/calcite-components/src/components/input-time-zone/input-time-zone.scss b/packages/calcite-components/src/components/input-time-zone/input-time-zone.scss index b3ac7411e63..25b19175dd4 100644 --- a/packages/calcite-components/src/components/input-time-zone/input-time-zone.scss +++ b/packages/calcite-components/src/components/input-time-zone/input-time-zone.scss @@ -2,6 +2,10 @@ display: block; } +.offset { + white-space: nowrap; +} + @include base-component(); @include disabled(); @include hidden-form-input(); diff --git a/packages/calcite-components/src/components/input-time-zone/input-time-zone.stories.ts b/packages/calcite-components/src/components/input-time-zone/input-time-zone.stories.ts index a19a8a8d850..aa312f37d03 100644 --- a/packages/calcite-components/src/components/input-time-zone/input-time-zone.stories.ts +++ b/packages/calcite-components/src/components/input-time-zone/input-time-zone.stories.ts @@ -62,10 +62,12 @@ export const clearable = (): string => html` +
+ `; clearable.parameters = { chromatic: { delay: 500 } }; @@ -74,6 +76,10 @@ export const timeZoneNameMode_TestOnly = (): string => html` `; +export const timeZoneRegionMode_TestOnly = (): string => html` + +`; + export const initialNameSelected_TestOnly = (): string => // for stability, we use a timezone unaffected by daylight savings time html``; diff --git a/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx b/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx index bc742585e5f..7c145948d01 100644 --- a/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx +++ b/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx @@ -46,7 +46,8 @@ import { HiddenFormInputSlot, MutableValidityState, } from "../../utils/form"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; +import { CSS } from "./resources"; import { createTimeZoneItems, findTimeZoneItemByProp, @@ -54,7 +55,7 @@ import { getUserTimeZoneOffset, } from "./utils"; import { InputTimeZoneMessages } from "./assets/input-time-zone/t9n"; -import { OffsetStyle, TimeZoneItem, TimeZoneMode } from "./interfaces"; +import { OffsetStyle, TimeZoneItem, TimeZoneItemGroup, TimeZoneMode } from "./interfaces"; @Component({ tag: "calcite-input-time-zone", @@ -155,7 +156,7 @@ export class InputTimeZone @Prop() validationMessage: string; /** Specifies the validation icon to display under the component. */ - @Prop({ reflect: true }) validationIcon: IconName | boolean; + @Prop({ reflect: true }) validationIcon: IconNameOrString | boolean; /** * The current validation state of the component. @@ -324,7 +325,7 @@ export class InputTimeZone private selectedTimeZoneItem: TimeZoneItem; - private timeZoneItems: TimeZoneItem[]; + private timeZoneItems: TimeZoneItem[] | TimeZoneItemGroup[]; //-------------------------------------------------------------------------- // @@ -410,7 +411,7 @@ export class InputTimeZone this.findTimeZoneItem(valueToMatch) || this.findTimeZoneItem(fallbackValue); } - private async createTimeZoneItems(): Promise { + private async createTimeZoneItems(): Promise { if (!this.effectiveLocale || !this.messages) { return []; } @@ -488,8 +489,13 @@ export class InputTimeZone open={this.open} overlayPositioning={this.overlayPositioning} placeholder={ - this.mode === "name" ? this.messages.namePlaceholder : this.messages.offsetPlaceholder + this.mode === "name" + ? this.messages.namePlaceholder + : this.mode === "offset" + ? this.messages.offsetPlaceholder + : this.messages.regionPlaceholder } + placeholderIcon="search" readOnly={this.readOnly} ref={this.setComboboxRef} scale={this.scale} @@ -498,24 +504,59 @@ export class InputTimeZone validation-icon={this.validationIcon} validation-message={this.validationMessage} > - {this.timeZoneItems.map((group) => { - const selected = this.selectedTimeZoneItem === group; - const { label, value } = group; - - return ( - - ); - })} + {this.renderItems()} ); } + + private renderItems(): VNode[] { + if (this.mode === "region") { + return this.renderRegionItems(); + } + + return this.timeZoneItems.map((group) => { + const selected = this.selectedTimeZoneItem === group; + const { label, value } = group; + + return ( + + ); + }); + } + + private renderRegionItems(): VNode[] { + return (this.timeZoneItems as TimeZoneItemGroup[]).flatMap(({ label, items }) => ( + + {items.map((item) => { + const selected = this.selectedTimeZoneItem === item; + const { label, value } = item; + + return ( + + + {item.metadata.offset} + + + ); + })} + + )); + } } diff --git a/packages/calcite-components/src/components/input-time-zone/interfaces.d.ts b/packages/calcite-components/src/components/input-time-zone/interfaces.d.ts index 6e29ffffc8e..2b13fdc0c0a 100644 --- a/packages/calcite-components/src/components/input-time-zone/interfaces.d.ts +++ b/packages/calcite-components/src/components/input-time-zone/interfaces.d.ts @@ -1,17 +1,37 @@ declare global { namespace Intl { - function supportedValuesOf(key: "timeZone"): TimeZoneName[]; + function supportedValuesOf(key: "timeZone"): TimeZone[]; } } -export type TimeZoneName = string; +export type TimeZone = string; -export type TimeZoneMode = "offset" | "name"; +export interface TimeZoneGroup extends BasicTimeZoneGroup { + offsetGroupLabel: string; + offsetGroupRepTimeZone: string; + offsetGroupTimeZones: string[]; +} + +export interface BasicTimeZoneGroup { + offsetLabel: string; + offsetValue: number; +} + +export type TimeZoneMode = "offset" | "name" | "region"; export interface TimeZoneItem { label: string; value: T; filterValue: string | string[]; + metadata?: { + offset?: string; + country?: string; + }; +} + +export interface TimeZoneItemGroup { + label: string; + items: TimeZoneItem[]; } export type OffsetStyle = "user" | "utc" | "gmt"; diff --git a/packages/calcite-components/src/components/input-time-zone/readme.md b/packages/calcite-components/src/components/input-time-zone/readme.md index ca6ed394b1b..4713796bffc 100644 --- a/packages/calcite-components/src/components/input-time-zone/readme.md +++ b/packages/calcite-components/src/components/input-time-zone/readme.md @@ -22,7 +22,7 @@ For comprehensive guidance on using and implementing `calcite-input-time-zone`, | `referenceDate` | `reference-date` | This `date` will be used as a reference to Daylight Savings Time when creating time zone item groups. It can be either a Date instance or a string in ISO format (`"YYYY-MM-DD"`, `"YYYY-MM-DDTHH:MM:SS.SSSZ"`). | `Date \| string` | `undefined` | | `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | | `status` | `status` | Specifies the status of the input field, which determines message and icons. | `"idle" \| "invalid" \| "valid"` | `"idle"` | -| `validationIcon` | `validation-icon` | Specifies the validation icon to display under the component. | `boolean \| IconName` | `undefined` | +| `validationIcon` | `validation-icon` | Specifies the validation icon to display under the component. | `boolean \| string` | `undefined` | | `validationMessage` | `validation-message` | Specifies the validation message to display under the component. | `string` | `undefined` | | `validity` | -- | The current validation state of the component. | `{ valid: boolean; badInput: boolean; customError: boolean; patternMismatch: boolean; rangeOverflow: boolean; rangeUnderflow: boolean; stepMismatch: boolean; tooLong: boolean; tooShort: boolean; typeMismatch: boolean; valueMissing: boolean; }` | `{ valid: false, badInput: false, customError: false, patternMismatch: false, rangeOverflow: false, rangeUnderflow: false, stepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false, valueMissing: false, }` | | `value` | `value` | The component's value, where the value is the time zone offset or the difference, in minutes, between the selected time zone and UTC. If no value is provided, the user's time zone offset will be selected by default. | `string` | `undefined` | diff --git a/packages/calcite-components/src/components/input-time-zone/resources.ts b/packages/calcite-components/src/components/input-time-zone/resources.ts new file mode 100644 index 00000000000..f20cb242136 --- /dev/null +++ b/packages/calcite-components/src/components/input-time-zone/resources.ts @@ -0,0 +1,3 @@ +export const CSS = { + offset: "offset", +}; diff --git a/packages/calcite-components/src/components/input-time-zone/utils.ts b/packages/calcite-components/src/components/input-time-zone/utils.ts index 12f632156a0..11b99174c43 100644 --- a/packages/calcite-components/src/components/input-time-zone/utils.ts +++ b/packages/calcite-components/src/components/input-time-zone/utils.ts @@ -1,5 +1,5 @@ import { getDateTimeFormat, SupportedLocale } from "../../utils/locale"; -import { OffsetStyle, TimeZoneItem, TimeZoneMode, TimeZoneName } from "./interfaces"; +import { OffsetStyle, TimeZone, TimeZoneItem, TimeZoneItemGroup, TimeZoneMode } from "./interfaces"; import { InputTimeZoneMessages } from "./assets/input-time-zone/t9n"; const hourToMinutes = 60; @@ -35,7 +35,7 @@ function timeZoneOffsetToDecimal(shortOffsetTimeZoneName: string): string { ); } -function toOffsetValue(timeZoneName: TimeZoneName, referenceDateInMs: number): number { +function toOffsetValue(timeZoneName: TimeZone, referenceDateInMs: number): number { // we use "en-US" to allow us to reliably remove the standard time token const offset = getTimeZoneShortOffset(timeZoneName, "en-US", referenceDateInMs).replace("GMT", ""); @@ -59,7 +59,19 @@ export function getUserTimeZoneName(): string { /** * The lazy-loaded timezone-groups lib to be used across instances. */ -let timeZoneGroups: Promise<[any, any]>; +let offsetGroupUtils: Promise< + [ + typeof import("timezone-groups/dist/groupByOffset/index.mjs"), + typeof import("timezone-groups/dist/groupByOffset/strategy/native.mjs"), + ] +>; +let regionGroupUtils: Promise< + [ + typeof import("timezone-groups/dist/groupByRegion/index.mjs"), + typeof import("timezone-groups/dist/utils/country.mjs"), + ] +>; +let nameGroupUtils: Promise; export async function createTimeZoneItems( locale: SupportedLocale, @@ -67,97 +79,143 @@ export async function createTimeZoneItems( mode: TimeZoneMode, referenceDate: Date, standardTime: OffsetStyle, -): Promise { +): Promise { + if (mode === "name") { + if (!nameGroupUtils) { + nameGroupUtils = import("timezone-groups/dist/groupByName/index.mjs"); + } + + return nameGroupUtils.then(async ({ groupByName }) => { + const groups = await groupByName(); + + return groups + .map>(({ label: timeZone }) => { + const label = toUserFriendlyName(timeZone); + const value = timeZone; + + return { + label, + value, + filterValue: timeZone, + }; + }) + .filter((group) => !!group) + .sort(); + }); + } + + const effectiveLocale = + standardTime === "user" + ? locale + : // we use locales that will always yield a short offset that matches `standardTime` + standardTime === "utc" + ? "fr" + : "en-GB"; const referenceDateInMs: number = referenceDate.getTime(); - const timeZoneNames = Intl.supportedValuesOf("timeZone"); - if (mode === "offset") { - if (!timeZoneGroups) { - timeZoneGroups = Promise.all([ - import("timezone-groups/dist/index.js"), - import("timezone-groups/dist/strategy/native/index.js"), + if (mode === "region") { + if (!regionGroupUtils) { + regionGroupUtils = Promise.all([ + import("timezone-groups/dist/groupByRegion/index.mjs"), + import("timezone-groups/dist/utils/country.mjs"), ]); } - return timeZoneGroups.then(async ([{ groupTimeZones }, { DateEngine }]) => { - const timeZoneGroups: { labelTzIndices: number[]; tzs: TimeZoneName[] }[] = await groupTimeZones({ - dateEngine: new DateEngine(), - groupDateRange: 1, - startDate: new Date(referenceDateInMs).toISOString(), - }); + return regionGroupUtils.then(async ([{ groupByRegion }, { getCountry }]) => { + const groups = await groupByRegion(); - const listFormatter = new Intl.ListFormat(locale, { style: "long", type: "conjunction" }); + return groups + .map(({ label: region, tzs }) => { + return { + label: region, + items: tzs.map((timeZone) => { + const decimalOffset = timeZoneOffsetToDecimal( + getTimeZoneShortOffset(timeZone, effectiveLocale, referenceDateInMs), + ); + + return { + label: getTimeZoneLabel(timeZone, messages), + value: timeZone, + filterValue: toUserFriendlyName(timeZone), + metadata: { + offset: decimalOffset, + country: getCountry(timeZone), + }, + }; + }), + }; + }) + .sort((groupA, groupB) => groupA.label.localeCompare(groupB.label)); + }); + } + + if (!offsetGroupUtils) { + offsetGroupUtils = Promise.all([ + import("timezone-groups/dist/groupByOffset/index.mjs"), + import("timezone-groups/dist/groupByOffset/strategy/native/index.mjs"), + ]); + } - // we remove blocked entries from tzs and adjust label indices accordingly - timeZoneGroups.forEach((group) => { - const indexOffsets: number[] = []; - let removedSoFar = 0; + return offsetGroupUtils.then(async ([{ groupByOffset }, { DateEngine }]) => { + const groups = await groupByOffset({ + dateEngine: new DateEngine(), + groupDateRange: 1, + startDate: new Date(referenceDateInMs).toISOString(), + }); - group.tzs.forEach((tz, index) => { - if (timeZoneNameBlockList.includes(tz)) { - removedSoFar++; - } - indexOffsets[index] = removedSoFar; - }); + const listFormatter = new Intl.ListFormat(locale, { style: "long", type: "conjunction" }); - group.tzs = group.tzs.filter((tz) => !timeZoneNameBlockList.includes(tz)); + // we remove blocked entries from tzs and adjust label indices accordingly + groups.forEach((group) => { + const indexOffsets: number[] = []; + let removedSoFar = 0; - group.labelTzIndices = group.labelTzIndices - .map((index) => index - indexOffsets[index]) - .filter((index) => index >= 0 && index < group.tzs.length); + group.tzs.forEach((tz, index) => { + if (timeZoneNameBlockList.includes(tz)) { + removedSoFar++; + } + indexOffsets[index] = removedSoFar; }); - const effectiveLocale = - standardTime === "user" - ? locale - : // we use locales that will always yield a short offset that matches `standardTime` - standardTime === "utc" - ? "fr" - : "en-GB"; - - return timeZoneGroups - .map>(({ labelTzIndices, tzs }) => { - const groupRepTz = tzs[0]; - const decimalOffset = timeZoneOffsetToDecimal( - getTimeZoneShortOffset(groupRepTz, effectiveLocale, referenceDateInMs), - ); - const value = toOffsetValue(groupRepTz, referenceDateInMs); - const tzLabels = labelTzIndices.map((index: number) => { - const timeZone = tzs[index]; - const timeZoneLabel = messages[timeZone]; - return ( - timeZoneLabel || - // get city token - timeZone.split("/").pop() - ); - }); - - const label = createTimeZoneOffsetLabel(messages, decimalOffset, listFormatter.format(tzLabels)); + group.tzs = group.tzs.filter((tz) => !timeZoneNameBlockList.includes(tz)); - return { - label, - value, - filterValue: tzs.map((tz) => toUserFriendlyName(tz)), - }; - }) - .filter((group) => !!group) - .sort((groupA, groupB) => groupA.value - groupB.value); + group.labelTzIdx = group.labelTzIdx + .map((index) => index - indexOffsets[index]) + .filter((index) => index >= 0 && index < group.tzs.length); }); - } - return timeZoneNames - .map>((timeZone) => { - const label = toUserFriendlyName(timeZone); - const value = timeZone; - - return { - label, - value, - filterValue: timeZone, - }; - }) - .filter((group) => !!group) - .sort(); + return groups + .map>(({ labelTzIdx, tzs }) => { + const groupRepTz = tzs[0]; + const decimalOffset = timeZoneOffsetToDecimal( + getTimeZoneShortOffset(groupRepTz, effectiveLocale, referenceDateInMs), + ); + const value = toOffsetValue(groupRepTz, referenceDateInMs); + const tzLabels = labelTzIdx.map((index: number) => getTimeZoneLabel(tzs[index], messages)); + const label = createTimeZoneOffsetLabel(messages, decimalOffset, listFormatter.format(tzLabels)); + + return { + label, + value, + filterValue: tzs.map((tz) => toUserFriendlyName(tz)), + }; + }) + .filter((group) => !!group) + .sort((groupA, groupB) => groupA.value - groupB.value); + }); +} + +function getTimeZoneLabel(timeZone: string, messages: InputTimeZoneMessages): string { + return messages[timeZone] || getCity(timeZone); +} + +/** + * Exported for testing purposes only + * + * @internal + */ +export function getCity(timeZone: string): string { + return timeZone.split("/").pop(); } /** @@ -174,7 +232,7 @@ function createTimeZoneOffsetLabel(messages: InputTimeZoneMessages, offsetLabel: } function getTimeZoneShortOffset( - timeZone: TimeZoneName, + timeZone: TimeZone, locale: SupportedLocale, referenceDateInMs: number = Date.now(), ): string { @@ -183,14 +241,22 @@ function getTimeZoneShortOffset( return parts.find(({ type }) => type === "timeZoneName").value; } +function isGroup(item: TimeZoneItem | TimeZoneItemGroup): item is TimeZoneItemGroup { + return (item as TimeZoneItemGroup).items !== undefined; +} + +function flattenTimeZoneItems(timeZoneItems: TimeZoneItem[] | TimeZoneItemGroup[]): TimeZoneItem[] { + return isGroup(timeZoneItems[0]) ? timeZoneItems.flatMap((item) => item.items) : timeZoneItems; +} + export function findTimeZoneItemByProp( - timeZoneItems: TimeZoneItem[], + timeZoneItems: TimeZoneItem[] | TimeZoneItemGroup[], prop: string, valueToMatch: string | number | null, ): TimeZoneItem | null { return valueToMatch == null ? null - : timeZoneItems.find( + : flattenTimeZoneItems(timeZoneItems).find( (item) => // intentional == to match string to number item[prop] == valueToMatch, diff --git a/packages/calcite-components/src/components/input/input.tsx b/packages/calcite-components/src/components/input/input.tsx index 483b0c19a6c..536f1d9928d 100644 --- a/packages/calcite-components/src/components/input/input.tsx +++ b/packages/calcite-components/src/components/input/input.tsx @@ -68,7 +68,7 @@ import { } from "../../utils/t9n"; import { getIconScale } from "../../utils/component"; import { Validation } from "../functional/Validation"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { InputMessages } from "./assets/input/t9n"; import { InputPlacement, NumberNudgeDirection, SetValueOrigin } from "./interfaces"; import { CSS, IDS, INPUT_TYPE_ICONS, SLOTS } from "./resources"; @@ -165,7 +165,7 @@ export class Input /** * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */ - @Prop({ reflect: true }) icon: IconName | boolean; + @Prop({ reflect: true }) icon: IconNameOrString | boolean; /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl = false; @@ -242,7 +242,7 @@ export class Input @Prop() validationMessage: string; /** Specifies the validation icon to display under the component. */ - @Prop({ reflect: true }) validationIcon: IconName | boolean; + @Prop({ reflect: true }) validationIcon: IconNameOrString | boolean; /** * The current validation state of the component. @@ -480,7 +480,7 @@ export class Input private previousValueOrigin: SetValueOrigin = "initial"; /** the computed icon to render */ - private requestedIcon?: IconName; + private requestedIcon?: IconNameOrString; private nudgeNumberValueIntervalId: number; diff --git a/packages/calcite-components/src/components/input/readme.md b/packages/calcite-components/src/components/input/readme.md index 24391a14029..e2e660d4cd0 100644 --- a/packages/calcite-components/src/components/input/readme.md +++ b/packages/calcite-components/src/components/input/readme.md @@ -17,7 +17,7 @@ For comprehensive guidance on using and implementing `calcite-input`, refer to t | `files` | -- | When `type` is `"file"`, specifies the component's selected files. | `FileList` | `undefined` | | `form` | `form` | The `id` of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | `string` | `undefined` | | `groupSeparator` | `group-separator` | When `true`, number values are displayed with a group separator corresponding to the language and country format. | `boolean` | `false` | -| `icon` | `icon` | When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. | `boolean \| IconName` | `undefined` | +| `icon` | `icon` | When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. | `boolean \| string` | `undefined` | | `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | | `label` | `label` | Accessible name for the component. | `string` | `undefined` | | `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | @@ -40,7 +40,7 @@ For comprehensive guidance on using and implementing `calcite-input`, refer to t | `step` | `step` | Specifies the granularity the component's `value` must adhere to. | `"any" \| number` | `undefined` | | `suffixText` | `suffix-text` | Adds text to the end of the component. | `string` | `undefined` | | `type` | `type` | Specifies the component type. Note that the following `type`s add type-specific icons by default: `"date"`, `"email"`, `"password"`, `"search"`, `"tel"`, `"time"`. | `"color" \| "date" \| "datetime-local" \| "email" \| "file" \| "image" \| "month" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "textarea" \| "time" \| "url" \| "week"` | `"text"` | -| `validationIcon` | `validation-icon` | Specifies the validation icon to display under the component. | `boolean \| IconName` | `undefined` | +| `validationIcon` | `validation-icon` | Specifies the validation icon to display under the component. | `boolean \| string` | `undefined` | | `validationMessage` | `validation-message` | Specifies the validation message to display under the component. | `string` | `undefined` | | `validity` | -- | The current validation state of the component. | `{ valid: boolean; badInput: boolean; customError: boolean; patternMismatch: boolean; rangeOverflow: boolean; rangeUnderflow: boolean; stepMismatch: boolean; tooLong: boolean; tooShort: boolean; typeMismatch: boolean; valueMissing: boolean; }` | `{ valid: false, badInput: false, customError: false, patternMismatch: false, rangeOverflow: false, rangeUnderflow: false, stepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false, valueMissing: false, }` | | `value` | `value` | The component's value. | `string` | `""` | diff --git a/packages/calcite-components/src/components/link/link.tsx b/packages/calcite-components/src/components/link/link.tsx index f83c0c7ba8f..507487b58d1 100644 --- a/packages/calcite-components/src/components/link/link.tsx +++ b/packages/calcite-components/src/components/link/link.tsx @@ -15,7 +15,7 @@ import { } from "../../utils/loadable"; import { CSS_UTILITY } from "../../utils/resources"; import { FlipContext } from "../interfaces"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; /** Any attributes placed on component will propagate to the rendered child */ /** Passing a 'href' will render an anchor link, instead of a span. Role will be set to link, or link, depending on this. */ @@ -48,13 +48,13 @@ export class Link implements InteractiveComponent, LoadableComponent { @Prop({ reflect: true }) href: string; /** Specifies an icon to display at the end of the component. */ - @Prop({ reflect: true }) iconEnd: IconName; + @Prop({ reflect: true }) iconEnd: IconNameOrString; /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl: FlipContext; /** Specifies an icon to display at the start of the component. */ - @Prop({ reflect: true }) iconStart: IconName; + @Prop({ reflect: true }) iconStart: IconNameOrString; /** Specifies the relationship to the linked document defined in `href`. */ @Prop() rel: string; diff --git a/packages/calcite-components/src/components/link/readme.md b/packages/calcite-components/src/components/link/readme.md index fc0cd62c9e3..899a5defa7c 100644 --- a/packages/calcite-components/src/components/link/readme.md +++ b/packages/calcite-components/src/components/link/readme.md @@ -6,16 +6,16 @@ For comprehensive guidance on using and implementing `calcite-link`, refer to th ## Properties -| Property | Attribute | Description | Type | Default | -| ------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `download` | `download` | Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value: Without a value, the browser will suggest a filename/extension See . | `boolean \| string` | `false` | -| `href` | `href` | Specifies the URL of the linked resource, which can be set as an absolute or relative path. | `string` | `undefined` | -| `iconEnd` | `icon-end` | Specifies an icon to display at the end of the component. | `CamelCaseIcons \| "date-time" \| "i12-x" \| "i14-x" \| "i18-x" \| "i1-x" \| "i2-d-explore" \| "i2-x" \| "i360-view" \| "i3-d-glasses" \| "i4-x" \| "i8-x" \| "a-z" \| "a-z-down" \| "a-z-up" \| "a3-landscape" \| "a3-portrait" \| "a4-landscape" \| "a4-portrait" \| "absolute-direction" \| "absolute-elevation" \| "access-string-results" \| "activity-monitor" \| "actual-size" \| "add-and-update-features" \| "add-constant" \| "add-features" \| "add-in" \| "add-in-edit" \| "add-in-new" \| "add-layer" \| "add-layer-service" \| "add-raster-variable" \| "add-rasters" \| "add-reaction" \| "add-text" \| "add-to-model" \| "address-book" \| "alert-off-circle-f" \| "all-servers" \| "analysis-overlay" \| "annotate-tool" \| "ansi-a-landscape" \| "ansi-a-portrait" \| "ansi-b-landscape" \| "ansi-b-portrait" \| "antenna-height" \| "app-gear" \| "app-launcher" \| "app-run" \| "app-update" \| "apply-changes" \| "apply-selection-to-existing-view" \| "arcgis-data-store" \| "arcgis-online" \| "arrow-bold-down" \| "arrow-bold-left" \| "arrow-bold-right" \| "arrow-bold-up" \| "arrow-circle-down" \| "arrow-circle-down-f" \| "arrow-double-diagonal1" \| "arrow-double-diagonal2" \| "arrow-double-horizontal" \| "arrow-double-vertical" \| "arrow-down" \| "arrow-down-left" \| "arrow-down-right" \| "arrow-left" \| "arrow-right" \| "arrow-right-left" \| "arrow-up" \| "arrow-up-down" \| "arrow-up-left" \| "arrow-up-right" \| "asterisk-large" \| "asterisk-small" \| "attachment-plus" \| "auto-layout" \| "battery-charging" \| "bear-left" \| "bear-right" \| "beginning-f" \| "bell-f" \| "bell-off" \| "bookmark-f" \| "border-radius-fully-rounded" \| "border-radius-rounded" \| "border-radius-sharp" \| "box-chart" \| "box-chart-series" \| "brackets-curly" \| "break-recurrence" \| "bring-forward" \| "bring-to-front" \| "browser-map" \| "brush-mark" \| "brush-mark-plus" \| "brush-tip" \| "bullet-point" \| "bullet-point-large" \| "camera-flash-off" \| "camera-flash-on" \| "camera-plus" \| "camera-switch-front-back" \| "camera-unlock" \| "caret-double-horizontal" \| "caret-double-vertical" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-square-down" \| "caret-square-left" \| "caret-square-right" \| "caret-square-up" \| "caret-up" \| "catalog-dataset" \| "center-align" \| "center-horizontal" \| "center-vertical" \| "change-detection" \| "change-font-size" \| "chart-gear" \| "chart-magnifying-glass" \| "check-circle" \| "check-circle-f" \| "check-extent" \| "check-layer" \| "check-shield" \| "check-square" \| "check-square-f" \| "chevron-down" \| "chevron-down-left" \| "chevron-down-right" \| "chevron-end" \| "chevron-left" \| "chevron-right" \| "chevron-start" \| "chevron-up" \| "chevron-up-left" \| "chevron-up-right" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chord-diagram" \| "circle-f" \| "circle-area" \| "circle-disallowed" \| "circle-inset-large" \| "circle-inset-medium" \| "circle-inset-small" \| "circle-pause" \| "circle-pause-f" \| "circle-stop" \| "circle-stop-f" \| "classify-objects" \| "classify-pixels" \| "clear-selection" \| "clipboard-brackets" \| "clock-down" \| "clock-forward" \| "clock-up" \| "cloud-data" \| "cloud-server" \| "code-branch" \| "code-branch-edit" \| "collaboration-distributed" \| "collaboration-user" \| "color-coded-map" \| "color-correction" \| "column-settings" \| "community-link-chart-layout" \| "compass-needle" \| "compass-north-circle" \| "conditional-rules" \| "conditional-rules-path" \| "conference-room" \| "configure-editing" \| "configure-grid-unit" \| "configure-popup" \| "content-full" \| "content-inline" \| "content-large" \| "content-medium" \| "content-minimal" \| "content-none" \| "content-side-by-side" \| "content-small" \| "contingent-values" \| "coordinate-system" \| "copy-to-clipboard" \| "credit-card" \| "cursor-click" \| "cursor-lock" \| "cursor-marquee" \| "cursor-minus" \| "cursor-plus" \| "cursor-selection" \| "custom-print" \| "cut-and-fill-volume-calculation" \| "data-card" \| "data-check" \| "data-clock-chart" \| "data-cloud" \| "data-folder" \| "data-magnifying-glass" \| "data-raster" \| "debug-script" \| "decrease-link-chart-symbol-size" \| "deep-learning" \| "deep-learning-project" \| "derived-value" \| "developer-credentials" \| "diamond-inset-large" \| "diamond-inset-medium" \| "diamond-inset-small" \| "dimensions-unit" \| "dimensions-wall" \| "display-selection-lock" \| "display-selection-unlock" \| "dissolve-features" \| "distance-type" \| "distribute-height-evenly" \| "distribute-width-evenly" \| "dock-bottom" \| "dock-left" \| "dock-right" \| "double-float" \| "download-to" \| "drive-time" \| "drive-time-largest" \| "drive-time-smallest" \| "drive-time-threshold" \| "drive-time-x-bar" \| "driving-distance" \| "driving-time" \| "drone-fixed-wing" \| "drone-flying-wing" \| "drone-quadcopter" \| "drone-quadcopter-top" \| "edit-attributes" \| "edit-geometry" \| "elevator-down" \| "elevator-up" \| "ellipsis-circle" \| "email-address" \| "embedded-card" \| "embedded-content" \| "embedded-live-content" \| "employee-id" \| "enable-disable-feature-selection" \| "end-f" \| "escalator-down" \| "escalator-up" \| "exclamation-mark-circle" \| "exclamation-mark-circle-f" \| "exclamation-mark-triangle" \| "exclamation-mark-triangle-f" \| "exclamation-point" \| "exclamation-point-f" \| "exit-highway-left" \| "exit-highway-right" \| "expression-defined-color" \| "extend-trim" \| "extent-filter" \| "face-id" \| "feature-details" \| "feature-layer" \| "file-archive" \| "file-cad" \| "file-code" \| "file-csv" \| "file-data" \| "file-ecd" \| "file-excel" \| "file-gpx" \| "file-image" \| "file-kml" \| "file-magnifying-glass" \| "file-pdf" \| "file-pdf-plus" \| "file-pitemx" \| "file-ppt" \| "file-report" \| "file-report-generic" \| "file-shape" \| "file-sound" \| "file-sqlite" \| "file-text" \| "file-user" \| "file-video" \| "file-word" \| "file-xml" \| "file-zip" \| "files-csv-collection" \| "filter-expand" \| "find-path" \| "flip-vertical" \| "floor-plan" \| "folder-f" \| "folder-archive" \| "folder-magnifying-glass" \| "folder-move" \| "folder-new" \| "folder-open" \| "folder-open-f" \| "folder-plus" \| "folder-star" \| "folder-video" \| "follow-pause" \| "follow-play" \| "force-directed-link-chart-layout" \| "fork-left" \| "fork-middle" \| "fork-right" \| "form-dropdown" \| "form-elements" \| "form-field" \| "form-field-multiline" \| "form-field-off" \| "forward-f" \| "four-by-one-grid" \| "four-by-three-grid" \| "four-by-two-grid" \| "frame-export" \| "freehand-area" \| "full-screen" \| "full-screen-exit" \| "function-editor" \| "gauge-summary" \| "geoanalytics-server" \| "geoevent-server" \| "geographic-link-chart-layout" \| "geonet-question" \| "gis-server" \| "gps-off" \| "gps-on" \| "gps-on-f" \| "graph-axis" \| "graph-bar100-stacked" \| "graph-bar" \| "graph-bar-side-by-side" \| "graph-bar-stacked" \| "graph-box-mean-lines" \| "graph-box-side-by-side" \| "graph-guides" \| "graph-histogram" \| "graph-line-series" \| "graph-moving-average" \| "graph-pie-slice" \| "graph-scatter-plot" \| "graph-time-series" \| "grid-diamond" \| "grid-hexagon" \| "grid-triangle" \| "grid-unit" \| "ground-control-point" \| "group-form" \| "group-form-plus" \| "group-items" \| "group-layers" \| "group-layout-elements" \| "group-x" \| "h3-hexagon" \| "handle-vertical" \| "heading-layout" \| "heading-rtl" \| "heart-f" \| "heat-chart" \| "heavy-rain" \| "heavy-snow" \| "hexagon2-inset-large" \| "hexagon2-inset-medium" \| "hexagon2-inset-small" \| "hexagon-inset-large" \| "hexagon-inset-medium" \| "hexagon-inset-small" \| "hide-derived-value" \| "hide-empty" \| "hide-layers" \| "hide-parameters" \| "hierarchical-link-chart-layout" \| "highlighter-tip" \| "highway-change" \| "highway-change-right" \| "hillshade-effect" \| "horizontal-distribute" \| "hourglass-active" \| "hourglass-expired" \| "image-chips" \| "image-collection-explorer" \| "image-display-order" \| "image-layer" \| "image-magnifying-glass" \| "image-mensuration" \| "image-pin" \| "image-plus" \| "image-segmentation" \| "image-server" \| "image-space" \| "image-unit" \| "increase-link-chart-symbol-size" \| "information-f" \| "information-letter" \| "initiative-template" \| "joined-view-layer" \| "knowledge-graph" \| "knowledge-graph-dashboard" \| "knowledge-graph-data-model" \| "knowledge-graph-data-store" \| "knowledge-graph-export" \| "knowledge-graph-import" \| "knowledge-graph-new" \| "knowledge-graph-relationship" \| "knowledge-layer" \| "knowledge-server" \| "knowledge-studio" \| "label-off" \| "language-translate" \| "lasso-select" \| "layer-basemap" \| "layer-broken" \| "layer-filter" \| "layer-graphics" \| "layer-hide" \| "layer-kml" \| "layer-line" \| "layer-line-service" \| "layer-map" \| "layer-map-service" \| "layer-points" \| "layer-polygon" \| "layer-polygon-service" \| "layer-service" \| "layer-settings" \| "layer-zoom-to" \| "layers-editable" \| "layers-f" \| "layers-reference" \| "layout-compact" \| "layout-horizontal" \| "layout-spacious" \| "layout-vertical" \| "left-align" \| "left-edge" \| "left-left" \| "left-right" \| "legend-left" \| "legend-plus" \| "legend-right" \| "light-rain" \| "light-snow" \| "line-check" \| "line-dashed" \| "line-dotted" \| "line-of-sight" \| "line-solid" \| "line-straight" \| "link-chart" \| "link-chart-expand" \| "link-chart-from-template" \| "list-bullet" \| "list-button" \| "list-check" \| "list-check-all" \| "list-merge" \| "list-number" \| "list-number-rtl" \| "list-radio" \| "list-rectangle" \| "list-show-all" \| "livestream-video-layer" \| "location-sharing" \| "location-sharing-f" \| "location-sharing-off" \| "lock-f" \| "ltr-elements-align" \| "ltr-paragraph-align" \| "magnifying-glass" \| "magnifying-glass-minus" \| "magnifying-glass-plus" \| "map-contents" \| "map-from-template" \| "map-level-settings" \| "map-pin" \| "map-space" \| "mask-inside" \| "mask-outside" \| "maximum-graph" \| "maximum-territory-distance" \| "measure-area" \| "measure-building-height-shadow" \| "measure-building-height-top-base" \| "measure-building-height-top-shadow" \| "measure-line" \| "media-layer" \| "mega-phone" \| "members-brackets" \| "merge-details" \| "merge-on-highway" \| "merge-on-highway-right" \| "merge-units" \| "microphone-plus" \| "min-distance-between-centers" \| "minimum-graph" \| "minus-circle" \| "minus-circle-f" \| "minus-square" \| "minus-square-f" \| "miscellaneous-collection" \| "mission-server" \| "mobile-off" \| "mobile-vibrate" \| "model-edit" \| "modify-associations" \| "move-from-basemap" \| "move-to-basemap" \| "move-up" \| "move-up-all" \| "multidimensional-raster" \| "multiple-variables" \| "music-note" \| "new-link-chart" \| "new-model" \| "new-raster-function-template" \| "new-training" \| "no-attachment" \| "no-image" \| "no-map" \| "nodes-link" \| "nodes-merge" \| "nodes-unlink" \| "nodes-unmerge" \| "notebook-server" \| "notebook-snapshot" \| "notepad-add" \| "notepad-edit" \| "number-circle1" \| "number-circle1-f" \| "number-circle2" \| "number-circle2-f" \| "number-circle3" \| "number-circle3-f" \| "number-circle4" \| "number-circle4-f" \| "number-circle5" \| "number-circle5-f" \| "number-circle6" \| "number-circle6-f" \| "number-circle7" \| "number-circle7-f" \| "number-circle8" \| "number-circle8-f" \| "number-circle9" \| "number-circle9-f" \| "number-of-territories" \| "object-detection" \| "objectstore-data-store" \| "on-the-ground-elevation" \| "open-book" \| "oriented-imagery-layer" \| "oriented-imagery-widget" \| "overlap-features" \| "overwrite-features" \| "overwrite-project" \| "paint-bucket" \| "palette-check" \| "pan-drag" \| "parcel-layer" \| "partly-cloudy" \| "paste-with-attribute" \| "paste-without-attribute" \| "pause-f" \| "pen-mark" \| "pen-mark-plus" \| "pen-tip" \| "pencil-mark" \| "pencil-mark-plus" \| "pencil-square" \| "pencil-tip" \| "personal-homepage" \| "pie-chart" \| "pin-plus" \| "pin-tear" \| "pin-tear-f" \| "play-f" \| "plus-circle" \| "plus-square" \| "point-line" \| "polygon-area" \| "polygon-line-check" \| "polygon-select" \| "polygon-vertices" \| "pop-up1" \| "pop-up-blank" \| "pop-up-blank-f" \| "premium-content-user-credit" \| "presentation-x" \| "print-preview" \| "processing-templates" \| "profile-variables" \| "project-mission" \| "project-template" \| "puzzle-piece" \| "qr-code" \| "qt-code" \| "question-f" \| "question-mark" \| "radial-tree-link-chart-layout" \| "rain-snow" \| "rain-thunder" \| "ramp-left" \| "ramp-right" \| "raster-analysis" \| "raster-function" \| "raster-function-template" \| "raster-function-template-play" \| "read-only-non-editable" \| "rectangle-area" \| "rectangle-plus" \| "recycle-bin" \| "refresh-f" \| "relational-data-store" \| "relative-direction" \| "relative-to-ground-elevation" \| "relative-to-scene-elevation" \| "remove-from-list" \| "remove-linkchart" \| "reorder-cards" \| "reorder-grid" \| "reorder-stack" \| "replace-image" \| "reshape-add-geometry" \| "reshape-subtract-geometry" \| "reshape-tool" \| "resize-area" \| "reverse-f" \| "ribbon-rosette" \| "right-align" \| "right-angle" \| "right-edge" \| "right-left" \| "right-right" \| "rings-largest" \| "rings-smallest" \| "rings-threshold" \| "rings-x-bar" \| "road-sign" \| "rotate-device" \| "round-about" \| "round-about-right" \| "rounded-rectangle" \| "route-from" \| "route-to" \| "rss-f" \| "rtl-elements-align" \| "rtl-paragraph-align" \| "running-outline" \| "rural-driving-distance" \| "rural-driving-time" \| "satellite0-f" \| "satellite1-f" \| "satellite2-f" \| "satellite3-f" \| "save-as" \| "scan-area" \| "scan-barcode" \| "scan-corridor" \| "scan-crosshatch" \| "scan-perimeter" \| "scan-vertical" \| "screenshot-mode" \| "select-by-attributes" \| "select-category" \| "select-column" \| "select-range" \| "select-visible" \| "selected-items-filter" \| "selection-filter" \| "selection-manager" \| "selection-set" \| "selection-x" \| "send-backwards" \| "send-to-back" \| "serial-port" \| "server-lock" \| "share-ios" \| "sharp-left" \| "sharp-right" \| "shield-coin" \| "shopping-cart" \| "show-all-parameters" \| "show-column" \| "show-derived-value" \| "show-multiple-layers-at-a-time" \| "show-one-layer-at-a-time" \| "show-required-parameters" \| "sign-in" \| "sign-out" \| "simple-link-chart-layout" \| "sky-plot" \| "sliders-horizontal" \| "smart-camera" \| "smart-form" \| "smart-tree-link-chart-layout" \| "snap-to-grid" \| "snap-to-pixel" \| "snap-to-point" \| "snow-thunder" \| "sort-ascending" \| "sort-ascending-arrow" \| "sort-descending" \| "sort-descending-arrow" \| "sound-low" \| "sound-off" \| "sound-unavailable" \| "spatiotemporal-data-store" \| "speech-bubble" \| "speech-bubble-check" \| "speech-bubble-exclamation" \| "speech-bubble-like" \| "speech-bubble-plus" \| "speech-bubble-social" \| "speech-bubbles" \| "split-features" \| "split-geometry" \| "split-units" \| "square-f" \| "square-area" \| "square-inset-large" \| "square-inset-medium" \| "square-inset-small" \| "stairs-down" \| "stairs-up" \| "star-f" \| "star-circle" \| "stop-square" \| "stop-square-f" \| "stored-as-new-query" \| "stored-query" \| "sub-fields" \| "subheading-rtl" \| "suitability-analysis-output" \| "summarize-center-and-dispersion1" \| "summarize-center-and-dispersion2" \| "summarize-center-and-dispersion3" \| "system-management" \| "tabbed-view" \| "take-pedestrian-ramp" \| "territory-buffer-distance" \| "test-data" \| "text-bold" \| "text-button" \| "text-dashed-underline" \| "text-large" \| "text-medium" \| "text-paragraph-large" \| "text-small" \| "text-solid-underline" \| "three-by-one-grid" \| "three-by-three-grid" \| "three-by-two-grid" \| "thumbs-down" \| "thumbs-up" \| "tile-cache-data-store" \| "tile-layer" \| "tiled-imagery-layer" \| "time-filter" \| "time-zone" \| "toggle-off" \| "toggle-on" \| "tour-pin-tear" \| "transverse-hexagon" \| "trapezoid-area" \| "trucking-distance" \| "trucking-time" \| "u-turn" \| "u-turn-right" \| "ungroup-items" \| "ungroup-layers" \| "ungroup-layout-elements" \| "update-features" \| "update-project" \| "upload-to" \| "urban-model" \| "usb-security-key" \| "user-calendar" \| "user-down" \| "user-key" \| "user-minus" \| "user-plus" \| "user-to-device" \| "user-up" \| "user-x" \| "utility-network" \| "utility-network-trace" \| "validate-utility-network-topology" \| "vertex-check" \| "vertex-edit" \| "vertex-gps" \| "vertex-move" \| "vertex-plus" \| "vertex-x" \| "vertical-distribute" \| "video-layer" \| "video-plus" \| "video-server" \| "video-single-server" \| "video-web" \| "view-associations" \| "view-hide" \| "view-mixed" \| "view-visible" \| "walk-through-door" \| "walking-distance" \| "walking-time" \| "widgets-group" \| "widgets-source" \| "widgets-tabs" \| "workflow-diagram" \| "workflow-manager-server" \| "x-axis-guide" \| "x-bar" \| "x-circle" \| "x-circle-f" \| "x-octagon" \| "x-octagon-f" \| "y-axis-guide" \| "zoom-in-fixed" \| "zoom-out-fixed" \| "zoom-to-object"` | `undefined` | -| `iconFlipRtl` | `icon-flip-rtl` | Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). | `"both" \| "end" \| "start"` | `undefined` | -| `iconStart` | `icon-start` | Specifies an icon to display at the start of the component. | `CamelCaseIcons \| "date-time" \| "i12-x" \| "i14-x" \| "i18-x" \| "i1-x" \| "i2-d-explore" \| "i2-x" \| "i360-view" \| "i3-d-glasses" \| "i4-x" \| "i8-x" \| "a-z" \| "a-z-down" \| "a-z-up" \| "a3-landscape" \| "a3-portrait" \| "a4-landscape" \| "a4-portrait" \| "absolute-direction" \| "absolute-elevation" \| "access-string-results" \| "activity-monitor" \| "actual-size" \| "add-and-update-features" \| "add-constant" \| "add-features" \| "add-in" \| "add-in-edit" \| "add-in-new" \| "add-layer" \| "add-layer-service" \| "add-raster-variable" \| "add-rasters" \| "add-reaction" \| "add-text" \| "add-to-model" \| "address-book" \| "alert-off-circle-f" \| "all-servers" \| "analysis-overlay" \| "annotate-tool" \| "ansi-a-landscape" \| "ansi-a-portrait" \| "ansi-b-landscape" \| "ansi-b-portrait" \| "antenna-height" \| "app-gear" \| "app-launcher" \| "app-run" \| "app-update" \| "apply-changes" \| "apply-selection-to-existing-view" \| "arcgis-data-store" \| "arcgis-online" \| "arrow-bold-down" \| "arrow-bold-left" \| "arrow-bold-right" \| "arrow-bold-up" \| "arrow-circle-down" \| "arrow-circle-down-f" \| "arrow-double-diagonal1" \| "arrow-double-diagonal2" \| "arrow-double-horizontal" \| "arrow-double-vertical" \| "arrow-down" \| "arrow-down-left" \| "arrow-down-right" \| "arrow-left" \| "arrow-right" \| "arrow-right-left" \| "arrow-up" \| "arrow-up-down" \| "arrow-up-left" \| "arrow-up-right" \| "asterisk-large" \| "asterisk-small" \| "attachment-plus" \| "auto-layout" \| "battery-charging" \| "bear-left" \| "bear-right" \| "beginning-f" \| "bell-f" \| "bell-off" \| "bookmark-f" \| "border-radius-fully-rounded" \| "border-radius-rounded" \| "border-radius-sharp" \| "box-chart" \| "box-chart-series" \| "brackets-curly" \| "break-recurrence" \| "bring-forward" \| "bring-to-front" \| "browser-map" \| "brush-mark" \| "brush-mark-plus" \| "brush-tip" \| "bullet-point" \| "bullet-point-large" \| "camera-flash-off" \| "camera-flash-on" \| "camera-plus" \| "camera-switch-front-back" \| "camera-unlock" \| "caret-double-horizontal" \| "caret-double-vertical" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-square-down" \| "caret-square-left" \| "caret-square-right" \| "caret-square-up" \| "caret-up" \| "catalog-dataset" \| "center-align" \| "center-horizontal" \| "center-vertical" \| "change-detection" \| "change-font-size" \| "chart-gear" \| "chart-magnifying-glass" \| "check-circle" \| "check-circle-f" \| "check-extent" \| "check-layer" \| "check-shield" \| "check-square" \| "check-square-f" \| "chevron-down" \| "chevron-down-left" \| "chevron-down-right" \| "chevron-end" \| "chevron-left" \| "chevron-right" \| "chevron-start" \| "chevron-up" \| "chevron-up-left" \| "chevron-up-right" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chord-diagram" \| "circle-f" \| "circle-area" \| "circle-disallowed" \| "circle-inset-large" \| "circle-inset-medium" \| "circle-inset-small" \| "circle-pause" \| "circle-pause-f" \| "circle-stop" \| "circle-stop-f" \| "classify-objects" \| "classify-pixels" \| "clear-selection" \| "clipboard-brackets" \| "clock-down" \| "clock-forward" \| "clock-up" \| "cloud-data" \| "cloud-server" \| "code-branch" \| "code-branch-edit" \| "collaboration-distributed" \| "collaboration-user" \| "color-coded-map" \| "color-correction" \| "column-settings" \| "community-link-chart-layout" \| "compass-needle" \| "compass-north-circle" \| "conditional-rules" \| "conditional-rules-path" \| "conference-room" \| "configure-editing" \| "configure-grid-unit" \| "configure-popup" \| "content-full" \| "content-inline" \| "content-large" \| "content-medium" \| "content-minimal" \| "content-none" \| "content-side-by-side" \| "content-small" \| "contingent-values" \| "coordinate-system" \| "copy-to-clipboard" \| "credit-card" \| "cursor-click" \| "cursor-lock" \| "cursor-marquee" \| "cursor-minus" \| "cursor-plus" \| "cursor-selection" \| "custom-print" \| "cut-and-fill-volume-calculation" \| "data-card" \| "data-check" \| "data-clock-chart" \| "data-cloud" \| "data-folder" \| "data-magnifying-glass" \| "data-raster" \| "debug-script" \| "decrease-link-chart-symbol-size" \| "deep-learning" \| "deep-learning-project" \| "derived-value" \| "developer-credentials" \| "diamond-inset-large" \| "diamond-inset-medium" \| "diamond-inset-small" \| "dimensions-unit" \| "dimensions-wall" \| "display-selection-lock" \| "display-selection-unlock" \| "dissolve-features" \| "distance-type" \| "distribute-height-evenly" \| "distribute-width-evenly" \| "dock-bottom" \| "dock-left" \| "dock-right" \| "double-float" \| "download-to" \| "drive-time" \| "drive-time-largest" \| "drive-time-smallest" \| "drive-time-threshold" \| "drive-time-x-bar" \| "driving-distance" \| "driving-time" \| "drone-fixed-wing" \| "drone-flying-wing" \| "drone-quadcopter" \| "drone-quadcopter-top" \| "edit-attributes" \| "edit-geometry" \| "elevator-down" \| "elevator-up" \| "ellipsis-circle" \| "email-address" \| "embedded-card" \| "embedded-content" \| "embedded-live-content" \| "employee-id" \| "enable-disable-feature-selection" \| "end-f" \| "escalator-down" \| "escalator-up" \| "exclamation-mark-circle" \| "exclamation-mark-circle-f" \| "exclamation-mark-triangle" \| "exclamation-mark-triangle-f" \| "exclamation-point" \| "exclamation-point-f" \| "exit-highway-left" \| "exit-highway-right" \| "expression-defined-color" \| "extend-trim" \| "extent-filter" \| "face-id" \| "feature-details" \| "feature-layer" \| "file-archive" \| "file-cad" \| "file-code" \| "file-csv" \| "file-data" \| "file-ecd" \| "file-excel" \| "file-gpx" \| "file-image" \| "file-kml" \| "file-magnifying-glass" \| "file-pdf" \| "file-pdf-plus" \| "file-pitemx" \| "file-ppt" \| "file-report" \| "file-report-generic" \| "file-shape" \| "file-sound" \| "file-sqlite" \| "file-text" \| "file-user" \| "file-video" \| "file-word" \| "file-xml" \| "file-zip" \| "files-csv-collection" \| "filter-expand" \| "find-path" \| "flip-vertical" \| "floor-plan" \| "folder-f" \| "folder-archive" \| "folder-magnifying-glass" \| "folder-move" \| "folder-new" \| "folder-open" \| "folder-open-f" \| "folder-plus" \| "folder-star" \| "folder-video" \| "follow-pause" \| "follow-play" \| "force-directed-link-chart-layout" \| "fork-left" \| "fork-middle" \| "fork-right" \| "form-dropdown" \| "form-elements" \| "form-field" \| "form-field-multiline" \| "form-field-off" \| "forward-f" \| "four-by-one-grid" \| "four-by-three-grid" \| "four-by-two-grid" \| "frame-export" \| "freehand-area" \| "full-screen" \| "full-screen-exit" \| "function-editor" \| "gauge-summary" \| "geoanalytics-server" \| "geoevent-server" \| "geographic-link-chart-layout" \| "geonet-question" \| "gis-server" \| "gps-off" \| "gps-on" \| "gps-on-f" \| "graph-axis" \| "graph-bar100-stacked" \| "graph-bar" \| "graph-bar-side-by-side" \| "graph-bar-stacked" \| "graph-box-mean-lines" \| "graph-box-side-by-side" \| "graph-guides" \| "graph-histogram" \| "graph-line-series" \| "graph-moving-average" \| "graph-pie-slice" \| "graph-scatter-plot" \| "graph-time-series" \| "grid-diamond" \| "grid-hexagon" \| "grid-triangle" \| "grid-unit" \| "ground-control-point" \| "group-form" \| "group-form-plus" \| "group-items" \| "group-layers" \| "group-layout-elements" \| "group-x" \| "h3-hexagon" \| "handle-vertical" \| "heading-layout" \| "heading-rtl" \| "heart-f" \| "heat-chart" \| "heavy-rain" \| "heavy-snow" \| "hexagon2-inset-large" \| "hexagon2-inset-medium" \| "hexagon2-inset-small" \| "hexagon-inset-large" \| "hexagon-inset-medium" \| "hexagon-inset-small" \| "hide-derived-value" \| "hide-empty" \| "hide-layers" \| "hide-parameters" \| "hierarchical-link-chart-layout" \| "highlighter-tip" \| "highway-change" \| "highway-change-right" \| "hillshade-effect" \| "horizontal-distribute" \| "hourglass-active" \| "hourglass-expired" \| "image-chips" \| "image-collection-explorer" \| "image-display-order" \| "image-layer" \| "image-magnifying-glass" \| "image-mensuration" \| "image-pin" \| "image-plus" \| "image-segmentation" \| "image-server" \| "image-space" \| "image-unit" \| "increase-link-chart-symbol-size" \| "information-f" \| "information-letter" \| "initiative-template" \| "joined-view-layer" \| "knowledge-graph" \| "knowledge-graph-dashboard" \| "knowledge-graph-data-model" \| "knowledge-graph-data-store" \| "knowledge-graph-export" \| "knowledge-graph-import" \| "knowledge-graph-new" \| "knowledge-graph-relationship" \| "knowledge-layer" \| "knowledge-server" \| "knowledge-studio" \| "label-off" \| "language-translate" \| "lasso-select" \| "layer-basemap" \| "layer-broken" \| "layer-filter" \| "layer-graphics" \| "layer-hide" \| "layer-kml" \| "layer-line" \| "layer-line-service" \| "layer-map" \| "layer-map-service" \| "layer-points" \| "layer-polygon" \| "layer-polygon-service" \| "layer-service" \| "layer-settings" \| "layer-zoom-to" \| "layers-editable" \| "layers-f" \| "layers-reference" \| "layout-compact" \| "layout-horizontal" \| "layout-spacious" \| "layout-vertical" \| "left-align" \| "left-edge" \| "left-left" \| "left-right" \| "legend-left" \| "legend-plus" \| "legend-right" \| "light-rain" \| "light-snow" \| "line-check" \| "line-dashed" \| "line-dotted" \| "line-of-sight" \| "line-solid" \| "line-straight" \| "link-chart" \| "link-chart-expand" \| "link-chart-from-template" \| "list-bullet" \| "list-button" \| "list-check" \| "list-check-all" \| "list-merge" \| "list-number" \| "list-number-rtl" \| "list-radio" \| "list-rectangle" \| "list-show-all" \| "livestream-video-layer" \| "location-sharing" \| "location-sharing-f" \| "location-sharing-off" \| "lock-f" \| "ltr-elements-align" \| "ltr-paragraph-align" \| "magnifying-glass" \| "magnifying-glass-minus" \| "magnifying-glass-plus" \| "map-contents" \| "map-from-template" \| "map-level-settings" \| "map-pin" \| "map-space" \| "mask-inside" \| "mask-outside" \| "maximum-graph" \| "maximum-territory-distance" \| "measure-area" \| "measure-building-height-shadow" \| "measure-building-height-top-base" \| "measure-building-height-top-shadow" \| "measure-line" \| "media-layer" \| "mega-phone" \| "members-brackets" \| "merge-details" \| "merge-on-highway" \| "merge-on-highway-right" \| "merge-units" \| "microphone-plus" \| "min-distance-between-centers" \| "minimum-graph" \| "minus-circle" \| "minus-circle-f" \| "minus-square" \| "minus-square-f" \| "miscellaneous-collection" \| "mission-server" \| "mobile-off" \| "mobile-vibrate" \| "model-edit" \| "modify-associations" \| "move-from-basemap" \| "move-to-basemap" \| "move-up" \| "move-up-all" \| "multidimensional-raster" \| "multiple-variables" \| "music-note" \| "new-link-chart" \| "new-model" \| "new-raster-function-template" \| "new-training" \| "no-attachment" \| "no-image" \| "no-map" \| "nodes-link" \| "nodes-merge" \| "nodes-unlink" \| "nodes-unmerge" \| "notebook-server" \| "notebook-snapshot" \| "notepad-add" \| "notepad-edit" \| "number-circle1" \| "number-circle1-f" \| "number-circle2" \| "number-circle2-f" \| "number-circle3" \| "number-circle3-f" \| "number-circle4" \| "number-circle4-f" \| "number-circle5" \| "number-circle5-f" \| "number-circle6" \| "number-circle6-f" \| "number-circle7" \| "number-circle7-f" \| "number-circle8" \| "number-circle8-f" \| "number-circle9" \| "number-circle9-f" \| "number-of-territories" \| "object-detection" \| "objectstore-data-store" \| "on-the-ground-elevation" \| "open-book" \| "oriented-imagery-layer" \| "oriented-imagery-widget" \| "overlap-features" \| "overwrite-features" \| "overwrite-project" \| "paint-bucket" \| "palette-check" \| "pan-drag" \| "parcel-layer" \| "partly-cloudy" \| "paste-with-attribute" \| "paste-without-attribute" \| "pause-f" \| "pen-mark" \| "pen-mark-plus" \| "pen-tip" \| "pencil-mark" \| "pencil-mark-plus" \| "pencil-square" \| "pencil-tip" \| "personal-homepage" \| "pie-chart" \| "pin-plus" \| "pin-tear" \| "pin-tear-f" \| "play-f" \| "plus-circle" \| "plus-square" \| "point-line" \| "polygon-area" \| "polygon-line-check" \| "polygon-select" \| "polygon-vertices" \| "pop-up1" \| "pop-up-blank" \| "pop-up-blank-f" \| "premium-content-user-credit" \| "presentation-x" \| "print-preview" \| "processing-templates" \| "profile-variables" \| "project-mission" \| "project-template" \| "puzzle-piece" \| "qr-code" \| "qt-code" \| "question-f" \| "question-mark" \| "radial-tree-link-chart-layout" \| "rain-snow" \| "rain-thunder" \| "ramp-left" \| "ramp-right" \| "raster-analysis" \| "raster-function" \| "raster-function-template" \| "raster-function-template-play" \| "read-only-non-editable" \| "rectangle-area" \| "rectangle-plus" \| "recycle-bin" \| "refresh-f" \| "relational-data-store" \| "relative-direction" \| "relative-to-ground-elevation" \| "relative-to-scene-elevation" \| "remove-from-list" \| "remove-linkchart" \| "reorder-cards" \| "reorder-grid" \| "reorder-stack" \| "replace-image" \| "reshape-add-geometry" \| "reshape-subtract-geometry" \| "reshape-tool" \| "resize-area" \| "reverse-f" \| "ribbon-rosette" \| "right-align" \| "right-angle" \| "right-edge" \| "right-left" \| "right-right" \| "rings-largest" \| "rings-smallest" \| "rings-threshold" \| "rings-x-bar" \| "road-sign" \| "rotate-device" \| "round-about" \| "round-about-right" \| "rounded-rectangle" \| "route-from" \| "route-to" \| "rss-f" \| "rtl-elements-align" \| "rtl-paragraph-align" \| "running-outline" \| "rural-driving-distance" \| "rural-driving-time" \| "satellite0-f" \| "satellite1-f" \| "satellite2-f" \| "satellite3-f" \| "save-as" \| "scan-area" \| "scan-barcode" \| "scan-corridor" \| "scan-crosshatch" \| "scan-perimeter" \| "scan-vertical" \| "screenshot-mode" \| "select-by-attributes" \| "select-category" \| "select-column" \| "select-range" \| "select-visible" \| "selected-items-filter" \| "selection-filter" \| "selection-manager" \| "selection-set" \| "selection-x" \| "send-backwards" \| "send-to-back" \| "serial-port" \| "server-lock" \| "share-ios" \| "sharp-left" \| "sharp-right" \| "shield-coin" \| "shopping-cart" \| "show-all-parameters" \| "show-column" \| "show-derived-value" \| "show-multiple-layers-at-a-time" \| "show-one-layer-at-a-time" \| "show-required-parameters" \| "sign-in" \| "sign-out" \| "simple-link-chart-layout" \| "sky-plot" \| "sliders-horizontal" \| "smart-camera" \| "smart-form" \| "smart-tree-link-chart-layout" \| "snap-to-grid" \| "snap-to-pixel" \| "snap-to-point" \| "snow-thunder" \| "sort-ascending" \| "sort-ascending-arrow" \| "sort-descending" \| "sort-descending-arrow" \| "sound-low" \| "sound-off" \| "sound-unavailable" \| "spatiotemporal-data-store" \| "speech-bubble" \| "speech-bubble-check" \| "speech-bubble-exclamation" \| "speech-bubble-like" \| "speech-bubble-plus" \| "speech-bubble-social" \| "speech-bubbles" \| "split-features" \| "split-geometry" \| "split-units" \| "square-f" \| "square-area" \| "square-inset-large" \| "square-inset-medium" \| "square-inset-small" \| "stairs-down" \| "stairs-up" \| "star-f" \| "star-circle" \| "stop-square" \| "stop-square-f" \| "stored-as-new-query" \| "stored-query" \| "sub-fields" \| "subheading-rtl" \| "suitability-analysis-output" \| "summarize-center-and-dispersion1" \| "summarize-center-and-dispersion2" \| "summarize-center-and-dispersion3" \| "system-management" \| "tabbed-view" \| "take-pedestrian-ramp" \| "territory-buffer-distance" \| "test-data" \| "text-bold" \| "text-button" \| "text-dashed-underline" \| "text-large" \| "text-medium" \| "text-paragraph-large" \| "text-small" \| "text-solid-underline" \| "three-by-one-grid" \| "three-by-three-grid" \| "three-by-two-grid" \| "thumbs-down" \| "thumbs-up" \| "tile-cache-data-store" \| "tile-layer" \| "tiled-imagery-layer" \| "time-filter" \| "time-zone" \| "toggle-off" \| "toggle-on" \| "tour-pin-tear" \| "transverse-hexagon" \| "trapezoid-area" \| "trucking-distance" \| "trucking-time" \| "u-turn" \| "u-turn-right" \| "ungroup-items" \| "ungroup-layers" \| "ungroup-layout-elements" \| "update-features" \| "update-project" \| "upload-to" \| "urban-model" \| "usb-security-key" \| "user-calendar" \| "user-down" \| "user-key" \| "user-minus" \| "user-plus" \| "user-to-device" \| "user-up" \| "user-x" \| "utility-network" \| "utility-network-trace" \| "validate-utility-network-topology" \| "vertex-check" \| "vertex-edit" \| "vertex-gps" \| "vertex-move" \| "vertex-plus" \| "vertex-x" \| "vertical-distribute" \| "video-layer" \| "video-plus" \| "video-server" \| "video-single-server" \| "video-web" \| "view-associations" \| "view-hide" \| "view-mixed" \| "view-visible" \| "walk-through-door" \| "walking-distance" \| "walking-time" \| "widgets-group" \| "widgets-source" \| "widgets-tabs" \| "workflow-diagram" \| "workflow-manager-server" \| "x-axis-guide" \| "x-bar" \| "x-circle" \| "x-circle-f" \| "x-octagon" \| "x-octagon-f" \| "y-axis-guide" \| "zoom-in-fixed" \| "zoom-out-fixed" \| "zoom-to-object"` | `undefined` | -| `rel` | `rel` | Specifies the relationship to the linked document defined in `href`. | `string` | `undefined` | -| `target` | `target` | Specifies the frame or window to open the linked document. | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `download` | `download` | Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value: Without a value, the browser will suggest a filename/extension See . | `boolean \| string` | `false` | +| `href` | `href` | Specifies the URL of the linked resource, which can be set as an absolute or relative path. | `string` | `undefined` | +| `iconEnd` | `icon-end` | Specifies an icon to display at the end of the component. | `string` | `undefined` | +| `iconFlipRtl` | `icon-flip-rtl` | Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). | `"both" \| "end" \| "start"` | `undefined` | +| `iconStart` | `icon-start` | Specifies an icon to display at the start of the component. | `string` | `undefined` | +| `rel` | `rel` | Specifies the relationship to the linked document defined in `href`. | `string` | `undefined` | +| `target` | `target` | Specifies the frame or window to open the linked document. | `string` | `undefined` | ## Methods diff --git a/packages/calcite-components/src/components/list-item/list-item.tsx b/packages/calcite-components/src/components/list-item/list-item.tsx index 6d9e924f41e..5aa7f664d0c 100644 --- a/packages/calcite-components/src/components/list-item/list-item.tsx +++ b/packages/calcite-components/src/components/list-item/list-item.tsx @@ -55,7 +55,7 @@ const focusMap = new Map(); const listSelector = "calcite-list"; /** - * @slot - A slot for adding `calcite-list-item` and `calcite-list-item-group` elements. + * @slot - A slot for adding `calcite-list`, `calcite-list-item` and `calcite-list-item-group` elements. * @slot actions-start - A slot for adding actionable `calcite-action` elements before the content of the component. * @slot content-start - A slot for adding non-actionable elements before the label and description of the component. * @slot content - A slot for adding non-actionable, centered content in place of the `label` and `description` of the component. diff --git a/packages/calcite-components/src/components/menu-item/menu-item.tsx b/packages/calcite-components/src/components/menu-item/menu-item.tsx index f54fdb40829..50aa5f8e046 100644 --- a/packages/calcite-components/src/components/menu-item/menu-item.tsx +++ b/packages/calcite-components/src/components/menu-item/menu-item.tsx @@ -30,7 +30,7 @@ import { updateMessages, } from "../../utils/t9n"; import { LocalizedComponent, connectLocalized, disconnectLocalized } from "../../utils/locale"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { CSS } from "./resources"; import { MenuItemCustomEvent } from "./interfaces"; import { MenuItemMessages } from "./assets/menu-item/t9n"; @@ -63,13 +63,13 @@ export class CalciteMenuItem implements LoadableComponent, T9nComponent, Localiz @Prop() href: string; /** Specifies an icon to display at the end of the component. */ - @Prop({ reflect: true }) iconEnd: IconName; + @Prop({ reflect: true }) iconEnd: IconNameOrString; /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl: FlipContext; /** Specifies an icon to display at the start of the component. */ - @Prop({ reflect: true }) iconStart: IconName; + @Prop({ reflect: true }) iconStart: IconNameOrString; /** * @internal diff --git a/packages/calcite-components/src/components/menu-item/readme.md b/packages/calcite-components/src/components/menu-item/readme.md index d3b13340a9f..681add56717 100644 --- a/packages/calcite-components/src/components/menu-item/readme.md +++ b/packages/calcite-components/src/components/menu-item/readme.md @@ -6,20 +6,20 @@ For comprehensive guidance on using and implementing `calcite-menu-item`, refer ## Properties -| Property | Attribute | Description | Type | Default | -| -------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `active` | `active` | When `true`, the component is highlighted. | `boolean` | `undefined` | -| `breadcrumb` | `breadcrumb` | When `true`, the component displays a breadcrumb trail for use as a navigational aid. | `boolean` | `undefined` | -| `href` | `href` | Specifies the URL destination of the component, which can be set as an absolute or relative path. | `string` | `undefined` | -| `iconEnd` | `icon-end` | Specifies an icon to display at the end of the component. | `CamelCaseIcons \| "date-time" \| "i12-x" \| "i14-x" \| "i18-x" \| "i1-x" \| "i2-d-explore" \| "i2-x" \| "i360-view" \| "i3-d-glasses" \| "i4-x" \| "i8-x" \| "a-z" \| "a-z-down" \| "a-z-up" \| "a3-landscape" \| "a3-portrait" \| "a4-landscape" \| "a4-portrait" \| "absolute-direction" \| "absolute-elevation" \| "access-string-results" \| "activity-monitor" \| "actual-size" \| "add-and-update-features" \| "add-constant" \| "add-features" \| "add-in" \| "add-in-edit" \| "add-in-new" \| "add-layer" \| "add-layer-service" \| "add-raster-variable" \| "add-rasters" \| "add-reaction" \| "add-text" \| "add-to-model" \| "address-book" \| "alert-off-circle-f" \| "all-servers" \| "analysis-overlay" \| "annotate-tool" \| "ansi-a-landscape" \| "ansi-a-portrait" \| "ansi-b-landscape" \| "ansi-b-portrait" \| "antenna-height" \| "app-gear" \| "app-launcher" \| "app-run" \| "app-update" \| "apply-changes" \| "apply-selection-to-existing-view" \| "arcgis-data-store" \| "arcgis-online" \| "arrow-bold-down" \| "arrow-bold-left" \| "arrow-bold-right" \| "arrow-bold-up" \| "arrow-circle-down" \| "arrow-circle-down-f" \| "arrow-double-diagonal1" \| "arrow-double-diagonal2" \| "arrow-double-horizontal" \| "arrow-double-vertical" \| "arrow-down" \| "arrow-down-left" \| "arrow-down-right" \| "arrow-left" \| "arrow-right" \| "arrow-right-left" \| "arrow-up" \| "arrow-up-down" \| "arrow-up-left" \| "arrow-up-right" \| "asterisk-large" \| "asterisk-small" \| "attachment-plus" \| "auto-layout" \| "battery-charging" \| "bear-left" \| "bear-right" \| "beginning-f" \| "bell-f" \| "bell-off" \| "bookmark-f" \| "border-radius-fully-rounded" \| "border-radius-rounded" \| "border-radius-sharp" \| "box-chart" \| "box-chart-series" \| "brackets-curly" \| "break-recurrence" \| "bring-forward" \| "bring-to-front" \| "browser-map" \| "brush-mark" \| "brush-mark-plus" \| "brush-tip" \| "bullet-point" \| "bullet-point-large" \| "camera-flash-off" \| "camera-flash-on" \| "camera-plus" \| "camera-switch-front-back" \| "camera-unlock" \| "caret-double-horizontal" \| "caret-double-vertical" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-square-down" \| "caret-square-left" \| "caret-square-right" \| "caret-square-up" \| "caret-up" \| "catalog-dataset" \| "center-align" \| "center-horizontal" \| "center-vertical" \| "change-detection" \| "change-font-size" \| "chart-gear" \| "chart-magnifying-glass" \| "check-circle" \| "check-circle-f" \| "check-extent" \| "check-layer" \| "check-shield" \| "check-square" \| "check-square-f" \| "chevron-down" \| "chevron-down-left" \| "chevron-down-right" \| "chevron-end" \| "chevron-left" \| "chevron-right" \| "chevron-start" \| "chevron-up" \| "chevron-up-left" \| "chevron-up-right" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chord-diagram" \| "circle-f" \| "circle-area" \| "circle-disallowed" \| "circle-inset-large" \| "circle-inset-medium" \| "circle-inset-small" \| "circle-pause" \| "circle-pause-f" \| "circle-stop" \| "circle-stop-f" \| "classify-objects" \| "classify-pixels" \| "clear-selection" \| "clipboard-brackets" \| "clock-down" \| "clock-forward" \| "clock-up" \| "cloud-data" \| "cloud-server" \| "code-branch" \| "code-branch-edit" \| "collaboration-distributed" \| "collaboration-user" \| "color-coded-map" \| "color-correction" \| "column-settings" \| "community-link-chart-layout" \| "compass-needle" \| "compass-north-circle" \| "conditional-rules" \| "conditional-rules-path" \| "conference-room" \| "configure-editing" \| "configure-grid-unit" \| "configure-popup" \| "content-full" \| "content-inline" \| "content-large" \| "content-medium" \| "content-minimal" \| "content-none" \| "content-side-by-side" \| "content-small" \| "contingent-values" \| "coordinate-system" \| "copy-to-clipboard" \| "credit-card" \| "cursor-click" \| "cursor-lock" \| "cursor-marquee" \| "cursor-minus" \| "cursor-plus" \| "cursor-selection" \| "custom-print" \| "cut-and-fill-volume-calculation" \| "data-card" \| "data-check" \| "data-clock-chart" \| "data-cloud" \| "data-folder" \| "data-magnifying-glass" \| "data-raster" \| "debug-script" \| "decrease-link-chart-symbol-size" \| "deep-learning" \| "deep-learning-project" \| "derived-value" \| "developer-credentials" \| "diamond-inset-large" \| "diamond-inset-medium" \| "diamond-inset-small" \| "dimensions-unit" \| "dimensions-wall" \| "display-selection-lock" \| "display-selection-unlock" \| "dissolve-features" \| "distance-type" \| "distribute-height-evenly" \| "distribute-width-evenly" \| "dock-bottom" \| "dock-left" \| "dock-right" \| "double-float" \| "download-to" \| "drive-time" \| "drive-time-largest" \| "drive-time-smallest" \| "drive-time-threshold" \| "drive-time-x-bar" \| "driving-distance" \| "driving-time" \| "drone-fixed-wing" \| "drone-flying-wing" \| "drone-quadcopter" \| "drone-quadcopter-top" \| "edit-attributes" \| "edit-geometry" \| "elevator-down" \| "elevator-up" \| "ellipsis-circle" \| "email-address" \| "embedded-card" \| "embedded-content" \| "embedded-live-content" \| "employee-id" \| "enable-disable-feature-selection" \| "end-f" \| "escalator-down" \| "escalator-up" \| "exclamation-mark-circle" \| "exclamation-mark-circle-f" \| "exclamation-mark-triangle" \| "exclamation-mark-triangle-f" \| "exclamation-point" \| "exclamation-point-f" \| "exit-highway-left" \| "exit-highway-right" \| "expression-defined-color" \| "extend-trim" \| "extent-filter" \| "face-id" \| "feature-details" \| "feature-layer" \| "file-archive" \| "file-cad" \| "file-code" \| "file-csv" \| "file-data" \| "file-ecd" \| "file-excel" \| "file-gpx" \| "file-image" \| "file-kml" \| "file-magnifying-glass" \| "file-pdf" \| "file-pdf-plus" \| "file-pitemx" \| "file-ppt" \| "file-report" \| "file-report-generic" \| "file-shape" \| "file-sound" \| "file-sqlite" \| "file-text" \| "file-user" \| "file-video" \| "file-word" \| "file-xml" \| "file-zip" \| "files-csv-collection" \| "filter-expand" \| "find-path" \| "flip-vertical" \| "floor-plan" \| "folder-f" \| "folder-archive" \| "folder-magnifying-glass" \| "folder-move" \| "folder-new" \| "folder-open" \| "folder-open-f" \| "folder-plus" \| "folder-star" \| "folder-video" \| "follow-pause" \| "follow-play" \| "force-directed-link-chart-layout" \| "fork-left" \| "fork-middle" \| "fork-right" \| "form-dropdown" \| "form-elements" \| "form-field" \| "form-field-multiline" \| "form-field-off" \| "forward-f" \| "four-by-one-grid" \| "four-by-three-grid" \| "four-by-two-grid" \| "frame-export" \| "freehand-area" \| "full-screen" \| "full-screen-exit" \| "function-editor" \| "gauge-summary" \| "geoanalytics-server" \| "geoevent-server" \| "geographic-link-chart-layout" \| "geonet-question" \| "gis-server" \| "gps-off" \| "gps-on" \| "gps-on-f" \| "graph-axis" \| "graph-bar100-stacked" \| "graph-bar" \| "graph-bar-side-by-side" \| "graph-bar-stacked" \| "graph-box-mean-lines" \| "graph-box-side-by-side" \| "graph-guides" \| "graph-histogram" \| "graph-line-series" \| "graph-moving-average" \| "graph-pie-slice" \| "graph-scatter-plot" \| "graph-time-series" \| "grid-diamond" \| "grid-hexagon" \| "grid-triangle" \| "grid-unit" \| "ground-control-point" \| "group-form" \| "group-form-plus" \| "group-items" \| "group-layers" \| "group-layout-elements" \| "group-x" \| "h3-hexagon" \| "handle-vertical" \| "heading-layout" \| "heading-rtl" \| "heart-f" \| "heat-chart" \| "heavy-rain" \| "heavy-snow" \| "hexagon2-inset-large" \| "hexagon2-inset-medium" \| "hexagon2-inset-small" \| "hexagon-inset-large" \| "hexagon-inset-medium" \| "hexagon-inset-small" \| "hide-derived-value" \| "hide-empty" \| "hide-layers" \| "hide-parameters" \| "hierarchical-link-chart-layout" \| "highlighter-tip" \| "highway-change" \| "highway-change-right" \| "hillshade-effect" \| "horizontal-distribute" \| "hourglass-active" \| "hourglass-expired" \| "image-chips" \| "image-collection-explorer" \| "image-display-order" \| "image-layer" \| "image-magnifying-glass" \| "image-mensuration" \| "image-pin" \| "image-plus" \| "image-segmentation" \| "image-server" \| "image-space" \| "image-unit" \| "increase-link-chart-symbol-size" \| "information-f" \| "information-letter" \| "initiative-template" \| "joined-view-layer" \| "knowledge-graph" \| "knowledge-graph-dashboard" \| "knowledge-graph-data-model" \| "knowledge-graph-data-store" \| "knowledge-graph-export" \| "knowledge-graph-import" \| "knowledge-graph-new" \| "knowledge-graph-relationship" \| "knowledge-layer" \| "knowledge-server" \| "knowledge-studio" \| "label-off" \| "language-translate" \| "lasso-select" \| "layer-basemap" \| "layer-broken" \| "layer-filter" \| "layer-graphics" \| "layer-hide" \| "layer-kml" \| "layer-line" \| "layer-line-service" \| "layer-map" \| "layer-map-service" \| "layer-points" \| "layer-polygon" \| "layer-polygon-service" \| "layer-service" \| "layer-settings" \| "layer-zoom-to" \| "layers-editable" \| "layers-f" \| "layers-reference" \| "layout-compact" \| "layout-horizontal" \| "layout-spacious" \| "layout-vertical" \| "left-align" \| "left-edge" \| "left-left" \| "left-right" \| "legend-left" \| "legend-plus" \| "legend-right" \| "light-rain" \| "light-snow" \| "line-check" \| "line-dashed" \| "line-dotted" \| "line-of-sight" \| "line-solid" \| "line-straight" \| "link-chart" \| "link-chart-expand" \| "link-chart-from-template" \| "list-bullet" \| "list-button" \| "list-check" \| "list-check-all" \| "list-merge" \| "list-number" \| "list-number-rtl" \| "list-radio" \| "list-rectangle" \| "list-show-all" \| "livestream-video-layer" \| "location-sharing" \| "location-sharing-f" \| "location-sharing-off" \| "lock-f" \| "ltr-elements-align" \| "ltr-paragraph-align" \| "magnifying-glass" \| "magnifying-glass-minus" \| "magnifying-glass-plus" \| "map-contents" \| "map-from-template" \| "map-level-settings" \| "map-pin" \| "map-space" \| "mask-inside" \| "mask-outside" \| "maximum-graph" \| "maximum-territory-distance" \| "measure-area" \| "measure-building-height-shadow" \| "measure-building-height-top-base" \| "measure-building-height-top-shadow" \| "measure-line" \| "media-layer" \| "mega-phone" \| "members-brackets" \| "merge-details" \| "merge-on-highway" \| "merge-on-highway-right" \| "merge-units" \| "microphone-plus" \| "min-distance-between-centers" \| "minimum-graph" \| "minus-circle" \| "minus-circle-f" \| "minus-square" \| "minus-square-f" \| "miscellaneous-collection" \| "mission-server" \| "mobile-off" \| "mobile-vibrate" \| "model-edit" \| "modify-associations" \| "move-from-basemap" \| "move-to-basemap" \| "move-up" \| "move-up-all" \| "multidimensional-raster" \| "multiple-variables" \| "music-note" \| "new-link-chart" \| "new-model" \| "new-raster-function-template" \| "new-training" \| "no-attachment" \| "no-image" \| "no-map" \| "nodes-link" \| "nodes-merge" \| "nodes-unlink" \| "nodes-unmerge" \| "notebook-server" \| "notebook-snapshot" \| "notepad-add" \| "notepad-edit" \| "number-circle1" \| "number-circle1-f" \| "number-circle2" \| "number-circle2-f" \| "number-circle3" \| "number-circle3-f" \| "number-circle4" \| "number-circle4-f" \| "number-circle5" \| "number-circle5-f" \| "number-circle6" \| "number-circle6-f" \| "number-circle7" \| "number-circle7-f" \| "number-circle8" \| "number-circle8-f" \| "number-circle9" \| "number-circle9-f" \| "number-of-territories" \| "object-detection" \| "objectstore-data-store" \| "on-the-ground-elevation" \| "open-book" \| "oriented-imagery-layer" \| "oriented-imagery-widget" \| "overlap-features" \| "overwrite-features" \| "overwrite-project" \| "paint-bucket" \| "palette-check" \| "pan-drag" \| "parcel-layer" \| "partly-cloudy" \| "paste-with-attribute" \| "paste-without-attribute" \| "pause-f" \| "pen-mark" \| "pen-mark-plus" \| "pen-tip" \| "pencil-mark" \| "pencil-mark-plus" \| "pencil-square" \| "pencil-tip" \| "personal-homepage" \| "pie-chart" \| "pin-plus" \| "pin-tear" \| "pin-tear-f" \| "play-f" \| "plus-circle" \| "plus-square" \| "point-line" \| "polygon-area" \| "polygon-line-check" \| "polygon-select" \| "polygon-vertices" \| "pop-up1" \| "pop-up-blank" \| "pop-up-blank-f" \| "premium-content-user-credit" \| "presentation-x" \| "print-preview" \| "processing-templates" \| "profile-variables" \| "project-mission" \| "project-template" \| "puzzle-piece" \| "qr-code" \| "qt-code" \| "question-f" \| "question-mark" \| "radial-tree-link-chart-layout" \| "rain-snow" \| "rain-thunder" \| "ramp-left" \| "ramp-right" \| "raster-analysis" \| "raster-function" \| "raster-function-template" \| "raster-function-template-play" \| "read-only-non-editable" \| "rectangle-area" \| "rectangle-plus" \| "recycle-bin" \| "refresh-f" \| "relational-data-store" \| "relative-direction" \| "relative-to-ground-elevation" \| "relative-to-scene-elevation" \| "remove-from-list" \| "remove-linkchart" \| "reorder-cards" \| "reorder-grid" \| "reorder-stack" \| "replace-image" \| "reshape-add-geometry" \| "reshape-subtract-geometry" \| "reshape-tool" \| "resize-area" \| "reverse-f" \| "ribbon-rosette" \| "right-align" \| "right-angle" \| "right-edge" \| "right-left" \| "right-right" \| "rings-largest" \| "rings-smallest" \| "rings-threshold" \| "rings-x-bar" \| "road-sign" \| "rotate-device" \| "round-about" \| "round-about-right" \| "rounded-rectangle" \| "route-from" \| "route-to" \| "rss-f" \| "rtl-elements-align" \| "rtl-paragraph-align" \| "running-outline" \| "rural-driving-distance" \| "rural-driving-time" \| "satellite0-f" \| "satellite1-f" \| "satellite2-f" \| "satellite3-f" \| "save-as" \| "scan-area" \| "scan-barcode" \| "scan-corridor" \| "scan-crosshatch" \| "scan-perimeter" \| "scan-vertical" \| "screenshot-mode" \| "select-by-attributes" \| "select-category" \| "select-column" \| "select-range" \| "select-visible" \| "selected-items-filter" \| "selection-filter" \| "selection-manager" \| "selection-set" \| "selection-x" \| "send-backwards" \| "send-to-back" \| "serial-port" \| "server-lock" \| "share-ios" \| "sharp-left" \| "sharp-right" \| "shield-coin" \| "shopping-cart" \| "show-all-parameters" \| "show-column" \| "show-derived-value" \| "show-multiple-layers-at-a-time" \| "show-one-layer-at-a-time" \| "show-required-parameters" \| "sign-in" \| "sign-out" \| "simple-link-chart-layout" \| "sky-plot" \| "sliders-horizontal" \| "smart-camera" \| "smart-form" \| "smart-tree-link-chart-layout" \| "snap-to-grid" \| "snap-to-pixel" \| "snap-to-point" \| "snow-thunder" \| "sort-ascending" \| "sort-ascending-arrow" \| "sort-descending" \| "sort-descending-arrow" \| "sound-low" \| "sound-off" \| "sound-unavailable" \| "spatiotemporal-data-store" \| "speech-bubble" \| "speech-bubble-check" \| "speech-bubble-exclamation" \| "speech-bubble-like" \| "speech-bubble-plus" \| "speech-bubble-social" \| "speech-bubbles" \| "split-features" \| "split-geometry" \| "split-units" \| "square-f" \| "square-area" \| "square-inset-large" \| "square-inset-medium" \| "square-inset-small" \| "stairs-down" \| "stairs-up" \| "star-f" \| "star-circle" \| "stop-square" \| "stop-square-f" \| "stored-as-new-query" \| "stored-query" \| "sub-fields" \| "subheading-rtl" \| "suitability-analysis-output" \| "summarize-center-and-dispersion1" \| "summarize-center-and-dispersion2" \| "summarize-center-and-dispersion3" \| "system-management" \| "tabbed-view" \| "take-pedestrian-ramp" \| "territory-buffer-distance" \| "test-data" \| "text-bold" \| "text-button" \| "text-dashed-underline" \| "text-large" \| "text-medium" \| "text-paragraph-large" \| "text-small" \| "text-solid-underline" \| "three-by-one-grid" \| "three-by-three-grid" \| "three-by-two-grid" \| "thumbs-down" \| "thumbs-up" \| "tile-cache-data-store" \| "tile-layer" \| "tiled-imagery-layer" \| "time-filter" \| "time-zone" \| "toggle-off" \| "toggle-on" \| "tour-pin-tear" \| "transverse-hexagon" \| "trapezoid-area" \| "trucking-distance" \| "trucking-time" \| "u-turn" \| "u-turn-right" \| "ungroup-items" \| "ungroup-layers" \| "ungroup-layout-elements" \| "update-features" \| "update-project" \| "upload-to" \| "urban-model" \| "usb-security-key" \| "user-calendar" \| "user-down" \| "user-key" \| "user-minus" \| "user-plus" \| "user-to-device" \| "user-up" \| "user-x" \| "utility-network" \| "utility-network-trace" \| "validate-utility-network-topology" \| "vertex-check" \| "vertex-edit" \| "vertex-gps" \| "vertex-move" \| "vertex-plus" \| "vertex-x" \| "vertical-distribute" \| "video-layer" \| "video-plus" \| "video-server" \| "video-single-server" \| "video-web" \| "view-associations" \| "view-hide" \| "view-mixed" \| "view-visible" \| "walk-through-door" \| "walking-distance" \| "walking-time" \| "widgets-group" \| "widgets-source" \| "widgets-tabs" \| "workflow-diagram" \| "workflow-manager-server" \| "x-axis-guide" \| "x-bar" \| "x-circle" \| "x-circle-f" \| "x-octagon" \| "x-octagon-f" \| "y-axis-guide" \| "zoom-in-fixed" \| "zoom-out-fixed" \| "zoom-to-object"` | `undefined` | -| `iconFlipRtl` | `icon-flip-rtl` | Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). | `"both" \| "end" \| "start"` | `undefined` | -| `iconStart` | `icon-start` | Specifies an icon to display at the start of the component. | `CamelCaseIcons \| "date-time" \| "i12-x" \| "i14-x" \| "i18-x" \| "i1-x" \| "i2-d-explore" \| "i2-x" \| "i360-view" \| "i3-d-glasses" \| "i4-x" \| "i8-x" \| "a-z" \| "a-z-down" \| "a-z-up" \| "a3-landscape" \| "a3-portrait" \| "a4-landscape" \| "a4-portrait" \| "absolute-direction" \| "absolute-elevation" \| "access-string-results" \| "activity-monitor" \| "actual-size" \| "add-and-update-features" \| "add-constant" \| "add-features" \| "add-in" \| "add-in-edit" \| "add-in-new" \| "add-layer" \| "add-layer-service" \| "add-raster-variable" \| "add-rasters" \| "add-reaction" \| "add-text" \| "add-to-model" \| "address-book" \| "alert-off-circle-f" \| "all-servers" \| "analysis-overlay" \| "annotate-tool" \| "ansi-a-landscape" \| "ansi-a-portrait" \| "ansi-b-landscape" \| "ansi-b-portrait" \| "antenna-height" \| "app-gear" \| "app-launcher" \| "app-run" \| "app-update" \| "apply-changes" \| "apply-selection-to-existing-view" \| "arcgis-data-store" \| "arcgis-online" \| "arrow-bold-down" \| "arrow-bold-left" \| "arrow-bold-right" \| "arrow-bold-up" \| "arrow-circle-down" \| "arrow-circle-down-f" \| "arrow-double-diagonal1" \| "arrow-double-diagonal2" \| "arrow-double-horizontal" \| "arrow-double-vertical" \| "arrow-down" \| "arrow-down-left" \| "arrow-down-right" \| "arrow-left" \| "arrow-right" \| "arrow-right-left" \| "arrow-up" \| "arrow-up-down" \| "arrow-up-left" \| "arrow-up-right" \| "asterisk-large" \| "asterisk-small" \| "attachment-plus" \| "auto-layout" \| "battery-charging" \| "bear-left" \| "bear-right" \| "beginning-f" \| "bell-f" \| "bell-off" \| "bookmark-f" \| "border-radius-fully-rounded" \| "border-radius-rounded" \| "border-radius-sharp" \| "box-chart" \| "box-chart-series" \| "brackets-curly" \| "break-recurrence" \| "bring-forward" \| "bring-to-front" \| "browser-map" \| "brush-mark" \| "brush-mark-plus" \| "brush-tip" \| "bullet-point" \| "bullet-point-large" \| "camera-flash-off" \| "camera-flash-on" \| "camera-plus" \| "camera-switch-front-back" \| "camera-unlock" \| "caret-double-horizontal" \| "caret-double-vertical" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-square-down" \| "caret-square-left" \| "caret-square-right" \| "caret-square-up" \| "caret-up" \| "catalog-dataset" \| "center-align" \| "center-horizontal" \| "center-vertical" \| "change-detection" \| "change-font-size" \| "chart-gear" \| "chart-magnifying-glass" \| "check-circle" \| "check-circle-f" \| "check-extent" \| "check-layer" \| "check-shield" \| "check-square" \| "check-square-f" \| "chevron-down" \| "chevron-down-left" \| "chevron-down-right" \| "chevron-end" \| "chevron-left" \| "chevron-right" \| "chevron-start" \| "chevron-up" \| "chevron-up-left" \| "chevron-up-right" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chord-diagram" \| "circle-f" \| "circle-area" \| "circle-disallowed" \| "circle-inset-large" \| "circle-inset-medium" \| "circle-inset-small" \| "circle-pause" \| "circle-pause-f" \| "circle-stop" \| "circle-stop-f" \| "classify-objects" \| "classify-pixels" \| "clear-selection" \| "clipboard-brackets" \| "clock-down" \| "clock-forward" \| "clock-up" \| "cloud-data" \| "cloud-server" \| "code-branch" \| "code-branch-edit" \| "collaboration-distributed" \| "collaboration-user" \| "color-coded-map" \| "color-correction" \| "column-settings" \| "community-link-chart-layout" \| "compass-needle" \| "compass-north-circle" \| "conditional-rules" \| "conditional-rules-path" \| "conference-room" \| "configure-editing" \| "configure-grid-unit" \| "configure-popup" \| "content-full" \| "content-inline" \| "content-large" \| "content-medium" \| "content-minimal" \| "content-none" \| "content-side-by-side" \| "content-small" \| "contingent-values" \| "coordinate-system" \| "copy-to-clipboard" \| "credit-card" \| "cursor-click" \| "cursor-lock" \| "cursor-marquee" \| "cursor-minus" \| "cursor-plus" \| "cursor-selection" \| "custom-print" \| "cut-and-fill-volume-calculation" \| "data-card" \| "data-check" \| "data-clock-chart" \| "data-cloud" \| "data-folder" \| "data-magnifying-glass" \| "data-raster" \| "debug-script" \| "decrease-link-chart-symbol-size" \| "deep-learning" \| "deep-learning-project" \| "derived-value" \| "developer-credentials" \| "diamond-inset-large" \| "diamond-inset-medium" \| "diamond-inset-small" \| "dimensions-unit" \| "dimensions-wall" \| "display-selection-lock" \| "display-selection-unlock" \| "dissolve-features" \| "distance-type" \| "distribute-height-evenly" \| "distribute-width-evenly" \| "dock-bottom" \| "dock-left" \| "dock-right" \| "double-float" \| "download-to" \| "drive-time" \| "drive-time-largest" \| "drive-time-smallest" \| "drive-time-threshold" \| "drive-time-x-bar" \| "driving-distance" \| "driving-time" \| "drone-fixed-wing" \| "drone-flying-wing" \| "drone-quadcopter" \| "drone-quadcopter-top" \| "edit-attributes" \| "edit-geometry" \| "elevator-down" \| "elevator-up" \| "ellipsis-circle" \| "email-address" \| "embedded-card" \| "embedded-content" \| "embedded-live-content" \| "employee-id" \| "enable-disable-feature-selection" \| "end-f" \| "escalator-down" \| "escalator-up" \| "exclamation-mark-circle" \| "exclamation-mark-circle-f" \| "exclamation-mark-triangle" \| "exclamation-mark-triangle-f" \| "exclamation-point" \| "exclamation-point-f" \| "exit-highway-left" \| "exit-highway-right" \| "expression-defined-color" \| "extend-trim" \| "extent-filter" \| "face-id" \| "feature-details" \| "feature-layer" \| "file-archive" \| "file-cad" \| "file-code" \| "file-csv" \| "file-data" \| "file-ecd" \| "file-excel" \| "file-gpx" \| "file-image" \| "file-kml" \| "file-magnifying-glass" \| "file-pdf" \| "file-pdf-plus" \| "file-pitemx" \| "file-ppt" \| "file-report" \| "file-report-generic" \| "file-shape" \| "file-sound" \| "file-sqlite" \| "file-text" \| "file-user" \| "file-video" \| "file-word" \| "file-xml" \| "file-zip" \| "files-csv-collection" \| "filter-expand" \| "find-path" \| "flip-vertical" \| "floor-plan" \| "folder-f" \| "folder-archive" \| "folder-magnifying-glass" \| "folder-move" \| "folder-new" \| "folder-open" \| "folder-open-f" \| "folder-plus" \| "folder-star" \| "folder-video" \| "follow-pause" \| "follow-play" \| "force-directed-link-chart-layout" \| "fork-left" \| "fork-middle" \| "fork-right" \| "form-dropdown" \| "form-elements" \| "form-field" \| "form-field-multiline" \| "form-field-off" \| "forward-f" \| "four-by-one-grid" \| "four-by-three-grid" \| "four-by-two-grid" \| "frame-export" \| "freehand-area" \| "full-screen" \| "full-screen-exit" \| "function-editor" \| "gauge-summary" \| "geoanalytics-server" \| "geoevent-server" \| "geographic-link-chart-layout" \| "geonet-question" \| "gis-server" \| "gps-off" \| "gps-on" \| "gps-on-f" \| "graph-axis" \| "graph-bar100-stacked" \| "graph-bar" \| "graph-bar-side-by-side" \| "graph-bar-stacked" \| "graph-box-mean-lines" \| "graph-box-side-by-side" \| "graph-guides" \| "graph-histogram" \| "graph-line-series" \| "graph-moving-average" \| "graph-pie-slice" \| "graph-scatter-plot" \| "graph-time-series" \| "grid-diamond" \| "grid-hexagon" \| "grid-triangle" \| "grid-unit" \| "ground-control-point" \| "group-form" \| "group-form-plus" \| "group-items" \| "group-layers" \| "group-layout-elements" \| "group-x" \| "h3-hexagon" \| "handle-vertical" \| "heading-layout" \| "heading-rtl" \| "heart-f" \| "heat-chart" \| "heavy-rain" \| "heavy-snow" \| "hexagon2-inset-large" \| "hexagon2-inset-medium" \| "hexagon2-inset-small" \| "hexagon-inset-large" \| "hexagon-inset-medium" \| "hexagon-inset-small" \| "hide-derived-value" \| "hide-empty" \| "hide-layers" \| "hide-parameters" \| "hierarchical-link-chart-layout" \| "highlighter-tip" \| "highway-change" \| "highway-change-right" \| "hillshade-effect" \| "horizontal-distribute" \| "hourglass-active" \| "hourglass-expired" \| "image-chips" \| "image-collection-explorer" \| "image-display-order" \| "image-layer" \| "image-magnifying-glass" \| "image-mensuration" \| "image-pin" \| "image-plus" \| "image-segmentation" \| "image-server" \| "image-space" \| "image-unit" \| "increase-link-chart-symbol-size" \| "information-f" \| "information-letter" \| "initiative-template" \| "joined-view-layer" \| "knowledge-graph" \| "knowledge-graph-dashboard" \| "knowledge-graph-data-model" \| "knowledge-graph-data-store" \| "knowledge-graph-export" \| "knowledge-graph-import" \| "knowledge-graph-new" \| "knowledge-graph-relationship" \| "knowledge-layer" \| "knowledge-server" \| "knowledge-studio" \| "label-off" \| "language-translate" \| "lasso-select" \| "layer-basemap" \| "layer-broken" \| "layer-filter" \| "layer-graphics" \| "layer-hide" \| "layer-kml" \| "layer-line" \| "layer-line-service" \| "layer-map" \| "layer-map-service" \| "layer-points" \| "layer-polygon" \| "layer-polygon-service" \| "layer-service" \| "layer-settings" \| "layer-zoom-to" \| "layers-editable" \| "layers-f" \| "layers-reference" \| "layout-compact" \| "layout-horizontal" \| "layout-spacious" \| "layout-vertical" \| "left-align" \| "left-edge" \| "left-left" \| "left-right" \| "legend-left" \| "legend-plus" \| "legend-right" \| "light-rain" \| "light-snow" \| "line-check" \| "line-dashed" \| "line-dotted" \| "line-of-sight" \| "line-solid" \| "line-straight" \| "link-chart" \| "link-chart-expand" \| "link-chart-from-template" \| "list-bullet" \| "list-button" \| "list-check" \| "list-check-all" \| "list-merge" \| "list-number" \| "list-number-rtl" \| "list-radio" \| "list-rectangle" \| "list-show-all" \| "livestream-video-layer" \| "location-sharing" \| "location-sharing-f" \| "location-sharing-off" \| "lock-f" \| "ltr-elements-align" \| "ltr-paragraph-align" \| "magnifying-glass" \| "magnifying-glass-minus" \| "magnifying-glass-plus" \| "map-contents" \| "map-from-template" \| "map-level-settings" \| "map-pin" \| "map-space" \| "mask-inside" \| "mask-outside" \| "maximum-graph" \| "maximum-territory-distance" \| "measure-area" \| "measure-building-height-shadow" \| "measure-building-height-top-base" \| "measure-building-height-top-shadow" \| "measure-line" \| "media-layer" \| "mega-phone" \| "members-brackets" \| "merge-details" \| "merge-on-highway" \| "merge-on-highway-right" \| "merge-units" \| "microphone-plus" \| "min-distance-between-centers" \| "minimum-graph" \| "minus-circle" \| "minus-circle-f" \| "minus-square" \| "minus-square-f" \| "miscellaneous-collection" \| "mission-server" \| "mobile-off" \| "mobile-vibrate" \| "model-edit" \| "modify-associations" \| "move-from-basemap" \| "move-to-basemap" \| "move-up" \| "move-up-all" \| "multidimensional-raster" \| "multiple-variables" \| "music-note" \| "new-link-chart" \| "new-model" \| "new-raster-function-template" \| "new-training" \| "no-attachment" \| "no-image" \| "no-map" \| "nodes-link" \| "nodes-merge" \| "nodes-unlink" \| "nodes-unmerge" \| "notebook-server" \| "notebook-snapshot" \| "notepad-add" \| "notepad-edit" \| "number-circle1" \| "number-circle1-f" \| "number-circle2" \| "number-circle2-f" \| "number-circle3" \| "number-circle3-f" \| "number-circle4" \| "number-circle4-f" \| "number-circle5" \| "number-circle5-f" \| "number-circle6" \| "number-circle6-f" \| "number-circle7" \| "number-circle7-f" \| "number-circle8" \| "number-circle8-f" \| "number-circle9" \| "number-circle9-f" \| "number-of-territories" \| "object-detection" \| "objectstore-data-store" \| "on-the-ground-elevation" \| "open-book" \| "oriented-imagery-layer" \| "oriented-imagery-widget" \| "overlap-features" \| "overwrite-features" \| "overwrite-project" \| "paint-bucket" \| "palette-check" \| "pan-drag" \| "parcel-layer" \| "partly-cloudy" \| "paste-with-attribute" \| "paste-without-attribute" \| "pause-f" \| "pen-mark" \| "pen-mark-plus" \| "pen-tip" \| "pencil-mark" \| "pencil-mark-plus" \| "pencil-square" \| "pencil-tip" \| "personal-homepage" \| "pie-chart" \| "pin-plus" \| "pin-tear" \| "pin-tear-f" \| "play-f" \| "plus-circle" \| "plus-square" \| "point-line" \| "polygon-area" \| "polygon-line-check" \| "polygon-select" \| "polygon-vertices" \| "pop-up1" \| "pop-up-blank" \| "pop-up-blank-f" \| "premium-content-user-credit" \| "presentation-x" \| "print-preview" \| "processing-templates" \| "profile-variables" \| "project-mission" \| "project-template" \| "puzzle-piece" \| "qr-code" \| "qt-code" \| "question-f" \| "question-mark" \| "radial-tree-link-chart-layout" \| "rain-snow" \| "rain-thunder" \| "ramp-left" \| "ramp-right" \| "raster-analysis" \| "raster-function" \| "raster-function-template" \| "raster-function-template-play" \| "read-only-non-editable" \| "rectangle-area" \| "rectangle-plus" \| "recycle-bin" \| "refresh-f" \| "relational-data-store" \| "relative-direction" \| "relative-to-ground-elevation" \| "relative-to-scene-elevation" \| "remove-from-list" \| "remove-linkchart" \| "reorder-cards" \| "reorder-grid" \| "reorder-stack" \| "replace-image" \| "reshape-add-geometry" \| "reshape-subtract-geometry" \| "reshape-tool" \| "resize-area" \| "reverse-f" \| "ribbon-rosette" \| "right-align" \| "right-angle" \| "right-edge" \| "right-left" \| "right-right" \| "rings-largest" \| "rings-smallest" \| "rings-threshold" \| "rings-x-bar" \| "road-sign" \| "rotate-device" \| "round-about" \| "round-about-right" \| "rounded-rectangle" \| "route-from" \| "route-to" \| "rss-f" \| "rtl-elements-align" \| "rtl-paragraph-align" \| "running-outline" \| "rural-driving-distance" \| "rural-driving-time" \| "satellite0-f" \| "satellite1-f" \| "satellite2-f" \| "satellite3-f" \| "save-as" \| "scan-area" \| "scan-barcode" \| "scan-corridor" \| "scan-crosshatch" \| "scan-perimeter" \| "scan-vertical" \| "screenshot-mode" \| "select-by-attributes" \| "select-category" \| "select-column" \| "select-range" \| "select-visible" \| "selected-items-filter" \| "selection-filter" \| "selection-manager" \| "selection-set" \| "selection-x" \| "send-backwards" \| "send-to-back" \| "serial-port" \| "server-lock" \| "share-ios" \| "sharp-left" \| "sharp-right" \| "shield-coin" \| "shopping-cart" \| "show-all-parameters" \| "show-column" \| "show-derived-value" \| "show-multiple-layers-at-a-time" \| "show-one-layer-at-a-time" \| "show-required-parameters" \| "sign-in" \| "sign-out" \| "simple-link-chart-layout" \| "sky-plot" \| "sliders-horizontal" \| "smart-camera" \| "smart-form" \| "smart-tree-link-chart-layout" \| "snap-to-grid" \| "snap-to-pixel" \| "snap-to-point" \| "snow-thunder" \| "sort-ascending" \| "sort-ascending-arrow" \| "sort-descending" \| "sort-descending-arrow" \| "sound-low" \| "sound-off" \| "sound-unavailable" \| "spatiotemporal-data-store" \| "speech-bubble" \| "speech-bubble-check" \| "speech-bubble-exclamation" \| "speech-bubble-like" \| "speech-bubble-plus" \| "speech-bubble-social" \| "speech-bubbles" \| "split-features" \| "split-geometry" \| "split-units" \| "square-f" \| "square-area" \| "square-inset-large" \| "square-inset-medium" \| "square-inset-small" \| "stairs-down" \| "stairs-up" \| "star-f" \| "star-circle" \| "stop-square" \| "stop-square-f" \| "stored-as-new-query" \| "stored-query" \| "sub-fields" \| "subheading-rtl" \| "suitability-analysis-output" \| "summarize-center-and-dispersion1" \| "summarize-center-and-dispersion2" \| "summarize-center-and-dispersion3" \| "system-management" \| "tabbed-view" \| "take-pedestrian-ramp" \| "territory-buffer-distance" \| "test-data" \| "text-bold" \| "text-button" \| "text-dashed-underline" \| "text-large" \| "text-medium" \| "text-paragraph-large" \| "text-small" \| "text-solid-underline" \| "three-by-one-grid" \| "three-by-three-grid" \| "three-by-two-grid" \| "thumbs-down" \| "thumbs-up" \| "tile-cache-data-store" \| "tile-layer" \| "tiled-imagery-layer" \| "time-filter" \| "time-zone" \| "toggle-off" \| "toggle-on" \| "tour-pin-tear" \| "transverse-hexagon" \| "trapezoid-area" \| "trucking-distance" \| "trucking-time" \| "u-turn" \| "u-turn-right" \| "ungroup-items" \| "ungroup-layers" \| "ungroup-layout-elements" \| "update-features" \| "update-project" \| "upload-to" \| "urban-model" \| "usb-security-key" \| "user-calendar" \| "user-down" \| "user-key" \| "user-minus" \| "user-plus" \| "user-to-device" \| "user-up" \| "user-x" \| "utility-network" \| "utility-network-trace" \| "validate-utility-network-topology" \| "vertex-check" \| "vertex-edit" \| "vertex-gps" \| "vertex-move" \| "vertex-plus" \| "vertex-x" \| "vertical-distribute" \| "video-layer" \| "video-plus" \| "video-server" \| "video-single-server" \| "video-web" \| "view-associations" \| "view-hide" \| "view-mixed" \| "view-visible" \| "walk-through-door" \| "walking-distance" \| "walking-time" \| "widgets-group" \| "widgets-source" \| "widgets-tabs" \| "workflow-diagram" \| "workflow-manager-server" \| "x-axis-guide" \| "x-bar" \| "x-circle" \| "x-circle-f" \| "x-octagon" \| "x-octagon-f" \| "y-axis-guide" \| "zoom-in-fixed" \| "zoom-out-fixed" \| "zoom-to-object"` | `undefined` | -| `label` *(required)* | `label` | Accessible name for the component. | `string` | `undefined` | -| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `MenuItemMessages` | `undefined` | -| `open` | `open` | When `true`, the component will display any slotted `calcite-menu-item` in an open overflow menu. | `boolean` | `false` | -| `rel` | `rel` | Defines the relationship between the `href` value and the current document. | `string` | `undefined` | -| `target` | `target` | Specifies where to open the linked document defined in the `href` property. | `string` | `undefined` | -| `text` | `text` | Specifies the text to display. | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| -------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | +| `active` | `active` | When `true`, the component is highlighted. | `boolean` | `undefined` | +| `breadcrumb` | `breadcrumb` | When `true`, the component displays a breadcrumb trail for use as a navigational aid. | `boolean` | `undefined` | +| `href` | `href` | Specifies the URL destination of the component, which can be set as an absolute or relative path. | `string` | `undefined` | +| `iconEnd` | `icon-end` | Specifies an icon to display at the end of the component. | `string` | `undefined` | +| `iconFlipRtl` | `icon-flip-rtl` | Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). | `"both" \| "end" \| "start"` | `undefined` | +| `iconStart` | `icon-start` | Specifies an icon to display at the start of the component. | `string` | `undefined` | +| `label` *(required)* | `label` | Accessible name for the component. | `string` | `undefined` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `MenuItemMessages` | `undefined` | +| `open` | `open` | When `true`, the component will display any slotted `calcite-menu-item` in an open overflow menu. | `boolean` | `false` | +| `rel` | `rel` | Defines the relationship between the `href` value and the current document. | `string` | `undefined` | +| `target` | `target` | Specifies where to open the linked document defined in the `href` property. | `string` | `undefined` | +| `text` | `text` | Specifies the text to display. | `string` | `undefined` | ## Events diff --git a/packages/calcite-components/src/components/modal/modal.tsx b/packages/calcite-components/src/components/modal/modal.tsx index 7b59e903d70..d8833bc94fa 100644 --- a/packages/calcite-components/src/components/modal/modal.tsx +++ b/packages/calcite-components/src/components/modal/modal.tsx @@ -69,7 +69,7 @@ let initialDocumentOverflowStyle: string = ""; logger.deprecated("component", { name: "modal", - removalVersion: 3, + removalVersion: 4, suggested: "dialog", }); diff --git a/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx b/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx index b25155eb643..9bd4a669e64 100644 --- a/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx +++ b/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx @@ -6,7 +6,7 @@ import { setUpLoadableComponent, } from "../../utils/loadable"; import { Heading, HeadingLevel } from "../functional/Heading"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { CSS } from "./resources"; @Component({ @@ -30,7 +30,7 @@ export class CalciteNavigationLogo implements LoadableComponent { @Prop({ reflect: true }) href: string; /** Specifies an icon to display. */ - @Prop({ reflect: true }) icon: IconName; + @Prop({ reflect: true }) icon: IconNameOrString; /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl = false; diff --git a/packages/calcite-components/src/components/navigation-logo/readme.md b/packages/calcite-components/src/components/navigation-logo/readme.md index f0be053d1fd..4c9738fcd7d 100644 --- a/packages/calcite-components/src/components/navigation-logo/readme.md +++ b/packages/calcite-components/src/components/navigation-logo/readme.md @@ -6,19 +6,19 @@ For comprehensive guidance on using and implementing `calcite-navigation-logo`, ## Properties -| Property | Attribute | Description | Type | Default | -| -------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `active` | `active` | When `true`, the component is highlighted. | `boolean` | `undefined` | -| `description` | `description` | A description for the component, which displays below the `heading`. | `string` | `undefined` | -| `heading` | `heading` | Specifies heading text for the component, such as a product or organization name. | `string` | `undefined` | -| `headingLevel` | `heading-level` | Specifies the heading level of the component's heading for proper document structure, without affecting visual styling. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | -| `href` | `href` | Specifies the URL destination of the component, which can be set as an absolute or relative path. | `string` | `undefined` | -| `icon` | `icon` | Specifies an icon to display. | `CamelCaseIcons \| "date-time" \| "i12-x" \| "i14-x" \| "i18-x" \| "i1-x" \| "i2-d-explore" \| "i2-x" \| "i360-view" \| "i3-d-glasses" \| "i4-x" \| "i8-x" \| "a-z" \| "a-z-down" \| "a-z-up" \| "a3-landscape" \| "a3-portrait" \| "a4-landscape" \| "a4-portrait" \| "absolute-direction" \| "absolute-elevation" \| "access-string-results" \| "activity-monitor" \| "actual-size" \| "add-and-update-features" \| "add-constant" \| "add-features" \| "add-in" \| "add-in-edit" \| "add-in-new" \| "add-layer" \| "add-layer-service" \| "add-raster-variable" \| "add-rasters" \| "add-reaction" \| "add-text" \| "add-to-model" \| "address-book" \| "alert-off-circle-f" \| "all-servers" \| "analysis-overlay" \| "annotate-tool" \| "ansi-a-landscape" \| "ansi-a-portrait" \| "ansi-b-landscape" \| "ansi-b-portrait" \| "antenna-height" \| "app-gear" \| "app-launcher" \| "app-run" \| "app-update" \| "apply-changes" \| "apply-selection-to-existing-view" \| "arcgis-data-store" \| "arcgis-online" \| "arrow-bold-down" \| "arrow-bold-left" \| "arrow-bold-right" \| "arrow-bold-up" \| "arrow-circle-down" \| "arrow-circle-down-f" \| "arrow-double-diagonal1" \| "arrow-double-diagonal2" \| "arrow-double-horizontal" \| "arrow-double-vertical" \| "arrow-down" \| "arrow-down-left" \| "arrow-down-right" \| "arrow-left" \| "arrow-right" \| "arrow-right-left" \| "arrow-up" \| "arrow-up-down" \| "arrow-up-left" \| "arrow-up-right" \| "asterisk-large" \| "asterisk-small" \| "attachment-plus" \| "auto-layout" \| "battery-charging" \| "bear-left" \| "bear-right" \| "beginning-f" \| "bell-f" \| "bell-off" \| "bookmark-f" \| "border-radius-fully-rounded" \| "border-radius-rounded" \| "border-radius-sharp" \| "box-chart" \| "box-chart-series" \| "brackets-curly" \| "break-recurrence" \| "bring-forward" \| "bring-to-front" \| "browser-map" \| "brush-mark" \| "brush-mark-plus" \| "brush-tip" \| "bullet-point" \| "bullet-point-large" \| "camera-flash-off" \| "camera-flash-on" \| "camera-plus" \| "camera-switch-front-back" \| "camera-unlock" \| "caret-double-horizontal" \| "caret-double-vertical" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-square-down" \| "caret-square-left" \| "caret-square-right" \| "caret-square-up" \| "caret-up" \| "catalog-dataset" \| "center-align" \| "center-horizontal" \| "center-vertical" \| "change-detection" \| "change-font-size" \| "chart-gear" \| "chart-magnifying-glass" \| "check-circle" \| "check-circle-f" \| "check-extent" \| "check-layer" \| "check-shield" \| "check-square" \| "check-square-f" \| "chevron-down" \| "chevron-down-left" \| "chevron-down-right" \| "chevron-end" \| "chevron-left" \| "chevron-right" \| "chevron-start" \| "chevron-up" \| "chevron-up-left" \| "chevron-up-right" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chord-diagram" \| "circle-f" \| "circle-area" \| "circle-disallowed" \| "circle-inset-large" \| "circle-inset-medium" \| "circle-inset-small" \| "circle-pause" \| "circle-pause-f" \| "circle-stop" \| "circle-stop-f" \| "classify-objects" \| "classify-pixels" \| "clear-selection" \| "clipboard-brackets" \| "clock-down" \| "clock-forward" \| "clock-up" \| "cloud-data" \| "cloud-server" \| "code-branch" \| "code-branch-edit" \| "collaboration-distributed" \| "collaboration-user" \| "color-coded-map" \| "color-correction" \| "column-settings" \| "community-link-chart-layout" \| "compass-needle" \| "compass-north-circle" \| "conditional-rules" \| "conditional-rules-path" \| "conference-room" \| "configure-editing" \| "configure-grid-unit" \| "configure-popup" \| "content-full" \| "content-inline" \| "content-large" \| "content-medium" \| "content-minimal" \| "content-none" \| "content-side-by-side" \| "content-small" \| "contingent-values" \| "coordinate-system" \| "copy-to-clipboard" \| "credit-card" \| "cursor-click" \| "cursor-lock" \| "cursor-marquee" \| "cursor-minus" \| "cursor-plus" \| "cursor-selection" \| "custom-print" \| "cut-and-fill-volume-calculation" \| "data-card" \| "data-check" \| "data-clock-chart" \| "data-cloud" \| "data-folder" \| "data-magnifying-glass" \| "data-raster" \| "debug-script" \| "decrease-link-chart-symbol-size" \| "deep-learning" \| "deep-learning-project" \| "derived-value" \| "developer-credentials" \| "diamond-inset-large" \| "diamond-inset-medium" \| "diamond-inset-small" \| "dimensions-unit" \| "dimensions-wall" \| "display-selection-lock" \| "display-selection-unlock" \| "dissolve-features" \| "distance-type" \| "distribute-height-evenly" \| "distribute-width-evenly" \| "dock-bottom" \| "dock-left" \| "dock-right" \| "double-float" \| "download-to" \| "drive-time" \| "drive-time-largest" \| "drive-time-smallest" \| "drive-time-threshold" \| "drive-time-x-bar" \| "driving-distance" \| "driving-time" \| "drone-fixed-wing" \| "drone-flying-wing" \| "drone-quadcopter" \| "drone-quadcopter-top" \| "edit-attributes" \| "edit-geometry" \| "elevator-down" \| "elevator-up" \| "ellipsis-circle" \| "email-address" \| "embedded-card" \| "embedded-content" \| "embedded-live-content" \| "employee-id" \| "enable-disable-feature-selection" \| "end-f" \| "escalator-down" \| "escalator-up" \| "exclamation-mark-circle" \| "exclamation-mark-circle-f" \| "exclamation-mark-triangle" \| "exclamation-mark-triangle-f" \| "exclamation-point" \| "exclamation-point-f" \| "exit-highway-left" \| "exit-highway-right" \| "expression-defined-color" \| "extend-trim" \| "extent-filter" \| "face-id" \| "feature-details" \| "feature-layer" \| "file-archive" \| "file-cad" \| "file-code" \| "file-csv" \| "file-data" \| "file-ecd" \| "file-excel" \| "file-gpx" \| "file-image" \| "file-kml" \| "file-magnifying-glass" \| "file-pdf" \| "file-pdf-plus" \| "file-pitemx" \| "file-ppt" \| "file-report" \| "file-report-generic" \| "file-shape" \| "file-sound" \| "file-sqlite" \| "file-text" \| "file-user" \| "file-video" \| "file-word" \| "file-xml" \| "file-zip" \| "files-csv-collection" \| "filter-expand" \| "find-path" \| "flip-vertical" \| "floor-plan" \| "folder-f" \| "folder-archive" \| "folder-magnifying-glass" \| "folder-move" \| "folder-new" \| "folder-open" \| "folder-open-f" \| "folder-plus" \| "folder-star" \| "folder-video" \| "follow-pause" \| "follow-play" \| "force-directed-link-chart-layout" \| "fork-left" \| "fork-middle" \| "fork-right" \| "form-dropdown" \| "form-elements" \| "form-field" \| "form-field-multiline" \| "form-field-off" \| "forward-f" \| "four-by-one-grid" \| "four-by-three-grid" \| "four-by-two-grid" \| "frame-export" \| "freehand-area" \| "full-screen" \| "full-screen-exit" \| "function-editor" \| "gauge-summary" \| "geoanalytics-server" \| "geoevent-server" \| "geographic-link-chart-layout" \| "geonet-question" \| "gis-server" \| "gps-off" \| "gps-on" \| "gps-on-f" \| "graph-axis" \| "graph-bar100-stacked" \| "graph-bar" \| "graph-bar-side-by-side" \| "graph-bar-stacked" \| "graph-box-mean-lines" \| "graph-box-side-by-side" \| "graph-guides" \| "graph-histogram" \| "graph-line-series" \| "graph-moving-average" \| "graph-pie-slice" \| "graph-scatter-plot" \| "graph-time-series" \| "grid-diamond" \| "grid-hexagon" \| "grid-triangle" \| "grid-unit" \| "ground-control-point" \| "group-form" \| "group-form-plus" \| "group-items" \| "group-layers" \| "group-layout-elements" \| "group-x" \| "h3-hexagon" \| "handle-vertical" \| "heading-layout" \| "heading-rtl" \| "heart-f" \| "heat-chart" \| "heavy-rain" \| "heavy-snow" \| "hexagon2-inset-large" \| "hexagon2-inset-medium" \| "hexagon2-inset-small" \| "hexagon-inset-large" \| "hexagon-inset-medium" \| "hexagon-inset-small" \| "hide-derived-value" \| "hide-empty" \| "hide-layers" \| "hide-parameters" \| "hierarchical-link-chart-layout" \| "highlighter-tip" \| "highway-change" \| "highway-change-right" \| "hillshade-effect" \| "horizontal-distribute" \| "hourglass-active" \| "hourglass-expired" \| "image-chips" \| "image-collection-explorer" \| "image-display-order" \| "image-layer" \| "image-magnifying-glass" \| "image-mensuration" \| "image-pin" \| "image-plus" \| "image-segmentation" \| "image-server" \| "image-space" \| "image-unit" \| "increase-link-chart-symbol-size" \| "information-f" \| "information-letter" \| "initiative-template" \| "joined-view-layer" \| "knowledge-graph" \| "knowledge-graph-dashboard" \| "knowledge-graph-data-model" \| "knowledge-graph-data-store" \| "knowledge-graph-export" \| "knowledge-graph-import" \| "knowledge-graph-new" \| "knowledge-graph-relationship" \| "knowledge-layer" \| "knowledge-server" \| "knowledge-studio" \| "label-off" \| "language-translate" \| "lasso-select" \| "layer-basemap" \| "layer-broken" \| "layer-filter" \| "layer-graphics" \| "layer-hide" \| "layer-kml" \| "layer-line" \| "layer-line-service" \| "layer-map" \| "layer-map-service" \| "layer-points" \| "layer-polygon" \| "layer-polygon-service" \| "layer-service" \| "layer-settings" \| "layer-zoom-to" \| "layers-editable" \| "layers-f" \| "layers-reference" \| "layout-compact" \| "layout-horizontal" \| "layout-spacious" \| "layout-vertical" \| "left-align" \| "left-edge" \| "left-left" \| "left-right" \| "legend-left" \| "legend-plus" \| "legend-right" \| "light-rain" \| "light-snow" \| "line-check" \| "line-dashed" \| "line-dotted" \| "line-of-sight" \| "line-solid" \| "line-straight" \| "link-chart" \| "link-chart-expand" \| "link-chart-from-template" \| "list-bullet" \| "list-button" \| "list-check" \| "list-check-all" \| "list-merge" \| "list-number" \| "list-number-rtl" \| "list-radio" \| "list-rectangle" \| "list-show-all" \| "livestream-video-layer" \| "location-sharing" \| "location-sharing-f" \| "location-sharing-off" \| "lock-f" \| "ltr-elements-align" \| "ltr-paragraph-align" \| "magnifying-glass" \| "magnifying-glass-minus" \| "magnifying-glass-plus" \| "map-contents" \| "map-from-template" \| "map-level-settings" \| "map-pin" \| "map-space" \| "mask-inside" \| "mask-outside" \| "maximum-graph" \| "maximum-territory-distance" \| "measure-area" \| "measure-building-height-shadow" \| "measure-building-height-top-base" \| "measure-building-height-top-shadow" \| "measure-line" \| "media-layer" \| "mega-phone" \| "members-brackets" \| "merge-details" \| "merge-on-highway" \| "merge-on-highway-right" \| "merge-units" \| "microphone-plus" \| "min-distance-between-centers" \| "minimum-graph" \| "minus-circle" \| "minus-circle-f" \| "minus-square" \| "minus-square-f" \| "miscellaneous-collection" \| "mission-server" \| "mobile-off" \| "mobile-vibrate" \| "model-edit" \| "modify-associations" \| "move-from-basemap" \| "move-to-basemap" \| "move-up" \| "move-up-all" \| "multidimensional-raster" \| "multiple-variables" \| "music-note" \| "new-link-chart" \| "new-model" \| "new-raster-function-template" \| "new-training" \| "no-attachment" \| "no-image" \| "no-map" \| "nodes-link" \| "nodes-merge" \| "nodes-unlink" \| "nodes-unmerge" \| "notebook-server" \| "notebook-snapshot" \| "notepad-add" \| "notepad-edit" \| "number-circle1" \| "number-circle1-f" \| "number-circle2" \| "number-circle2-f" \| "number-circle3" \| "number-circle3-f" \| "number-circle4" \| "number-circle4-f" \| "number-circle5" \| "number-circle5-f" \| "number-circle6" \| "number-circle6-f" \| "number-circle7" \| "number-circle7-f" \| "number-circle8" \| "number-circle8-f" \| "number-circle9" \| "number-circle9-f" \| "number-of-territories" \| "object-detection" \| "objectstore-data-store" \| "on-the-ground-elevation" \| "open-book" \| "oriented-imagery-layer" \| "oriented-imagery-widget" \| "overlap-features" \| "overwrite-features" \| "overwrite-project" \| "paint-bucket" \| "palette-check" \| "pan-drag" \| "parcel-layer" \| "partly-cloudy" \| "paste-with-attribute" \| "paste-without-attribute" \| "pause-f" \| "pen-mark" \| "pen-mark-plus" \| "pen-tip" \| "pencil-mark" \| "pencil-mark-plus" \| "pencil-square" \| "pencil-tip" \| "personal-homepage" \| "pie-chart" \| "pin-plus" \| "pin-tear" \| "pin-tear-f" \| "play-f" \| "plus-circle" \| "plus-square" \| "point-line" \| "polygon-area" \| "polygon-line-check" \| "polygon-select" \| "polygon-vertices" \| "pop-up1" \| "pop-up-blank" \| "pop-up-blank-f" \| "premium-content-user-credit" \| "presentation-x" \| "print-preview" \| "processing-templates" \| "profile-variables" \| "project-mission" \| "project-template" \| "puzzle-piece" \| "qr-code" \| "qt-code" \| "question-f" \| "question-mark" \| "radial-tree-link-chart-layout" \| "rain-snow" \| "rain-thunder" \| "ramp-left" \| "ramp-right" \| "raster-analysis" \| "raster-function" \| "raster-function-template" \| "raster-function-template-play" \| "read-only-non-editable" \| "rectangle-area" \| "rectangle-plus" \| "recycle-bin" \| "refresh-f" \| "relational-data-store" \| "relative-direction" \| "relative-to-ground-elevation" \| "relative-to-scene-elevation" \| "remove-from-list" \| "remove-linkchart" \| "reorder-cards" \| "reorder-grid" \| "reorder-stack" \| "replace-image" \| "reshape-add-geometry" \| "reshape-subtract-geometry" \| "reshape-tool" \| "resize-area" \| "reverse-f" \| "ribbon-rosette" \| "right-align" \| "right-angle" \| "right-edge" \| "right-left" \| "right-right" \| "rings-largest" \| "rings-smallest" \| "rings-threshold" \| "rings-x-bar" \| "road-sign" \| "rotate-device" \| "round-about" \| "round-about-right" \| "rounded-rectangle" \| "route-from" \| "route-to" \| "rss-f" \| "rtl-elements-align" \| "rtl-paragraph-align" \| "running-outline" \| "rural-driving-distance" \| "rural-driving-time" \| "satellite0-f" \| "satellite1-f" \| "satellite2-f" \| "satellite3-f" \| "save-as" \| "scan-area" \| "scan-barcode" \| "scan-corridor" \| "scan-crosshatch" \| "scan-perimeter" \| "scan-vertical" \| "screenshot-mode" \| "select-by-attributes" \| "select-category" \| "select-column" \| "select-range" \| "select-visible" \| "selected-items-filter" \| "selection-filter" \| "selection-manager" \| "selection-set" \| "selection-x" \| "send-backwards" \| "send-to-back" \| "serial-port" \| "server-lock" \| "share-ios" \| "sharp-left" \| "sharp-right" \| "shield-coin" \| "shopping-cart" \| "show-all-parameters" \| "show-column" \| "show-derived-value" \| "show-multiple-layers-at-a-time" \| "show-one-layer-at-a-time" \| "show-required-parameters" \| "sign-in" \| "sign-out" \| "simple-link-chart-layout" \| "sky-plot" \| "sliders-horizontal" \| "smart-camera" \| "smart-form" \| "smart-tree-link-chart-layout" \| "snap-to-grid" \| "snap-to-pixel" \| "snap-to-point" \| "snow-thunder" \| "sort-ascending" \| "sort-ascending-arrow" \| "sort-descending" \| "sort-descending-arrow" \| "sound-low" \| "sound-off" \| "sound-unavailable" \| "spatiotemporal-data-store" \| "speech-bubble" \| "speech-bubble-check" \| "speech-bubble-exclamation" \| "speech-bubble-like" \| "speech-bubble-plus" \| "speech-bubble-social" \| "speech-bubbles" \| "split-features" \| "split-geometry" \| "split-units" \| "square-f" \| "square-area" \| "square-inset-large" \| "square-inset-medium" \| "square-inset-small" \| "stairs-down" \| "stairs-up" \| "star-f" \| "star-circle" \| "stop-square" \| "stop-square-f" \| "stored-as-new-query" \| "stored-query" \| "sub-fields" \| "subheading-rtl" \| "suitability-analysis-output" \| "summarize-center-and-dispersion1" \| "summarize-center-and-dispersion2" \| "summarize-center-and-dispersion3" \| "system-management" \| "tabbed-view" \| "take-pedestrian-ramp" \| "territory-buffer-distance" \| "test-data" \| "text-bold" \| "text-button" \| "text-dashed-underline" \| "text-large" \| "text-medium" \| "text-paragraph-large" \| "text-small" \| "text-solid-underline" \| "three-by-one-grid" \| "three-by-three-grid" \| "three-by-two-grid" \| "thumbs-down" \| "thumbs-up" \| "tile-cache-data-store" \| "tile-layer" \| "tiled-imagery-layer" \| "time-filter" \| "time-zone" \| "toggle-off" \| "toggle-on" \| "tour-pin-tear" \| "transverse-hexagon" \| "trapezoid-area" \| "trucking-distance" \| "trucking-time" \| "u-turn" \| "u-turn-right" \| "ungroup-items" \| "ungroup-layers" \| "ungroup-layout-elements" \| "update-features" \| "update-project" \| "upload-to" \| "urban-model" \| "usb-security-key" \| "user-calendar" \| "user-down" \| "user-key" \| "user-minus" \| "user-plus" \| "user-to-device" \| "user-up" \| "user-x" \| "utility-network" \| "utility-network-trace" \| "validate-utility-network-topology" \| "vertex-check" \| "vertex-edit" \| "vertex-gps" \| "vertex-move" \| "vertex-plus" \| "vertex-x" \| "vertical-distribute" \| "video-layer" \| "video-plus" \| "video-server" \| "video-single-server" \| "video-web" \| "view-associations" \| "view-hide" \| "view-mixed" \| "view-visible" \| "walk-through-door" \| "walking-distance" \| "walking-time" \| "widgets-group" \| "widgets-source" \| "widgets-tabs" \| "workflow-diagram" \| "workflow-manager-server" \| "x-axis-guide" \| "x-bar" \| "x-circle" \| "x-circle-f" \| "x-octagon" \| "x-octagon-f" \| "y-axis-guide" \| "zoom-in-fixed" \| "zoom-out-fixed" \| "zoom-to-object"` | `undefined` | -| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | -| `label` | `label` | Describes the appearance or function of the `thumbnail`. If no label is provided, context will not be provided to assistive technologies. | `string` | `undefined` | -| `rel` | `rel` | Defines the relationship between the `href` value and the current document. | `string` | `undefined` | -| `target` | `target` | Specifies where to open the linked document defined in the `href` property. | `string` | `undefined` | -| `thumbnail` | `thumbnail` | Specifies the `src` to an image. | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| -------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | +| `active` | `active` | When `true`, the component is highlighted. | `boolean` | `undefined` | +| `description` | `description` | A description for the component, which displays below the `heading`. | `string` | `undefined` | +| `heading` | `heading` | Specifies heading text for the component, such as a product or organization name. | `string` | `undefined` | +| `headingLevel` | `heading-level` | Specifies the heading level of the component's heading for proper document structure, without affecting visual styling. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | +| `href` | `href` | Specifies the URL destination of the component, which can be set as an absolute or relative path. | `string` | `undefined` | +| `icon` | `icon` | Specifies an icon to display. | `string` | `undefined` | +| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | +| `label` | `label` | Describes the appearance or function of the `thumbnail`. If no label is provided, context will not be provided to assistive technologies. | `string` | `undefined` | +| `rel` | `rel` | Defines the relationship between the `href` value and the current document. | `string` | `undefined` | +| `target` | `target` | Specifies where to open the linked document defined in the `href` property. | `string` | `undefined` | +| `thumbnail` | `thumbnail` | Specifies the `src` to an image. | `string` | `undefined` | ## Methods diff --git a/packages/calcite-components/src/components/notice/notice.tsx b/packages/calcite-components/src/components/notice/notice.tsx index 6e56aa3277e..676c8820d52 100644 --- a/packages/calcite-components/src/components/notice/notice.tsx +++ b/packages/calcite-components/src/components/notice/notice.tsx @@ -34,7 +34,7 @@ import { Kind, Scale, Width } from "../interfaces"; import { KindIcons } from "../resources"; import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent"; import { getIconScale } from "../../utils/component"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { NoticeMessages } from "./assets/notice/t9n"; import { CSS, SLOTS } from "./resources"; @@ -92,7 +92,7 @@ export class Notice /** * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */ - @Prop({ reflect: true }) icon: IconName | boolean; + @Prop({ reflect: true }) icon: IconNameOrString | boolean; /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl = false; @@ -282,7 +282,7 @@ export class Notice private closeButton?: HTMLButtonElement; /** The computed icon to render. */ - private requestedIcon?: IconName; + private requestedIcon?: IconNameOrString; @State() effectiveLocale: string; diff --git a/packages/calcite-components/src/components/notice/readme.md b/packages/calcite-components/src/components/notice/readme.md index b0a48e1a598..e7d6fd2fc1e 100644 --- a/packages/calcite-components/src/components/notice/readme.md +++ b/packages/calcite-components/src/components/notice/readme.md @@ -9,7 +9,7 @@ For comprehensive guidance on using and implementing `calcite-notice`, refer to | Property | Attribute | Description | Type | Default | | ------------------ | ------------------- | --------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ----------- | | `closable` | `closable` | When `true`, a close button is added to the component. | `boolean` | `false` | -| `icon` | `icon` | When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. | `boolean \| IconName` | `undefined` | +| `icon` | `icon` | When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. | `boolean \| string` | `undefined` | | `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | | `kind` | `kind` | Specifies the kind of the component, which will apply to top border and icon. | `"brand" \| "danger" \| "info" \| "success" \| "warning"` | `"brand"` | | `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `NoticeMessages` | `undefined` | diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss index 8ef2ffad730..7a8032a1a8a 100644 --- a/packages/calcite-components/src/components/panel/panel.scss +++ b/packages/calcite-components/src/components/panel/panel.scss @@ -20,6 +20,7 @@ :host([scale="s"]) { --calcite-internal-panel-default-padding: var(--calcite-spacing-sm); + --calcite-internal-panel-header-vertical-padding: 10px; // this should use a spacing token once made available .header-content { .heading { @@ -34,6 +35,7 @@ :host([scale="m"]) { --calcite-internal-panel-default-padding: var(--calcite-spacing-md); + --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-lg); .header-content { .heading { @@ -48,6 +50,7 @@ :host([scale="l"]) { --calcite-internal-panel-default-padding: var(--calcite-spacing-xl); + --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-xxl); .header-content { .heading { @@ -163,11 +166,15 @@ } .content-top, -.content-bottom, -.header-content { +.content-bottom { padding: var(--calcite-internal-panel-default-padding); } +.header-content { + padding-block: var(--calcite-internal-panel-header-vertical-padding); + padding-inline: var(--calcite-internal-panel-default-padding); +} + .footer { @apply flex mt-auto flex-row content-between justify-center items-center bg-foreground-1 text-n2-wrap; border-block-start: 1px solid var(--calcite-color-border-3); diff --git a/packages/calcite-components/src/components/popover/readme.md b/packages/calcite-components/src/components/popover/readme.md index d8c1fdcf69a..0ea2873e442 100644 --- a/packages/calcite-components/src/components/popover/readme.md +++ b/packages/calcite-components/src/components/popover/readme.md @@ -21,7 +21,7 @@ For comprehensive guidance on using and implementing `calcite-popover`, refer to | `offsetSkidding` | `offset-skidding` | Offsets the position of the component along the `referenceElement`. | `number` | `0` | | `open` | `open` | When `true`, displays and positions the component. | `boolean` | `false` | | `overlayPositioning` | `overlay-positioning` | Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. | `"absolute" \| "fixed"` | `"absolute"` | -| `placement` | `placement` | Determines where the component will be positioned relative to the `referenceElement`. | `"auto" \| "top" \| "bottom" \| "left" \| "right" \| "top-start" \| "top-end" \| "bottom-start" \| "bottom-end" \| "left-start" \| "left-end" \| "right-start" \| "right-end" \| "leading" \| "trailing" \| "auto-start" \| "auto-end" \| "leading-start" \| "leading-end" \| "trailing-end" \| "trailing-start"` | `defaultPopoverPlacement` | +| `placement` | `placement` | Determines where the component will be positioned relative to the `referenceElement`. | `"auto" \| "top" \| "bottom" \| "right" \| "left" \| "top-start" \| "top-end" \| "bottom-start" \| "bottom-end" \| "right-start" \| "right-end" \| "left-start" \| "left-end" \| "leading" \| "trailing" \| "auto-start" \| "auto-end" \| "leading-start" \| "leading-end" \| "trailing-end" \| "trailing-start"` | `defaultPopoverPlacement` | | `pointerDisabled` | `pointer-disabled` | When `true`, removes the caret pointer. | `boolean` | `false` | | `referenceElement` *(required)* | `reference-element` | The `referenceElement` used to position the component according to its `placement` value. Setting to an `HTMLElement` is preferred so the component does not need to query the DOM. However, a string `id` of the reference element can also be used. | `Element \| VirtualElement \| string` | `undefined` | | `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | diff --git a/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx b/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx index 20741d3a39e..eb4d048c26c 100644 --- a/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx +++ b/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx @@ -21,7 +21,7 @@ import { setUpLoadableComponent, } from "../../utils/loadable"; import { Validation } from "../functional/Validation"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { CSS, IDS } from "./resources"; /** @@ -90,7 +90,7 @@ export class RadioButtonGroup implements LoadableComponent { @Prop() validationMessage: string; /** Specifies the validation icon to display under the component. */ - @Prop({ reflect: true }) validationIcon: IconName | boolean; + @Prop({ reflect: true }) validationIcon: IconNameOrString | boolean; @Watch("scale") onScaleChange(): void { diff --git a/packages/calcite-components/src/components/radio-button-group/readme.md b/packages/calcite-components/src/components/radio-button-group/readme.md index b5b03ebad8e..8e3b01e95bb 100644 --- a/packages/calcite-components/src/components/radio-button-group/readme.md +++ b/packages/calcite-components/src/components/radio-button-group/readme.md @@ -15,7 +15,7 @@ For comprehensive guidance on using and implementing `calcite-radio-button-group | `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | | `selectedItem` | -- | Specifies the component's selected item. | `HTMLCalciteRadioButtonElement` | `null` | | `status` | `status` | Specifies the status of the validation message. | `"idle" \| "invalid" \| "valid"` | `"idle"` | -| `validationIcon` | `validation-icon` | Specifies the validation icon to display under the component. | `boolean \| IconName` | `undefined` | +| `validationIcon` | `validation-icon` | Specifies the validation icon to display under the component. | `boolean \| string` | `undefined` | | `validationMessage` | `validation-message` | Specifies the validation message to display under the component. | `string` | `undefined` | ## Events diff --git a/packages/calcite-components/src/components/segmented-control-item/readme.md b/packages/calcite-components/src/components/segmented-control-item/readme.md index 2c15b3a2229..078bef219e8 100644 --- a/packages/calcite-components/src/components/segmented-control-item/readme.md +++ b/packages/calcite-components/src/components/segmented-control-item/readme.md @@ -6,13 +6,13 @@ For comprehensive guidance on using and implementing `calcite-segmented-control- ## Properties -| Property | Attribute | Description | Type | Default | -| ------------- | --------------- | -------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `checked` | `checked` | When `true`, the component is checked. | `boolean` | `false` | -| `iconEnd` | `icon-end` | Specifies an icon to display at the end of the component. | `CamelCaseIcons \| "date-time" \| "i12-x" \| "i14-x" \| "i18-x" \| "i1-x" \| "i2-d-explore" \| "i2-x" \| "i360-view" \| "i3-d-glasses" \| "i4-x" \| "i8-x" \| "a-z" \| "a-z-down" \| "a-z-up" \| "a3-landscape" \| "a3-portrait" \| "a4-landscape" \| "a4-portrait" \| "absolute-direction" \| "absolute-elevation" \| "access-string-results" \| "activity-monitor" \| "actual-size" \| "add-and-update-features" \| "add-constant" \| "add-features" \| "add-in" \| "add-in-edit" \| "add-in-new" \| "add-layer" \| "add-layer-service" \| "add-raster-variable" \| "add-rasters" \| "add-reaction" \| "add-text" \| "add-to-model" \| "address-book" \| "alert-off-circle-f" \| "all-servers" \| "analysis-overlay" \| "annotate-tool" \| "ansi-a-landscape" \| "ansi-a-portrait" \| "ansi-b-landscape" \| "ansi-b-portrait" \| "antenna-height" \| "app-gear" \| "app-launcher" \| "app-run" \| "app-update" \| "apply-changes" \| "apply-selection-to-existing-view" \| "arcgis-data-store" \| "arcgis-online" \| "arrow-bold-down" \| "arrow-bold-left" \| "arrow-bold-right" \| "arrow-bold-up" \| "arrow-circle-down" \| "arrow-circle-down-f" \| "arrow-double-diagonal1" \| "arrow-double-diagonal2" \| "arrow-double-horizontal" \| "arrow-double-vertical" \| "arrow-down" \| "arrow-down-left" \| "arrow-down-right" \| "arrow-left" \| "arrow-right" \| "arrow-right-left" \| "arrow-up" \| "arrow-up-down" \| "arrow-up-left" \| "arrow-up-right" \| "asterisk-large" \| "asterisk-small" \| "attachment-plus" \| "auto-layout" \| "battery-charging" \| "bear-left" \| "bear-right" \| "beginning-f" \| "bell-f" \| "bell-off" \| "bookmark-f" \| "border-radius-fully-rounded" \| "border-radius-rounded" \| "border-radius-sharp" \| "box-chart" \| "box-chart-series" \| "brackets-curly" \| "break-recurrence" \| "bring-forward" \| "bring-to-front" \| "browser-map" \| "brush-mark" \| "brush-mark-plus" \| "brush-tip" \| "bullet-point" \| "bullet-point-large" \| "camera-flash-off" \| "camera-flash-on" \| "camera-plus" \| "camera-switch-front-back" \| "camera-unlock" \| "caret-double-horizontal" \| "caret-double-vertical" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-square-down" \| "caret-square-left" \| "caret-square-right" \| "caret-square-up" \| "caret-up" \| "catalog-dataset" \| "center-align" \| "center-horizontal" \| "center-vertical" \| "change-detection" \| "change-font-size" \| "chart-gear" \| "chart-magnifying-glass" \| "check-circle" \| "check-circle-f" \| "check-extent" \| "check-layer" \| "check-shield" \| "check-square" \| "check-square-f" \| "chevron-down" \| "chevron-down-left" \| "chevron-down-right" \| "chevron-end" \| "chevron-left" \| "chevron-right" \| "chevron-start" \| "chevron-up" \| "chevron-up-left" \| "chevron-up-right" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chord-diagram" \| "circle-f" \| "circle-area" \| "circle-disallowed" \| "circle-inset-large" \| "circle-inset-medium" \| "circle-inset-small" \| "circle-pause" \| "circle-pause-f" \| "circle-stop" \| "circle-stop-f" \| "classify-objects" \| "classify-pixels" \| "clear-selection" \| "clipboard-brackets" \| "clock-down" \| "clock-forward" \| "clock-up" \| "cloud-data" \| "cloud-server" \| "code-branch" \| "code-branch-edit" \| "collaboration-distributed" \| "collaboration-user" \| "color-coded-map" \| "color-correction" \| "column-settings" \| "community-link-chart-layout" \| "compass-needle" \| "compass-north-circle" \| "conditional-rules" \| "conditional-rules-path" \| "conference-room" \| "configure-editing" \| "configure-grid-unit" \| "configure-popup" \| "content-full" \| "content-inline" \| "content-large" \| "content-medium" \| "content-minimal" \| "content-none" \| "content-side-by-side" \| "content-small" \| "contingent-values" \| "coordinate-system" \| "copy-to-clipboard" \| "credit-card" \| "cursor-click" \| "cursor-lock" \| "cursor-marquee" \| "cursor-minus" \| "cursor-plus" \| "cursor-selection" \| "custom-print" \| "cut-and-fill-volume-calculation" \| "data-card" \| "data-check" \| "data-clock-chart" \| "data-cloud" \| "data-folder" \| "data-magnifying-glass" \| "data-raster" \| "debug-script" \| "decrease-link-chart-symbol-size" \| "deep-learning" \| "deep-learning-project" \| "derived-value" \| "developer-credentials" \| "diamond-inset-large" \| "diamond-inset-medium" \| "diamond-inset-small" \| "dimensions-unit" \| "dimensions-wall" \| "display-selection-lock" \| "display-selection-unlock" \| "dissolve-features" \| "distance-type" \| "distribute-height-evenly" \| "distribute-width-evenly" \| "dock-bottom" \| "dock-left" \| "dock-right" \| "double-float" \| "download-to" \| "drive-time" \| "drive-time-largest" \| "drive-time-smallest" \| "drive-time-threshold" \| "drive-time-x-bar" \| "driving-distance" \| "driving-time" \| "drone-fixed-wing" \| "drone-flying-wing" \| "drone-quadcopter" \| "drone-quadcopter-top" \| "edit-attributes" \| "edit-geometry" \| "elevator-down" \| "elevator-up" \| "ellipsis-circle" \| "email-address" \| "embedded-card" \| "embedded-content" \| "embedded-live-content" \| "employee-id" \| "enable-disable-feature-selection" \| "end-f" \| "escalator-down" \| "escalator-up" \| "exclamation-mark-circle" \| "exclamation-mark-circle-f" \| "exclamation-mark-triangle" \| "exclamation-mark-triangle-f" \| "exclamation-point" \| "exclamation-point-f" \| "exit-highway-left" \| "exit-highway-right" \| "expression-defined-color" \| "extend-trim" \| "extent-filter" \| "face-id" \| "feature-details" \| "feature-layer" \| "file-archive" \| "file-cad" \| "file-code" \| "file-csv" \| "file-data" \| "file-ecd" \| "file-excel" \| "file-gpx" \| "file-image" \| "file-kml" \| "file-magnifying-glass" \| "file-pdf" \| "file-pdf-plus" \| "file-pitemx" \| "file-ppt" \| "file-report" \| "file-report-generic" \| "file-shape" \| "file-sound" \| "file-sqlite" \| "file-text" \| "file-user" \| "file-video" \| "file-word" \| "file-xml" \| "file-zip" \| "files-csv-collection" \| "filter-expand" \| "find-path" \| "flip-vertical" \| "floor-plan" \| "folder-f" \| "folder-archive" \| "folder-magnifying-glass" \| "folder-move" \| "folder-new" \| "folder-open" \| "folder-open-f" \| "folder-plus" \| "folder-star" \| "folder-video" \| "follow-pause" \| "follow-play" \| "force-directed-link-chart-layout" \| "fork-left" \| "fork-middle" \| "fork-right" \| "form-dropdown" \| "form-elements" \| "form-field" \| "form-field-multiline" \| "form-field-off" \| "forward-f" \| "four-by-one-grid" \| "four-by-three-grid" \| "four-by-two-grid" \| "frame-export" \| "freehand-area" \| "full-screen" \| "full-screen-exit" \| "function-editor" \| "gauge-summary" \| "geoanalytics-server" \| "geoevent-server" \| "geographic-link-chart-layout" \| "geonet-question" \| "gis-server" \| "gps-off" \| "gps-on" \| "gps-on-f" \| "graph-axis" \| "graph-bar100-stacked" \| "graph-bar" \| "graph-bar-side-by-side" \| "graph-bar-stacked" \| "graph-box-mean-lines" \| "graph-box-side-by-side" \| "graph-guides" \| "graph-histogram" \| "graph-line-series" \| "graph-moving-average" \| "graph-pie-slice" \| "graph-scatter-plot" \| "graph-time-series" \| "grid-diamond" \| "grid-hexagon" \| "grid-triangle" \| "grid-unit" \| "ground-control-point" \| "group-form" \| "group-form-plus" \| "group-items" \| "group-layers" \| "group-layout-elements" \| "group-x" \| "h3-hexagon" \| "handle-vertical" \| "heading-layout" \| "heading-rtl" \| "heart-f" \| "heat-chart" \| "heavy-rain" \| "heavy-snow" \| "hexagon2-inset-large" \| "hexagon2-inset-medium" \| "hexagon2-inset-small" \| "hexagon-inset-large" \| "hexagon-inset-medium" \| "hexagon-inset-small" \| "hide-derived-value" \| "hide-empty" \| "hide-layers" \| "hide-parameters" \| "hierarchical-link-chart-layout" \| "highlighter-tip" \| "highway-change" \| "highway-change-right" \| "hillshade-effect" \| "horizontal-distribute" \| "hourglass-active" \| "hourglass-expired" \| "image-chips" \| "image-collection-explorer" \| "image-display-order" \| "image-layer" \| "image-magnifying-glass" \| "image-mensuration" \| "image-pin" \| "image-plus" \| "image-segmentation" \| "image-server" \| "image-space" \| "image-unit" \| "increase-link-chart-symbol-size" \| "information-f" \| "information-letter" \| "initiative-template" \| "joined-view-layer" \| "knowledge-graph" \| "knowledge-graph-dashboard" \| "knowledge-graph-data-model" \| "knowledge-graph-data-store" \| "knowledge-graph-export" \| "knowledge-graph-import" \| "knowledge-graph-new" \| "knowledge-graph-relationship" \| "knowledge-layer" \| "knowledge-server" \| "knowledge-studio" \| "label-off" \| "language-translate" \| "lasso-select" \| "layer-basemap" \| "layer-broken" \| "layer-filter" \| "layer-graphics" \| "layer-hide" \| "layer-kml" \| "layer-line" \| "layer-line-service" \| "layer-map" \| "layer-map-service" \| "layer-points" \| "layer-polygon" \| "layer-polygon-service" \| "layer-service" \| "layer-settings" \| "layer-zoom-to" \| "layers-editable" \| "layers-f" \| "layers-reference" \| "layout-compact" \| "layout-horizontal" \| "layout-spacious" \| "layout-vertical" \| "left-align" \| "left-edge" \| "left-left" \| "left-right" \| "legend-left" \| "legend-plus" \| "legend-right" \| "light-rain" \| "light-snow" \| "line-check" \| "line-dashed" \| "line-dotted" \| "line-of-sight" \| "line-solid" \| "line-straight" \| "link-chart" \| "link-chart-expand" \| "link-chart-from-template" \| "list-bullet" \| "list-button" \| "list-check" \| "list-check-all" \| "list-merge" \| "list-number" \| "list-number-rtl" \| "list-radio" \| "list-rectangle" \| "list-show-all" \| "livestream-video-layer" \| "location-sharing" \| "location-sharing-f" \| "location-sharing-off" \| "lock-f" \| "ltr-elements-align" \| "ltr-paragraph-align" \| "magnifying-glass" \| "magnifying-glass-minus" \| "magnifying-glass-plus" \| "map-contents" \| "map-from-template" \| "map-level-settings" \| "map-pin" \| "map-space" \| "mask-inside" \| "mask-outside" \| "maximum-graph" \| "maximum-territory-distance" \| "measure-area" \| "measure-building-height-shadow" \| "measure-building-height-top-base" \| "measure-building-height-top-shadow" \| "measure-line" \| "media-layer" \| "mega-phone" \| "members-brackets" \| "merge-details" \| "merge-on-highway" \| "merge-on-highway-right" \| "merge-units" \| "microphone-plus" \| "min-distance-between-centers" \| "minimum-graph" \| "minus-circle" \| "minus-circle-f" \| "minus-square" \| "minus-square-f" \| "miscellaneous-collection" \| "mission-server" \| "mobile-off" \| "mobile-vibrate" \| "model-edit" \| "modify-associations" \| "move-from-basemap" \| "move-to-basemap" \| "move-up" \| "move-up-all" \| "multidimensional-raster" \| "multiple-variables" \| "music-note" \| "new-link-chart" \| "new-model" \| "new-raster-function-template" \| "new-training" \| "no-attachment" \| "no-image" \| "no-map" \| "nodes-link" \| "nodes-merge" \| "nodes-unlink" \| "nodes-unmerge" \| "notebook-server" \| "notebook-snapshot" \| "notepad-add" \| "notepad-edit" \| "number-circle1" \| "number-circle1-f" \| "number-circle2" \| "number-circle2-f" \| "number-circle3" \| "number-circle3-f" \| "number-circle4" \| "number-circle4-f" \| "number-circle5" \| "number-circle5-f" \| "number-circle6" \| "number-circle6-f" \| "number-circle7" \| "number-circle7-f" \| "number-circle8" \| "number-circle8-f" \| "number-circle9" \| "number-circle9-f" \| "number-of-territories" \| "object-detection" \| "objectstore-data-store" \| "on-the-ground-elevation" \| "open-book" \| "oriented-imagery-layer" \| "oriented-imagery-widget" \| "overlap-features" \| "overwrite-features" \| "overwrite-project" \| "paint-bucket" \| "palette-check" \| "pan-drag" \| "parcel-layer" \| "partly-cloudy" \| "paste-with-attribute" \| "paste-without-attribute" \| "pause-f" \| "pen-mark" \| "pen-mark-plus" \| "pen-tip" \| "pencil-mark" \| "pencil-mark-plus" \| "pencil-square" \| "pencil-tip" \| "personal-homepage" \| "pie-chart" \| "pin-plus" \| "pin-tear" \| "pin-tear-f" \| "play-f" \| "plus-circle" \| "plus-square" \| "point-line" \| "polygon-area" \| "polygon-line-check" \| "polygon-select" \| "polygon-vertices" \| "pop-up1" \| "pop-up-blank" \| "pop-up-blank-f" \| "premium-content-user-credit" \| "presentation-x" \| "print-preview" \| "processing-templates" \| "profile-variables" \| "project-mission" \| "project-template" \| "puzzle-piece" \| "qr-code" \| "qt-code" \| "question-f" \| "question-mark" \| "radial-tree-link-chart-layout" \| "rain-snow" \| "rain-thunder" \| "ramp-left" \| "ramp-right" \| "raster-analysis" \| "raster-function" \| "raster-function-template" \| "raster-function-template-play" \| "read-only-non-editable" \| "rectangle-area" \| "rectangle-plus" \| "recycle-bin" \| "refresh-f" \| "relational-data-store" \| "relative-direction" \| "relative-to-ground-elevation" \| "relative-to-scene-elevation" \| "remove-from-list" \| "remove-linkchart" \| "reorder-cards" \| "reorder-grid" \| "reorder-stack" \| "replace-image" \| "reshape-add-geometry" \| "reshape-subtract-geometry" \| "reshape-tool" \| "resize-area" \| "reverse-f" \| "ribbon-rosette" \| "right-align" \| "right-angle" \| "right-edge" \| "right-left" \| "right-right" \| "rings-largest" \| "rings-smallest" \| "rings-threshold" \| "rings-x-bar" \| "road-sign" \| "rotate-device" \| "round-about" \| "round-about-right" \| "rounded-rectangle" \| "route-from" \| "route-to" \| "rss-f" \| "rtl-elements-align" \| "rtl-paragraph-align" \| "running-outline" \| "rural-driving-distance" \| "rural-driving-time" \| "satellite0-f" \| "satellite1-f" \| "satellite2-f" \| "satellite3-f" \| "save-as" \| "scan-area" \| "scan-barcode" \| "scan-corridor" \| "scan-crosshatch" \| "scan-perimeter" \| "scan-vertical" \| "screenshot-mode" \| "select-by-attributes" \| "select-category" \| "select-column" \| "select-range" \| "select-visible" \| "selected-items-filter" \| "selection-filter" \| "selection-manager" \| "selection-set" \| "selection-x" \| "send-backwards" \| "send-to-back" \| "serial-port" \| "server-lock" \| "share-ios" \| "sharp-left" \| "sharp-right" \| "shield-coin" \| "shopping-cart" \| "show-all-parameters" \| "show-column" \| "show-derived-value" \| "show-multiple-layers-at-a-time" \| "show-one-layer-at-a-time" \| "show-required-parameters" \| "sign-in" \| "sign-out" \| "simple-link-chart-layout" \| "sky-plot" \| "sliders-horizontal" \| "smart-camera" \| "smart-form" \| "smart-tree-link-chart-layout" \| "snap-to-grid" \| "snap-to-pixel" \| "snap-to-point" \| "snow-thunder" \| "sort-ascending" \| "sort-ascending-arrow" \| "sort-descending" \| "sort-descending-arrow" \| "sound-low" \| "sound-off" \| "sound-unavailable" \| "spatiotemporal-data-store" \| "speech-bubble" \| "speech-bubble-check" \| "speech-bubble-exclamation" \| "speech-bubble-like" \| "speech-bubble-plus" \| "speech-bubble-social" \| "speech-bubbles" \| "split-features" \| "split-geometry" \| "split-units" \| "square-f" \| "square-area" \| "square-inset-large" \| "square-inset-medium" \| "square-inset-small" \| "stairs-down" \| "stairs-up" \| "star-f" \| "star-circle" \| "stop-square" \| "stop-square-f" \| "stored-as-new-query" \| "stored-query" \| "sub-fields" \| "subheading-rtl" \| "suitability-analysis-output" \| "summarize-center-and-dispersion1" \| "summarize-center-and-dispersion2" \| "summarize-center-and-dispersion3" \| "system-management" \| "tabbed-view" \| "take-pedestrian-ramp" \| "territory-buffer-distance" \| "test-data" \| "text-bold" \| "text-button" \| "text-dashed-underline" \| "text-large" \| "text-medium" \| "text-paragraph-large" \| "text-small" \| "text-solid-underline" \| "three-by-one-grid" \| "three-by-three-grid" \| "three-by-two-grid" \| "thumbs-down" \| "thumbs-up" \| "tile-cache-data-store" \| "tile-layer" \| "tiled-imagery-layer" \| "time-filter" \| "time-zone" \| "toggle-off" \| "toggle-on" \| "tour-pin-tear" \| "transverse-hexagon" \| "trapezoid-area" \| "trucking-distance" \| "trucking-time" \| "u-turn" \| "u-turn-right" \| "ungroup-items" \| "ungroup-layers" \| "ungroup-layout-elements" \| "update-features" \| "update-project" \| "upload-to" \| "urban-model" \| "usb-security-key" \| "user-calendar" \| "user-down" \| "user-key" \| "user-minus" \| "user-plus" \| "user-to-device" \| "user-up" \| "user-x" \| "utility-network" \| "utility-network-trace" \| "validate-utility-network-topology" \| "vertex-check" \| "vertex-edit" \| "vertex-gps" \| "vertex-move" \| "vertex-plus" \| "vertex-x" \| "vertical-distribute" \| "video-layer" \| "video-plus" \| "video-server" \| "video-single-server" \| "video-web" \| "view-associations" \| "view-hide" \| "view-mixed" \| "view-visible" \| "walk-through-door" \| "walking-distance" \| "walking-time" \| "widgets-group" \| "widgets-source" \| "widgets-tabs" \| "workflow-diagram" \| "workflow-manager-server" \| "x-axis-guide" \| "x-bar" \| "x-circle" \| "x-circle-f" \| "x-octagon" \| "x-octagon-f" \| "y-axis-guide" \| "zoom-in-fixed" \| "zoom-out-fixed" \| "zoom-to-object"` | `undefined` | -| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | -| `iconStart` | `icon-start` | Specifies an icon to display at the start of the component. | `CamelCaseIcons \| "date-time" \| "i12-x" \| "i14-x" \| "i18-x" \| "i1-x" \| "i2-d-explore" \| "i2-x" \| "i360-view" \| "i3-d-glasses" \| "i4-x" \| "i8-x" \| "a-z" \| "a-z-down" \| "a-z-up" \| "a3-landscape" \| "a3-portrait" \| "a4-landscape" \| "a4-portrait" \| "absolute-direction" \| "absolute-elevation" \| "access-string-results" \| "activity-monitor" \| "actual-size" \| "add-and-update-features" \| "add-constant" \| "add-features" \| "add-in" \| "add-in-edit" \| "add-in-new" \| "add-layer" \| "add-layer-service" \| "add-raster-variable" \| "add-rasters" \| "add-reaction" \| "add-text" \| "add-to-model" \| "address-book" \| "alert-off-circle-f" \| "all-servers" \| "analysis-overlay" \| "annotate-tool" \| "ansi-a-landscape" \| "ansi-a-portrait" \| "ansi-b-landscape" \| "ansi-b-portrait" \| "antenna-height" \| "app-gear" \| "app-launcher" \| "app-run" \| "app-update" \| "apply-changes" \| "apply-selection-to-existing-view" \| "arcgis-data-store" \| "arcgis-online" \| "arrow-bold-down" \| "arrow-bold-left" \| "arrow-bold-right" \| "arrow-bold-up" \| "arrow-circle-down" \| "arrow-circle-down-f" \| "arrow-double-diagonal1" \| "arrow-double-diagonal2" \| "arrow-double-horizontal" \| "arrow-double-vertical" \| "arrow-down" \| "arrow-down-left" \| "arrow-down-right" \| "arrow-left" \| "arrow-right" \| "arrow-right-left" \| "arrow-up" \| "arrow-up-down" \| "arrow-up-left" \| "arrow-up-right" \| "asterisk-large" \| "asterisk-small" \| "attachment-plus" \| "auto-layout" \| "battery-charging" \| "bear-left" \| "bear-right" \| "beginning-f" \| "bell-f" \| "bell-off" \| "bookmark-f" \| "border-radius-fully-rounded" \| "border-radius-rounded" \| "border-radius-sharp" \| "box-chart" \| "box-chart-series" \| "brackets-curly" \| "break-recurrence" \| "bring-forward" \| "bring-to-front" \| "browser-map" \| "brush-mark" \| "brush-mark-plus" \| "brush-tip" \| "bullet-point" \| "bullet-point-large" \| "camera-flash-off" \| "camera-flash-on" \| "camera-plus" \| "camera-switch-front-back" \| "camera-unlock" \| "caret-double-horizontal" \| "caret-double-vertical" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-square-down" \| "caret-square-left" \| "caret-square-right" \| "caret-square-up" \| "caret-up" \| "catalog-dataset" \| "center-align" \| "center-horizontal" \| "center-vertical" \| "change-detection" \| "change-font-size" \| "chart-gear" \| "chart-magnifying-glass" \| "check-circle" \| "check-circle-f" \| "check-extent" \| "check-layer" \| "check-shield" \| "check-square" \| "check-square-f" \| "chevron-down" \| "chevron-down-left" \| "chevron-down-right" \| "chevron-end" \| "chevron-left" \| "chevron-right" \| "chevron-start" \| "chevron-up" \| "chevron-up-left" \| "chevron-up-right" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chord-diagram" \| "circle-f" \| "circle-area" \| "circle-disallowed" \| "circle-inset-large" \| "circle-inset-medium" \| "circle-inset-small" \| "circle-pause" \| "circle-pause-f" \| "circle-stop" \| "circle-stop-f" \| "classify-objects" \| "classify-pixels" \| "clear-selection" \| "clipboard-brackets" \| "clock-down" \| "clock-forward" \| "clock-up" \| "cloud-data" \| "cloud-server" \| "code-branch" \| "code-branch-edit" \| "collaboration-distributed" \| "collaboration-user" \| "color-coded-map" \| "color-correction" \| "column-settings" \| "community-link-chart-layout" \| "compass-needle" \| "compass-north-circle" \| "conditional-rules" \| "conditional-rules-path" \| "conference-room" \| "configure-editing" \| "configure-grid-unit" \| "configure-popup" \| "content-full" \| "content-inline" \| "content-large" \| "content-medium" \| "content-minimal" \| "content-none" \| "content-side-by-side" \| "content-small" \| "contingent-values" \| "coordinate-system" \| "copy-to-clipboard" \| "credit-card" \| "cursor-click" \| "cursor-lock" \| "cursor-marquee" \| "cursor-minus" \| "cursor-plus" \| "cursor-selection" \| "custom-print" \| "cut-and-fill-volume-calculation" \| "data-card" \| "data-check" \| "data-clock-chart" \| "data-cloud" \| "data-folder" \| "data-magnifying-glass" \| "data-raster" \| "debug-script" \| "decrease-link-chart-symbol-size" \| "deep-learning" \| "deep-learning-project" \| "derived-value" \| "developer-credentials" \| "diamond-inset-large" \| "diamond-inset-medium" \| "diamond-inset-small" \| "dimensions-unit" \| "dimensions-wall" \| "display-selection-lock" \| "display-selection-unlock" \| "dissolve-features" \| "distance-type" \| "distribute-height-evenly" \| "distribute-width-evenly" \| "dock-bottom" \| "dock-left" \| "dock-right" \| "double-float" \| "download-to" \| "drive-time" \| "drive-time-largest" \| "drive-time-smallest" \| "drive-time-threshold" \| "drive-time-x-bar" \| "driving-distance" \| "driving-time" \| "drone-fixed-wing" \| "drone-flying-wing" \| "drone-quadcopter" \| "drone-quadcopter-top" \| "edit-attributes" \| "edit-geometry" \| "elevator-down" \| "elevator-up" \| "ellipsis-circle" \| "email-address" \| "embedded-card" \| "embedded-content" \| "embedded-live-content" \| "employee-id" \| "enable-disable-feature-selection" \| "end-f" \| "escalator-down" \| "escalator-up" \| "exclamation-mark-circle" \| "exclamation-mark-circle-f" \| "exclamation-mark-triangle" \| "exclamation-mark-triangle-f" \| "exclamation-point" \| "exclamation-point-f" \| "exit-highway-left" \| "exit-highway-right" \| "expression-defined-color" \| "extend-trim" \| "extent-filter" \| "face-id" \| "feature-details" \| "feature-layer" \| "file-archive" \| "file-cad" \| "file-code" \| "file-csv" \| "file-data" \| "file-ecd" \| "file-excel" \| "file-gpx" \| "file-image" \| "file-kml" \| "file-magnifying-glass" \| "file-pdf" \| "file-pdf-plus" \| "file-pitemx" \| "file-ppt" \| "file-report" \| "file-report-generic" \| "file-shape" \| "file-sound" \| "file-sqlite" \| "file-text" \| "file-user" \| "file-video" \| "file-word" \| "file-xml" \| "file-zip" \| "files-csv-collection" \| "filter-expand" \| "find-path" \| "flip-vertical" \| "floor-plan" \| "folder-f" \| "folder-archive" \| "folder-magnifying-glass" \| "folder-move" \| "folder-new" \| "folder-open" \| "folder-open-f" \| "folder-plus" \| "folder-star" \| "folder-video" \| "follow-pause" \| "follow-play" \| "force-directed-link-chart-layout" \| "fork-left" \| "fork-middle" \| "fork-right" \| "form-dropdown" \| "form-elements" \| "form-field" \| "form-field-multiline" \| "form-field-off" \| "forward-f" \| "four-by-one-grid" \| "four-by-three-grid" \| "four-by-two-grid" \| "frame-export" \| "freehand-area" \| "full-screen" \| "full-screen-exit" \| "function-editor" \| "gauge-summary" \| "geoanalytics-server" \| "geoevent-server" \| "geographic-link-chart-layout" \| "geonet-question" \| "gis-server" \| "gps-off" \| "gps-on" \| "gps-on-f" \| "graph-axis" \| "graph-bar100-stacked" \| "graph-bar" \| "graph-bar-side-by-side" \| "graph-bar-stacked" \| "graph-box-mean-lines" \| "graph-box-side-by-side" \| "graph-guides" \| "graph-histogram" \| "graph-line-series" \| "graph-moving-average" \| "graph-pie-slice" \| "graph-scatter-plot" \| "graph-time-series" \| "grid-diamond" \| "grid-hexagon" \| "grid-triangle" \| "grid-unit" \| "ground-control-point" \| "group-form" \| "group-form-plus" \| "group-items" \| "group-layers" \| "group-layout-elements" \| "group-x" \| "h3-hexagon" \| "handle-vertical" \| "heading-layout" \| "heading-rtl" \| "heart-f" \| "heat-chart" \| "heavy-rain" \| "heavy-snow" \| "hexagon2-inset-large" \| "hexagon2-inset-medium" \| "hexagon2-inset-small" \| "hexagon-inset-large" \| "hexagon-inset-medium" \| "hexagon-inset-small" \| "hide-derived-value" \| "hide-empty" \| "hide-layers" \| "hide-parameters" \| "hierarchical-link-chart-layout" \| "highlighter-tip" \| "highway-change" \| "highway-change-right" \| "hillshade-effect" \| "horizontal-distribute" \| "hourglass-active" \| "hourglass-expired" \| "image-chips" \| "image-collection-explorer" \| "image-display-order" \| "image-layer" \| "image-magnifying-glass" \| "image-mensuration" \| "image-pin" \| "image-plus" \| "image-segmentation" \| "image-server" \| "image-space" \| "image-unit" \| "increase-link-chart-symbol-size" \| "information-f" \| "information-letter" \| "initiative-template" \| "joined-view-layer" \| "knowledge-graph" \| "knowledge-graph-dashboard" \| "knowledge-graph-data-model" \| "knowledge-graph-data-store" \| "knowledge-graph-export" \| "knowledge-graph-import" \| "knowledge-graph-new" \| "knowledge-graph-relationship" \| "knowledge-layer" \| "knowledge-server" \| "knowledge-studio" \| "label-off" \| "language-translate" \| "lasso-select" \| "layer-basemap" \| "layer-broken" \| "layer-filter" \| "layer-graphics" \| "layer-hide" \| "layer-kml" \| "layer-line" \| "layer-line-service" \| "layer-map" \| "layer-map-service" \| "layer-points" \| "layer-polygon" \| "layer-polygon-service" \| "layer-service" \| "layer-settings" \| "layer-zoom-to" \| "layers-editable" \| "layers-f" \| "layers-reference" \| "layout-compact" \| "layout-horizontal" \| "layout-spacious" \| "layout-vertical" \| "left-align" \| "left-edge" \| "left-left" \| "left-right" \| "legend-left" \| "legend-plus" \| "legend-right" \| "light-rain" \| "light-snow" \| "line-check" \| "line-dashed" \| "line-dotted" \| "line-of-sight" \| "line-solid" \| "line-straight" \| "link-chart" \| "link-chart-expand" \| "link-chart-from-template" \| "list-bullet" \| "list-button" \| "list-check" \| "list-check-all" \| "list-merge" \| "list-number" \| "list-number-rtl" \| "list-radio" \| "list-rectangle" \| "list-show-all" \| "livestream-video-layer" \| "location-sharing" \| "location-sharing-f" \| "location-sharing-off" \| "lock-f" \| "ltr-elements-align" \| "ltr-paragraph-align" \| "magnifying-glass" \| "magnifying-glass-minus" \| "magnifying-glass-plus" \| "map-contents" \| "map-from-template" \| "map-level-settings" \| "map-pin" \| "map-space" \| "mask-inside" \| "mask-outside" \| "maximum-graph" \| "maximum-territory-distance" \| "measure-area" \| "measure-building-height-shadow" \| "measure-building-height-top-base" \| "measure-building-height-top-shadow" \| "measure-line" \| "media-layer" \| "mega-phone" \| "members-brackets" \| "merge-details" \| "merge-on-highway" \| "merge-on-highway-right" \| "merge-units" \| "microphone-plus" \| "min-distance-between-centers" \| "minimum-graph" \| "minus-circle" \| "minus-circle-f" \| "minus-square" \| "minus-square-f" \| "miscellaneous-collection" \| "mission-server" \| "mobile-off" \| "mobile-vibrate" \| "model-edit" \| "modify-associations" \| "move-from-basemap" \| "move-to-basemap" \| "move-up" \| "move-up-all" \| "multidimensional-raster" \| "multiple-variables" \| "music-note" \| "new-link-chart" \| "new-model" \| "new-raster-function-template" \| "new-training" \| "no-attachment" \| "no-image" \| "no-map" \| "nodes-link" \| "nodes-merge" \| "nodes-unlink" \| "nodes-unmerge" \| "notebook-server" \| "notebook-snapshot" \| "notepad-add" \| "notepad-edit" \| "number-circle1" \| "number-circle1-f" \| "number-circle2" \| "number-circle2-f" \| "number-circle3" \| "number-circle3-f" \| "number-circle4" \| "number-circle4-f" \| "number-circle5" \| "number-circle5-f" \| "number-circle6" \| "number-circle6-f" \| "number-circle7" \| "number-circle7-f" \| "number-circle8" \| "number-circle8-f" \| "number-circle9" \| "number-circle9-f" \| "number-of-territories" \| "object-detection" \| "objectstore-data-store" \| "on-the-ground-elevation" \| "open-book" \| "oriented-imagery-layer" \| "oriented-imagery-widget" \| "overlap-features" \| "overwrite-features" \| "overwrite-project" \| "paint-bucket" \| "palette-check" \| "pan-drag" \| "parcel-layer" \| "partly-cloudy" \| "paste-with-attribute" \| "paste-without-attribute" \| "pause-f" \| "pen-mark" \| "pen-mark-plus" \| "pen-tip" \| "pencil-mark" \| "pencil-mark-plus" \| "pencil-square" \| "pencil-tip" \| "personal-homepage" \| "pie-chart" \| "pin-plus" \| "pin-tear" \| "pin-tear-f" \| "play-f" \| "plus-circle" \| "plus-square" \| "point-line" \| "polygon-area" \| "polygon-line-check" \| "polygon-select" \| "polygon-vertices" \| "pop-up1" \| "pop-up-blank" \| "pop-up-blank-f" \| "premium-content-user-credit" \| "presentation-x" \| "print-preview" \| "processing-templates" \| "profile-variables" \| "project-mission" \| "project-template" \| "puzzle-piece" \| "qr-code" \| "qt-code" \| "question-f" \| "question-mark" \| "radial-tree-link-chart-layout" \| "rain-snow" \| "rain-thunder" \| "ramp-left" \| "ramp-right" \| "raster-analysis" \| "raster-function" \| "raster-function-template" \| "raster-function-template-play" \| "read-only-non-editable" \| "rectangle-area" \| "rectangle-plus" \| "recycle-bin" \| "refresh-f" \| "relational-data-store" \| "relative-direction" \| "relative-to-ground-elevation" \| "relative-to-scene-elevation" \| "remove-from-list" \| "remove-linkchart" \| "reorder-cards" \| "reorder-grid" \| "reorder-stack" \| "replace-image" \| "reshape-add-geometry" \| "reshape-subtract-geometry" \| "reshape-tool" \| "resize-area" \| "reverse-f" \| "ribbon-rosette" \| "right-align" \| "right-angle" \| "right-edge" \| "right-left" \| "right-right" \| "rings-largest" \| "rings-smallest" \| "rings-threshold" \| "rings-x-bar" \| "road-sign" \| "rotate-device" \| "round-about" \| "round-about-right" \| "rounded-rectangle" \| "route-from" \| "route-to" \| "rss-f" \| "rtl-elements-align" \| "rtl-paragraph-align" \| "running-outline" \| "rural-driving-distance" \| "rural-driving-time" \| "satellite0-f" \| "satellite1-f" \| "satellite2-f" \| "satellite3-f" \| "save-as" \| "scan-area" \| "scan-barcode" \| "scan-corridor" \| "scan-crosshatch" \| "scan-perimeter" \| "scan-vertical" \| "screenshot-mode" \| "select-by-attributes" \| "select-category" \| "select-column" \| "select-range" \| "select-visible" \| "selected-items-filter" \| "selection-filter" \| "selection-manager" \| "selection-set" \| "selection-x" \| "send-backwards" \| "send-to-back" \| "serial-port" \| "server-lock" \| "share-ios" \| "sharp-left" \| "sharp-right" \| "shield-coin" \| "shopping-cart" \| "show-all-parameters" \| "show-column" \| "show-derived-value" \| "show-multiple-layers-at-a-time" \| "show-one-layer-at-a-time" \| "show-required-parameters" \| "sign-in" \| "sign-out" \| "simple-link-chart-layout" \| "sky-plot" \| "sliders-horizontal" \| "smart-camera" \| "smart-form" \| "smart-tree-link-chart-layout" \| "snap-to-grid" \| "snap-to-pixel" \| "snap-to-point" \| "snow-thunder" \| "sort-ascending" \| "sort-ascending-arrow" \| "sort-descending" \| "sort-descending-arrow" \| "sound-low" \| "sound-off" \| "sound-unavailable" \| "spatiotemporal-data-store" \| "speech-bubble" \| "speech-bubble-check" \| "speech-bubble-exclamation" \| "speech-bubble-like" \| "speech-bubble-plus" \| "speech-bubble-social" \| "speech-bubbles" \| "split-features" \| "split-geometry" \| "split-units" \| "square-f" \| "square-area" \| "square-inset-large" \| "square-inset-medium" \| "square-inset-small" \| "stairs-down" \| "stairs-up" \| "star-f" \| "star-circle" \| "stop-square" \| "stop-square-f" \| "stored-as-new-query" \| "stored-query" \| "sub-fields" \| "subheading-rtl" \| "suitability-analysis-output" \| "summarize-center-and-dispersion1" \| "summarize-center-and-dispersion2" \| "summarize-center-and-dispersion3" \| "system-management" \| "tabbed-view" \| "take-pedestrian-ramp" \| "territory-buffer-distance" \| "test-data" \| "text-bold" \| "text-button" \| "text-dashed-underline" \| "text-large" \| "text-medium" \| "text-paragraph-large" \| "text-small" \| "text-solid-underline" \| "three-by-one-grid" \| "three-by-three-grid" \| "three-by-two-grid" \| "thumbs-down" \| "thumbs-up" \| "tile-cache-data-store" \| "tile-layer" \| "tiled-imagery-layer" \| "time-filter" \| "time-zone" \| "toggle-off" \| "toggle-on" \| "tour-pin-tear" \| "transverse-hexagon" \| "trapezoid-area" \| "trucking-distance" \| "trucking-time" \| "u-turn" \| "u-turn-right" \| "ungroup-items" \| "ungroup-layers" \| "ungroup-layout-elements" \| "update-features" \| "update-project" \| "upload-to" \| "urban-model" \| "usb-security-key" \| "user-calendar" \| "user-down" \| "user-key" \| "user-minus" \| "user-plus" \| "user-to-device" \| "user-up" \| "user-x" \| "utility-network" \| "utility-network-trace" \| "validate-utility-network-topology" \| "vertex-check" \| "vertex-edit" \| "vertex-gps" \| "vertex-move" \| "vertex-plus" \| "vertex-x" \| "vertical-distribute" \| "video-layer" \| "video-plus" \| "video-server" \| "video-single-server" \| "video-web" \| "view-associations" \| "view-hide" \| "view-mixed" \| "view-visible" \| "walk-through-door" \| "walking-distance" \| "walking-time" \| "widgets-group" \| "widgets-source" \| "widgets-tabs" \| "workflow-diagram" \| "workflow-manager-server" \| "x-axis-guide" \| "x-bar" \| "x-circle" \| "x-circle-f" \| "x-octagon" \| "x-octagon-f" \| "y-axis-guide" \| "zoom-in-fixed" \| "zoom-out-fixed" \| "zoom-to-object"` | `undefined` | -| `value` | `value` | The component's value. | `any` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------- | --------------- | -------------------------------------------------------------------------------------------- | --------- | ----------- | +| `checked` | `checked` | When `true`, the component is checked. | `boolean` | `false` | +| `iconEnd` | `icon-end` | Specifies an icon to display at the end of the component. | `string` | `undefined` | +| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | +| `iconStart` | `icon-start` | Specifies an icon to display at the start of the component. | `string` | `undefined` | +| `value` | `value` | The component's value. | `any` | `undefined` | ## Dependencies diff --git a/packages/calcite-components/src/components/segmented-control-item/segmented-control-item.tsx b/packages/calcite-components/src/components/segmented-control-item/segmented-control-item.tsx index 0dc3e22b8b2..db07b73dd07 100644 --- a/packages/calcite-components/src/components/segmented-control-item/segmented-control-item.tsx +++ b/packages/calcite-components/src/components/segmented-control-item/segmented-control-item.tsx @@ -12,7 +12,7 @@ import { } from "@stencil/core"; import { slotChangeHasContent, toAriaBoolean } from "../../utils/dom"; import { Appearance, Layout, Scale } from "../interfaces"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { CSS, SLOTS } from "./resources"; @Component({ @@ -40,10 +40,10 @@ export class SegmentedControlItem { @Prop({ reflect: true }) iconFlipRtl = false; /** Specifies an icon to display at the start of the component. */ - @Prop({ reflect: true }) iconStart: IconName; + @Prop({ reflect: true }) iconStart: IconNameOrString; /** Specifies an icon to display at the end of the component. */ - @Prop({ reflect: true }) iconEnd: IconName; + @Prop({ reflect: true }) iconEnd: IconNameOrString; /** * The component's value. @@ -78,7 +78,7 @@ export class SegmentedControlItem { // //-------------------------------------------------------------------------- - private renderIcon(icon: IconName, solo: boolean = false): VNode { + private renderIcon(icon: IconNameOrString, solo: boolean = false): VNode { return icon ? ( **[DEPRECATED]** Use `displayMode` instead.

When `true`, the content area displays like a floating panel. | `boolean` | `false` | -| `detachedHeightScale` | `detached-height-scale` | **[DEPRECATED]** Use `heightScale` instead.

When `displayMode` is `float`, specifies the maximum height of the component. | `"l" \| "m" \| "s"` | `undefined` | -| `displayMode` | `display-mode` | Specifies the display mode of the component, where: `"dock"` displays at full height adjacent to center content, `"overlay"` displays at full height on top of center content, and `"float"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content. | `"dock" \| "float" \| "overlay"` | `"dock"` | -| `heightScale` | `height-scale` | When `layout` is `horizontal`, specifies the maximum height of the component. | `"l" \| "m" \| "s"` | `undefined` | -| `layout` | `layout` | The direction of the component. | `"horizontal" \| "vertical"` | `"vertical"` | -| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ShellPanelMessages` | `undefined` | -| `position` | `position` | Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`). | `"end" \| "start"` | `"start"` | -| `resizable` | `resizable` | When `true` and `displayMode` is not `float`, the component's content area is resizable. | `boolean` | `false` | -| `widthScale` | `width-scale` | When `layout` is `vertical`, specifies the width of the component. | `"l" \| "m" \| "s"` | `"m"` | +| Property | Attribute | Description | Type | Default | +| --------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ------------ | +| `collapsed` | `collapsed` | When `true`, hides the component's content area. | `boolean` | `false` | +| `detached` | `detached` | **[DEPRECATED]** Use `displayMode` instead.

When `true`, the content area displays like a floating panel. | `boolean` | `false` | +| `detachedHeightScale` | `detached-height-scale` | **[DEPRECATED]** Use `heightScale` instead.

When `displayMode` is `float-content` or `float`, specifies the maximum height of the component. | `"l" \| "m" \| "s"` | `undefined` | +| `displayMode` | `display-mode` | Specifies the display mode of the component, where: `"dock"` displays at full height adjacent to center content, `"overlay"` displays at full height on top of center content, and `"float"` [Deprecated] does not display at full height with content separately detached from `calcite-action-bar` on top of center content. `"float-content"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content. `"float-all"` detaches the `calcite-panel` and `calcite-action-bar` on top of center content. | `"dock" \| "float" \| "float-all" \| "float-content" \| "overlay"` | `"dock"` | +| `heightScale` | `height-scale` | When `layout` is `horizontal`, specifies the maximum height of the component. | `"l" \| "m" \| "s"` | `undefined` | +| `layout` | `layout` | The direction of the component. | `"horizontal" \| "vertical"` | `"vertical"` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ShellPanelMessages` | `undefined` | +| `position` | `position` | Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`). | `"end" \| "start"` | `"start"` | +| `resizable` | `resizable` | When `true` and `displayMode` is not `float-content` or `float`, the component's content area is resizable. | `boolean` | `false` | +| `widthScale` | `width-scale` | When `layout` is `vertical`, specifies the width of the component. | `"l" \| "m" \| "s"` | `"m"` | ## Slots @@ -28,16 +28,16 @@ For comprehensive guidance on using and implementing `calcite-shell-panel`, refe ## CSS Custom Properties -| Name | Description | -| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | -| `--calcite-shell-panel-detached-max-height` | [Deprecated] Use the `heightScale` property instead. When `displayMode` is `float`, specifies the maximum height of the component. | -| `--calcite-shell-panel-height` | When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the height of the component. | -| `--calcite-shell-panel-max-height` | When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the maximum height of the component. | -| `--calcite-shell-panel-max-width` | Specifies the maximum width of the component. | -| `--calcite-shell-panel-min-height` | When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the minimum height of the component. | -| `--calcite-shell-panel-min-width` | Specifies the minimum width of the component. | -| `--calcite-shell-panel-width` | Specifies the width of the component. | -| `--calcite-shell-panel-z-index` | Specifies the z-index value for the component. | +| Name | Description | +| ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `--calcite-shell-panel-detached-max-height` | [Deprecated] Use the `heightScale` property instead. When `displayMode` is `float-content` or `float`, specifies the maximum height of the component. | +| `--calcite-shell-panel-height` | When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the height of the component. | +| `--calcite-shell-panel-max-height` | When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the maximum height of the component. | +| `--calcite-shell-panel-max-width` | Specifies the maximum width of the component. | +| `--calcite-shell-panel-min-height` | When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the minimum height of the component. | +| `--calcite-shell-panel-min-width` | Specifies the minimum width of the component. | +| `--calcite-shell-panel-width` | Specifies the width of the component. | +| `--calcite-shell-panel-z-index` | Specifies the z-index value for the component. | --- diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.scss b/packages/calcite-components/src/components/shell-panel/shell-panel.scss index 4a052668bbd..be4c448b0c2 100755 --- a/packages/calcite-components/src/components/shell-panel/shell-panel.scss +++ b/packages/calcite-components/src/components/shell-panel/shell-panel.scss @@ -173,7 +173,7 @@ } :host([layout="horizontal"]) .separator { - @apply right-0 w-full + @apply end-0 w-full h-0.5; cursor: row-resize; } @@ -259,7 +259,7 @@ } :host([layout="horizontal"]) .content--overlay { - @apply left-0 w-full; + @apply start-0 w-full; } :host([layout="vertical"][position="start"]) .content--overlay { diff --git a/packages/calcite-components/src/components/shell/shell.scss b/packages/calcite-components/src/components/shell/shell.scss index 0a89cfbdd05..3185d16159a 100755 --- a/packages/calcite-components/src/components/shell/shell.scss +++ b/packages/calcite-components/src/components/shell/shell.scss @@ -39,6 +39,11 @@ justify-content: space-between; } +.content ::slotted(:not(calcite-tip-manager)) { + @apply relative + z-default; +} + .content ::slotted(calcite-shell-center-row), .content ::slotted(calcite-panel), .content ::slotted(calcite-flow) { @@ -55,7 +60,12 @@ } .content--non-interactive { - @apply flex pointer-events-none; + @apply flex + h-full + w-full + flex-col + flex-nowrap + pointer-events-none; } ::slotted(calcite-shell-center-row) { @@ -66,6 +76,12 @@ @apply text-n2-wrap font-normal; } +slot[name="panel-start"]::slotted(calcite-shell-panel), +slot[name="panel-end"]::slotted(calcite-shell-panel) { + @apply relative + z-header; +} + slot[name="panel-end"]::slotted(calcite-shell-panel) { margin-inline-start: auto; } diff --git a/packages/calcite-components/src/components/shell/shell.stories.ts b/packages/calcite-components/src/components/shell/shell.stories.ts index db68285ae00..5acde52f25a 100644 --- a/packages/calcite-components/src/components/shell/shell.stories.ts +++ b/packages/calcite-components/src/components/shell/shell.stories.ts @@ -1643,3 +1643,30 @@ export const panelTopFloatVertical_TestOnly = (): string => `; + +export const resizeHandlePositioning = (): string => + html` + + + + + + + + + + + + + + + + + + + + + + + + `; diff --git a/packages/calcite-components/src/components/split-button/readme.md b/packages/calcite-components/src/components/split-button/readme.md index 07a30731b40..5e51d9b6f5b 100644 --- a/packages/calcite-components/src/components/split-button/readme.md +++ b/packages/calcite-components/src/components/split-button/readme.md @@ -6,24 +6,24 @@ For comprehensive guidance on using and implementing `calcite-split-button`, ref ## Properties -| Property | Attribute | Description | Type | Default | -| -------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -| `appearance` | `appearance` | Specifies the appearance style of the component. | `"outline" \| "outline-fill" \| "solid" \| "transparent"` | `"solid"` | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `dropdownIconType` | `dropdown-icon-type` | Specifies the icon used for the dropdown menu. | `"caret" \| "chevron" \| "ellipsis" \| "overflow"` | `"chevron"` | -| `dropdownLabel` | `dropdown-label` | Accessible name for the dropdown menu. | `string` | `undefined` | -| `flipPlacements` | -- | Defines the available placements that can be used when a flip occurs. | `FlipPlacement[]` | `undefined` | -| `kind` | `kind` | Specifies the kind of the component, which will apply to border and background, if applicable. | `"brand" \| "danger" \| "inverse" \| "neutral"` | `"brand"` | -| `loading` | `loading` | When `true`, a busy indicator is displayed on the primary button. | `boolean` | `false` | -| `overlayPositioning` | `overlay-positioning` | Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. | `"absolute" \| "fixed"` | `"absolute"` | -| `placement` | `placement` | Determines where the component will be positioned relative to the container element. | `"bottom" \| "bottom-end" \| "bottom-start" \| "top" \| "top-end" \| "top-start"` | `"bottom-end"` | -| `primaryIconEnd` | `primary-icon-end` | Specifies an icon to display at the end of the primary button. | `CamelCaseIcons \| "date-time" \| "i12-x" \| "i14-x" \| "i18-x" \| "i1-x" \| "i2-d-explore" \| "i2-x" \| "i360-view" \| "i3-d-glasses" \| "i4-x" \| "i8-x" \| "a-z" \| "a-z-down" \| "a-z-up" \| "a3-landscape" \| "a3-portrait" \| "a4-landscape" \| "a4-portrait" \| "absolute-direction" \| "absolute-elevation" \| "access-string-results" \| "activity-monitor" \| "actual-size" \| "add-and-update-features" \| "add-constant" \| "add-features" \| "add-in" \| "add-in-edit" \| "add-in-new" \| "add-layer" \| "add-layer-service" \| "add-raster-variable" \| "add-rasters" \| "add-reaction" \| "add-text" \| "add-to-model" \| "address-book" \| "alert-off-circle-f" \| "all-servers" \| "analysis-overlay" \| "annotate-tool" \| "ansi-a-landscape" \| "ansi-a-portrait" \| "ansi-b-landscape" \| "ansi-b-portrait" \| "antenna-height" \| "app-gear" \| "app-launcher" \| "app-run" \| "app-update" \| "apply-changes" \| "apply-selection-to-existing-view" \| "arcgis-data-store" \| "arcgis-online" \| "arrow-bold-down" \| "arrow-bold-left" \| "arrow-bold-right" \| "arrow-bold-up" \| "arrow-circle-down" \| "arrow-circle-down-f" \| "arrow-double-diagonal1" \| "arrow-double-diagonal2" \| "arrow-double-horizontal" \| "arrow-double-vertical" \| "arrow-down" \| "arrow-down-left" \| "arrow-down-right" \| "arrow-left" \| "arrow-right" \| "arrow-right-left" \| "arrow-up" \| "arrow-up-down" \| "arrow-up-left" \| "arrow-up-right" \| "asterisk-large" \| "asterisk-small" \| "attachment-plus" \| "auto-layout" \| "battery-charging" \| "bear-left" \| "bear-right" \| "beginning-f" \| "bell-f" \| "bell-off" \| "bookmark-f" \| "border-radius-fully-rounded" \| "border-radius-rounded" \| "border-radius-sharp" \| "box-chart" \| "box-chart-series" \| "brackets-curly" \| "break-recurrence" \| "bring-forward" \| "bring-to-front" \| "browser-map" \| "brush-mark" \| "brush-mark-plus" \| "brush-tip" \| "bullet-point" \| "bullet-point-large" \| "camera-flash-off" \| "camera-flash-on" \| "camera-plus" \| "camera-switch-front-back" \| "camera-unlock" \| "caret-double-horizontal" \| "caret-double-vertical" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-square-down" \| "caret-square-left" \| "caret-square-right" \| "caret-square-up" \| "caret-up" \| "catalog-dataset" \| "center-align" \| "center-horizontal" \| "center-vertical" \| "change-detection" \| "change-font-size" \| "chart-gear" \| "chart-magnifying-glass" \| "check-circle" \| "check-circle-f" \| "check-extent" \| "check-layer" \| "check-shield" \| "check-square" \| "check-square-f" \| "chevron-down" \| "chevron-down-left" \| "chevron-down-right" \| "chevron-end" \| "chevron-left" \| "chevron-right" \| "chevron-start" \| "chevron-up" \| "chevron-up-left" \| "chevron-up-right" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chord-diagram" \| "circle-f" \| "circle-area" \| "circle-disallowed" \| "circle-inset-large" \| "circle-inset-medium" \| "circle-inset-small" \| "circle-pause" \| "circle-pause-f" \| "circle-stop" \| "circle-stop-f" \| "classify-objects" \| "classify-pixels" \| "clear-selection" \| "clipboard-brackets" \| "clock-down" \| "clock-forward" \| "clock-up" \| "cloud-data" \| "cloud-server" \| "code-branch" \| "code-branch-edit" \| "collaboration-distributed" \| "collaboration-user" \| "color-coded-map" \| "color-correction" \| "column-settings" \| "community-link-chart-layout" \| "compass-needle" \| "compass-north-circle" \| "conditional-rules" \| "conditional-rules-path" \| "conference-room" \| "configure-editing" \| "configure-grid-unit" \| "configure-popup" \| "content-full" \| "content-inline" \| "content-large" \| "content-medium" \| "content-minimal" \| "content-none" \| "content-side-by-side" \| "content-small" \| "contingent-values" \| "coordinate-system" \| "copy-to-clipboard" \| "credit-card" \| "cursor-click" \| "cursor-lock" \| "cursor-marquee" \| "cursor-minus" \| "cursor-plus" \| "cursor-selection" \| "custom-print" \| "cut-and-fill-volume-calculation" \| "data-card" \| "data-check" \| "data-clock-chart" \| "data-cloud" \| "data-folder" \| "data-magnifying-glass" \| "data-raster" \| "debug-script" \| "decrease-link-chart-symbol-size" \| "deep-learning" \| "deep-learning-project" \| "derived-value" \| "developer-credentials" \| "diamond-inset-large" \| "diamond-inset-medium" \| "diamond-inset-small" \| "dimensions-unit" \| "dimensions-wall" \| "display-selection-lock" \| "display-selection-unlock" \| "dissolve-features" \| "distance-type" \| "distribute-height-evenly" \| "distribute-width-evenly" \| "dock-bottom" \| "dock-left" \| "dock-right" \| "double-float" \| "download-to" \| "drive-time" \| "drive-time-largest" \| "drive-time-smallest" \| "drive-time-threshold" \| "drive-time-x-bar" \| "driving-distance" \| "driving-time" \| "drone-fixed-wing" \| "drone-flying-wing" \| "drone-quadcopter" \| "drone-quadcopter-top" \| "edit-attributes" \| "edit-geometry" \| "elevator-down" \| "elevator-up" \| "ellipsis-circle" \| "email-address" \| "embedded-card" \| "embedded-content" \| "embedded-live-content" \| "employee-id" \| "enable-disable-feature-selection" \| "end-f" \| "escalator-down" \| "escalator-up" \| "exclamation-mark-circle" \| "exclamation-mark-circle-f" \| "exclamation-mark-triangle" \| "exclamation-mark-triangle-f" \| "exclamation-point" \| "exclamation-point-f" \| "exit-highway-left" \| "exit-highway-right" \| "expression-defined-color" \| "extend-trim" \| "extent-filter" \| "face-id" \| "feature-details" \| "feature-layer" \| "file-archive" \| "file-cad" \| "file-code" \| "file-csv" \| "file-data" \| "file-ecd" \| "file-excel" \| "file-gpx" \| "file-image" \| "file-kml" \| "file-magnifying-glass" \| "file-pdf" \| "file-pdf-plus" \| "file-pitemx" \| "file-ppt" \| "file-report" \| "file-report-generic" \| "file-shape" \| "file-sound" \| "file-sqlite" \| "file-text" \| "file-user" \| "file-video" \| "file-word" \| "file-xml" \| "file-zip" \| "files-csv-collection" \| "filter-expand" \| "find-path" \| "flip-vertical" \| "floor-plan" \| "folder-f" \| "folder-archive" \| "folder-magnifying-glass" \| "folder-move" \| "folder-new" \| "folder-open" \| "folder-open-f" \| "folder-plus" \| "folder-star" \| "folder-video" \| "follow-pause" \| "follow-play" \| "force-directed-link-chart-layout" \| "fork-left" \| "fork-middle" \| "fork-right" \| "form-dropdown" \| "form-elements" \| "form-field" \| "form-field-multiline" \| "form-field-off" \| "forward-f" \| "four-by-one-grid" \| "four-by-three-grid" \| "four-by-two-grid" \| "frame-export" \| "freehand-area" \| "full-screen" \| "full-screen-exit" \| "function-editor" \| "gauge-summary" \| "geoanalytics-server" \| "geoevent-server" \| "geographic-link-chart-layout" \| "geonet-question" \| "gis-server" \| "gps-off" \| "gps-on" \| "gps-on-f" \| "graph-axis" \| "graph-bar100-stacked" \| "graph-bar" \| "graph-bar-side-by-side" \| "graph-bar-stacked" \| "graph-box-mean-lines" \| "graph-box-side-by-side" \| "graph-guides" \| "graph-histogram" \| "graph-line-series" \| "graph-moving-average" \| "graph-pie-slice" \| "graph-scatter-plot" \| "graph-time-series" \| "grid-diamond" \| "grid-hexagon" \| "grid-triangle" \| "grid-unit" \| "ground-control-point" \| "group-form" \| "group-form-plus" \| "group-items" \| "group-layers" \| "group-layout-elements" \| "group-x" \| "h3-hexagon" \| "handle-vertical" \| "heading-layout" \| "heading-rtl" \| "heart-f" \| "heat-chart" \| "heavy-rain" \| "heavy-snow" \| "hexagon2-inset-large" \| "hexagon2-inset-medium" \| "hexagon2-inset-small" \| "hexagon-inset-large" \| "hexagon-inset-medium" \| "hexagon-inset-small" \| "hide-derived-value" \| "hide-empty" \| "hide-layers" \| "hide-parameters" \| "hierarchical-link-chart-layout" \| "highlighter-tip" \| "highway-change" \| "highway-change-right" \| "hillshade-effect" \| "horizontal-distribute" \| "hourglass-active" \| "hourglass-expired" \| "image-chips" \| "image-collection-explorer" \| "image-display-order" \| "image-layer" \| "image-magnifying-glass" \| "image-mensuration" \| "image-pin" \| "image-plus" \| "image-segmentation" \| "image-server" \| "image-space" \| "image-unit" \| "increase-link-chart-symbol-size" \| "information-f" \| "information-letter" \| "initiative-template" \| "joined-view-layer" \| "knowledge-graph" \| "knowledge-graph-dashboard" \| "knowledge-graph-data-model" \| "knowledge-graph-data-store" \| "knowledge-graph-export" \| "knowledge-graph-import" \| "knowledge-graph-new" \| "knowledge-graph-relationship" \| "knowledge-layer" \| "knowledge-server" \| "knowledge-studio" \| "label-off" \| "language-translate" \| "lasso-select" \| "layer-basemap" \| "layer-broken" \| "layer-filter" \| "layer-graphics" \| "layer-hide" \| "layer-kml" \| "layer-line" \| "layer-line-service" \| "layer-map" \| "layer-map-service" \| "layer-points" \| "layer-polygon" \| "layer-polygon-service" \| "layer-service" \| "layer-settings" \| "layer-zoom-to" \| "layers-editable" \| "layers-f" \| "layers-reference" \| "layout-compact" \| "layout-horizontal" \| "layout-spacious" \| "layout-vertical" \| "left-align" \| "left-edge" \| "left-left" \| "left-right" \| "legend-left" \| "legend-plus" \| "legend-right" \| "light-rain" \| "light-snow" \| "line-check" \| "line-dashed" \| "line-dotted" \| "line-of-sight" \| "line-solid" \| "line-straight" \| "link-chart" \| "link-chart-expand" \| "link-chart-from-template" \| "list-bullet" \| "list-button" \| "list-check" \| "list-check-all" \| "list-merge" \| "list-number" \| "list-number-rtl" \| "list-radio" \| "list-rectangle" \| "list-show-all" \| "livestream-video-layer" \| "location-sharing" \| "location-sharing-f" \| "location-sharing-off" \| "lock-f" \| "ltr-elements-align" \| "ltr-paragraph-align" \| "magnifying-glass" \| "magnifying-glass-minus" \| "magnifying-glass-plus" \| "map-contents" \| "map-from-template" \| "map-level-settings" \| "map-pin" \| "map-space" \| "mask-inside" \| "mask-outside" \| "maximum-graph" \| "maximum-territory-distance" \| "measure-area" \| "measure-building-height-shadow" \| "measure-building-height-top-base" \| "measure-building-height-top-shadow" \| "measure-line" \| "media-layer" \| "mega-phone" \| "members-brackets" \| "merge-details" \| "merge-on-highway" \| "merge-on-highway-right" \| "merge-units" \| "microphone-plus" \| "min-distance-between-centers" \| "minimum-graph" \| "minus-circle" \| "minus-circle-f" \| "minus-square" \| "minus-square-f" \| "miscellaneous-collection" \| "mission-server" \| "mobile-off" \| "mobile-vibrate" \| "model-edit" \| "modify-associations" \| "move-from-basemap" \| "move-to-basemap" \| "move-up" \| "move-up-all" \| "multidimensional-raster" \| "multiple-variables" \| "music-note" \| "new-link-chart" \| "new-model" \| "new-raster-function-template" \| "new-training" \| "no-attachment" \| "no-image" \| "no-map" \| "nodes-link" \| "nodes-merge" \| "nodes-unlink" \| "nodes-unmerge" \| "notebook-server" \| "notebook-snapshot" \| "notepad-add" \| "notepad-edit" \| "number-circle1" \| "number-circle1-f" \| "number-circle2" \| "number-circle2-f" \| "number-circle3" \| "number-circle3-f" \| "number-circle4" \| "number-circle4-f" \| "number-circle5" \| "number-circle5-f" \| "number-circle6" \| "number-circle6-f" \| "number-circle7" \| "number-circle7-f" \| "number-circle8" \| "number-circle8-f" \| "number-circle9" \| "number-circle9-f" \| "number-of-territories" \| "object-detection" \| "objectstore-data-store" \| "on-the-ground-elevation" \| "open-book" \| "oriented-imagery-layer" \| "oriented-imagery-widget" \| "overlap-features" \| "overwrite-features" \| "overwrite-project" \| "paint-bucket" \| "palette-check" \| "pan-drag" \| "parcel-layer" \| "partly-cloudy" \| "paste-with-attribute" \| "paste-without-attribute" \| "pause-f" \| "pen-mark" \| "pen-mark-plus" \| "pen-tip" \| "pencil-mark" \| "pencil-mark-plus" \| "pencil-square" \| "pencil-tip" \| "personal-homepage" \| "pie-chart" \| "pin-plus" \| "pin-tear" \| "pin-tear-f" \| "play-f" \| "plus-circle" \| "plus-square" \| "point-line" \| "polygon-area" \| "polygon-line-check" \| "polygon-select" \| "polygon-vertices" \| "pop-up1" \| "pop-up-blank" \| "pop-up-blank-f" \| "premium-content-user-credit" \| "presentation-x" \| "print-preview" \| "processing-templates" \| "profile-variables" \| "project-mission" \| "project-template" \| "puzzle-piece" \| "qr-code" \| "qt-code" \| "question-f" \| "question-mark" \| "radial-tree-link-chart-layout" \| "rain-snow" \| "rain-thunder" \| "ramp-left" \| "ramp-right" \| "raster-analysis" \| "raster-function" \| "raster-function-template" \| "raster-function-template-play" \| "read-only-non-editable" \| "rectangle-area" \| "rectangle-plus" \| "recycle-bin" \| "refresh-f" \| "relational-data-store" \| "relative-direction" \| "relative-to-ground-elevation" \| "relative-to-scene-elevation" \| "remove-from-list" \| "remove-linkchart" \| "reorder-cards" \| "reorder-grid" \| "reorder-stack" \| "replace-image" \| "reshape-add-geometry" \| "reshape-subtract-geometry" \| "reshape-tool" \| "resize-area" \| "reverse-f" \| "ribbon-rosette" \| "right-align" \| "right-angle" \| "right-edge" \| "right-left" \| "right-right" \| "rings-largest" \| "rings-smallest" \| "rings-threshold" \| "rings-x-bar" \| "road-sign" \| "rotate-device" \| "round-about" \| "round-about-right" \| "rounded-rectangle" \| "route-from" \| "route-to" \| "rss-f" \| "rtl-elements-align" \| "rtl-paragraph-align" \| "running-outline" \| "rural-driving-distance" \| "rural-driving-time" \| "satellite0-f" \| "satellite1-f" \| "satellite2-f" \| "satellite3-f" \| "save-as" \| "scan-area" \| "scan-barcode" \| "scan-corridor" \| "scan-crosshatch" \| "scan-perimeter" \| "scan-vertical" \| "screenshot-mode" \| "select-by-attributes" \| "select-category" \| "select-column" \| "select-range" \| "select-visible" \| "selected-items-filter" \| "selection-filter" \| "selection-manager" \| "selection-set" \| "selection-x" \| "send-backwards" \| "send-to-back" \| "serial-port" \| "server-lock" \| "share-ios" \| "sharp-left" \| "sharp-right" \| "shield-coin" \| "shopping-cart" \| "show-all-parameters" \| "show-column" \| "show-derived-value" \| "show-multiple-layers-at-a-time" \| "show-one-layer-at-a-time" \| "show-required-parameters" \| "sign-in" \| "sign-out" \| "simple-link-chart-layout" \| "sky-plot" \| "sliders-horizontal" \| "smart-camera" \| "smart-form" \| "smart-tree-link-chart-layout" \| "snap-to-grid" \| "snap-to-pixel" \| "snap-to-point" \| "snow-thunder" \| "sort-ascending" \| "sort-ascending-arrow" \| "sort-descending" \| "sort-descending-arrow" \| "sound-low" \| "sound-off" \| "sound-unavailable" \| "spatiotemporal-data-store" \| "speech-bubble" \| "speech-bubble-check" \| "speech-bubble-exclamation" \| "speech-bubble-like" \| "speech-bubble-plus" \| "speech-bubble-social" \| "speech-bubbles" \| "split-features" \| "split-geometry" \| "split-units" \| "square-f" \| "square-area" \| "square-inset-large" \| "square-inset-medium" \| "square-inset-small" \| "stairs-down" \| "stairs-up" \| "star-f" \| "star-circle" \| "stop-square" \| "stop-square-f" \| "stored-as-new-query" \| "stored-query" \| "sub-fields" \| "subheading-rtl" \| "suitability-analysis-output" \| "summarize-center-and-dispersion1" \| "summarize-center-and-dispersion2" \| "summarize-center-and-dispersion3" \| "system-management" \| "tabbed-view" \| "take-pedestrian-ramp" \| "territory-buffer-distance" \| "test-data" \| "text-bold" \| "text-button" \| "text-dashed-underline" \| "text-large" \| "text-medium" \| "text-paragraph-large" \| "text-small" \| "text-solid-underline" \| "three-by-one-grid" \| "three-by-three-grid" \| "three-by-two-grid" \| "thumbs-down" \| "thumbs-up" \| "tile-cache-data-store" \| "tile-layer" \| "tiled-imagery-layer" \| "time-filter" \| "time-zone" \| "toggle-off" \| "toggle-on" \| "tour-pin-tear" \| "transverse-hexagon" \| "trapezoid-area" \| "trucking-distance" \| "trucking-time" \| "u-turn" \| "u-turn-right" \| "ungroup-items" \| "ungroup-layers" \| "ungroup-layout-elements" \| "update-features" \| "update-project" \| "upload-to" \| "urban-model" \| "usb-security-key" \| "user-calendar" \| "user-down" \| "user-key" \| "user-minus" \| "user-plus" \| "user-to-device" \| "user-up" \| "user-x" \| "utility-network" \| "utility-network-trace" \| "validate-utility-network-topology" \| "vertex-check" \| "vertex-edit" \| "vertex-gps" \| "vertex-move" \| "vertex-plus" \| "vertex-x" \| "vertical-distribute" \| "video-layer" \| "video-plus" \| "video-server" \| "video-single-server" \| "video-web" \| "view-associations" \| "view-hide" \| "view-mixed" \| "view-visible" \| "walk-through-door" \| "walking-distance" \| "walking-time" \| "widgets-group" \| "widgets-source" \| "widgets-tabs" \| "workflow-diagram" \| "workflow-manager-server" \| "x-axis-guide" \| "x-bar" \| "x-circle" \| "x-circle-f" \| "x-octagon" \| "x-octagon-f" \| "y-axis-guide" \| "zoom-in-fixed" \| "zoom-out-fixed" \| "zoom-to-object"` | `undefined` | -| `primaryIconFlipRtl` | `primary-icon-flip-rtl` | Displays the `primaryIconStart` and/or `primaryIconEnd` as flipped when the element direction is right-to-left (`"rtl"`). | `"both" \| "end" \| "start"` | `undefined` | -| `primaryIconStart` | `primary-icon-start` | Specifies an icon to display at the start of the primary button. | `CamelCaseIcons \| "date-time" \| "i12-x" \| "i14-x" \| "i18-x" \| "i1-x" \| "i2-d-explore" \| "i2-x" \| "i360-view" \| "i3-d-glasses" \| "i4-x" \| "i8-x" \| "a-z" \| "a-z-down" \| "a-z-up" \| "a3-landscape" \| "a3-portrait" \| "a4-landscape" \| "a4-portrait" \| "absolute-direction" \| "absolute-elevation" \| "access-string-results" \| "activity-monitor" \| "actual-size" \| "add-and-update-features" \| "add-constant" \| "add-features" \| "add-in" \| "add-in-edit" \| "add-in-new" \| "add-layer" \| "add-layer-service" \| "add-raster-variable" \| "add-rasters" \| "add-reaction" \| "add-text" \| "add-to-model" \| "address-book" \| "alert-off-circle-f" \| "all-servers" \| "analysis-overlay" \| "annotate-tool" \| "ansi-a-landscape" \| "ansi-a-portrait" \| "ansi-b-landscape" \| "ansi-b-portrait" \| "antenna-height" \| "app-gear" \| "app-launcher" \| "app-run" \| "app-update" \| "apply-changes" \| "apply-selection-to-existing-view" \| "arcgis-data-store" \| "arcgis-online" \| "arrow-bold-down" \| "arrow-bold-left" \| "arrow-bold-right" \| "arrow-bold-up" \| "arrow-circle-down" \| "arrow-circle-down-f" \| "arrow-double-diagonal1" \| "arrow-double-diagonal2" \| "arrow-double-horizontal" \| "arrow-double-vertical" \| "arrow-down" \| "arrow-down-left" \| "arrow-down-right" \| "arrow-left" \| "arrow-right" \| "arrow-right-left" \| "arrow-up" \| "arrow-up-down" \| "arrow-up-left" \| "arrow-up-right" \| "asterisk-large" \| "asterisk-small" \| "attachment-plus" \| "auto-layout" \| "battery-charging" \| "bear-left" \| "bear-right" \| "beginning-f" \| "bell-f" \| "bell-off" \| "bookmark-f" \| "border-radius-fully-rounded" \| "border-radius-rounded" \| "border-radius-sharp" \| "box-chart" \| "box-chart-series" \| "brackets-curly" \| "break-recurrence" \| "bring-forward" \| "bring-to-front" \| "browser-map" \| "brush-mark" \| "brush-mark-plus" \| "brush-tip" \| "bullet-point" \| "bullet-point-large" \| "camera-flash-off" \| "camera-flash-on" \| "camera-plus" \| "camera-switch-front-back" \| "camera-unlock" \| "caret-double-horizontal" \| "caret-double-vertical" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-square-down" \| "caret-square-left" \| "caret-square-right" \| "caret-square-up" \| "caret-up" \| "catalog-dataset" \| "center-align" \| "center-horizontal" \| "center-vertical" \| "change-detection" \| "change-font-size" \| "chart-gear" \| "chart-magnifying-glass" \| "check-circle" \| "check-circle-f" \| "check-extent" \| "check-layer" \| "check-shield" \| "check-square" \| "check-square-f" \| "chevron-down" \| "chevron-down-left" \| "chevron-down-right" \| "chevron-end" \| "chevron-left" \| "chevron-right" \| "chevron-start" \| "chevron-up" \| "chevron-up-left" \| "chevron-up-right" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chord-diagram" \| "circle-f" \| "circle-area" \| "circle-disallowed" \| "circle-inset-large" \| "circle-inset-medium" \| "circle-inset-small" \| "circle-pause" \| "circle-pause-f" \| "circle-stop" \| "circle-stop-f" \| "classify-objects" \| "classify-pixels" \| "clear-selection" \| "clipboard-brackets" \| "clock-down" \| "clock-forward" \| "clock-up" \| "cloud-data" \| "cloud-server" \| "code-branch" \| "code-branch-edit" \| "collaboration-distributed" \| "collaboration-user" \| "color-coded-map" \| "color-correction" \| "column-settings" \| "community-link-chart-layout" \| "compass-needle" \| "compass-north-circle" \| "conditional-rules" \| "conditional-rules-path" \| "conference-room" \| "configure-editing" \| "configure-grid-unit" \| "configure-popup" \| "content-full" \| "content-inline" \| "content-large" \| "content-medium" \| "content-minimal" \| "content-none" \| "content-side-by-side" \| "content-small" \| "contingent-values" \| "coordinate-system" \| "copy-to-clipboard" \| "credit-card" \| "cursor-click" \| "cursor-lock" \| "cursor-marquee" \| "cursor-minus" \| "cursor-plus" \| "cursor-selection" \| "custom-print" \| "cut-and-fill-volume-calculation" \| "data-card" \| "data-check" \| "data-clock-chart" \| "data-cloud" \| "data-folder" \| "data-magnifying-glass" \| "data-raster" \| "debug-script" \| "decrease-link-chart-symbol-size" \| "deep-learning" \| "deep-learning-project" \| "derived-value" \| "developer-credentials" \| "diamond-inset-large" \| "diamond-inset-medium" \| "diamond-inset-small" \| "dimensions-unit" \| "dimensions-wall" \| "display-selection-lock" \| "display-selection-unlock" \| "dissolve-features" \| "distance-type" \| "distribute-height-evenly" \| "distribute-width-evenly" \| "dock-bottom" \| "dock-left" \| "dock-right" \| "double-float" \| "download-to" \| "drive-time" \| "drive-time-largest" \| "drive-time-smallest" \| "drive-time-threshold" \| "drive-time-x-bar" \| "driving-distance" \| "driving-time" \| "drone-fixed-wing" \| "drone-flying-wing" \| "drone-quadcopter" \| "drone-quadcopter-top" \| "edit-attributes" \| "edit-geometry" \| "elevator-down" \| "elevator-up" \| "ellipsis-circle" \| "email-address" \| "embedded-card" \| "embedded-content" \| "embedded-live-content" \| "employee-id" \| "enable-disable-feature-selection" \| "end-f" \| "escalator-down" \| "escalator-up" \| "exclamation-mark-circle" \| "exclamation-mark-circle-f" \| "exclamation-mark-triangle" \| "exclamation-mark-triangle-f" \| "exclamation-point" \| "exclamation-point-f" \| "exit-highway-left" \| "exit-highway-right" \| "expression-defined-color" \| "extend-trim" \| "extent-filter" \| "face-id" \| "feature-details" \| "feature-layer" \| "file-archive" \| "file-cad" \| "file-code" \| "file-csv" \| "file-data" \| "file-ecd" \| "file-excel" \| "file-gpx" \| "file-image" \| "file-kml" \| "file-magnifying-glass" \| "file-pdf" \| "file-pdf-plus" \| "file-pitemx" \| "file-ppt" \| "file-report" \| "file-report-generic" \| "file-shape" \| "file-sound" \| "file-sqlite" \| "file-text" \| "file-user" \| "file-video" \| "file-word" \| "file-xml" \| "file-zip" \| "files-csv-collection" \| "filter-expand" \| "find-path" \| "flip-vertical" \| "floor-plan" \| "folder-f" \| "folder-archive" \| "folder-magnifying-glass" \| "folder-move" \| "folder-new" \| "folder-open" \| "folder-open-f" \| "folder-plus" \| "folder-star" \| "folder-video" \| "follow-pause" \| "follow-play" \| "force-directed-link-chart-layout" \| "fork-left" \| "fork-middle" \| "fork-right" \| "form-dropdown" \| "form-elements" \| "form-field" \| "form-field-multiline" \| "form-field-off" \| "forward-f" \| "four-by-one-grid" \| "four-by-three-grid" \| "four-by-two-grid" \| "frame-export" \| "freehand-area" \| "full-screen" \| "full-screen-exit" \| "function-editor" \| "gauge-summary" \| "geoanalytics-server" \| "geoevent-server" \| "geographic-link-chart-layout" \| "geonet-question" \| "gis-server" \| "gps-off" \| "gps-on" \| "gps-on-f" \| "graph-axis" \| "graph-bar100-stacked" \| "graph-bar" \| "graph-bar-side-by-side" \| "graph-bar-stacked" \| "graph-box-mean-lines" \| "graph-box-side-by-side" \| "graph-guides" \| "graph-histogram" \| "graph-line-series" \| "graph-moving-average" \| "graph-pie-slice" \| "graph-scatter-plot" \| "graph-time-series" \| "grid-diamond" \| "grid-hexagon" \| "grid-triangle" \| "grid-unit" \| "ground-control-point" \| "group-form" \| "group-form-plus" \| "group-items" \| "group-layers" \| "group-layout-elements" \| "group-x" \| "h3-hexagon" \| "handle-vertical" \| "heading-layout" \| "heading-rtl" \| "heart-f" \| "heat-chart" \| "heavy-rain" \| "heavy-snow" \| "hexagon2-inset-large" \| "hexagon2-inset-medium" \| "hexagon2-inset-small" \| "hexagon-inset-large" \| "hexagon-inset-medium" \| "hexagon-inset-small" \| "hide-derived-value" \| "hide-empty" \| "hide-layers" \| "hide-parameters" \| "hierarchical-link-chart-layout" \| "highlighter-tip" \| "highway-change" \| "highway-change-right" \| "hillshade-effect" \| "horizontal-distribute" \| "hourglass-active" \| "hourglass-expired" \| "image-chips" \| "image-collection-explorer" \| "image-display-order" \| "image-layer" \| "image-magnifying-glass" \| "image-mensuration" \| "image-pin" \| "image-plus" \| "image-segmentation" \| "image-server" \| "image-space" \| "image-unit" \| "increase-link-chart-symbol-size" \| "information-f" \| "information-letter" \| "initiative-template" \| "joined-view-layer" \| "knowledge-graph" \| "knowledge-graph-dashboard" \| "knowledge-graph-data-model" \| "knowledge-graph-data-store" \| "knowledge-graph-export" \| "knowledge-graph-import" \| "knowledge-graph-new" \| "knowledge-graph-relationship" \| "knowledge-layer" \| "knowledge-server" \| "knowledge-studio" \| "label-off" \| "language-translate" \| "lasso-select" \| "layer-basemap" \| "layer-broken" \| "layer-filter" \| "layer-graphics" \| "layer-hide" \| "layer-kml" \| "layer-line" \| "layer-line-service" \| "layer-map" \| "layer-map-service" \| "layer-points" \| "layer-polygon" \| "layer-polygon-service" \| "layer-service" \| "layer-settings" \| "layer-zoom-to" \| "layers-editable" \| "layers-f" \| "layers-reference" \| "layout-compact" \| "layout-horizontal" \| "layout-spacious" \| "layout-vertical" \| "left-align" \| "left-edge" \| "left-left" \| "left-right" \| "legend-left" \| "legend-plus" \| "legend-right" \| "light-rain" \| "light-snow" \| "line-check" \| "line-dashed" \| "line-dotted" \| "line-of-sight" \| "line-solid" \| "line-straight" \| "link-chart" \| "link-chart-expand" \| "link-chart-from-template" \| "list-bullet" \| "list-button" \| "list-check" \| "list-check-all" \| "list-merge" \| "list-number" \| "list-number-rtl" \| "list-radio" \| "list-rectangle" \| "list-show-all" \| "livestream-video-layer" \| "location-sharing" \| "location-sharing-f" \| "location-sharing-off" \| "lock-f" \| "ltr-elements-align" \| "ltr-paragraph-align" \| "magnifying-glass" \| "magnifying-glass-minus" \| "magnifying-glass-plus" \| "map-contents" \| "map-from-template" \| "map-level-settings" \| "map-pin" \| "map-space" \| "mask-inside" \| "mask-outside" \| "maximum-graph" \| "maximum-territory-distance" \| "measure-area" \| "measure-building-height-shadow" \| "measure-building-height-top-base" \| "measure-building-height-top-shadow" \| "measure-line" \| "media-layer" \| "mega-phone" \| "members-brackets" \| "merge-details" \| "merge-on-highway" \| "merge-on-highway-right" \| "merge-units" \| "microphone-plus" \| "min-distance-between-centers" \| "minimum-graph" \| "minus-circle" \| "minus-circle-f" \| "minus-square" \| "minus-square-f" \| "miscellaneous-collection" \| "mission-server" \| "mobile-off" \| "mobile-vibrate" \| "model-edit" \| "modify-associations" \| "move-from-basemap" \| "move-to-basemap" \| "move-up" \| "move-up-all" \| "multidimensional-raster" \| "multiple-variables" \| "music-note" \| "new-link-chart" \| "new-model" \| "new-raster-function-template" \| "new-training" \| "no-attachment" \| "no-image" \| "no-map" \| "nodes-link" \| "nodes-merge" \| "nodes-unlink" \| "nodes-unmerge" \| "notebook-server" \| "notebook-snapshot" \| "notepad-add" \| "notepad-edit" \| "number-circle1" \| "number-circle1-f" \| "number-circle2" \| "number-circle2-f" \| "number-circle3" \| "number-circle3-f" \| "number-circle4" \| "number-circle4-f" \| "number-circle5" \| "number-circle5-f" \| "number-circle6" \| "number-circle6-f" \| "number-circle7" \| "number-circle7-f" \| "number-circle8" \| "number-circle8-f" \| "number-circle9" \| "number-circle9-f" \| "number-of-territories" \| "object-detection" \| "objectstore-data-store" \| "on-the-ground-elevation" \| "open-book" \| "oriented-imagery-layer" \| "oriented-imagery-widget" \| "overlap-features" \| "overwrite-features" \| "overwrite-project" \| "paint-bucket" \| "palette-check" \| "pan-drag" \| "parcel-layer" \| "partly-cloudy" \| "paste-with-attribute" \| "paste-without-attribute" \| "pause-f" \| "pen-mark" \| "pen-mark-plus" \| "pen-tip" \| "pencil-mark" \| "pencil-mark-plus" \| "pencil-square" \| "pencil-tip" \| "personal-homepage" \| "pie-chart" \| "pin-plus" \| "pin-tear" \| "pin-tear-f" \| "play-f" \| "plus-circle" \| "plus-square" \| "point-line" \| "polygon-area" \| "polygon-line-check" \| "polygon-select" \| "polygon-vertices" \| "pop-up1" \| "pop-up-blank" \| "pop-up-blank-f" \| "premium-content-user-credit" \| "presentation-x" \| "print-preview" \| "processing-templates" \| "profile-variables" \| "project-mission" \| "project-template" \| "puzzle-piece" \| "qr-code" \| "qt-code" \| "question-f" \| "question-mark" \| "radial-tree-link-chart-layout" \| "rain-snow" \| "rain-thunder" \| "ramp-left" \| "ramp-right" \| "raster-analysis" \| "raster-function" \| "raster-function-template" \| "raster-function-template-play" \| "read-only-non-editable" \| "rectangle-area" \| "rectangle-plus" \| "recycle-bin" \| "refresh-f" \| "relational-data-store" \| "relative-direction" \| "relative-to-ground-elevation" \| "relative-to-scene-elevation" \| "remove-from-list" \| "remove-linkchart" \| "reorder-cards" \| "reorder-grid" \| "reorder-stack" \| "replace-image" \| "reshape-add-geometry" \| "reshape-subtract-geometry" \| "reshape-tool" \| "resize-area" \| "reverse-f" \| "ribbon-rosette" \| "right-align" \| "right-angle" \| "right-edge" \| "right-left" \| "right-right" \| "rings-largest" \| "rings-smallest" \| "rings-threshold" \| "rings-x-bar" \| "road-sign" \| "rotate-device" \| "round-about" \| "round-about-right" \| "rounded-rectangle" \| "route-from" \| "route-to" \| "rss-f" \| "rtl-elements-align" \| "rtl-paragraph-align" \| "running-outline" \| "rural-driving-distance" \| "rural-driving-time" \| "satellite0-f" \| "satellite1-f" \| "satellite2-f" \| "satellite3-f" \| "save-as" \| "scan-area" \| "scan-barcode" \| "scan-corridor" \| "scan-crosshatch" \| "scan-perimeter" \| "scan-vertical" \| "screenshot-mode" \| "select-by-attributes" \| "select-category" \| "select-column" \| "select-range" \| "select-visible" \| "selected-items-filter" \| "selection-filter" \| "selection-manager" \| "selection-set" \| "selection-x" \| "send-backwards" \| "send-to-back" \| "serial-port" \| "server-lock" \| "share-ios" \| "sharp-left" \| "sharp-right" \| "shield-coin" \| "shopping-cart" \| "show-all-parameters" \| "show-column" \| "show-derived-value" \| "show-multiple-layers-at-a-time" \| "show-one-layer-at-a-time" \| "show-required-parameters" \| "sign-in" \| "sign-out" \| "simple-link-chart-layout" \| "sky-plot" \| "sliders-horizontal" \| "smart-camera" \| "smart-form" \| "smart-tree-link-chart-layout" \| "snap-to-grid" \| "snap-to-pixel" \| "snap-to-point" \| "snow-thunder" \| "sort-ascending" \| "sort-ascending-arrow" \| "sort-descending" \| "sort-descending-arrow" \| "sound-low" \| "sound-off" \| "sound-unavailable" \| "spatiotemporal-data-store" \| "speech-bubble" \| "speech-bubble-check" \| "speech-bubble-exclamation" \| "speech-bubble-like" \| "speech-bubble-plus" \| "speech-bubble-social" \| "speech-bubbles" \| "split-features" \| "split-geometry" \| "split-units" \| "square-f" \| "square-area" \| "square-inset-large" \| "square-inset-medium" \| "square-inset-small" \| "stairs-down" \| "stairs-up" \| "star-f" \| "star-circle" \| "stop-square" \| "stop-square-f" \| "stored-as-new-query" \| "stored-query" \| "sub-fields" \| "subheading-rtl" \| "suitability-analysis-output" \| "summarize-center-and-dispersion1" \| "summarize-center-and-dispersion2" \| "summarize-center-and-dispersion3" \| "system-management" \| "tabbed-view" \| "take-pedestrian-ramp" \| "territory-buffer-distance" \| "test-data" \| "text-bold" \| "text-button" \| "text-dashed-underline" \| "text-large" \| "text-medium" \| "text-paragraph-large" \| "text-small" \| "text-solid-underline" \| "three-by-one-grid" \| "three-by-three-grid" \| "three-by-two-grid" \| "thumbs-down" \| "thumbs-up" \| "tile-cache-data-store" \| "tile-layer" \| "tiled-imagery-layer" \| "time-filter" \| "time-zone" \| "toggle-off" \| "toggle-on" \| "tour-pin-tear" \| "transverse-hexagon" \| "trapezoid-area" \| "trucking-distance" \| "trucking-time" \| "u-turn" \| "u-turn-right" \| "ungroup-items" \| "ungroup-layers" \| "ungroup-layout-elements" \| "update-features" \| "update-project" \| "upload-to" \| "urban-model" \| "usb-security-key" \| "user-calendar" \| "user-down" \| "user-key" \| "user-minus" \| "user-plus" \| "user-to-device" \| "user-up" \| "user-x" \| "utility-network" \| "utility-network-trace" \| "validate-utility-network-topology" \| "vertex-check" \| "vertex-edit" \| "vertex-gps" \| "vertex-move" \| "vertex-plus" \| "vertex-x" \| "vertical-distribute" \| "video-layer" \| "video-plus" \| "video-server" \| "video-single-server" \| "video-web" \| "view-associations" \| "view-hide" \| "view-mixed" \| "view-visible" \| "walk-through-door" \| "walking-distance" \| "walking-time" \| "widgets-group" \| "widgets-source" \| "widgets-tabs" \| "workflow-diagram" \| "workflow-manager-server" \| "x-axis-guide" \| "x-bar" \| "x-circle" \| "x-circle-f" \| "x-octagon" \| "x-octagon-f" \| "y-axis-guide" \| "zoom-in-fixed" \| "zoom-out-fixed" \| "zoom-to-object"` | `undefined` | -| `primaryLabel` | `primary-label` | Accessible name for the primary button. | `string` | `undefined` | -| `primaryText` | `primary-text` | Text displayed in the primary button. | `string` | `undefined` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `width` | `width` | Specifies the width of the component. | `"auto" \| "full" \| "half"` | `"auto"` | +| Property | Attribute | Description | Type | Default | +| -------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | -------------- | +| `appearance` | `appearance` | Specifies the appearance style of the component. | `"outline" \| "outline-fill" \| "solid" \| "transparent"` | `"solid"` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `dropdownIconType` | `dropdown-icon-type` | Specifies the icon used for the dropdown menu. | `"caret" \| "chevron" \| "ellipsis" \| "overflow"` | `"chevron"` | +| `dropdownLabel` | `dropdown-label` | Accessible name for the dropdown menu. | `string` | `undefined` | +| `flipPlacements` | -- | Defines the available placements that can be used when a flip occurs. | `FlipPlacement[]` | `undefined` | +| `kind` | `kind` | Specifies the kind of the component, which will apply to border and background, if applicable. | `"brand" \| "danger" \| "inverse" \| "neutral"` | `"brand"` | +| `loading` | `loading` | When `true`, a busy indicator is displayed on the primary button. | `boolean` | `false` | +| `overlayPositioning` | `overlay-positioning` | Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. | `"absolute" \| "fixed"` | `"absolute"` | +| `placement` | `placement` | Determines where the component will be positioned relative to the container element. | `"bottom" \| "bottom-end" \| "bottom-start" \| "top" \| "top-end" \| "top-start"` | `"bottom-end"` | +| `primaryIconEnd` | `primary-icon-end` | Specifies an icon to display at the end of the primary button. | `string` | `undefined` | +| `primaryIconFlipRtl` | `primary-icon-flip-rtl` | Displays the `primaryIconStart` and/or `primaryIconEnd` as flipped when the element direction is right-to-left (`"rtl"`). | `"both" \| "end" \| "start"` | `undefined` | +| `primaryIconStart` | `primary-icon-start` | Specifies an icon to display at the start of the primary button. | `string` | `undefined` | +| `primaryLabel` | `primary-label` | Accessible name for the primary button. | `string` | `undefined` | +| `primaryText` | `primary-text` | Text displayed in the primary button. | `string` | `undefined` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `width` | `width` | Specifies the width of the component. | `"auto" \| "full" \| "half"` | `"auto"` | ## Events diff --git a/packages/calcite-components/src/components/split-button/split-button.tsx b/packages/calcite-components/src/components/split-button/split-button.tsx index d2b4264dd54..f2af5a09a8d 100644 --- a/packages/calcite-components/src/components/split-button/split-button.tsx +++ b/packages/calcite-components/src/components/split-button/split-button.tsx @@ -25,7 +25,7 @@ import { } from "../../utils/loadable"; import { DropdownIconType } from "../button/interfaces"; import { Appearance, FlipContext, Kind, Scale, Width } from "../interfaces"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { CSS } from "./resources"; /** @@ -113,13 +113,13 @@ export class SplitButton implements InteractiveComponent, LoadableComponent { @Prop({ reflect: true }) placement: MenuPlacement = "bottom-end"; /** Specifies an icon to display at the end of the primary button. */ - @Prop({ reflect: true }) primaryIconEnd: IconName; + @Prop({ reflect: true }) primaryIconEnd: IconNameOrString; /** Displays the `primaryIconStart` and/or `primaryIconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) primaryIconFlipRtl: FlipContext; /** Specifies an icon to display at the start of the primary button. */ - @Prop({ reflect: true }) primaryIconStart: IconName; + @Prop({ reflect: true }) primaryIconStart: IconNameOrString; /** Accessible name for the primary button. */ @Prop({ reflect: true }) primaryLabel: string; diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx index 76144a24d42..c238afa9c26 100644 --- a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx +++ b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx @@ -46,7 +46,7 @@ import { T9nComponent, updateMessages, } from "../../utils/t9n"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { CSS } from "./resources"; import { StepperItemMessages } from "./assets/stepper-item/t9n"; @@ -362,7 +362,7 @@ export class StepperItem }; private renderIcon(): VNode { - let path: IconName = "circle"; + let path: IconNameOrString = "circle"; if (this.selected && (this.layout !== "horizontal-single" || (!this.error && !this.complete))) { path = "circleF"; diff --git a/packages/calcite-components/src/components/tab-title/readme.md b/packages/calcite-components/src/components/tab-title/readme.md index 3070b794d2c..555bf5ee109 100644 --- a/packages/calcite-components/src/components/tab-title/readme.md +++ b/packages/calcite-components/src/components/tab-title/readme.md @@ -6,17 +6,17 @@ For comprehensive guidance on using and implementing `calcite-tab-title`, refer ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `closable` | `closable` | When `true`, a close button is added to the component. | `boolean` | `false` | -| `closed` | `closed` | When `true`, does not display or position the component. | `boolean` | `false` | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `iconEnd` | `icon-end` | Specifies an icon to display at the end of the component. | `CamelCaseIcons \| "date-time" \| "i12-x" \| "i14-x" \| "i18-x" \| "i1-x" \| "i2-d-explore" \| "i2-x" \| "i360-view" \| "i3-d-glasses" \| "i4-x" \| "i8-x" \| "a-z" \| "a-z-down" \| "a-z-up" \| "a3-landscape" \| "a3-portrait" \| "a4-landscape" \| "a4-portrait" \| "absolute-direction" \| "absolute-elevation" \| "access-string-results" \| "activity-monitor" \| "actual-size" \| "add-and-update-features" \| "add-constant" \| "add-features" \| "add-in" \| "add-in-edit" \| "add-in-new" \| "add-layer" \| "add-layer-service" \| "add-raster-variable" \| "add-rasters" \| "add-reaction" \| "add-text" \| "add-to-model" \| "address-book" \| "alert-off-circle-f" \| "all-servers" \| "analysis-overlay" \| "annotate-tool" \| "ansi-a-landscape" \| "ansi-a-portrait" \| "ansi-b-landscape" \| "ansi-b-portrait" \| "antenna-height" \| "app-gear" \| "app-launcher" \| "app-run" \| "app-update" \| "apply-changes" \| "apply-selection-to-existing-view" \| "arcgis-data-store" \| "arcgis-online" \| "arrow-bold-down" \| "arrow-bold-left" \| "arrow-bold-right" \| "arrow-bold-up" \| "arrow-circle-down" \| "arrow-circle-down-f" \| "arrow-double-diagonal1" \| "arrow-double-diagonal2" \| "arrow-double-horizontal" \| "arrow-double-vertical" \| "arrow-down" \| "arrow-down-left" \| "arrow-down-right" \| "arrow-left" \| "arrow-right" \| "arrow-right-left" \| "arrow-up" \| "arrow-up-down" \| "arrow-up-left" \| "arrow-up-right" \| "asterisk-large" \| "asterisk-small" \| "attachment-plus" \| "auto-layout" \| "battery-charging" \| "bear-left" \| "bear-right" \| "beginning-f" \| "bell-f" \| "bell-off" \| "bookmark-f" \| "border-radius-fully-rounded" \| "border-radius-rounded" \| "border-radius-sharp" \| "box-chart" \| "box-chart-series" \| "brackets-curly" \| "break-recurrence" \| "bring-forward" \| "bring-to-front" \| "browser-map" \| "brush-mark" \| "brush-mark-plus" \| "brush-tip" \| "bullet-point" \| "bullet-point-large" \| "camera-flash-off" \| "camera-flash-on" \| "camera-plus" \| "camera-switch-front-back" \| "camera-unlock" \| "caret-double-horizontal" \| "caret-double-vertical" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-square-down" \| "caret-square-left" \| "caret-square-right" \| "caret-square-up" \| "caret-up" \| "catalog-dataset" \| "center-align" \| "center-horizontal" \| "center-vertical" \| "change-detection" \| "change-font-size" \| "chart-gear" \| "chart-magnifying-glass" \| "check-circle" \| "check-circle-f" \| "check-extent" \| "check-layer" \| "check-shield" \| "check-square" \| "check-square-f" \| "chevron-down" \| "chevron-down-left" \| "chevron-down-right" \| "chevron-end" \| "chevron-left" \| "chevron-right" \| "chevron-start" \| "chevron-up" \| "chevron-up-left" \| "chevron-up-right" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chord-diagram" \| "circle-f" \| "circle-area" \| "circle-disallowed" \| "circle-inset-large" \| "circle-inset-medium" \| "circle-inset-small" \| "circle-pause" \| "circle-pause-f" \| "circle-stop" \| "circle-stop-f" \| "classify-objects" \| "classify-pixels" \| "clear-selection" \| "clipboard-brackets" \| "clock-down" \| "clock-forward" \| "clock-up" \| "cloud-data" \| "cloud-server" \| "code-branch" \| "code-branch-edit" \| "collaboration-distributed" \| "collaboration-user" \| "color-coded-map" \| "color-correction" \| "column-settings" \| "community-link-chart-layout" \| "compass-needle" \| "compass-north-circle" \| "conditional-rules" \| "conditional-rules-path" \| "conference-room" \| "configure-editing" \| "configure-grid-unit" \| "configure-popup" \| "content-full" \| "content-inline" \| "content-large" \| "content-medium" \| "content-minimal" \| "content-none" \| "content-side-by-side" \| "content-small" \| "contingent-values" \| "coordinate-system" \| "copy-to-clipboard" \| "credit-card" \| "cursor-click" \| "cursor-lock" \| "cursor-marquee" \| "cursor-minus" \| "cursor-plus" \| "cursor-selection" \| "custom-print" \| "cut-and-fill-volume-calculation" \| "data-card" \| "data-check" \| "data-clock-chart" \| "data-cloud" \| "data-folder" \| "data-magnifying-glass" \| "data-raster" \| "debug-script" \| "decrease-link-chart-symbol-size" \| "deep-learning" \| "deep-learning-project" \| "derived-value" \| "developer-credentials" \| "diamond-inset-large" \| "diamond-inset-medium" \| "diamond-inset-small" \| "dimensions-unit" \| "dimensions-wall" \| "display-selection-lock" \| "display-selection-unlock" \| "dissolve-features" \| "distance-type" \| "distribute-height-evenly" \| "distribute-width-evenly" \| "dock-bottom" \| "dock-left" \| "dock-right" \| "double-float" \| "download-to" \| "drive-time" \| "drive-time-largest" \| "drive-time-smallest" \| "drive-time-threshold" \| "drive-time-x-bar" \| "driving-distance" \| "driving-time" \| "drone-fixed-wing" \| "drone-flying-wing" \| "drone-quadcopter" \| "drone-quadcopter-top" \| "edit-attributes" \| "edit-geometry" \| "elevator-down" \| "elevator-up" \| "ellipsis-circle" \| "email-address" \| "embedded-card" \| "embedded-content" \| "embedded-live-content" \| "employee-id" \| "enable-disable-feature-selection" \| "end-f" \| "escalator-down" \| "escalator-up" \| "exclamation-mark-circle" \| "exclamation-mark-circle-f" \| "exclamation-mark-triangle" \| "exclamation-mark-triangle-f" \| "exclamation-point" \| "exclamation-point-f" \| "exit-highway-left" \| "exit-highway-right" \| "expression-defined-color" \| "extend-trim" \| "extent-filter" \| "face-id" \| "feature-details" \| "feature-layer" \| "file-archive" \| "file-cad" \| "file-code" \| "file-csv" \| "file-data" \| "file-ecd" \| "file-excel" \| "file-gpx" \| "file-image" \| "file-kml" \| "file-magnifying-glass" \| "file-pdf" \| "file-pdf-plus" \| "file-pitemx" \| "file-ppt" \| "file-report" \| "file-report-generic" \| "file-shape" \| "file-sound" \| "file-sqlite" \| "file-text" \| "file-user" \| "file-video" \| "file-word" \| "file-xml" \| "file-zip" \| "files-csv-collection" \| "filter-expand" \| "find-path" \| "flip-vertical" \| "floor-plan" \| "folder-f" \| "folder-archive" \| "folder-magnifying-glass" \| "folder-move" \| "folder-new" \| "folder-open" \| "folder-open-f" \| "folder-plus" \| "folder-star" \| "folder-video" \| "follow-pause" \| "follow-play" \| "force-directed-link-chart-layout" \| "fork-left" \| "fork-middle" \| "fork-right" \| "form-dropdown" \| "form-elements" \| "form-field" \| "form-field-multiline" \| "form-field-off" \| "forward-f" \| "four-by-one-grid" \| "four-by-three-grid" \| "four-by-two-grid" \| "frame-export" \| "freehand-area" \| "full-screen" \| "full-screen-exit" \| "function-editor" \| "gauge-summary" \| "geoanalytics-server" \| "geoevent-server" \| "geographic-link-chart-layout" \| "geonet-question" \| "gis-server" \| "gps-off" \| "gps-on" \| "gps-on-f" \| "graph-axis" \| "graph-bar100-stacked" \| "graph-bar" \| "graph-bar-side-by-side" \| "graph-bar-stacked" \| "graph-box-mean-lines" \| "graph-box-side-by-side" \| "graph-guides" \| "graph-histogram" \| "graph-line-series" \| "graph-moving-average" \| "graph-pie-slice" \| "graph-scatter-plot" \| "graph-time-series" \| "grid-diamond" \| "grid-hexagon" \| "grid-triangle" \| "grid-unit" \| "ground-control-point" \| "group-form" \| "group-form-plus" \| "group-items" \| "group-layers" \| "group-layout-elements" \| "group-x" \| "h3-hexagon" \| "handle-vertical" \| "heading-layout" \| "heading-rtl" \| "heart-f" \| "heat-chart" \| "heavy-rain" \| "heavy-snow" \| "hexagon2-inset-large" \| "hexagon2-inset-medium" \| "hexagon2-inset-small" \| "hexagon-inset-large" \| "hexagon-inset-medium" \| "hexagon-inset-small" \| "hide-derived-value" \| "hide-empty" \| "hide-layers" \| "hide-parameters" \| "hierarchical-link-chart-layout" \| "highlighter-tip" \| "highway-change" \| "highway-change-right" \| "hillshade-effect" \| "horizontal-distribute" \| "hourglass-active" \| "hourglass-expired" \| "image-chips" \| "image-collection-explorer" \| "image-display-order" \| "image-layer" \| "image-magnifying-glass" \| "image-mensuration" \| "image-pin" \| "image-plus" \| "image-segmentation" \| "image-server" \| "image-space" \| "image-unit" \| "increase-link-chart-symbol-size" \| "information-f" \| "information-letter" \| "initiative-template" \| "joined-view-layer" \| "knowledge-graph" \| "knowledge-graph-dashboard" \| "knowledge-graph-data-model" \| "knowledge-graph-data-store" \| "knowledge-graph-export" \| "knowledge-graph-import" \| "knowledge-graph-new" \| "knowledge-graph-relationship" \| "knowledge-layer" \| "knowledge-server" \| "knowledge-studio" \| "label-off" \| "language-translate" \| "lasso-select" \| "layer-basemap" \| "layer-broken" \| "layer-filter" \| "layer-graphics" \| "layer-hide" \| "layer-kml" \| "layer-line" \| "layer-line-service" \| "layer-map" \| "layer-map-service" \| "layer-points" \| "layer-polygon" \| "layer-polygon-service" \| "layer-service" \| "layer-settings" \| "layer-zoom-to" \| "layers-editable" \| "layers-f" \| "layers-reference" \| "layout-compact" \| "layout-horizontal" \| "layout-spacious" \| "layout-vertical" \| "left-align" \| "left-edge" \| "left-left" \| "left-right" \| "legend-left" \| "legend-plus" \| "legend-right" \| "light-rain" \| "light-snow" \| "line-check" \| "line-dashed" \| "line-dotted" \| "line-of-sight" \| "line-solid" \| "line-straight" \| "link-chart" \| "link-chart-expand" \| "link-chart-from-template" \| "list-bullet" \| "list-button" \| "list-check" \| "list-check-all" \| "list-merge" \| "list-number" \| "list-number-rtl" \| "list-radio" \| "list-rectangle" \| "list-show-all" \| "livestream-video-layer" \| "location-sharing" \| "location-sharing-f" \| "location-sharing-off" \| "lock-f" \| "ltr-elements-align" \| "ltr-paragraph-align" \| "magnifying-glass" \| "magnifying-glass-minus" \| "magnifying-glass-plus" \| "map-contents" \| "map-from-template" \| "map-level-settings" \| "map-pin" \| "map-space" \| "mask-inside" \| "mask-outside" \| "maximum-graph" \| "maximum-territory-distance" \| "measure-area" \| "measure-building-height-shadow" \| "measure-building-height-top-base" \| "measure-building-height-top-shadow" \| "measure-line" \| "media-layer" \| "mega-phone" \| "members-brackets" \| "merge-details" \| "merge-on-highway" \| "merge-on-highway-right" \| "merge-units" \| "microphone-plus" \| "min-distance-between-centers" \| "minimum-graph" \| "minus-circle" \| "minus-circle-f" \| "minus-square" \| "minus-square-f" \| "miscellaneous-collection" \| "mission-server" \| "mobile-off" \| "mobile-vibrate" \| "model-edit" \| "modify-associations" \| "move-from-basemap" \| "move-to-basemap" \| "move-up" \| "move-up-all" \| "multidimensional-raster" \| "multiple-variables" \| "music-note" \| "new-link-chart" \| "new-model" \| "new-raster-function-template" \| "new-training" \| "no-attachment" \| "no-image" \| "no-map" \| "nodes-link" \| "nodes-merge" \| "nodes-unlink" \| "nodes-unmerge" \| "notebook-server" \| "notebook-snapshot" \| "notepad-add" \| "notepad-edit" \| "number-circle1" \| "number-circle1-f" \| "number-circle2" \| "number-circle2-f" \| "number-circle3" \| "number-circle3-f" \| "number-circle4" \| "number-circle4-f" \| "number-circle5" \| "number-circle5-f" \| "number-circle6" \| "number-circle6-f" \| "number-circle7" \| "number-circle7-f" \| "number-circle8" \| "number-circle8-f" \| "number-circle9" \| "number-circle9-f" \| "number-of-territories" \| "object-detection" \| "objectstore-data-store" \| "on-the-ground-elevation" \| "open-book" \| "oriented-imagery-layer" \| "oriented-imagery-widget" \| "overlap-features" \| "overwrite-features" \| "overwrite-project" \| "paint-bucket" \| "palette-check" \| "pan-drag" \| "parcel-layer" \| "partly-cloudy" \| "paste-with-attribute" \| "paste-without-attribute" \| "pause-f" \| "pen-mark" \| "pen-mark-plus" \| "pen-tip" \| "pencil-mark" \| "pencil-mark-plus" \| "pencil-square" \| "pencil-tip" \| "personal-homepage" \| "pie-chart" \| "pin-plus" \| "pin-tear" \| "pin-tear-f" \| "play-f" \| "plus-circle" \| "plus-square" \| "point-line" \| "polygon-area" \| "polygon-line-check" \| "polygon-select" \| "polygon-vertices" \| "pop-up1" \| "pop-up-blank" \| "pop-up-blank-f" \| "premium-content-user-credit" \| "presentation-x" \| "print-preview" \| "processing-templates" \| "profile-variables" \| "project-mission" \| "project-template" \| "puzzle-piece" \| "qr-code" \| "qt-code" \| "question-f" \| "question-mark" \| "radial-tree-link-chart-layout" \| "rain-snow" \| "rain-thunder" \| "ramp-left" \| "ramp-right" \| "raster-analysis" \| "raster-function" \| "raster-function-template" \| "raster-function-template-play" \| "read-only-non-editable" \| "rectangle-area" \| "rectangle-plus" \| "recycle-bin" \| "refresh-f" \| "relational-data-store" \| "relative-direction" \| "relative-to-ground-elevation" \| "relative-to-scene-elevation" \| "remove-from-list" \| "remove-linkchart" \| "reorder-cards" \| "reorder-grid" \| "reorder-stack" \| "replace-image" \| "reshape-add-geometry" \| "reshape-subtract-geometry" \| "reshape-tool" \| "resize-area" \| "reverse-f" \| "ribbon-rosette" \| "right-align" \| "right-angle" \| "right-edge" \| "right-left" \| "right-right" \| "rings-largest" \| "rings-smallest" \| "rings-threshold" \| "rings-x-bar" \| "road-sign" \| "rotate-device" \| "round-about" \| "round-about-right" \| "rounded-rectangle" \| "route-from" \| "route-to" \| "rss-f" \| "rtl-elements-align" \| "rtl-paragraph-align" \| "running-outline" \| "rural-driving-distance" \| "rural-driving-time" \| "satellite0-f" \| "satellite1-f" \| "satellite2-f" \| "satellite3-f" \| "save-as" \| "scan-area" \| "scan-barcode" \| "scan-corridor" \| "scan-crosshatch" \| "scan-perimeter" \| "scan-vertical" \| "screenshot-mode" \| "select-by-attributes" \| "select-category" \| "select-column" \| "select-range" \| "select-visible" \| "selected-items-filter" \| "selection-filter" \| "selection-manager" \| "selection-set" \| "selection-x" \| "send-backwards" \| "send-to-back" \| "serial-port" \| "server-lock" \| "share-ios" \| "sharp-left" \| "sharp-right" \| "shield-coin" \| "shopping-cart" \| "show-all-parameters" \| "show-column" \| "show-derived-value" \| "show-multiple-layers-at-a-time" \| "show-one-layer-at-a-time" \| "show-required-parameters" \| "sign-in" \| "sign-out" \| "simple-link-chart-layout" \| "sky-plot" \| "sliders-horizontal" \| "smart-camera" \| "smart-form" \| "smart-tree-link-chart-layout" \| "snap-to-grid" \| "snap-to-pixel" \| "snap-to-point" \| "snow-thunder" \| "sort-ascending" \| "sort-ascending-arrow" \| "sort-descending" \| "sort-descending-arrow" \| "sound-low" \| "sound-off" \| "sound-unavailable" \| "spatiotemporal-data-store" \| "speech-bubble" \| "speech-bubble-check" \| "speech-bubble-exclamation" \| "speech-bubble-like" \| "speech-bubble-plus" \| "speech-bubble-social" \| "speech-bubbles" \| "split-features" \| "split-geometry" \| "split-units" \| "square-f" \| "square-area" \| "square-inset-large" \| "square-inset-medium" \| "square-inset-small" \| "stairs-down" \| "stairs-up" \| "star-f" \| "star-circle" \| "stop-square" \| "stop-square-f" \| "stored-as-new-query" \| "stored-query" \| "sub-fields" \| "subheading-rtl" \| "suitability-analysis-output" \| "summarize-center-and-dispersion1" \| "summarize-center-and-dispersion2" \| "summarize-center-and-dispersion3" \| "system-management" \| "tabbed-view" \| "take-pedestrian-ramp" \| "territory-buffer-distance" \| "test-data" \| "text-bold" \| "text-button" \| "text-dashed-underline" \| "text-large" \| "text-medium" \| "text-paragraph-large" \| "text-small" \| "text-solid-underline" \| "three-by-one-grid" \| "three-by-three-grid" \| "three-by-two-grid" \| "thumbs-down" \| "thumbs-up" \| "tile-cache-data-store" \| "tile-layer" \| "tiled-imagery-layer" \| "time-filter" \| "time-zone" \| "toggle-off" \| "toggle-on" \| "tour-pin-tear" \| "transverse-hexagon" \| "trapezoid-area" \| "trucking-distance" \| "trucking-time" \| "u-turn" \| "u-turn-right" \| "ungroup-items" \| "ungroup-layers" \| "ungroup-layout-elements" \| "update-features" \| "update-project" \| "upload-to" \| "urban-model" \| "usb-security-key" \| "user-calendar" \| "user-down" \| "user-key" \| "user-minus" \| "user-plus" \| "user-to-device" \| "user-up" \| "user-x" \| "utility-network" \| "utility-network-trace" \| "validate-utility-network-topology" \| "vertex-check" \| "vertex-edit" \| "vertex-gps" \| "vertex-move" \| "vertex-plus" \| "vertex-x" \| "vertical-distribute" \| "video-layer" \| "video-plus" \| "video-server" \| "video-single-server" \| "video-web" \| "view-associations" \| "view-hide" \| "view-mixed" \| "view-visible" \| "walk-through-door" \| "walking-distance" \| "walking-time" \| "widgets-group" \| "widgets-source" \| "widgets-tabs" \| "workflow-diagram" \| "workflow-manager-server" \| "x-axis-guide" \| "x-bar" \| "x-circle" \| "x-circle-f" \| "x-octagon" \| "x-octagon-f" \| "y-axis-guide" \| "zoom-in-fixed" \| "zoom-out-fixed" \| "zoom-to-object"` | `undefined` | -| `iconFlipRtl` | `icon-flip-rtl` | Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). | `"both" \| "end" \| "start"` | `undefined` | -| `iconStart` | `icon-start` | Specifies an icon to display at the start of the component. | `CamelCaseIcons \| "date-time" \| "i12-x" \| "i14-x" \| "i18-x" \| "i1-x" \| "i2-d-explore" \| "i2-x" \| "i360-view" \| "i3-d-glasses" \| "i4-x" \| "i8-x" \| "a-z" \| "a-z-down" \| "a-z-up" \| "a3-landscape" \| "a3-portrait" \| "a4-landscape" \| "a4-portrait" \| "absolute-direction" \| "absolute-elevation" \| "access-string-results" \| "activity-monitor" \| "actual-size" \| "add-and-update-features" \| "add-constant" \| "add-features" \| "add-in" \| "add-in-edit" \| "add-in-new" \| "add-layer" \| "add-layer-service" \| "add-raster-variable" \| "add-rasters" \| "add-reaction" \| "add-text" \| "add-to-model" \| "address-book" \| "alert-off-circle-f" \| "all-servers" \| "analysis-overlay" \| "annotate-tool" \| "ansi-a-landscape" \| "ansi-a-portrait" \| "ansi-b-landscape" \| "ansi-b-portrait" \| "antenna-height" \| "app-gear" \| "app-launcher" \| "app-run" \| "app-update" \| "apply-changes" \| "apply-selection-to-existing-view" \| "arcgis-data-store" \| "arcgis-online" \| "arrow-bold-down" \| "arrow-bold-left" \| "arrow-bold-right" \| "arrow-bold-up" \| "arrow-circle-down" \| "arrow-circle-down-f" \| "arrow-double-diagonal1" \| "arrow-double-diagonal2" \| "arrow-double-horizontal" \| "arrow-double-vertical" \| "arrow-down" \| "arrow-down-left" \| "arrow-down-right" \| "arrow-left" \| "arrow-right" \| "arrow-right-left" \| "arrow-up" \| "arrow-up-down" \| "arrow-up-left" \| "arrow-up-right" \| "asterisk-large" \| "asterisk-small" \| "attachment-plus" \| "auto-layout" \| "battery-charging" \| "bear-left" \| "bear-right" \| "beginning-f" \| "bell-f" \| "bell-off" \| "bookmark-f" \| "border-radius-fully-rounded" \| "border-radius-rounded" \| "border-radius-sharp" \| "box-chart" \| "box-chart-series" \| "brackets-curly" \| "break-recurrence" \| "bring-forward" \| "bring-to-front" \| "browser-map" \| "brush-mark" \| "brush-mark-plus" \| "brush-tip" \| "bullet-point" \| "bullet-point-large" \| "camera-flash-off" \| "camera-flash-on" \| "camera-plus" \| "camera-switch-front-back" \| "camera-unlock" \| "caret-double-horizontal" \| "caret-double-vertical" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-square-down" \| "caret-square-left" \| "caret-square-right" \| "caret-square-up" \| "caret-up" \| "catalog-dataset" \| "center-align" \| "center-horizontal" \| "center-vertical" \| "change-detection" \| "change-font-size" \| "chart-gear" \| "chart-magnifying-glass" \| "check-circle" \| "check-circle-f" \| "check-extent" \| "check-layer" \| "check-shield" \| "check-square" \| "check-square-f" \| "chevron-down" \| "chevron-down-left" \| "chevron-down-right" \| "chevron-end" \| "chevron-left" \| "chevron-right" \| "chevron-start" \| "chevron-up" \| "chevron-up-left" \| "chevron-up-right" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chord-diagram" \| "circle-f" \| "circle-area" \| "circle-disallowed" \| "circle-inset-large" \| "circle-inset-medium" \| "circle-inset-small" \| "circle-pause" \| "circle-pause-f" \| "circle-stop" \| "circle-stop-f" \| "classify-objects" \| "classify-pixels" \| "clear-selection" \| "clipboard-brackets" \| "clock-down" \| "clock-forward" \| "clock-up" \| "cloud-data" \| "cloud-server" \| "code-branch" \| "code-branch-edit" \| "collaboration-distributed" \| "collaboration-user" \| "color-coded-map" \| "color-correction" \| "column-settings" \| "community-link-chart-layout" \| "compass-needle" \| "compass-north-circle" \| "conditional-rules" \| "conditional-rules-path" \| "conference-room" \| "configure-editing" \| "configure-grid-unit" \| "configure-popup" \| "content-full" \| "content-inline" \| "content-large" \| "content-medium" \| "content-minimal" \| "content-none" \| "content-side-by-side" \| "content-small" \| "contingent-values" \| "coordinate-system" \| "copy-to-clipboard" \| "credit-card" \| "cursor-click" \| "cursor-lock" \| "cursor-marquee" \| "cursor-minus" \| "cursor-plus" \| "cursor-selection" \| "custom-print" \| "cut-and-fill-volume-calculation" \| "data-card" \| "data-check" \| "data-clock-chart" \| "data-cloud" \| "data-folder" \| "data-magnifying-glass" \| "data-raster" \| "debug-script" \| "decrease-link-chart-symbol-size" \| "deep-learning" \| "deep-learning-project" \| "derived-value" \| "developer-credentials" \| "diamond-inset-large" \| "diamond-inset-medium" \| "diamond-inset-small" \| "dimensions-unit" \| "dimensions-wall" \| "display-selection-lock" \| "display-selection-unlock" \| "dissolve-features" \| "distance-type" \| "distribute-height-evenly" \| "distribute-width-evenly" \| "dock-bottom" \| "dock-left" \| "dock-right" \| "double-float" \| "download-to" \| "drive-time" \| "drive-time-largest" \| "drive-time-smallest" \| "drive-time-threshold" \| "drive-time-x-bar" \| "driving-distance" \| "driving-time" \| "drone-fixed-wing" \| "drone-flying-wing" \| "drone-quadcopter" \| "drone-quadcopter-top" \| "edit-attributes" \| "edit-geometry" \| "elevator-down" \| "elevator-up" \| "ellipsis-circle" \| "email-address" \| "embedded-card" \| "embedded-content" \| "embedded-live-content" \| "employee-id" \| "enable-disable-feature-selection" \| "end-f" \| "escalator-down" \| "escalator-up" \| "exclamation-mark-circle" \| "exclamation-mark-circle-f" \| "exclamation-mark-triangle" \| "exclamation-mark-triangle-f" \| "exclamation-point" \| "exclamation-point-f" \| "exit-highway-left" \| "exit-highway-right" \| "expression-defined-color" \| "extend-trim" \| "extent-filter" \| "face-id" \| "feature-details" \| "feature-layer" \| "file-archive" \| "file-cad" \| "file-code" \| "file-csv" \| "file-data" \| "file-ecd" \| "file-excel" \| "file-gpx" \| "file-image" \| "file-kml" \| "file-magnifying-glass" \| "file-pdf" \| "file-pdf-plus" \| "file-pitemx" \| "file-ppt" \| "file-report" \| "file-report-generic" \| "file-shape" \| "file-sound" \| "file-sqlite" \| "file-text" \| "file-user" \| "file-video" \| "file-word" \| "file-xml" \| "file-zip" \| "files-csv-collection" \| "filter-expand" \| "find-path" \| "flip-vertical" \| "floor-plan" \| "folder-f" \| "folder-archive" \| "folder-magnifying-glass" \| "folder-move" \| "folder-new" \| "folder-open" \| "folder-open-f" \| "folder-plus" \| "folder-star" \| "folder-video" \| "follow-pause" \| "follow-play" \| "force-directed-link-chart-layout" \| "fork-left" \| "fork-middle" \| "fork-right" \| "form-dropdown" \| "form-elements" \| "form-field" \| "form-field-multiline" \| "form-field-off" \| "forward-f" \| "four-by-one-grid" \| "four-by-three-grid" \| "four-by-two-grid" \| "frame-export" \| "freehand-area" \| "full-screen" \| "full-screen-exit" \| "function-editor" \| "gauge-summary" \| "geoanalytics-server" \| "geoevent-server" \| "geographic-link-chart-layout" \| "geonet-question" \| "gis-server" \| "gps-off" \| "gps-on" \| "gps-on-f" \| "graph-axis" \| "graph-bar100-stacked" \| "graph-bar" \| "graph-bar-side-by-side" \| "graph-bar-stacked" \| "graph-box-mean-lines" \| "graph-box-side-by-side" \| "graph-guides" \| "graph-histogram" \| "graph-line-series" \| "graph-moving-average" \| "graph-pie-slice" \| "graph-scatter-plot" \| "graph-time-series" \| "grid-diamond" \| "grid-hexagon" \| "grid-triangle" \| "grid-unit" \| "ground-control-point" \| "group-form" \| "group-form-plus" \| "group-items" \| "group-layers" \| "group-layout-elements" \| "group-x" \| "h3-hexagon" \| "handle-vertical" \| "heading-layout" \| "heading-rtl" \| "heart-f" \| "heat-chart" \| "heavy-rain" \| "heavy-snow" \| "hexagon2-inset-large" \| "hexagon2-inset-medium" \| "hexagon2-inset-small" \| "hexagon-inset-large" \| "hexagon-inset-medium" \| "hexagon-inset-small" \| "hide-derived-value" \| "hide-empty" \| "hide-layers" \| "hide-parameters" \| "hierarchical-link-chart-layout" \| "highlighter-tip" \| "highway-change" \| "highway-change-right" \| "hillshade-effect" \| "horizontal-distribute" \| "hourglass-active" \| "hourglass-expired" \| "image-chips" \| "image-collection-explorer" \| "image-display-order" \| "image-layer" \| "image-magnifying-glass" \| "image-mensuration" \| "image-pin" \| "image-plus" \| "image-segmentation" \| "image-server" \| "image-space" \| "image-unit" \| "increase-link-chart-symbol-size" \| "information-f" \| "information-letter" \| "initiative-template" \| "joined-view-layer" \| "knowledge-graph" \| "knowledge-graph-dashboard" \| "knowledge-graph-data-model" \| "knowledge-graph-data-store" \| "knowledge-graph-export" \| "knowledge-graph-import" \| "knowledge-graph-new" \| "knowledge-graph-relationship" \| "knowledge-layer" \| "knowledge-server" \| "knowledge-studio" \| "label-off" \| "language-translate" \| "lasso-select" \| "layer-basemap" \| "layer-broken" \| "layer-filter" \| "layer-graphics" \| "layer-hide" \| "layer-kml" \| "layer-line" \| "layer-line-service" \| "layer-map" \| "layer-map-service" \| "layer-points" \| "layer-polygon" \| "layer-polygon-service" \| "layer-service" \| "layer-settings" \| "layer-zoom-to" \| "layers-editable" \| "layers-f" \| "layers-reference" \| "layout-compact" \| "layout-horizontal" \| "layout-spacious" \| "layout-vertical" \| "left-align" \| "left-edge" \| "left-left" \| "left-right" \| "legend-left" \| "legend-plus" \| "legend-right" \| "light-rain" \| "light-snow" \| "line-check" \| "line-dashed" \| "line-dotted" \| "line-of-sight" \| "line-solid" \| "line-straight" \| "link-chart" \| "link-chart-expand" \| "link-chart-from-template" \| "list-bullet" \| "list-button" \| "list-check" \| "list-check-all" \| "list-merge" \| "list-number" \| "list-number-rtl" \| "list-radio" \| "list-rectangle" \| "list-show-all" \| "livestream-video-layer" \| "location-sharing" \| "location-sharing-f" \| "location-sharing-off" \| "lock-f" \| "ltr-elements-align" \| "ltr-paragraph-align" \| "magnifying-glass" \| "magnifying-glass-minus" \| "magnifying-glass-plus" \| "map-contents" \| "map-from-template" \| "map-level-settings" \| "map-pin" \| "map-space" \| "mask-inside" \| "mask-outside" \| "maximum-graph" \| "maximum-territory-distance" \| "measure-area" \| "measure-building-height-shadow" \| "measure-building-height-top-base" \| "measure-building-height-top-shadow" \| "measure-line" \| "media-layer" \| "mega-phone" \| "members-brackets" \| "merge-details" \| "merge-on-highway" \| "merge-on-highway-right" \| "merge-units" \| "microphone-plus" \| "min-distance-between-centers" \| "minimum-graph" \| "minus-circle" \| "minus-circle-f" \| "minus-square" \| "minus-square-f" \| "miscellaneous-collection" \| "mission-server" \| "mobile-off" \| "mobile-vibrate" \| "model-edit" \| "modify-associations" \| "move-from-basemap" \| "move-to-basemap" \| "move-up" \| "move-up-all" \| "multidimensional-raster" \| "multiple-variables" \| "music-note" \| "new-link-chart" \| "new-model" \| "new-raster-function-template" \| "new-training" \| "no-attachment" \| "no-image" \| "no-map" \| "nodes-link" \| "nodes-merge" \| "nodes-unlink" \| "nodes-unmerge" \| "notebook-server" \| "notebook-snapshot" \| "notepad-add" \| "notepad-edit" \| "number-circle1" \| "number-circle1-f" \| "number-circle2" \| "number-circle2-f" \| "number-circle3" \| "number-circle3-f" \| "number-circle4" \| "number-circle4-f" \| "number-circle5" \| "number-circle5-f" \| "number-circle6" \| "number-circle6-f" \| "number-circle7" \| "number-circle7-f" \| "number-circle8" \| "number-circle8-f" \| "number-circle9" \| "number-circle9-f" \| "number-of-territories" \| "object-detection" \| "objectstore-data-store" \| "on-the-ground-elevation" \| "open-book" \| "oriented-imagery-layer" \| "oriented-imagery-widget" \| "overlap-features" \| "overwrite-features" \| "overwrite-project" \| "paint-bucket" \| "palette-check" \| "pan-drag" \| "parcel-layer" \| "partly-cloudy" \| "paste-with-attribute" \| "paste-without-attribute" \| "pause-f" \| "pen-mark" \| "pen-mark-plus" \| "pen-tip" \| "pencil-mark" \| "pencil-mark-plus" \| "pencil-square" \| "pencil-tip" \| "personal-homepage" \| "pie-chart" \| "pin-plus" \| "pin-tear" \| "pin-tear-f" \| "play-f" \| "plus-circle" \| "plus-square" \| "point-line" \| "polygon-area" \| "polygon-line-check" \| "polygon-select" \| "polygon-vertices" \| "pop-up1" \| "pop-up-blank" \| "pop-up-blank-f" \| "premium-content-user-credit" \| "presentation-x" \| "print-preview" \| "processing-templates" \| "profile-variables" \| "project-mission" \| "project-template" \| "puzzle-piece" \| "qr-code" \| "qt-code" \| "question-f" \| "question-mark" \| "radial-tree-link-chart-layout" \| "rain-snow" \| "rain-thunder" \| "ramp-left" \| "ramp-right" \| "raster-analysis" \| "raster-function" \| "raster-function-template" \| "raster-function-template-play" \| "read-only-non-editable" \| "rectangle-area" \| "rectangle-plus" \| "recycle-bin" \| "refresh-f" \| "relational-data-store" \| "relative-direction" \| "relative-to-ground-elevation" \| "relative-to-scene-elevation" \| "remove-from-list" \| "remove-linkchart" \| "reorder-cards" \| "reorder-grid" \| "reorder-stack" \| "replace-image" \| "reshape-add-geometry" \| "reshape-subtract-geometry" \| "reshape-tool" \| "resize-area" \| "reverse-f" \| "ribbon-rosette" \| "right-align" \| "right-angle" \| "right-edge" \| "right-left" \| "right-right" \| "rings-largest" \| "rings-smallest" \| "rings-threshold" \| "rings-x-bar" \| "road-sign" \| "rotate-device" \| "round-about" \| "round-about-right" \| "rounded-rectangle" \| "route-from" \| "route-to" \| "rss-f" \| "rtl-elements-align" \| "rtl-paragraph-align" \| "running-outline" \| "rural-driving-distance" \| "rural-driving-time" \| "satellite0-f" \| "satellite1-f" \| "satellite2-f" \| "satellite3-f" \| "save-as" \| "scan-area" \| "scan-barcode" \| "scan-corridor" \| "scan-crosshatch" \| "scan-perimeter" \| "scan-vertical" \| "screenshot-mode" \| "select-by-attributes" \| "select-category" \| "select-column" \| "select-range" \| "select-visible" \| "selected-items-filter" \| "selection-filter" \| "selection-manager" \| "selection-set" \| "selection-x" \| "send-backwards" \| "send-to-back" \| "serial-port" \| "server-lock" \| "share-ios" \| "sharp-left" \| "sharp-right" \| "shield-coin" \| "shopping-cart" \| "show-all-parameters" \| "show-column" \| "show-derived-value" \| "show-multiple-layers-at-a-time" \| "show-one-layer-at-a-time" \| "show-required-parameters" \| "sign-in" \| "sign-out" \| "simple-link-chart-layout" \| "sky-plot" \| "sliders-horizontal" \| "smart-camera" \| "smart-form" \| "smart-tree-link-chart-layout" \| "snap-to-grid" \| "snap-to-pixel" \| "snap-to-point" \| "snow-thunder" \| "sort-ascending" \| "sort-ascending-arrow" \| "sort-descending" \| "sort-descending-arrow" \| "sound-low" \| "sound-off" \| "sound-unavailable" \| "spatiotemporal-data-store" \| "speech-bubble" \| "speech-bubble-check" \| "speech-bubble-exclamation" \| "speech-bubble-like" \| "speech-bubble-plus" \| "speech-bubble-social" \| "speech-bubbles" \| "split-features" \| "split-geometry" \| "split-units" \| "square-f" \| "square-area" \| "square-inset-large" \| "square-inset-medium" \| "square-inset-small" \| "stairs-down" \| "stairs-up" \| "star-f" \| "star-circle" \| "stop-square" \| "stop-square-f" \| "stored-as-new-query" \| "stored-query" \| "sub-fields" \| "subheading-rtl" \| "suitability-analysis-output" \| "summarize-center-and-dispersion1" \| "summarize-center-and-dispersion2" \| "summarize-center-and-dispersion3" \| "system-management" \| "tabbed-view" \| "take-pedestrian-ramp" \| "territory-buffer-distance" \| "test-data" \| "text-bold" \| "text-button" \| "text-dashed-underline" \| "text-large" \| "text-medium" \| "text-paragraph-large" \| "text-small" \| "text-solid-underline" \| "three-by-one-grid" \| "three-by-three-grid" \| "three-by-two-grid" \| "thumbs-down" \| "thumbs-up" \| "tile-cache-data-store" \| "tile-layer" \| "tiled-imagery-layer" \| "time-filter" \| "time-zone" \| "toggle-off" \| "toggle-on" \| "tour-pin-tear" \| "transverse-hexagon" \| "trapezoid-area" \| "trucking-distance" \| "trucking-time" \| "u-turn" \| "u-turn-right" \| "ungroup-items" \| "ungroup-layers" \| "ungroup-layout-elements" \| "update-features" \| "update-project" \| "upload-to" \| "urban-model" \| "usb-security-key" \| "user-calendar" \| "user-down" \| "user-key" \| "user-minus" \| "user-plus" \| "user-to-device" \| "user-up" \| "user-x" \| "utility-network" \| "utility-network-trace" \| "validate-utility-network-topology" \| "vertex-check" \| "vertex-edit" \| "vertex-gps" \| "vertex-move" \| "vertex-plus" \| "vertex-x" \| "vertical-distribute" \| "video-layer" \| "video-plus" \| "video-server" \| "video-single-server" \| "video-web" \| "view-associations" \| "view-hide" \| "view-mixed" \| "view-visible" \| "walk-through-door" \| "walking-distance" \| "walking-time" \| "widgets-group" \| "widgets-source" \| "widgets-tabs" \| "workflow-diagram" \| "workflow-manager-server" \| "x-axis-guide" \| "x-bar" \| "x-circle" \| "x-circle-f" \| "x-octagon" \| "x-octagon-f" \| "y-axis-guide" \| "zoom-in-fixed" \| "zoom-out-fixed" \| "zoom-to-object"` | `undefined` | -| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `TabTitleMessages` | `undefined` | -| `selected` | `selected` | When `true`, the component and its respective `calcite-tab` contents are selected. Only one tab can be selected within the `calcite-tabs` parent. | `boolean` | `false` | -| `tab` | `tab` | Specifies a unique name for the component. When specified, use the same value on the `calcite-tab`. | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | +| `closable` | `closable` | When `true`, a close button is added to the component. | `boolean` | `false` | +| `closed` | `closed` | When `true`, does not display or position the component. | `boolean` | `false` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `iconEnd` | `icon-end` | Specifies an icon to display at the end of the component. | `string` | `undefined` | +| `iconFlipRtl` | `icon-flip-rtl` | Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). | `"both" \| "end" \| "start"` | `undefined` | +| `iconStart` | `icon-start` | Specifies an icon to display at the start of the component. | `string` | `undefined` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `TabTitleMessages` | `undefined` | +| `selected` | `selected` | When `true`, the component and its respective `calcite-tab` contents are selected. Only one tab can be selected within the `calcite-tabs` parent. | `boolean` | `false` | +| `tab` | `tab` | Specifies a unique name for the component. When specified, use the same value on the `calcite-tab`. | `string` | `undefined` | ## Events diff --git a/packages/calcite-components/src/components/tab-title/tab-title.tsx b/packages/calcite-components/src/components/tab-title/tab-title.tsx index d0bd9d0456f..2d1f8fccbc7 100644 --- a/packages/calcite-components/src/components/tab-title/tab-title.tsx +++ b/packages/calcite-components/src/components/tab-title/tab-title.tsx @@ -34,7 +34,7 @@ import { updateMessages, } from "../../utils/t9n"; import { getIconScale } from "../../utils/component"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { isBrowser } from "../../utils/browser"; import { TabTitleMessages } from "./assets/tab-title/t9n"; import { CSS, ICONS } from "./resources"; @@ -83,13 +83,13 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo @Prop({ reflect: true }) disabled = false; /** Specifies an icon to display at the end of the component. */ - @Prop({ reflect: true }) iconEnd: IconName; + @Prop({ reflect: true }) iconEnd: IconNameOrString; /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl: FlipContext; /** Specifies an icon to display at the start of the component. */ - @Prop({ reflect: true }) iconStart: IconName; + @Prop({ reflect: true }) iconStart: IconNameOrString; /** * @internal diff --git a/packages/calcite-components/src/components/text-area/readme.md b/packages/calcite-components/src/components/text-area/readme.md index d91073be823..cba08d50f08 100644 --- a/packages/calcite-components/src/components/text-area/readme.md +++ b/packages/calcite-components/src/components/text-area/readme.md @@ -25,7 +25,7 @@ For comprehensive guidance on using and implementing `calcite-text-area`, refer | `rows` | `rows` | Specifies the component's number of rows. | `number` | `undefined` | | `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | | `status` | `status` | Specifies the status of the input field, which determines message and icons. | `"idle" \| "invalid" \| "valid"` | `"idle"` | -| `validationIcon` | `validation-icon` | Specifies the validation icon to display under the component. | `boolean \| IconName` | `undefined` | +| `validationIcon` | `validation-icon` | Specifies the validation icon to display under the component. | `boolean \| string` | `undefined` | | `validationMessage` | `validation-message` | Specifies the validation message to display under the component. | `string` | `undefined` | | `validity` | -- | The current validation state of the component. | `{ valid: boolean; badInput: boolean; customError: boolean; patternMismatch: boolean; rangeOverflow: boolean; rangeUnderflow: boolean; stepMismatch: boolean; tooLong: boolean; tooShort: boolean; typeMismatch: boolean; valueMissing: boolean; }` | `{ valid: false, badInput: false, customError: false, patternMismatch: false, rangeOverflow: false, rangeUnderflow: false, stepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false, valueMissing: false, }` | | `value` | `value` | The component's value. | `string` | `""` | diff --git a/packages/calcite-components/src/components/text-area/text-area.tsx b/packages/calcite-components/src/components/text-area/text-area.tsx index 9f463096592..ee5adba8c58 100644 --- a/packages/calcite-components/src/components/text-area/text-area.tsx +++ b/packages/calcite-components/src/components/text-area/text-area.tsx @@ -55,7 +55,7 @@ import { guid } from "../../utils/guid"; import { Status } from "../interfaces"; import { Validation } from "../functional/Validation"; import { syncHiddenFormInput, TextualInputComponent } from "../input/common/input"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { CharacterLengthObj } from "./interfaces"; import { TextAreaMessages } from "./assets/text-area/t9n"; import { CSS, IDS, SLOTS, RESIZE_TIMEOUT } from "./resources"; @@ -157,7 +157,7 @@ export class TextArea @Prop() validationMessage: string; /** Specifies the validation icon to display under the component. */ - @Prop({ reflect: true }) validationIcon: IconName | boolean; + @Prop({ reflect: true }) validationIcon: IconNameOrString | boolean; /** * The current validation state of the component. diff --git a/packages/calcite-components/src/components/tile-select/readme.md b/packages/calcite-components/src/components/tile-select/readme.md index e2067c5b9da..475853943a6 100644 --- a/packages/calcite-components/src/components/tile-select/readme.md +++ b/packages/calcite-components/src/components/tile-select/readme.md @@ -8,20 +8,20 @@ For comprehensive guidance on using and implementing `calcite-tile-select`, refe ## Properties -| Property | Attribute | Description | Type | Default | -| ---------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `checked` | `checked` | When `true`, the component is checked. | `boolean` | `false` | -| `description` | `description` | A description for the component, which displays below the heading. | `string` | `undefined` | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `heading` | `heading` | The component header text, which displays between the icon and description. | `string` | `undefined` | -| `icon` | `icon` | Specifies an icon to display. | `CamelCaseIcons \| "date-time" \| "i12-x" \| "i14-x" \| "i18-x" \| "i1-x" \| "i2-d-explore" \| "i2-x" \| "i360-view" \| "i3-d-glasses" \| "i4-x" \| "i8-x" \| "a-z" \| "a-z-down" \| "a-z-up" \| "a3-landscape" \| "a3-portrait" \| "a4-landscape" \| "a4-portrait" \| "absolute-direction" \| "absolute-elevation" \| "access-string-results" \| "activity-monitor" \| "actual-size" \| "add-and-update-features" \| "add-constant" \| "add-features" \| "add-in" \| "add-in-edit" \| "add-in-new" \| "add-layer" \| "add-layer-service" \| "add-raster-variable" \| "add-rasters" \| "add-reaction" \| "add-text" \| "add-to-model" \| "address-book" \| "alert-off-circle-f" \| "all-servers" \| "analysis-overlay" \| "annotate-tool" \| "ansi-a-landscape" \| "ansi-a-portrait" \| "ansi-b-landscape" \| "ansi-b-portrait" \| "antenna-height" \| "app-gear" \| "app-launcher" \| "app-run" \| "app-update" \| "apply-changes" \| "apply-selection-to-existing-view" \| "arcgis-data-store" \| "arcgis-online" \| "arrow-bold-down" \| "arrow-bold-left" \| "arrow-bold-right" \| "arrow-bold-up" \| "arrow-circle-down" \| "arrow-circle-down-f" \| "arrow-double-diagonal1" \| "arrow-double-diagonal2" \| "arrow-double-horizontal" \| "arrow-double-vertical" \| "arrow-down" \| "arrow-down-left" \| "arrow-down-right" \| "arrow-left" \| "arrow-right" \| "arrow-right-left" \| "arrow-up" \| "arrow-up-down" \| "arrow-up-left" \| "arrow-up-right" \| "asterisk-large" \| "asterisk-small" \| "attachment-plus" \| "auto-layout" \| "battery-charging" \| "bear-left" \| "bear-right" \| "beginning-f" \| "bell-f" \| "bell-off" \| "bookmark-f" \| "border-radius-fully-rounded" \| "border-radius-rounded" \| "border-radius-sharp" \| "box-chart" \| "box-chart-series" \| "brackets-curly" \| "break-recurrence" \| "bring-forward" \| "bring-to-front" \| "browser-map" \| "brush-mark" \| "brush-mark-plus" \| "brush-tip" \| "bullet-point" \| "bullet-point-large" \| "camera-flash-off" \| "camera-flash-on" \| "camera-plus" \| "camera-switch-front-back" \| "camera-unlock" \| "caret-double-horizontal" \| "caret-double-vertical" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-square-down" \| "caret-square-left" \| "caret-square-right" \| "caret-square-up" \| "caret-up" \| "catalog-dataset" \| "center-align" \| "center-horizontal" \| "center-vertical" \| "change-detection" \| "change-font-size" \| "chart-gear" \| "chart-magnifying-glass" \| "check-circle" \| "check-circle-f" \| "check-extent" \| "check-layer" \| "check-shield" \| "check-square" \| "check-square-f" \| "chevron-down" \| "chevron-down-left" \| "chevron-down-right" \| "chevron-end" \| "chevron-left" \| "chevron-right" \| "chevron-start" \| "chevron-up" \| "chevron-up-left" \| "chevron-up-right" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chord-diagram" \| "circle-f" \| "circle-area" \| "circle-disallowed" \| "circle-inset-large" \| "circle-inset-medium" \| "circle-inset-small" \| "circle-pause" \| "circle-pause-f" \| "circle-stop" \| "circle-stop-f" \| "classify-objects" \| "classify-pixels" \| "clear-selection" \| "clipboard-brackets" \| "clock-down" \| "clock-forward" \| "clock-up" \| "cloud-data" \| "cloud-server" \| "code-branch" \| "code-branch-edit" \| "collaboration-distributed" \| "collaboration-user" \| "color-coded-map" \| "color-correction" \| "column-settings" \| "community-link-chart-layout" \| "compass-needle" \| "compass-north-circle" \| "conditional-rules" \| "conditional-rules-path" \| "conference-room" \| "configure-editing" \| "configure-grid-unit" \| "configure-popup" \| "content-full" \| "content-inline" \| "content-large" \| "content-medium" \| "content-minimal" \| "content-none" \| "content-side-by-side" \| "content-small" \| "contingent-values" \| "coordinate-system" \| "copy-to-clipboard" \| "credit-card" \| "cursor-click" \| "cursor-lock" \| "cursor-marquee" \| "cursor-minus" \| "cursor-plus" \| "cursor-selection" \| "custom-print" \| "cut-and-fill-volume-calculation" \| "data-card" \| "data-check" \| "data-clock-chart" \| "data-cloud" \| "data-folder" \| "data-magnifying-glass" \| "data-raster" \| "debug-script" \| "decrease-link-chart-symbol-size" \| "deep-learning" \| "deep-learning-project" \| "derived-value" \| "developer-credentials" \| "diamond-inset-large" \| "diamond-inset-medium" \| "diamond-inset-small" \| "dimensions-unit" \| "dimensions-wall" \| "display-selection-lock" \| "display-selection-unlock" \| "dissolve-features" \| "distance-type" \| "distribute-height-evenly" \| "distribute-width-evenly" \| "dock-bottom" \| "dock-left" \| "dock-right" \| "double-float" \| "download-to" \| "drive-time" \| "drive-time-largest" \| "drive-time-smallest" \| "drive-time-threshold" \| "drive-time-x-bar" \| "driving-distance" \| "driving-time" \| "drone-fixed-wing" \| "drone-flying-wing" \| "drone-quadcopter" \| "drone-quadcopter-top" \| "edit-attributes" \| "edit-geometry" \| "elevator-down" \| "elevator-up" \| "ellipsis-circle" \| "email-address" \| "embedded-card" \| "embedded-content" \| "embedded-live-content" \| "employee-id" \| "enable-disable-feature-selection" \| "end-f" \| "escalator-down" \| "escalator-up" \| "exclamation-mark-circle" \| "exclamation-mark-circle-f" \| "exclamation-mark-triangle" \| "exclamation-mark-triangle-f" \| "exclamation-point" \| "exclamation-point-f" \| "exit-highway-left" \| "exit-highway-right" \| "expression-defined-color" \| "extend-trim" \| "extent-filter" \| "face-id" \| "feature-details" \| "feature-layer" \| "file-archive" \| "file-cad" \| "file-code" \| "file-csv" \| "file-data" \| "file-ecd" \| "file-excel" \| "file-gpx" \| "file-image" \| "file-kml" \| "file-magnifying-glass" \| "file-pdf" \| "file-pdf-plus" \| "file-pitemx" \| "file-ppt" \| "file-report" \| "file-report-generic" \| "file-shape" \| "file-sound" \| "file-sqlite" \| "file-text" \| "file-user" \| "file-video" \| "file-word" \| "file-xml" \| "file-zip" \| "files-csv-collection" \| "filter-expand" \| "find-path" \| "flip-vertical" \| "floor-plan" \| "folder-f" \| "folder-archive" \| "folder-magnifying-glass" \| "folder-move" \| "folder-new" \| "folder-open" \| "folder-open-f" \| "folder-plus" \| "folder-star" \| "folder-video" \| "follow-pause" \| "follow-play" \| "force-directed-link-chart-layout" \| "fork-left" \| "fork-middle" \| "fork-right" \| "form-dropdown" \| "form-elements" \| "form-field" \| "form-field-multiline" \| "form-field-off" \| "forward-f" \| "four-by-one-grid" \| "four-by-three-grid" \| "four-by-two-grid" \| "frame-export" \| "freehand-area" \| "full-screen" \| "full-screen-exit" \| "function-editor" \| "gauge-summary" \| "geoanalytics-server" \| "geoevent-server" \| "geographic-link-chart-layout" \| "geonet-question" \| "gis-server" \| "gps-off" \| "gps-on" \| "gps-on-f" \| "graph-axis" \| "graph-bar100-stacked" \| "graph-bar" \| "graph-bar-side-by-side" \| "graph-bar-stacked" \| "graph-box-mean-lines" \| "graph-box-side-by-side" \| "graph-guides" \| "graph-histogram" \| "graph-line-series" \| "graph-moving-average" \| "graph-pie-slice" \| "graph-scatter-plot" \| "graph-time-series" \| "grid-diamond" \| "grid-hexagon" \| "grid-triangle" \| "grid-unit" \| "ground-control-point" \| "group-form" \| "group-form-plus" \| "group-items" \| "group-layers" \| "group-layout-elements" \| "group-x" \| "h3-hexagon" \| "handle-vertical" \| "heading-layout" \| "heading-rtl" \| "heart-f" \| "heat-chart" \| "heavy-rain" \| "heavy-snow" \| "hexagon2-inset-large" \| "hexagon2-inset-medium" \| "hexagon2-inset-small" \| "hexagon-inset-large" \| "hexagon-inset-medium" \| "hexagon-inset-small" \| "hide-derived-value" \| "hide-empty" \| "hide-layers" \| "hide-parameters" \| "hierarchical-link-chart-layout" \| "highlighter-tip" \| "highway-change" \| "highway-change-right" \| "hillshade-effect" \| "horizontal-distribute" \| "hourglass-active" \| "hourglass-expired" \| "image-chips" \| "image-collection-explorer" \| "image-display-order" \| "image-layer" \| "image-magnifying-glass" \| "image-mensuration" \| "image-pin" \| "image-plus" \| "image-segmentation" \| "image-server" \| "image-space" \| "image-unit" \| "increase-link-chart-symbol-size" \| "information-f" \| "information-letter" \| "initiative-template" \| "joined-view-layer" \| "knowledge-graph" \| "knowledge-graph-dashboard" \| "knowledge-graph-data-model" \| "knowledge-graph-data-store" \| "knowledge-graph-export" \| "knowledge-graph-import" \| "knowledge-graph-new" \| "knowledge-graph-relationship" \| "knowledge-layer" \| "knowledge-server" \| "knowledge-studio" \| "label-off" \| "language-translate" \| "lasso-select" \| "layer-basemap" \| "layer-broken" \| "layer-filter" \| "layer-graphics" \| "layer-hide" \| "layer-kml" \| "layer-line" \| "layer-line-service" \| "layer-map" \| "layer-map-service" \| "layer-points" \| "layer-polygon" \| "layer-polygon-service" \| "layer-service" \| "layer-settings" \| "layer-zoom-to" \| "layers-editable" \| "layers-f" \| "layers-reference" \| "layout-compact" \| "layout-horizontal" \| "layout-spacious" \| "layout-vertical" \| "left-align" \| "left-edge" \| "left-left" \| "left-right" \| "legend-left" \| "legend-plus" \| "legend-right" \| "light-rain" \| "light-snow" \| "line-check" \| "line-dashed" \| "line-dotted" \| "line-of-sight" \| "line-solid" \| "line-straight" \| "link-chart" \| "link-chart-expand" \| "link-chart-from-template" \| "list-bullet" \| "list-button" \| "list-check" \| "list-check-all" \| "list-merge" \| "list-number" \| "list-number-rtl" \| "list-radio" \| "list-rectangle" \| "list-show-all" \| "livestream-video-layer" \| "location-sharing" \| "location-sharing-f" \| "location-sharing-off" \| "lock-f" \| "ltr-elements-align" \| "ltr-paragraph-align" \| "magnifying-glass" \| "magnifying-glass-minus" \| "magnifying-glass-plus" \| "map-contents" \| "map-from-template" \| "map-level-settings" \| "map-pin" \| "map-space" \| "mask-inside" \| "mask-outside" \| "maximum-graph" \| "maximum-territory-distance" \| "measure-area" \| "measure-building-height-shadow" \| "measure-building-height-top-base" \| "measure-building-height-top-shadow" \| "measure-line" \| "media-layer" \| "mega-phone" \| "members-brackets" \| "merge-details" \| "merge-on-highway" \| "merge-on-highway-right" \| "merge-units" \| "microphone-plus" \| "min-distance-between-centers" \| "minimum-graph" \| "minus-circle" \| "minus-circle-f" \| "minus-square" \| "minus-square-f" \| "miscellaneous-collection" \| "mission-server" \| "mobile-off" \| "mobile-vibrate" \| "model-edit" \| "modify-associations" \| "move-from-basemap" \| "move-to-basemap" \| "move-up" \| "move-up-all" \| "multidimensional-raster" \| "multiple-variables" \| "music-note" \| "new-link-chart" \| "new-model" \| "new-raster-function-template" \| "new-training" \| "no-attachment" \| "no-image" \| "no-map" \| "nodes-link" \| "nodes-merge" \| "nodes-unlink" \| "nodes-unmerge" \| "notebook-server" \| "notebook-snapshot" \| "notepad-add" \| "notepad-edit" \| "number-circle1" \| "number-circle1-f" \| "number-circle2" \| "number-circle2-f" \| "number-circle3" \| "number-circle3-f" \| "number-circle4" \| "number-circle4-f" \| "number-circle5" \| "number-circle5-f" \| "number-circle6" \| "number-circle6-f" \| "number-circle7" \| "number-circle7-f" \| "number-circle8" \| "number-circle8-f" \| "number-circle9" \| "number-circle9-f" \| "number-of-territories" \| "object-detection" \| "objectstore-data-store" \| "on-the-ground-elevation" \| "open-book" \| "oriented-imagery-layer" \| "oriented-imagery-widget" \| "overlap-features" \| "overwrite-features" \| "overwrite-project" \| "paint-bucket" \| "palette-check" \| "pan-drag" \| "parcel-layer" \| "partly-cloudy" \| "paste-with-attribute" \| "paste-without-attribute" \| "pause-f" \| "pen-mark" \| "pen-mark-plus" \| "pen-tip" \| "pencil-mark" \| "pencil-mark-plus" \| "pencil-square" \| "pencil-tip" \| "personal-homepage" \| "pie-chart" \| "pin-plus" \| "pin-tear" \| "pin-tear-f" \| "play-f" \| "plus-circle" \| "plus-square" \| "point-line" \| "polygon-area" \| "polygon-line-check" \| "polygon-select" \| "polygon-vertices" \| "pop-up1" \| "pop-up-blank" \| "pop-up-blank-f" \| "premium-content-user-credit" \| "presentation-x" \| "print-preview" \| "processing-templates" \| "profile-variables" \| "project-mission" \| "project-template" \| "puzzle-piece" \| "qr-code" \| "qt-code" \| "question-f" \| "question-mark" \| "radial-tree-link-chart-layout" \| "rain-snow" \| "rain-thunder" \| "ramp-left" \| "ramp-right" \| "raster-analysis" \| "raster-function" \| "raster-function-template" \| "raster-function-template-play" \| "read-only-non-editable" \| "rectangle-area" \| "rectangle-plus" \| "recycle-bin" \| "refresh-f" \| "relational-data-store" \| "relative-direction" \| "relative-to-ground-elevation" \| "relative-to-scene-elevation" \| "remove-from-list" \| "remove-linkchart" \| "reorder-cards" \| "reorder-grid" \| "reorder-stack" \| "replace-image" \| "reshape-add-geometry" \| "reshape-subtract-geometry" \| "reshape-tool" \| "resize-area" \| "reverse-f" \| "ribbon-rosette" \| "right-align" \| "right-angle" \| "right-edge" \| "right-left" \| "right-right" \| "rings-largest" \| "rings-smallest" \| "rings-threshold" \| "rings-x-bar" \| "road-sign" \| "rotate-device" \| "round-about" \| "round-about-right" \| "rounded-rectangle" \| "route-from" \| "route-to" \| "rss-f" \| "rtl-elements-align" \| "rtl-paragraph-align" \| "running-outline" \| "rural-driving-distance" \| "rural-driving-time" \| "satellite0-f" \| "satellite1-f" \| "satellite2-f" \| "satellite3-f" \| "save-as" \| "scan-area" \| "scan-barcode" \| "scan-corridor" \| "scan-crosshatch" \| "scan-perimeter" \| "scan-vertical" \| "screenshot-mode" \| "select-by-attributes" \| "select-category" \| "select-column" \| "select-range" \| "select-visible" \| "selected-items-filter" \| "selection-filter" \| "selection-manager" \| "selection-set" \| "selection-x" \| "send-backwards" \| "send-to-back" \| "serial-port" \| "server-lock" \| "share-ios" \| "sharp-left" \| "sharp-right" \| "shield-coin" \| "shopping-cart" \| "show-all-parameters" \| "show-column" \| "show-derived-value" \| "show-multiple-layers-at-a-time" \| "show-one-layer-at-a-time" \| "show-required-parameters" \| "sign-in" \| "sign-out" \| "simple-link-chart-layout" \| "sky-plot" \| "sliders-horizontal" \| "smart-camera" \| "smart-form" \| "smart-tree-link-chart-layout" \| "snap-to-grid" \| "snap-to-pixel" \| "snap-to-point" \| "snow-thunder" \| "sort-ascending" \| "sort-ascending-arrow" \| "sort-descending" \| "sort-descending-arrow" \| "sound-low" \| "sound-off" \| "sound-unavailable" \| "spatiotemporal-data-store" \| "speech-bubble" \| "speech-bubble-check" \| "speech-bubble-exclamation" \| "speech-bubble-like" \| "speech-bubble-plus" \| "speech-bubble-social" \| "speech-bubbles" \| "split-features" \| "split-geometry" \| "split-units" \| "square-f" \| "square-area" \| "square-inset-large" \| "square-inset-medium" \| "square-inset-small" \| "stairs-down" \| "stairs-up" \| "star-f" \| "star-circle" \| "stop-square" \| "stop-square-f" \| "stored-as-new-query" \| "stored-query" \| "sub-fields" \| "subheading-rtl" \| "suitability-analysis-output" \| "summarize-center-and-dispersion1" \| "summarize-center-and-dispersion2" \| "summarize-center-and-dispersion3" \| "system-management" \| "tabbed-view" \| "take-pedestrian-ramp" \| "territory-buffer-distance" \| "test-data" \| "text-bold" \| "text-button" \| "text-dashed-underline" \| "text-large" \| "text-medium" \| "text-paragraph-large" \| "text-small" \| "text-solid-underline" \| "three-by-one-grid" \| "three-by-three-grid" \| "three-by-two-grid" \| "thumbs-down" \| "thumbs-up" \| "tile-cache-data-store" \| "tile-layer" \| "tiled-imagery-layer" \| "time-filter" \| "time-zone" \| "toggle-off" \| "toggle-on" \| "tour-pin-tear" \| "transverse-hexagon" \| "trapezoid-area" \| "trucking-distance" \| "trucking-time" \| "u-turn" \| "u-turn-right" \| "ungroup-items" \| "ungroup-layers" \| "ungroup-layout-elements" \| "update-features" \| "update-project" \| "upload-to" \| "urban-model" \| "usb-security-key" \| "user-calendar" \| "user-down" \| "user-key" \| "user-minus" \| "user-plus" \| "user-to-device" \| "user-up" \| "user-x" \| "utility-network" \| "utility-network-trace" \| "validate-utility-network-topology" \| "vertex-check" \| "vertex-edit" \| "vertex-gps" \| "vertex-move" \| "vertex-plus" \| "vertex-x" \| "vertical-distribute" \| "video-layer" \| "video-plus" \| "video-server" \| "video-single-server" \| "video-web" \| "view-associations" \| "view-hide" \| "view-mixed" \| "view-visible" \| "walk-through-door" \| "walking-distance" \| "walking-time" \| "widgets-group" \| "widgets-source" \| "widgets-tabs" \| "workflow-diagram" \| "workflow-manager-server" \| "x-axis-guide" \| "x-bar" \| "x-circle" \| "x-circle-f" \| "x-octagon" \| "x-octagon-f" \| "y-axis-guide" \| "zoom-in-fixed" \| "zoom-out-fixed" \| "zoom-to-object"` | `undefined` | -| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | -| `inputAlignment` | `input-alignment` | When `inputEnabled` is `true`, specifies the placement of the interactive input on the component. | `"end" \| "start"` | `"start"` | -| `inputEnabled` | `input-enabled` | When `true`, displays an interactive input based on the `type` property. | `boolean` | `false` | -| `name` | `name` | Specifies the name of the component on form submission. | `any` | `undefined` | -| `type` | `type` | Specifies the selection mode of the component, where: `"radio"` is for single selection, and `"checkbox"` is for multiple selections. | `"checkbox" \| "radio"` | `"radio"` | -| `value` | `value` | The component's value. | `any` | `undefined` | -| `width` | `width` | Specifies the width of the component. | `"auto" \| "full"` | `"auto"` | +| Property | Attribute | Description | Type | Default | +| ---------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ----------- | +| `checked` | `checked` | When `true`, the component is checked. | `boolean` | `false` | +| `description` | `description` | A description for the component, which displays below the heading. | `string` | `undefined` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `heading` | `heading` | The component header text, which displays between the icon and description. | `string` | `undefined` | +| `icon` | `icon` | Specifies an icon to display. | `string` | `undefined` | +| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | +| `inputAlignment` | `input-alignment` | When `inputEnabled` is `true`, specifies the placement of the interactive input on the component. | `"end" \| "start"` | `"start"` | +| `inputEnabled` | `input-enabled` | When `true`, displays an interactive input based on the `type` property. | `boolean` | `false` | +| `name` | `name` | Specifies the name of the component on form submission. | `any` | `undefined` | +| `type` | `type` | Specifies the selection mode of the component, where: `"radio"` is for single selection, and `"checkbox"` is for multiple selections. | `"checkbox" \| "radio"` | `"radio"` | +| `value` | `value` | The component's value. | `any` | `undefined` | +| `width` | `width` | Specifies the width of the component. | `"auto" \| "full"` | `"auto"` | ## Events diff --git a/packages/calcite-components/src/components/tile-select/tile-select.tsx b/packages/calcite-components/src/components/tile-select/tile-select.tsx index 3caa80856a5..6b68d5b5a0b 100644 --- a/packages/calcite-components/src/components/tile-select/tile-select.tsx +++ b/packages/calcite-components/src/components/tile-select/tile-select.tsx @@ -26,7 +26,7 @@ import { setUpLoadableComponent, } from "../../utils/loadable"; import { Alignment, Width } from "../interfaces"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { logger } from "../../utils/logger"; import { TileSelectType } from "./interfaces"; import { CSS } from "./resources"; @@ -71,7 +71,7 @@ export class TileSelect implements InteractiveComponent, LoadableComponent { @Prop({ reflect: true }) heading: string; /** Specifies an icon to display. */ - @Prop({ reflect: true }) icon: IconName; + @Prop({ reflect: true }) icon: IconNameOrString; /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl = false; diff --git a/packages/calcite-components/src/components/tile/readme.md b/packages/calcite-components/src/components/tile/readme.md index caf9377870a..1b17744fd5b 100644 --- a/packages/calcite-components/src/components/tile/readme.md +++ b/packages/calcite-components/src/components/tile/readme.md @@ -6,20 +6,20 @@ For comprehensive guidance on using and implementing `calcite-tile`, refer to th ## Properties -| Property | Attribute | Description | Type | Default | -| ------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `active` | `active` | **[DEPRECATED]**

When `true`, the component is active. | `boolean` | `false` | -| `alignment` | `alignment` | Specifies the alignment of the Tile's content. | `"center" \| "start"` | `"start"` | -| `description` | `description` | A description for the component, which displays below the heading. | `string` | `undefined` | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `embed` | `embed` | **[DEPRECATED]** No longer necessary.

The component's embed mode. When `true`, renders without a border and padding for use by other components. | `boolean` | `false` | -| `heading` | `heading` | The component header text, which displays between the icon and description. | `string` | `undefined` | -| `href` | `href` | When embed is `"false"`, the URL for the component. | `string` | `undefined` | -| `icon` | `icon` | Specifies an icon to display. | `CamelCaseIcons \| "date-time" \| "i12-x" \| "i14-x" \| "i18-x" \| "i1-x" \| "i2-d-explore" \| "i2-x" \| "i360-view" \| "i3-d-glasses" \| "i4-x" \| "i8-x" \| "a-z" \| "a-z-down" \| "a-z-up" \| "a3-landscape" \| "a3-portrait" \| "a4-landscape" \| "a4-portrait" \| "absolute-direction" \| "absolute-elevation" \| "access-string-results" \| "activity-monitor" \| "actual-size" \| "add-and-update-features" \| "add-constant" \| "add-features" \| "add-in" \| "add-in-edit" \| "add-in-new" \| "add-layer" \| "add-layer-service" \| "add-raster-variable" \| "add-rasters" \| "add-reaction" \| "add-text" \| "add-to-model" \| "address-book" \| "alert-off-circle-f" \| "all-servers" \| "analysis-overlay" \| "annotate-tool" \| "ansi-a-landscape" \| "ansi-a-portrait" \| "ansi-b-landscape" \| "ansi-b-portrait" \| "antenna-height" \| "app-gear" \| "app-launcher" \| "app-run" \| "app-update" \| "apply-changes" \| "apply-selection-to-existing-view" \| "arcgis-data-store" \| "arcgis-online" \| "arrow-bold-down" \| "arrow-bold-left" \| "arrow-bold-right" \| "arrow-bold-up" \| "arrow-circle-down" \| "arrow-circle-down-f" \| "arrow-double-diagonal1" \| "arrow-double-diagonal2" \| "arrow-double-horizontal" \| "arrow-double-vertical" \| "arrow-down" \| "arrow-down-left" \| "arrow-down-right" \| "arrow-left" \| "arrow-right" \| "arrow-right-left" \| "arrow-up" \| "arrow-up-down" \| "arrow-up-left" \| "arrow-up-right" \| "asterisk-large" \| "asterisk-small" \| "attachment-plus" \| "auto-layout" \| "battery-charging" \| "bear-left" \| "bear-right" \| "beginning-f" \| "bell-f" \| "bell-off" \| "bookmark-f" \| "border-radius-fully-rounded" \| "border-radius-rounded" \| "border-radius-sharp" \| "box-chart" \| "box-chart-series" \| "brackets-curly" \| "break-recurrence" \| "bring-forward" \| "bring-to-front" \| "browser-map" \| "brush-mark" \| "brush-mark-plus" \| "brush-tip" \| "bullet-point" \| "bullet-point-large" \| "camera-flash-off" \| "camera-flash-on" \| "camera-plus" \| "camera-switch-front-back" \| "camera-unlock" \| "caret-double-horizontal" \| "caret-double-vertical" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-square-down" \| "caret-square-left" \| "caret-square-right" \| "caret-square-up" \| "caret-up" \| "catalog-dataset" \| "center-align" \| "center-horizontal" \| "center-vertical" \| "change-detection" \| "change-font-size" \| "chart-gear" \| "chart-magnifying-glass" \| "check-circle" \| "check-circle-f" \| "check-extent" \| "check-layer" \| "check-shield" \| "check-square" \| "check-square-f" \| "chevron-down" \| "chevron-down-left" \| "chevron-down-right" \| "chevron-end" \| "chevron-left" \| "chevron-right" \| "chevron-start" \| "chevron-up" \| "chevron-up-left" \| "chevron-up-right" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chord-diagram" \| "circle-f" \| "circle-area" \| "circle-disallowed" \| "circle-inset-large" \| "circle-inset-medium" \| "circle-inset-small" \| "circle-pause" \| "circle-pause-f" \| "circle-stop" \| "circle-stop-f" \| "classify-objects" \| "classify-pixels" \| "clear-selection" \| "clipboard-brackets" \| "clock-down" \| "clock-forward" \| "clock-up" \| "cloud-data" \| "cloud-server" \| "code-branch" \| "code-branch-edit" \| "collaboration-distributed" \| "collaboration-user" \| "color-coded-map" \| "color-correction" \| "column-settings" \| "community-link-chart-layout" \| "compass-needle" \| "compass-north-circle" \| "conditional-rules" \| "conditional-rules-path" \| "conference-room" \| "configure-editing" \| "configure-grid-unit" \| "configure-popup" \| "content-full" \| "content-inline" \| "content-large" \| "content-medium" \| "content-minimal" \| "content-none" \| "content-side-by-side" \| "content-small" \| "contingent-values" \| "coordinate-system" \| "copy-to-clipboard" \| "credit-card" \| "cursor-click" \| "cursor-lock" \| "cursor-marquee" \| "cursor-minus" \| "cursor-plus" \| "cursor-selection" \| "custom-print" \| "cut-and-fill-volume-calculation" \| "data-card" \| "data-check" \| "data-clock-chart" \| "data-cloud" \| "data-folder" \| "data-magnifying-glass" \| "data-raster" \| "debug-script" \| "decrease-link-chart-symbol-size" \| "deep-learning" \| "deep-learning-project" \| "derived-value" \| "developer-credentials" \| "diamond-inset-large" \| "diamond-inset-medium" \| "diamond-inset-small" \| "dimensions-unit" \| "dimensions-wall" \| "display-selection-lock" \| "display-selection-unlock" \| "dissolve-features" \| "distance-type" \| "distribute-height-evenly" \| "distribute-width-evenly" \| "dock-bottom" \| "dock-left" \| "dock-right" \| "double-float" \| "download-to" \| "drive-time" \| "drive-time-largest" \| "drive-time-smallest" \| "drive-time-threshold" \| "drive-time-x-bar" \| "driving-distance" \| "driving-time" \| "drone-fixed-wing" \| "drone-flying-wing" \| "drone-quadcopter" \| "drone-quadcopter-top" \| "edit-attributes" \| "edit-geometry" \| "elevator-down" \| "elevator-up" \| "ellipsis-circle" \| "email-address" \| "embedded-card" \| "embedded-content" \| "embedded-live-content" \| "employee-id" \| "enable-disable-feature-selection" \| "end-f" \| "escalator-down" \| "escalator-up" \| "exclamation-mark-circle" \| "exclamation-mark-circle-f" \| "exclamation-mark-triangle" \| "exclamation-mark-triangle-f" \| "exclamation-point" \| "exclamation-point-f" \| "exit-highway-left" \| "exit-highway-right" \| "expression-defined-color" \| "extend-trim" \| "extent-filter" \| "face-id" \| "feature-details" \| "feature-layer" \| "file-archive" \| "file-cad" \| "file-code" \| "file-csv" \| "file-data" \| "file-ecd" \| "file-excel" \| "file-gpx" \| "file-image" \| "file-kml" \| "file-magnifying-glass" \| "file-pdf" \| "file-pdf-plus" \| "file-pitemx" \| "file-ppt" \| "file-report" \| "file-report-generic" \| "file-shape" \| "file-sound" \| "file-sqlite" \| "file-text" \| "file-user" \| "file-video" \| "file-word" \| "file-xml" \| "file-zip" \| "files-csv-collection" \| "filter-expand" \| "find-path" \| "flip-vertical" \| "floor-plan" \| "folder-f" \| "folder-archive" \| "folder-magnifying-glass" \| "folder-move" \| "folder-new" \| "folder-open" \| "folder-open-f" \| "folder-plus" \| "folder-star" \| "folder-video" \| "follow-pause" \| "follow-play" \| "force-directed-link-chart-layout" \| "fork-left" \| "fork-middle" \| "fork-right" \| "form-dropdown" \| "form-elements" \| "form-field" \| "form-field-multiline" \| "form-field-off" \| "forward-f" \| "four-by-one-grid" \| "four-by-three-grid" \| "four-by-two-grid" \| "frame-export" \| "freehand-area" \| "full-screen" \| "full-screen-exit" \| "function-editor" \| "gauge-summary" \| "geoanalytics-server" \| "geoevent-server" \| "geographic-link-chart-layout" \| "geonet-question" \| "gis-server" \| "gps-off" \| "gps-on" \| "gps-on-f" \| "graph-axis" \| "graph-bar100-stacked" \| "graph-bar" \| "graph-bar-side-by-side" \| "graph-bar-stacked" \| "graph-box-mean-lines" \| "graph-box-side-by-side" \| "graph-guides" \| "graph-histogram" \| "graph-line-series" \| "graph-moving-average" \| "graph-pie-slice" \| "graph-scatter-plot" \| "graph-time-series" \| "grid-diamond" \| "grid-hexagon" \| "grid-triangle" \| "grid-unit" \| "ground-control-point" \| "group-form" \| "group-form-plus" \| "group-items" \| "group-layers" \| "group-layout-elements" \| "group-x" \| "h3-hexagon" \| "handle-vertical" \| "heading-layout" \| "heading-rtl" \| "heart-f" \| "heat-chart" \| "heavy-rain" \| "heavy-snow" \| "hexagon2-inset-large" \| "hexagon2-inset-medium" \| "hexagon2-inset-small" \| "hexagon-inset-large" \| "hexagon-inset-medium" \| "hexagon-inset-small" \| "hide-derived-value" \| "hide-empty" \| "hide-layers" \| "hide-parameters" \| "hierarchical-link-chart-layout" \| "highlighter-tip" \| "highway-change" \| "highway-change-right" \| "hillshade-effect" \| "horizontal-distribute" \| "hourglass-active" \| "hourglass-expired" \| "image-chips" \| "image-collection-explorer" \| "image-display-order" \| "image-layer" \| "image-magnifying-glass" \| "image-mensuration" \| "image-pin" \| "image-plus" \| "image-segmentation" \| "image-server" \| "image-space" \| "image-unit" \| "increase-link-chart-symbol-size" \| "information-f" \| "information-letter" \| "initiative-template" \| "joined-view-layer" \| "knowledge-graph" \| "knowledge-graph-dashboard" \| "knowledge-graph-data-model" \| "knowledge-graph-data-store" \| "knowledge-graph-export" \| "knowledge-graph-import" \| "knowledge-graph-new" \| "knowledge-graph-relationship" \| "knowledge-layer" \| "knowledge-server" \| "knowledge-studio" \| "label-off" \| "language-translate" \| "lasso-select" \| "layer-basemap" \| "layer-broken" \| "layer-filter" \| "layer-graphics" \| "layer-hide" \| "layer-kml" \| "layer-line" \| "layer-line-service" \| "layer-map" \| "layer-map-service" \| "layer-points" \| "layer-polygon" \| "layer-polygon-service" \| "layer-service" \| "layer-settings" \| "layer-zoom-to" \| "layers-editable" \| "layers-f" \| "layers-reference" \| "layout-compact" \| "layout-horizontal" \| "layout-spacious" \| "layout-vertical" \| "left-align" \| "left-edge" \| "left-left" \| "left-right" \| "legend-left" \| "legend-plus" \| "legend-right" \| "light-rain" \| "light-snow" \| "line-check" \| "line-dashed" \| "line-dotted" \| "line-of-sight" \| "line-solid" \| "line-straight" \| "link-chart" \| "link-chart-expand" \| "link-chart-from-template" \| "list-bullet" \| "list-button" \| "list-check" \| "list-check-all" \| "list-merge" \| "list-number" \| "list-number-rtl" \| "list-radio" \| "list-rectangle" \| "list-show-all" \| "livestream-video-layer" \| "location-sharing" \| "location-sharing-f" \| "location-sharing-off" \| "lock-f" \| "ltr-elements-align" \| "ltr-paragraph-align" \| "magnifying-glass" \| "magnifying-glass-minus" \| "magnifying-glass-plus" \| "map-contents" \| "map-from-template" \| "map-level-settings" \| "map-pin" \| "map-space" \| "mask-inside" \| "mask-outside" \| "maximum-graph" \| "maximum-territory-distance" \| "measure-area" \| "measure-building-height-shadow" \| "measure-building-height-top-base" \| "measure-building-height-top-shadow" \| "measure-line" \| "media-layer" \| "mega-phone" \| "members-brackets" \| "merge-details" \| "merge-on-highway" \| "merge-on-highway-right" \| "merge-units" \| "microphone-plus" \| "min-distance-between-centers" \| "minimum-graph" \| "minus-circle" \| "minus-circle-f" \| "minus-square" \| "minus-square-f" \| "miscellaneous-collection" \| "mission-server" \| "mobile-off" \| "mobile-vibrate" \| "model-edit" \| "modify-associations" \| "move-from-basemap" \| "move-to-basemap" \| "move-up" \| "move-up-all" \| "multidimensional-raster" \| "multiple-variables" \| "music-note" \| "new-link-chart" \| "new-model" \| "new-raster-function-template" \| "new-training" \| "no-attachment" \| "no-image" \| "no-map" \| "nodes-link" \| "nodes-merge" \| "nodes-unlink" \| "nodes-unmerge" \| "notebook-server" \| "notebook-snapshot" \| "notepad-add" \| "notepad-edit" \| "number-circle1" \| "number-circle1-f" \| "number-circle2" \| "number-circle2-f" \| "number-circle3" \| "number-circle3-f" \| "number-circle4" \| "number-circle4-f" \| "number-circle5" \| "number-circle5-f" \| "number-circle6" \| "number-circle6-f" \| "number-circle7" \| "number-circle7-f" \| "number-circle8" \| "number-circle8-f" \| "number-circle9" \| "number-circle9-f" \| "number-of-territories" \| "object-detection" \| "objectstore-data-store" \| "on-the-ground-elevation" \| "open-book" \| "oriented-imagery-layer" \| "oriented-imagery-widget" \| "overlap-features" \| "overwrite-features" \| "overwrite-project" \| "paint-bucket" \| "palette-check" \| "pan-drag" \| "parcel-layer" \| "partly-cloudy" \| "paste-with-attribute" \| "paste-without-attribute" \| "pause-f" \| "pen-mark" \| "pen-mark-plus" \| "pen-tip" \| "pencil-mark" \| "pencil-mark-plus" \| "pencil-square" \| "pencil-tip" \| "personal-homepage" \| "pie-chart" \| "pin-plus" \| "pin-tear" \| "pin-tear-f" \| "play-f" \| "plus-circle" \| "plus-square" \| "point-line" \| "polygon-area" \| "polygon-line-check" \| "polygon-select" \| "polygon-vertices" \| "pop-up1" \| "pop-up-blank" \| "pop-up-blank-f" \| "premium-content-user-credit" \| "presentation-x" \| "print-preview" \| "processing-templates" \| "profile-variables" \| "project-mission" \| "project-template" \| "puzzle-piece" \| "qr-code" \| "qt-code" \| "question-f" \| "question-mark" \| "radial-tree-link-chart-layout" \| "rain-snow" \| "rain-thunder" \| "ramp-left" \| "ramp-right" \| "raster-analysis" \| "raster-function" \| "raster-function-template" \| "raster-function-template-play" \| "read-only-non-editable" \| "rectangle-area" \| "rectangle-plus" \| "recycle-bin" \| "refresh-f" \| "relational-data-store" \| "relative-direction" \| "relative-to-ground-elevation" \| "relative-to-scene-elevation" \| "remove-from-list" \| "remove-linkchart" \| "reorder-cards" \| "reorder-grid" \| "reorder-stack" \| "replace-image" \| "reshape-add-geometry" \| "reshape-subtract-geometry" \| "reshape-tool" \| "resize-area" \| "reverse-f" \| "ribbon-rosette" \| "right-align" \| "right-angle" \| "right-edge" \| "right-left" \| "right-right" \| "rings-largest" \| "rings-smallest" \| "rings-threshold" \| "rings-x-bar" \| "road-sign" \| "rotate-device" \| "round-about" \| "round-about-right" \| "rounded-rectangle" \| "route-from" \| "route-to" \| "rss-f" \| "rtl-elements-align" \| "rtl-paragraph-align" \| "running-outline" \| "rural-driving-distance" \| "rural-driving-time" \| "satellite0-f" \| "satellite1-f" \| "satellite2-f" \| "satellite3-f" \| "save-as" \| "scan-area" \| "scan-barcode" \| "scan-corridor" \| "scan-crosshatch" \| "scan-perimeter" \| "scan-vertical" \| "screenshot-mode" \| "select-by-attributes" \| "select-category" \| "select-column" \| "select-range" \| "select-visible" \| "selected-items-filter" \| "selection-filter" \| "selection-manager" \| "selection-set" \| "selection-x" \| "send-backwards" \| "send-to-back" \| "serial-port" \| "server-lock" \| "share-ios" \| "sharp-left" \| "sharp-right" \| "shield-coin" \| "shopping-cart" \| "show-all-parameters" \| "show-column" \| "show-derived-value" \| "show-multiple-layers-at-a-time" \| "show-one-layer-at-a-time" \| "show-required-parameters" \| "sign-in" \| "sign-out" \| "simple-link-chart-layout" \| "sky-plot" \| "sliders-horizontal" \| "smart-camera" \| "smart-form" \| "smart-tree-link-chart-layout" \| "snap-to-grid" \| "snap-to-pixel" \| "snap-to-point" \| "snow-thunder" \| "sort-ascending" \| "sort-ascending-arrow" \| "sort-descending" \| "sort-descending-arrow" \| "sound-low" \| "sound-off" \| "sound-unavailable" \| "spatiotemporal-data-store" \| "speech-bubble" \| "speech-bubble-check" \| "speech-bubble-exclamation" \| "speech-bubble-like" \| "speech-bubble-plus" \| "speech-bubble-social" \| "speech-bubbles" \| "split-features" \| "split-geometry" \| "split-units" \| "square-f" \| "square-area" \| "square-inset-large" \| "square-inset-medium" \| "square-inset-small" \| "stairs-down" \| "stairs-up" \| "star-f" \| "star-circle" \| "stop-square" \| "stop-square-f" \| "stored-as-new-query" \| "stored-query" \| "sub-fields" \| "subheading-rtl" \| "suitability-analysis-output" \| "summarize-center-and-dispersion1" \| "summarize-center-and-dispersion2" \| "summarize-center-and-dispersion3" \| "system-management" \| "tabbed-view" \| "take-pedestrian-ramp" \| "territory-buffer-distance" \| "test-data" \| "text-bold" \| "text-button" \| "text-dashed-underline" \| "text-large" \| "text-medium" \| "text-paragraph-large" \| "text-small" \| "text-solid-underline" \| "three-by-one-grid" \| "three-by-three-grid" \| "three-by-two-grid" \| "thumbs-down" \| "thumbs-up" \| "tile-cache-data-store" \| "tile-layer" \| "tiled-imagery-layer" \| "time-filter" \| "time-zone" \| "toggle-off" \| "toggle-on" \| "tour-pin-tear" \| "transverse-hexagon" \| "trapezoid-area" \| "trucking-distance" \| "trucking-time" \| "u-turn" \| "u-turn-right" \| "ungroup-items" \| "ungroup-layers" \| "ungroup-layout-elements" \| "update-features" \| "update-project" \| "upload-to" \| "urban-model" \| "usb-security-key" \| "user-calendar" \| "user-down" \| "user-key" \| "user-minus" \| "user-plus" \| "user-to-device" \| "user-up" \| "user-x" \| "utility-network" \| "utility-network-trace" \| "validate-utility-network-topology" \| "vertex-check" \| "vertex-edit" \| "vertex-gps" \| "vertex-move" \| "vertex-plus" \| "vertex-x" \| "vertical-distribute" \| "video-layer" \| "video-plus" \| "video-server" \| "video-single-server" \| "video-web" \| "view-associations" \| "view-hide" \| "view-mixed" \| "view-visible" \| "walk-through-door" \| "walking-distance" \| "walking-time" \| "widgets-group" \| "widgets-source" \| "widgets-tabs" \| "workflow-diagram" \| "workflow-manager-server" \| "x-axis-guide" \| "x-bar" \| "x-circle" \| "x-circle-f" \| "x-octagon" \| "x-octagon-f" \| "y-axis-guide" \| "zoom-in-fixed" \| "zoom-out-fixed" \| "zoom-to-object"` | `undefined` | -| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | -| `label` | `label` | Accessible name for the component. | `string` | `undefined` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `selected` | `selected` | When `true` and the parent's `selectionMode` is `"single"`, `"single-persist"', or`"multiple"`, the component is selected. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- | +| `active` | `active` | **[DEPRECATED]**

When `true`, the component is active. | `boolean` | `false` | +| `alignment` | `alignment` | Specifies the alignment of the Tile's content. | `"center" \| "start"` | `"start"` | +| `description` | `description` | A description for the component, which displays below the heading. | `string` | `undefined` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `embed` | `embed` | **[DEPRECATED]** No longer necessary.

The component's embed mode. When `true`, renders without a border and padding for use by other components. | `boolean` | `false` | +| `heading` | `heading` | The component header text, which displays between the icon and description. | `string` | `undefined` | +| `href` | `href` | When embed is `"false"`, the URL for the component. | `string` | `undefined` | +| `icon` | `icon` | Specifies an icon to display. | `string` | `undefined` | +| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | +| `label` | `label` | Accessible name for the component. | `string` | `undefined` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `selected` | `selected` | When `true` and the parent's `selectionMode` is `"single"`, `"single-persist"', or`"multiple"`, the component is selected. | `boolean` | `false` | ## Events diff --git a/packages/calcite-components/src/components/tile/tile.tsx b/packages/calcite-components/src/components/tile/tile.tsx index 231b3d9c83c..c2dd435e744 100644 --- a/packages/calcite-components/src/components/tile/tile.tsx +++ b/packages/calcite-components/src/components/tile/tile.tsx @@ -25,7 +25,7 @@ import { setUpLoadableComponent, } from "../../utils/loadable"; import { SelectableComponent } from "../../utils/selectableComponent"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { CSS, ICONS, SLOTS } from "./resources"; /** @@ -84,7 +84,7 @@ export class Tile implements InteractiveComponent, SelectableComponent { @Prop({ reflect: true }) href: string; /** Specifies an icon to display. */ - @Prop({ reflect: true }) icon: IconName; + @Prop({ reflect: true }) icon: IconNameOrString; /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ diff --git a/packages/calcite-components/src/components/tooltip/readme.md b/packages/calcite-components/src/components/tooltip/readme.md index 470aefab5d9..65abe3a5ed4 100644 --- a/packages/calcite-components/src/components/tooltip/readme.md +++ b/packages/calcite-components/src/components/tooltip/readme.md @@ -14,7 +14,7 @@ For comprehensive guidance on using and implementing `calcite-tooltip`, refer to | `offsetSkidding` | `offset-skidding` | Offset the position of the component along the `referenceElement`. | `number` | `0` | | `open` | `open` | When `true`, the component is open. | `boolean` | `false` | | `overlayPositioning` | `overlay-positioning` | Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The `"fixed"` value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. | `"absolute" \| "fixed"` | `"absolute"` | -| `placement` | `placement` | Determines where the component will be positioned relative to the `referenceElement`. | `"auto" \| "top" \| "bottom" \| "left" \| "right" \| "top-start" \| "top-end" \| "bottom-start" \| "bottom-end" \| "left-start" \| "left-end" \| "right-start" \| "right-end" \| "leading" \| "trailing" \| "auto-start" \| "auto-end" \| "leading-start" \| "leading-end" \| "trailing-end" \| "trailing-start"` | `"auto"` | +| `placement` | `placement` | Determines where the component will be positioned relative to the `referenceElement`. | `"auto" \| "top" \| "bottom" \| "right" \| "left" \| "top-start" \| "top-end" \| "bottom-start" \| "bottom-end" \| "right-start" \| "right-end" \| "left-start" \| "left-end" \| "leading" \| "trailing" \| "auto-start" \| "auto-end" \| "leading-start" \| "leading-end" \| "trailing-end" \| "trailing-start"` | `"auto"` | | `referenceElement` | `reference-element` | The `referenceElement` to position the component according to its `"placement"` value. Setting to the `HTMLElement` is preferred so the component does not need to query the DOM for the `referenceElement`. However, a string ID of the reference element can be used. | `Element \| VirtualElement \| string` | `undefined` | ## Events diff --git a/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts b/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts index a26d919bd90..cf8d0c4b271 100644 --- a/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts +++ b/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts @@ -11,11 +11,58 @@ interface PointerMoveOptions { value: boolean; } +const eventOptions = { bubbles: true, cancelable: true }; + describe("calcite-tooltip", () => { type CanceledEscapeKeyPressTestWindow = GlobalTestProps<{ escapeKeyCanceled: boolean; }>; + async function dispatchPointerEvent(page: E2EPage, selector: string): Promise { + await page.$eval( + selector, + (el: HTMLElement, eventOptions) => { + el.dispatchEvent(new PointerEvent("pointermove", eventOptions)); + }, + eventOptions, + ); + await page.waitForChanges(); + } + + async function dispatchClickEvent(page: E2EPage, selector: string): Promise { + await page.$eval( + selector, + (el: HTMLElement, eventOptions) => { + el.dispatchEvent(new MouseEvent("click", eventOptions)); + }, + eventOptions, + ); + await page.waitForChanges(); + } + + async function dispatchDocumentKeydownEvent(page: E2EPage, key: string): Promise { + await page.evaluate( + (eventOptions, key) => { + document.dispatchEvent(new KeyboardEvent("keydown", { key, ...eventOptions })); + }, + eventOptions, + key, + ); + await page.waitForChanges(); + } + + async function dispatchKeydownEvent(page: E2EPage, selector: string, key: string): Promise { + await page.$eval( + selector, + (el: HTMLElement, eventOptions, key) => { + el.dispatchEvent(new KeyboardEvent("keydown", { key, ...eventOptions })); + }, + eventOptions, + key, + ); + await page.waitForChanges(); + } + /** * Helps assert the canceled Esc key press when closing tooltips * Must be called before the tooltip is closed via keyboard. @@ -24,7 +71,8 @@ describe("calcite-tooltip", () => { */ async function setUpEscapeKeyCancelListener(page: E2EPage): Promise { await page.evaluate(() => { - document.addEventListener( + (window as CanceledEscapeKeyPressTestWindow).escapeKeyCanceled = false; + window.addEventListener( "keydown", (event) => { (window as CanceledEscapeKeyPressTestWindow).escapeKeyCanceled = event.defaultPrevented; @@ -386,42 +434,15 @@ describe("calcite-tooltip", () => { expect(await tooltip.getProperty("open")).toBe(false); - await page.evaluate(() => { - const ref = document.getElementById("ref"); - const event1 = new MouseEvent("click", { - cancelable: true, - bubbles: true, - }); - ref.dispatchEvent(event1); - }); - - await page.waitForChanges(); + await dispatchClickEvent(page, "#ref"); expect(await tooltip.getProperty("open")).toBe(true); - await page.evaluate(() => { - const ref = document.getElementById("ref"); - const event1 = new MouseEvent("click", { - cancelable: true, - bubbles: true, - }); - ref.dispatchEvent(event1); - }); - - await page.waitForChanges(); + await dispatchClickEvent(page, "#ref"); expect(await tooltip.getProperty("open")).toBe(true); - await page.evaluate(() => { - const ref = document.getElementById("test"); - const event1 = new MouseEvent("click", { - cancelable: true, - bubbles: true, - }); - ref.dispatchEvent(event1); - }); - - await page.waitForChanges(); + await dispatchClickEvent(page, "#test"); expect(await tooltip.getProperty("open")).toBe(false); }); @@ -449,9 +470,7 @@ describe("calcite-tooltip", () => { expect(await tooltip.getProperty("open")).toBe(true); await setUpEscapeKeyCancelListener(page); - await referenceElement.press("Escape"); - - await page.waitForChanges(); + await dispatchKeydownEvent(page, "#ref", "Escape"); expect(await tooltip.getProperty("open")).toBe(false); await assertEscapeKeyCanceled(page, true); @@ -482,9 +501,7 @@ describe("calcite-tooltip", () => { expect(await tooltip.getProperty("open")).toBe(true); await setUpEscapeKeyCancelListener(page); - await page.keyboard.press("Escape"); - - await page.waitForChanges(); + await dispatchDocumentKeydownEvent(page, "Escape"); expect(await tooltip.getProperty("open")).toBe(false); await assertEscapeKeyCanceled(page, false); @@ -517,9 +534,7 @@ describe("calcite-tooltip", () => { expect(await tooltip.getProperty("open")).toBe(true); await setUpEscapeKeyCancelListener(page); - await page.keyboard.press("Escape"); - - await page.waitForChanges(); + await dispatchKeydownEvent(page, "#ref", "Escape"); expect(await tooltip.getProperty("open")).toBe(false); await assertEscapeKeyCanceled(page, true); @@ -545,14 +560,9 @@ describe("calcite-tooltip", () => { expect(await hoverTip.getProperty("open")).toBe(false); - await page.$eval("#hoverRef", (el: HTMLElement) => { - el.dispatchEvent(new PointerEvent("pointermove")); - }); - + await dispatchPointerEvent(page, "#hoverRef"); await page.waitForTimeout(TOOLTIP_OPEN_DELAY_MS); - await page.waitForChanges(); - expect(await focusTip.getProperty("open")).toBe(false); expect(await hoverTip.getProperty("open")).toBe(true); @@ -601,14 +611,9 @@ describe("calcite-tooltip", () => { expect(await hoverTip.getProperty("open")).toBe(false); - await page.$eval("#hoverRef", (el: HTMLElement) => { - el.dispatchEvent(new PointerEvent("pointermove")); - }); - + await dispatchPointerEvent(page, "#hoverRef"); await page.waitForTimeout(TOOLTIP_OPEN_DELAY_MS); - await page.waitForChanges(); - expect(await focusTip.getProperty("open")).toBe(false); expect(await hoverTip.getProperty("open")).toBe(true); @@ -940,10 +945,7 @@ describe("calcite-tooltip", () => { for (let i = 0; i < pointerMoves.length; i++) { const { delay, selector } = pointerMoves[i]; await page.waitForTimeout(delay); - await page.$eval(selector, (el: HTMLElement) => { - el.dispatchEvent(new PointerEvent("pointermove")); - }); - + await dispatchPointerEvent(page, selector); expect(await tooltip.getProperty(pointerMoves[i].property)).toBe(pointerMoves[i].value); } }); @@ -999,10 +1001,7 @@ describe("calcite-tooltip", () => { for (let i = 0; i < pointerMoves.length; i++) { const { delay, selector } = pointerMoves[i]; await page.waitForTimeout(delay); - await page.$eval(selector, (el: HTMLElement) => { - el.dispatchEvent(new PointerEvent("pointermove")); - }); - + await dispatchPointerEvent(page, selector); expect(await tooltip.getProperty(pointerMoves[i].property)).toBe(pointerMoves[i].value); } }); @@ -1039,36 +1038,61 @@ describe("calcite-tooltip", () => { ); } - document.body.innerHTML = ""; + document.body.innerHTML = ` + `; }); await page.waitForChanges(); } - function isTooltipOpen(page: E2EPage): Promise { - return page.evaluate((): boolean => { + function isTooltipOpen(page: E2EPage, componentId = "one"): Promise { + return page.evaluate((componentId): boolean => { return document - .querySelector("shadow-component-b") + .querySelector(`#${componentId}`) .shadowRoot.querySelector("shadow-component-a") .shadowRoot.querySelector("calcite-tooltip").open; - }); + }, componentId); } - async function focusReferenceElement(page: E2EPage): Promise { - await page.evaluate((): void => { - const referenceElement = document - .querySelector("shadow-component-b") - .shadowRoot.querySelector("shadow-component-a") - .shadowRoot.querySelector("button"); - referenceElement.dispatchEvent(new FocusEvent("focusin")); - }); + async function focusReferenceElement(page: E2EPage, componentId = "one"): Promise { + await page.$eval( + `#${componentId} >>> shadow-component-a >>> button`, + (refEl, eventOptions) => { + refEl.dispatchEvent(new FocusEvent("focusin", eventOptions)); + }, + eventOptions, + ); } it("should open focused tooltips within shadowRoots", async () => { const page = await newE2EPage(); await defineTestComponents(page); - expect(await isTooltipOpen(page)).toBe(false); - await focusReferenceElement(page); - expect(await isTooltipOpen(page)).toBe(true); + expect(await isTooltipOpen(page, "one")).toBe(false); + expect(await isTooltipOpen(page, "two")).toBe(false); + await focusReferenceElement(page, "one"); + expect(await isTooltipOpen(page, "one")).toBe(true); + expect(await isTooltipOpen(page, "two")).toBe(false); + await focusReferenceElement(page, "two"); + expect(await isTooltipOpen(page, "one")).toBe(false); + expect(await isTooltipOpen(page, "two")).toBe(true); + }); + + it("should open focused tooltips within shadowRoots using tab", async () => { + const page = await newE2EPage(); + await defineTestComponents(page); + expect(await isTooltipOpen(page, "one")).toBe(false); + expect(await isTooltipOpen(page, "two")).toBe(false); + await page.keyboard.press("Tab"); + await page.waitForChanges(); + expect(await isTooltipOpen(page, "one")).toBe(true); + expect(await isTooltipOpen(page, "two")).toBe(false); + await page.keyboard.press("Tab"); + await page.waitForChanges(); + expect(await isTooltipOpen(page, "one")).toBe(false); + expect(await isTooltipOpen(page, "two")).toBe(true); + await page.keyboard.press("Tab"); + await page.waitForChanges(); + expect(await isTooltipOpen(page, "one")).toBe(false); + expect(await isTooltipOpen(page, "two")).toBe(false); }); }); @@ -1090,21 +1114,13 @@ describe("calcite-tooltip", () => { expect(await tooltip1.getProperty("open")).toBe(false); expect(await tooltip2.getProperty("open")).toBe(false); - await page.$eval("#ref1", (el: HTMLElement) => { - el.dispatchEvent(new PointerEvent("pointermove")); - }); + await dispatchPointerEvent(page, "#ref1"); await page.waitForTimeout(TOOLTIP_OPEN_DELAY_MS); - await page.waitForChanges(); - expect(await tooltip1.getProperty("open")).toBe(true); expect(await tooltip2.getProperty("open")).toBe(false); - await page.$eval("#ref2", (el: HTMLElement) => { - el.dispatchEvent(new PointerEvent("pointermove")); - }); + await dispatchPointerEvent(page, "#ref2"); await page.waitForTimeout(0); - await page.waitForChanges(); - expect(await tooltip1.getProperty("open")).toBe(false); expect(await tooltip2.getProperty("open")).toBe(true); }); @@ -1131,10 +1147,7 @@ describe("calcite-tooltip", () => { await page.waitForChanges(); expect(await tooltip.getProperty("open")).toBe(true); - await page.$eval("#other", (el: HTMLElement) => { - el.dispatchEvent(new MouseEvent("click", { cancelable: true, bubbles: true })); - }); - await page.waitForChanges(); + await dispatchClickEvent(page, "#other"); expect(await tooltip.getProperty("open")).toBe(false); }); diff --git a/packages/calcite-components/src/components/tree-item/readme.md b/packages/calcite-components/src/components/tree-item/readme.md index 299bc8c79ad..d613e267d98 100644 --- a/packages/calcite-components/src/components/tree-item/readme.md +++ b/packages/calcite-components/src/components/tree-item/readme.md @@ -6,13 +6,13 @@ For comprehensive guidance on using and implementing `calcite-tree-item`, refer ## Properties -| Property | Attribute | Description | Type | Default | -| ------------- | --------------- | -------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `expanded` | `expanded` | When `true`, the component is expanded. | `boolean` | `false` | -| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `"both" \| "end" \| "start"` | `undefined` | -| `iconStart` | `icon-start` | Specifies an icon to display at the start of the component. | `CamelCaseIcons \| "date-time" \| "i12-x" \| "i14-x" \| "i18-x" \| "i1-x" \| "i2-d-explore" \| "i2-x" \| "i360-view" \| "i3-d-glasses" \| "i4-x" \| "i8-x" \| "a-z" \| "a-z-down" \| "a-z-up" \| "a3-landscape" \| "a3-portrait" \| "a4-landscape" \| "a4-portrait" \| "absolute-direction" \| "absolute-elevation" \| "access-string-results" \| "activity-monitor" \| "actual-size" \| "add-and-update-features" \| "add-constant" \| "add-features" \| "add-in" \| "add-in-edit" \| "add-in-new" \| "add-layer" \| "add-layer-service" \| "add-raster-variable" \| "add-rasters" \| "add-reaction" \| "add-text" \| "add-to-model" \| "address-book" \| "alert-off-circle-f" \| "all-servers" \| "analysis-overlay" \| "annotate-tool" \| "ansi-a-landscape" \| "ansi-a-portrait" \| "ansi-b-landscape" \| "ansi-b-portrait" \| "antenna-height" \| "app-gear" \| "app-launcher" \| "app-run" \| "app-update" \| "apply-changes" \| "apply-selection-to-existing-view" \| "arcgis-data-store" \| "arcgis-online" \| "arrow-bold-down" \| "arrow-bold-left" \| "arrow-bold-right" \| "arrow-bold-up" \| "arrow-circle-down" \| "arrow-circle-down-f" \| "arrow-double-diagonal1" \| "arrow-double-diagonal2" \| "arrow-double-horizontal" \| "arrow-double-vertical" \| "arrow-down" \| "arrow-down-left" \| "arrow-down-right" \| "arrow-left" \| "arrow-right" \| "arrow-right-left" \| "arrow-up" \| "arrow-up-down" \| "arrow-up-left" \| "arrow-up-right" \| "asterisk-large" \| "asterisk-small" \| "attachment-plus" \| "auto-layout" \| "battery-charging" \| "bear-left" \| "bear-right" \| "beginning-f" \| "bell-f" \| "bell-off" \| "bookmark-f" \| "border-radius-fully-rounded" \| "border-radius-rounded" \| "border-radius-sharp" \| "box-chart" \| "box-chart-series" \| "brackets-curly" \| "break-recurrence" \| "bring-forward" \| "bring-to-front" \| "browser-map" \| "brush-mark" \| "brush-mark-plus" \| "brush-tip" \| "bullet-point" \| "bullet-point-large" \| "camera-flash-off" \| "camera-flash-on" \| "camera-plus" \| "camera-switch-front-back" \| "camera-unlock" \| "caret-double-horizontal" \| "caret-double-vertical" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-square-down" \| "caret-square-left" \| "caret-square-right" \| "caret-square-up" \| "caret-up" \| "catalog-dataset" \| "center-align" \| "center-horizontal" \| "center-vertical" \| "change-detection" \| "change-font-size" \| "chart-gear" \| "chart-magnifying-glass" \| "check-circle" \| "check-circle-f" \| "check-extent" \| "check-layer" \| "check-shield" \| "check-square" \| "check-square-f" \| "chevron-down" \| "chevron-down-left" \| "chevron-down-right" \| "chevron-end" \| "chevron-left" \| "chevron-right" \| "chevron-start" \| "chevron-up" \| "chevron-up-left" \| "chevron-up-right" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chord-diagram" \| "circle-f" \| "circle-area" \| "circle-disallowed" \| "circle-inset-large" \| "circle-inset-medium" \| "circle-inset-small" \| "circle-pause" \| "circle-pause-f" \| "circle-stop" \| "circle-stop-f" \| "classify-objects" \| "classify-pixels" \| "clear-selection" \| "clipboard-brackets" \| "clock-down" \| "clock-forward" \| "clock-up" \| "cloud-data" \| "cloud-server" \| "code-branch" \| "code-branch-edit" \| "collaboration-distributed" \| "collaboration-user" \| "color-coded-map" \| "color-correction" \| "column-settings" \| "community-link-chart-layout" \| "compass-needle" \| "compass-north-circle" \| "conditional-rules" \| "conditional-rules-path" \| "conference-room" \| "configure-editing" \| "configure-grid-unit" \| "configure-popup" \| "content-full" \| "content-inline" \| "content-large" \| "content-medium" \| "content-minimal" \| "content-none" \| "content-side-by-side" \| "content-small" \| "contingent-values" \| "coordinate-system" \| "copy-to-clipboard" \| "credit-card" \| "cursor-click" \| "cursor-lock" \| "cursor-marquee" \| "cursor-minus" \| "cursor-plus" \| "cursor-selection" \| "custom-print" \| "cut-and-fill-volume-calculation" \| "data-card" \| "data-check" \| "data-clock-chart" \| "data-cloud" \| "data-folder" \| "data-magnifying-glass" \| "data-raster" \| "debug-script" \| "decrease-link-chart-symbol-size" \| "deep-learning" \| "deep-learning-project" \| "derived-value" \| "developer-credentials" \| "diamond-inset-large" \| "diamond-inset-medium" \| "diamond-inset-small" \| "dimensions-unit" \| "dimensions-wall" \| "display-selection-lock" \| "display-selection-unlock" \| "dissolve-features" \| "distance-type" \| "distribute-height-evenly" \| "distribute-width-evenly" \| "dock-bottom" \| "dock-left" \| "dock-right" \| "double-float" \| "download-to" \| "drive-time" \| "drive-time-largest" \| "drive-time-smallest" \| "drive-time-threshold" \| "drive-time-x-bar" \| "driving-distance" \| "driving-time" \| "drone-fixed-wing" \| "drone-flying-wing" \| "drone-quadcopter" \| "drone-quadcopter-top" \| "edit-attributes" \| "edit-geometry" \| "elevator-down" \| "elevator-up" \| "ellipsis-circle" \| "email-address" \| "embedded-card" \| "embedded-content" \| "embedded-live-content" \| "employee-id" \| "enable-disable-feature-selection" \| "end-f" \| "escalator-down" \| "escalator-up" \| "exclamation-mark-circle" \| "exclamation-mark-circle-f" \| "exclamation-mark-triangle" \| "exclamation-mark-triangle-f" \| "exclamation-point" \| "exclamation-point-f" \| "exit-highway-left" \| "exit-highway-right" \| "expression-defined-color" \| "extend-trim" \| "extent-filter" \| "face-id" \| "feature-details" \| "feature-layer" \| "file-archive" \| "file-cad" \| "file-code" \| "file-csv" \| "file-data" \| "file-ecd" \| "file-excel" \| "file-gpx" \| "file-image" \| "file-kml" \| "file-magnifying-glass" \| "file-pdf" \| "file-pdf-plus" \| "file-pitemx" \| "file-ppt" \| "file-report" \| "file-report-generic" \| "file-shape" \| "file-sound" \| "file-sqlite" \| "file-text" \| "file-user" \| "file-video" \| "file-word" \| "file-xml" \| "file-zip" \| "files-csv-collection" \| "filter-expand" \| "find-path" \| "flip-vertical" \| "floor-plan" \| "folder-f" \| "folder-archive" \| "folder-magnifying-glass" \| "folder-move" \| "folder-new" \| "folder-open" \| "folder-open-f" \| "folder-plus" \| "folder-star" \| "folder-video" \| "follow-pause" \| "follow-play" \| "force-directed-link-chart-layout" \| "fork-left" \| "fork-middle" \| "fork-right" \| "form-dropdown" \| "form-elements" \| "form-field" \| "form-field-multiline" \| "form-field-off" \| "forward-f" \| "four-by-one-grid" \| "four-by-three-grid" \| "four-by-two-grid" \| "frame-export" \| "freehand-area" \| "full-screen" \| "full-screen-exit" \| "function-editor" \| "gauge-summary" \| "geoanalytics-server" \| "geoevent-server" \| "geographic-link-chart-layout" \| "geonet-question" \| "gis-server" \| "gps-off" \| "gps-on" \| "gps-on-f" \| "graph-axis" \| "graph-bar100-stacked" \| "graph-bar" \| "graph-bar-side-by-side" \| "graph-bar-stacked" \| "graph-box-mean-lines" \| "graph-box-side-by-side" \| "graph-guides" \| "graph-histogram" \| "graph-line-series" \| "graph-moving-average" \| "graph-pie-slice" \| "graph-scatter-plot" \| "graph-time-series" \| "grid-diamond" \| "grid-hexagon" \| "grid-triangle" \| "grid-unit" \| "ground-control-point" \| "group-form" \| "group-form-plus" \| "group-items" \| "group-layers" \| "group-layout-elements" \| "group-x" \| "h3-hexagon" \| "handle-vertical" \| "heading-layout" \| "heading-rtl" \| "heart-f" \| "heat-chart" \| "heavy-rain" \| "heavy-snow" \| "hexagon2-inset-large" \| "hexagon2-inset-medium" \| "hexagon2-inset-small" \| "hexagon-inset-large" \| "hexagon-inset-medium" \| "hexagon-inset-small" \| "hide-derived-value" \| "hide-empty" \| "hide-layers" \| "hide-parameters" \| "hierarchical-link-chart-layout" \| "highlighter-tip" \| "highway-change" \| "highway-change-right" \| "hillshade-effect" \| "horizontal-distribute" \| "hourglass-active" \| "hourglass-expired" \| "image-chips" \| "image-collection-explorer" \| "image-display-order" \| "image-layer" \| "image-magnifying-glass" \| "image-mensuration" \| "image-pin" \| "image-plus" \| "image-segmentation" \| "image-server" \| "image-space" \| "image-unit" \| "increase-link-chart-symbol-size" \| "information-f" \| "information-letter" \| "initiative-template" \| "joined-view-layer" \| "knowledge-graph" \| "knowledge-graph-dashboard" \| "knowledge-graph-data-model" \| "knowledge-graph-data-store" \| "knowledge-graph-export" \| "knowledge-graph-import" \| "knowledge-graph-new" \| "knowledge-graph-relationship" \| "knowledge-layer" \| "knowledge-server" \| "knowledge-studio" \| "label-off" \| "language-translate" \| "lasso-select" \| "layer-basemap" \| "layer-broken" \| "layer-filter" \| "layer-graphics" \| "layer-hide" \| "layer-kml" \| "layer-line" \| "layer-line-service" \| "layer-map" \| "layer-map-service" \| "layer-points" \| "layer-polygon" \| "layer-polygon-service" \| "layer-service" \| "layer-settings" \| "layer-zoom-to" \| "layers-editable" \| "layers-f" \| "layers-reference" \| "layout-compact" \| "layout-horizontal" \| "layout-spacious" \| "layout-vertical" \| "left-align" \| "left-edge" \| "left-left" \| "left-right" \| "legend-left" \| "legend-plus" \| "legend-right" \| "light-rain" \| "light-snow" \| "line-check" \| "line-dashed" \| "line-dotted" \| "line-of-sight" \| "line-solid" \| "line-straight" \| "link-chart" \| "link-chart-expand" \| "link-chart-from-template" \| "list-bullet" \| "list-button" \| "list-check" \| "list-check-all" \| "list-merge" \| "list-number" \| "list-number-rtl" \| "list-radio" \| "list-rectangle" \| "list-show-all" \| "livestream-video-layer" \| "location-sharing" \| "location-sharing-f" \| "location-sharing-off" \| "lock-f" \| "ltr-elements-align" \| "ltr-paragraph-align" \| "magnifying-glass" \| "magnifying-glass-minus" \| "magnifying-glass-plus" \| "map-contents" \| "map-from-template" \| "map-level-settings" \| "map-pin" \| "map-space" \| "mask-inside" \| "mask-outside" \| "maximum-graph" \| "maximum-territory-distance" \| "measure-area" \| "measure-building-height-shadow" \| "measure-building-height-top-base" \| "measure-building-height-top-shadow" \| "measure-line" \| "media-layer" \| "mega-phone" \| "members-brackets" \| "merge-details" \| "merge-on-highway" \| "merge-on-highway-right" \| "merge-units" \| "microphone-plus" \| "min-distance-between-centers" \| "minimum-graph" \| "minus-circle" \| "minus-circle-f" \| "minus-square" \| "minus-square-f" \| "miscellaneous-collection" \| "mission-server" \| "mobile-off" \| "mobile-vibrate" \| "model-edit" \| "modify-associations" \| "move-from-basemap" \| "move-to-basemap" \| "move-up" \| "move-up-all" \| "multidimensional-raster" \| "multiple-variables" \| "music-note" \| "new-link-chart" \| "new-model" \| "new-raster-function-template" \| "new-training" \| "no-attachment" \| "no-image" \| "no-map" \| "nodes-link" \| "nodes-merge" \| "nodes-unlink" \| "nodes-unmerge" \| "notebook-server" \| "notebook-snapshot" \| "notepad-add" \| "notepad-edit" \| "number-circle1" \| "number-circle1-f" \| "number-circle2" \| "number-circle2-f" \| "number-circle3" \| "number-circle3-f" \| "number-circle4" \| "number-circle4-f" \| "number-circle5" \| "number-circle5-f" \| "number-circle6" \| "number-circle6-f" \| "number-circle7" \| "number-circle7-f" \| "number-circle8" \| "number-circle8-f" \| "number-circle9" \| "number-circle9-f" \| "number-of-territories" \| "object-detection" \| "objectstore-data-store" \| "on-the-ground-elevation" \| "open-book" \| "oriented-imagery-layer" \| "oriented-imagery-widget" \| "overlap-features" \| "overwrite-features" \| "overwrite-project" \| "paint-bucket" \| "palette-check" \| "pan-drag" \| "parcel-layer" \| "partly-cloudy" \| "paste-with-attribute" \| "paste-without-attribute" \| "pause-f" \| "pen-mark" \| "pen-mark-plus" \| "pen-tip" \| "pencil-mark" \| "pencil-mark-plus" \| "pencil-square" \| "pencil-tip" \| "personal-homepage" \| "pie-chart" \| "pin-plus" \| "pin-tear" \| "pin-tear-f" \| "play-f" \| "plus-circle" \| "plus-square" \| "point-line" \| "polygon-area" \| "polygon-line-check" \| "polygon-select" \| "polygon-vertices" \| "pop-up1" \| "pop-up-blank" \| "pop-up-blank-f" \| "premium-content-user-credit" \| "presentation-x" \| "print-preview" \| "processing-templates" \| "profile-variables" \| "project-mission" \| "project-template" \| "puzzle-piece" \| "qr-code" \| "qt-code" \| "question-f" \| "question-mark" \| "radial-tree-link-chart-layout" \| "rain-snow" \| "rain-thunder" \| "ramp-left" \| "ramp-right" \| "raster-analysis" \| "raster-function" \| "raster-function-template" \| "raster-function-template-play" \| "read-only-non-editable" \| "rectangle-area" \| "rectangle-plus" \| "recycle-bin" \| "refresh-f" \| "relational-data-store" \| "relative-direction" \| "relative-to-ground-elevation" \| "relative-to-scene-elevation" \| "remove-from-list" \| "remove-linkchart" \| "reorder-cards" \| "reorder-grid" \| "reorder-stack" \| "replace-image" \| "reshape-add-geometry" \| "reshape-subtract-geometry" \| "reshape-tool" \| "resize-area" \| "reverse-f" \| "ribbon-rosette" \| "right-align" \| "right-angle" \| "right-edge" \| "right-left" \| "right-right" \| "rings-largest" \| "rings-smallest" \| "rings-threshold" \| "rings-x-bar" \| "road-sign" \| "rotate-device" \| "round-about" \| "round-about-right" \| "rounded-rectangle" \| "route-from" \| "route-to" \| "rss-f" \| "rtl-elements-align" \| "rtl-paragraph-align" \| "running-outline" \| "rural-driving-distance" \| "rural-driving-time" \| "satellite0-f" \| "satellite1-f" \| "satellite2-f" \| "satellite3-f" \| "save-as" \| "scan-area" \| "scan-barcode" \| "scan-corridor" \| "scan-crosshatch" \| "scan-perimeter" \| "scan-vertical" \| "screenshot-mode" \| "select-by-attributes" \| "select-category" \| "select-column" \| "select-range" \| "select-visible" \| "selected-items-filter" \| "selection-filter" \| "selection-manager" \| "selection-set" \| "selection-x" \| "send-backwards" \| "send-to-back" \| "serial-port" \| "server-lock" \| "share-ios" \| "sharp-left" \| "sharp-right" \| "shield-coin" \| "shopping-cart" \| "show-all-parameters" \| "show-column" \| "show-derived-value" \| "show-multiple-layers-at-a-time" \| "show-one-layer-at-a-time" \| "show-required-parameters" \| "sign-in" \| "sign-out" \| "simple-link-chart-layout" \| "sky-plot" \| "sliders-horizontal" \| "smart-camera" \| "smart-form" \| "smart-tree-link-chart-layout" \| "snap-to-grid" \| "snap-to-pixel" \| "snap-to-point" \| "snow-thunder" \| "sort-ascending" \| "sort-ascending-arrow" \| "sort-descending" \| "sort-descending-arrow" \| "sound-low" \| "sound-off" \| "sound-unavailable" \| "spatiotemporal-data-store" \| "speech-bubble" \| "speech-bubble-check" \| "speech-bubble-exclamation" \| "speech-bubble-like" \| "speech-bubble-plus" \| "speech-bubble-social" \| "speech-bubbles" \| "split-features" \| "split-geometry" \| "split-units" \| "square-f" \| "square-area" \| "square-inset-large" \| "square-inset-medium" \| "square-inset-small" \| "stairs-down" \| "stairs-up" \| "star-f" \| "star-circle" \| "stop-square" \| "stop-square-f" \| "stored-as-new-query" \| "stored-query" \| "sub-fields" \| "subheading-rtl" \| "suitability-analysis-output" \| "summarize-center-and-dispersion1" \| "summarize-center-and-dispersion2" \| "summarize-center-and-dispersion3" \| "system-management" \| "tabbed-view" \| "take-pedestrian-ramp" \| "territory-buffer-distance" \| "test-data" \| "text-bold" \| "text-button" \| "text-dashed-underline" \| "text-large" \| "text-medium" \| "text-paragraph-large" \| "text-small" \| "text-solid-underline" \| "three-by-one-grid" \| "three-by-three-grid" \| "three-by-two-grid" \| "thumbs-down" \| "thumbs-up" \| "tile-cache-data-store" \| "tile-layer" \| "tiled-imagery-layer" \| "time-filter" \| "time-zone" \| "toggle-off" \| "toggle-on" \| "tour-pin-tear" \| "transverse-hexagon" \| "trapezoid-area" \| "trucking-distance" \| "trucking-time" \| "u-turn" \| "u-turn-right" \| "ungroup-items" \| "ungroup-layers" \| "ungroup-layout-elements" \| "update-features" \| "update-project" \| "upload-to" \| "urban-model" \| "usb-security-key" \| "user-calendar" \| "user-down" \| "user-key" \| "user-minus" \| "user-plus" \| "user-to-device" \| "user-up" \| "user-x" \| "utility-network" \| "utility-network-trace" \| "validate-utility-network-topology" \| "vertex-check" \| "vertex-edit" \| "vertex-gps" \| "vertex-move" \| "vertex-plus" \| "vertex-x" \| "vertical-distribute" \| "video-layer" \| "video-plus" \| "video-server" \| "video-single-server" \| "video-web" \| "view-associations" \| "view-hide" \| "view-mixed" \| "view-visible" \| "walk-through-door" \| "walking-distance" \| "walking-time" \| "widgets-group" \| "widgets-source" \| "widgets-tabs" \| "workflow-diagram" \| "workflow-manager-server" \| "x-axis-guide" \| "x-bar" \| "x-circle" \| "x-circle-f" \| "x-octagon" \| "x-octagon-f" \| "y-axis-guide" \| "zoom-in-fixed" \| "zoom-out-fixed" \| "zoom-to-object"` | `undefined` | -| `selected` | `selected` | When `true`, the component is selected. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ------------- | --------------- | -------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `expanded` | `expanded` | When `true`, the component is expanded. | `boolean` | `false` | +| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `"both" \| "end" \| "start"` | `undefined` | +| `iconStart` | `icon-start` | Specifies an icon to display at the start of the component. | `string` | `undefined` | +| `selected` | `selected` | When `true`, the component is selected. | `boolean` | `false` | ## Slots diff --git a/packages/calcite-components/src/components/tree-item/tree-item.tsx b/packages/calcite-components/src/components/tree-item/tree-item.tsx index 3864ebb964b..296592cb9da 100644 --- a/packages/calcite-components/src/components/tree-item/tree-item.tsx +++ b/packages/calcite-components/src/components/tree-item/tree-item.tsx @@ -33,7 +33,7 @@ import { import { CSS_UTILITY } from "../../utils/resources"; import { FlipContext, Scale, SelectionMode } from "../interfaces"; import { getIconScale } from "../../utils/component"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { TreeItemSelectDetail } from "./interfaces"; import { CSS, ICONS, SLOTS } from "./resources"; @@ -71,7 +71,7 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent @Prop({ reflect: true }) iconFlipRtl: FlipContext; /** Specifies an icon to display at the start of the component. */ - @Prop({ reflect: true }) iconStart: IconName; + @Prop({ reflect: true }) iconStart: IconNameOrString; /** When `true`, the component is selected. */ @Prop({ mutable: true, reflect: true }) selected = false; diff --git a/packages/calcite-components/src/utils/dom.spec.ts b/packages/calcite-components/src/utils/dom.spec.ts index 487e95190c1..2cca961be93 100644 --- a/packages/calcite-components/src/utils/dom.spec.ts +++ b/packages/calcite-components/src/utils/dom.spec.ts @@ -293,13 +293,11 @@ describe("dom", () => { describe("setRequestedIcon()", () => { it("returns the custom icon name if custom value is passed", () => - // @ts-expect-error -- unsupported icon names are used to make the test more readable expect(setRequestedIcon({ exampleValue: "exampleReturnedValue" }, "myCustomValue", "exampleValue")).toBe( "myCustomValue", )); it("returns the pre-defined icon name if custom value is not passed", () => - // @ts-expect-error -- unsupported icon names are used to make the test more readable expect(setRequestedIcon({ exampleValue: "exampleReturnedValue" }, "", "exampleValue")).toBe( "exampleReturnedValue", )); diff --git a/packages/calcite-components/src/utils/dom.ts b/packages/calcite-components/src/utils/dom.ts index 4ed42e4cc6a..8226f654442 100644 --- a/packages/calcite-components/src/utils/dom.ts +++ b/packages/calcite-components/src/utils/dom.ts @@ -1,5 +1,5 @@ import { tabbable } from "tabbable"; -import { IconName } from "../components/icon/interfaces"; +import { IconNameOrString } from "../components/icon/interfaces"; import { guid } from "./guid"; import { CSS_UTILITY } from "./resources"; @@ -439,10 +439,10 @@ export function filterElementsBySelector(elements: Element[], * @returns {string|undefined} The resulting icon value. */ export function setRequestedIcon( - iconObject: Record, - iconValue: IconName | boolean | "", + iconObject: Record, + iconValue: IconNameOrString | boolean | "", matchedValue: string, -): IconName | undefined { +): IconNameOrString | undefined { if (typeof iconValue === "string" && iconValue !== "") { return iconValue; } else if (iconValue === "") { diff --git a/packages/calcite-components/src/utils/form.tsx b/packages/calcite-components/src/utils/form.tsx index 8a39e706a91..2154f2fb806 100644 --- a/packages/calcite-components/src/utils/form.tsx +++ b/packages/calcite-components/src/utils/form.tsx @@ -1,6 +1,6 @@ import { FunctionalComponent, h } from "@stencil/core"; import { Writable } from "type-fest"; -import { IconName, Status } from "../components"; +import { IconNameOrString, Status } from "../components"; import { closestElementCrossShadowBoundary, queryElementRoots } from "./dom"; /** @@ -211,7 +211,7 @@ function hasRegisteredFormComponentParent( export interface ValidationProps { status: Status; message: string; - icon: IconName | boolean | ""; + icon: IconNameOrString | boolean | ""; } function displayValidationMessage( diff --git a/packages/calcite-components/support/patchESMResolution.ts b/packages/calcite-components/support/patchESMResolution.ts deleted file mode 100644 index bd7bf6158b8..00000000000 --- a/packages/calcite-components/support/patchESMResolution.ts +++ /dev/null @@ -1,28 +0,0 @@ -// patch needed due to switching package.json's type to "module" -// https://github.com/Esri/calcite-design-system/issues/5141 - -const importedModule = "@stencil/core/internal/client"; - -(async function () { - const { - promises: { readFile, readdir, writeFile }, - } = await import("fs"); - const { dirname, resolve } = await import("path"); - const { fileURLToPath } = await import("url"); - - try { - const __filename = fileURLToPath(import.meta.url); - const __dirname = dirname(__filename); - - const componentsOutput = resolve(__dirname, "..", "dist", "components"); - const files = await readdir(componentsOutput); - for (const file of files) { - const filePath = resolve(componentsOutput, file); - const contents = await readFile(filePath, { encoding: "utf8" }); - await writeFile(filePath, contents.replace(importedModule, importedModule + "/index.js")); - } - } catch (err) { - console.error(err); - process.exit(1); - } -})(); diff --git a/packages/calcite-ui-icons/CHANGELOG.md b/packages/calcite-ui-icons/CHANGELOG.md index ec787498053..50b97fd82c3 100644 --- a/packages/calcite-ui-icons/CHANGELOG.md +++ b/packages/calcite-ui-icons/CHANGELOG.md @@ -3,6 +3,16 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [3.30.1-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons@3.29.1-next.0...@esri/calcite-ui-icons@3.30.1-next.0) (2024-08-01) + +**Note:** Version bump only for package @esri/calcite-ui-icons + +## [3.30.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons-v3.29.0...@esri/calcite-ui-icons@3.30.0) (2024-07-31) + +### Miscellaneous Chores + +- Add calcite-ui-icons to monorepo ([#9835](https://github.com/Esri/calcite-design-system/issues/9835)) ([05264ea](https://github.com/Esri/calcite-design-system/commit/05264ea84d1c0d88d2878c33434a4166f2f5f532)) + ## 3.29.1-next.0 (2024-07-30) ### Miscellaneous Chores diff --git a/packages/calcite-ui-icons/package.json b/packages/calcite-ui-icons/package.json index 0d8fbbc3d94..bf35ba90145 100644 --- a/packages/calcite-ui-icons/package.json +++ b/packages/calcite-ui-icons/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-ui-icons", - "version": "3.29.1-next.0", + "version": "3.30.1-next.0", "private": false, "description": "A collection of UI SVG icons created by Esri for applications.", "keywords": [