From 6b0f2d0802d69484930fd6f18170d1164ea631c7 Mon Sep 17 00:00:00 2001 From: Jaylyn Barbee <51131738+Jaylyn-Barbee@users.noreply.github.com> Date: Mon, 20 Mar 2023 14:11:44 -0400 Subject: [PATCH] Giving developers control over the Windows Icon Background color option in the packaging form (#3892) fixes #3861 ## PR Type Bugfix / Feature ## Describe the current behavior? Right now, we use the developers `manifest.background_color` as a default and `"transparent"` as a fallback for the Windows icon background color. ## Describe the new behavior? Now we have a color pick in the windows packaging form that gives the developer complete control over that field. ## PR Checklist - [x] Test: run `npm run test` and ensure that all tests pass - [x] Target main branch (or an appropriate release branch if appropriate for a bug fix) - [x] Ensure that your contribution follows [standard accessibility guidelines](https://docs.microsoft.com/en-us/microsoft-edge/accessibility/design). Use tools like https://webhint.io/ to validate your changes. ## Additional Information This PR contains some other minor bug fixes and updates to the way we use the `sl-select` component as it was rewritten by shoelace recently. --------- Signed-off-by: dependabot[bot] Co-authored-by: Justin Willis Co-authored-by: Justin Willis (HE / HIM) Co-authored-by: Zach Teutsch <88554871+zateutsch@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Nikola Metulev Co-authored-by: Amrutha Srinivasan Co-authored-by: Judah Gabriel Himango --- apps/pwabuilder/package-lock.json | 273 +++++++----------- apps/pwabuilder/package.json | 2 +- .../src/script/components/publish-pane.ts | 10 +- .../script/components/test-publish-pane.ts | 6 +- .../src/script/components/windows-form.ts | 126 +++++++- .../pwabuilder/src/script/pages/app-report.ts | 8 +- .../services/publish/windows-publish.ts | 2 +- apps/pwabuilder/src/shoelace.ts | 1 + .../src/components/manifest-icons-form.ts | 5 + .../src/components/manifest-info-form.ts | 13 +- .../src/components/manifest-platform-form.ts | 31 +- .../components/manifest-screenshots-form.ts | 3 +- .../src/components/manifest-settings-form.ts | 33 ++- .../manifest-validation/src/validations.ts | 2 +- 14 files changed, 287 insertions(+), 228 deletions(-) diff --git a/apps/pwabuilder/package-lock.json b/apps/pwabuilder/package-lock.json index 448ff696c..f4f183d72 100644 --- a/apps/pwabuilder/package-lock.json +++ b/apps/pwabuilder/package-lock.json @@ -14,7 +14,7 @@ "@pwabuilder/manifest-editor": "file:../../components/manifest-editor", "@pwabuilder/manifest-validation": "file:../../libraries/manifest-validation", "@pwabuilder/site-analytics": "file:../../libraries/site-analytics", - "@shoelace-style/shoelace": "^2.0.0-beta.83", + "@shoelace-style/shoelace": "^2.2.0", "@vaadin/router": "^1.7.4", "browser-fs-access": "^0.23.0", "colorjs.io": "^0.4.0", @@ -468,6 +468,14 @@ "node": ">=12" } }, + "node_modules/@ctrl/tinycolor": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.0.tgz", + "integrity": "sha512-/Z3l6pXthq0JvMYdUFyX9j0MaCltlIn6mfh9jLyQwg5aPKxkyNa0PTHtU1AlFXLNk55ZuAeJRcpvq+tmLfKmaQ==", + "engines": { + "node": ">=10" + } + }, "node_modules/@esbuild/linux-loong64": { "version": "0.14.54", "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.14.54.tgz", @@ -563,16 +571,16 @@ } }, "node_modules/@floating-ui/core": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.0.1.tgz", - "integrity": "sha512-bO37brCPfteXQfFY0DyNDGB3+IMe4j150KFQcgJ5aBP295p9nBGeHEs/p0czrRbtlHq4Px/yoPXO/+dOCcF4uA==" + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.2.tgz", + "integrity": "sha512-FaO9KVLFnxknZaGWGmNtjD2CVFuc0u4yeGEofoyXO2wgRA7fLtkngT6UB0vtWQWuhH3iMTZZ/Y89CMeyGfn8pA==" }, "node_modules/@floating-ui/dom": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.0.2.tgz", - "integrity": "sha512-5X9WSvZ8/fjy3gDu8yx9HAA4KG1lazUN2P4/VnaXLxTO9Dz53HI1oYoh1OlhqFNlHgGDiwFX5WhFCc2ljbW3yA==", + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.3.tgz", + "integrity": "sha512-lK9cZUrHSJLMVAdCvDqs6Ug8gr0wmqksYiaoj/bxj2gweRQkSuhg2/V6Jswz2KiQ0RAULbqw1oQDJIMpQ5GfGA==", "dependencies": { - "@floating-ui/core": "^1.0.1" + "@floating-ui/core": "^1.2.2" } }, "node_modules/@gitbeaker/core": { @@ -770,14 +778,22 @@ } }, "node_modules/@lit-labs/react": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.0.8.tgz", - "integrity": "sha512-5qQzixu/bVqI819cNgr/fY8KX0v5C3FmanMaT7Q8qzUJ+EpB4BsOSQwacdaWfNkm7SV4jkWerSHxa9hvncszCA==" + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.1.1.tgz", + "integrity": "sha512-9TC+/ZWb6BJlWCyUr14FKFlaGnyKpeEDorufXozQgke/VoVrslUQNaL7nBmrAWdNrmzx5jWgi8lFmWwrxMjnlA==" + }, + "node_modules/@lit-labs/ssr-dom-shim": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.0.0.tgz", + "integrity": "sha512-ic93MBXfApIFTrup4a70M/+ddD8xdt2zxxj9sRwHQzhS9ag/syqkD8JPdTXsc1gUy2K8TTirhlCqyTEM/sifNw==" }, "node_modules/@lit/reactive-element": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.4.1.tgz", - "integrity": "sha512-qDv4851VFSaBWzpS02cXHclo40jsbAjRXnebNXpm0uVg32kCneZPo9RYVQtrTNICtZ+1wAYHu1ZtxWSWMbKrBw==" + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.1.tgz", + "integrity": "sha512-va15kYZr7KZNNPZdxONGQzpUr+4sxVu7V/VG7a8mRfPPXUyhEYj5RzXCQmGrlP3tAh0L3HHm5AjBMFYRqlM9SA==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.0.0" + } }, "node_modules/@mrmlnc/readdir-enhanced": { "version": "2.2.1", @@ -1191,21 +1207,22 @@ } }, "node_modules/@shoelace-style/localize": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@shoelace-style/localize/-/localize-3.0.1.tgz", - "integrity": "sha512-nmv1syJ3ormbGq29GsuxGRK6BFq7Jhx+kVFyuuozz0Pckkvk1SGk2vpZZcdnj2vRZCETvlVB7KYgakUwgGmn+A==" + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@shoelace-style/localize/-/localize-3.1.0.tgz", + "integrity": "sha512-evGxn5wIQh1/Ks1RbZm7rY4DxPKAUnXKTixZNgnYV/N2V8Bbbvsi+S14gNa42SQNUJK5WooNtlar2B8cehEwZQ==" }, "node_modules/@shoelace-style/shoelace": { - "version": "2.0.0-beta.83", - "resolved": "https://registry.npmjs.org/@shoelace-style/shoelace/-/shoelace-2.0.0-beta.83.tgz", - "integrity": "sha512-dHVBtapuqxSRu3klBZhf9/LtEtircaLLnDajNbhuiBiY7PVCxjjf/9Kyd/S/BpbhKwMICqJr+PaKoCTd2iWDJA==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@shoelace-style/shoelace/-/shoelace-2.2.0.tgz", + "integrity": "sha512-53do7etYwygRRnx1tt5SPGfTL8YFtZVNTlfn5Tabno66otBXROKnUjWVqyLRP6xvj6BG6BP62DkZQG6pxIDMVg==", "dependencies": { - "@floating-ui/dom": "^1.0.0", - "@lit-labs/react": "^1.0.7", + "@ctrl/tinycolor": "^3.5.0", + "@floating-ui/dom": "^1.2.1", + "@lit-labs/react": "^1.1.1", "@shoelace-style/animations": "^1.1.0", - "@shoelace-style/localize": "^3.0.1", - "color": "4.2", - "lit": "^2.2.8", + "@shoelace-style/localize": "^3.1.0", + "composed-offset-position": "^0.0.4", + "lit": "^2.6.1", "qr-creator": "^1.0.0" }, "engines": { @@ -3036,18 +3053,6 @@ "node": ">=0.10.0" } }, - "node_modules/color": { - "version": "4.2.3", - "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz", - "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==", - "dependencies": { - "color-convert": "^2.0.1", - "color-string": "^1.9.0" - }, - "engines": { - "node": ">=12.5.0" - } - }, "node_modules/color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -3060,32 +3065,8 @@ "node_modules/color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" - }, - "node_modules/color-string": { - "version": "1.9.1", - "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz", - "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==", - "dependencies": { - "color-name": "^1.0.0", - "simple-swizzle": "^0.2.2" - } - }, - "node_modules/color/node_modules/color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dependencies": { - "color-name": "~1.1.4" - }, - "engines": { - "node": ">=7.0.0" - } - }, - "node_modules/color/node_modules/color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", + "dev": true }, "node_modules/colorjs.io": { "version": "0.4.0", @@ -3179,6 +3160,11 @@ "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==", "dev": true }, + "node_modules/composed-offset-position": { + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/composed-offset-position/-/composed-offset-position-0.0.4.tgz", + "integrity": "sha512-vMlvu1RuNegVE0YsCDSV/X4X10j56mq7PCIyOKK74FxkXzGLwhOUmdkJLSdOBOMwWycobGUMgft2lp+YgTe8hw==" + }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -6253,11 +6239,6 @@ "node": ">=0.10.0" } }, - "node_modules/is-arrayish": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", - "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==" - }, "node_modules/is-bigint": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz", @@ -7171,13 +7152,13 @@ "dev": true }, "node_modules/lit": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/lit/-/lit-2.3.1.tgz", - "integrity": "sha512-TejktDR4mqG3qB32Y8Lm5Lye3c8SUehqz7qRsxe1PqGYL6me2Ef+jeQAEqh20BnnGncv4Yxy2njEIT0kzK1WCw==", + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/lit/-/lit-2.6.1.tgz", + "integrity": "sha512-DT87LD64f8acR7uVp7kZfhLRrHkfC/N4BVzAtnw9Yg8087mbBJ//qedwdwX0kzDbxgPccWRW6mFwGbRQIxy0pw==", "dependencies": { - "@lit/reactive-element": "^1.4.0", + "@lit/reactive-element": "^1.6.0", "lit-element": "^3.2.0", - "lit-html": "^2.3.0" + "lit-html": "^2.6.0" } }, "node_modules/lit-analyzer": { @@ -7388,9 +7369,9 @@ } }, "node_modules/lit-html": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.3.1.tgz", - "integrity": "sha512-FyKH6LTW6aBdkfNhNSHyZTnLgJSTe5hMk7HFtc/+DcN1w74C215q8B+Cfxc2OuIEpBNcEKxgF64qL8as30FDHA==", + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.6.1.tgz", + "integrity": "sha512-Z3iw+E+3KKFn9t2YKNjsXNEu/LRLI98mtH/C6lnFg7kvaqPIzPn124Yd4eT/43lyqrejpc5Wb6BHq3fdv4S8Rw==", "dependencies": { "@types/trusted-types": "^2.0.2" } @@ -10162,14 +10143,6 @@ "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==", "dev": true }, - "node_modules/simple-swizzle": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", - "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==", - "dependencies": { - "is-arrayish": "^0.3.1" - } - }, "node_modules/slash": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", @@ -12206,6 +12179,11 @@ "@jridgewell/trace-mapping": "0.3.9" } }, + "@ctrl/tinycolor": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.0.tgz", + "integrity": "sha512-/Z3l6pXthq0JvMYdUFyX9j0MaCltlIn6mfh9jLyQwg5aPKxkyNa0PTHtU1AlFXLNk55ZuAeJRcpvq+tmLfKmaQ==" + }, "@esbuild/linux-loong64": { "version": "0.14.54", "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.14.54.tgz", @@ -12272,16 +12250,16 @@ } }, "@floating-ui/core": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.0.1.tgz", - "integrity": "sha512-bO37brCPfteXQfFY0DyNDGB3+IMe4j150KFQcgJ5aBP295p9nBGeHEs/p0czrRbtlHq4Px/yoPXO/+dOCcF4uA==" + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.2.tgz", + "integrity": "sha512-FaO9KVLFnxknZaGWGmNtjD2CVFuc0u4yeGEofoyXO2wgRA7fLtkngT6UB0vtWQWuhH3iMTZZ/Y89CMeyGfn8pA==" }, "@floating-ui/dom": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.0.2.tgz", - "integrity": "sha512-5X9WSvZ8/fjy3gDu8yx9HAA4KG1lazUN2P4/VnaXLxTO9Dz53HI1oYoh1OlhqFNlHgGDiwFX5WhFCc2ljbW3yA==", + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.3.tgz", + "integrity": "sha512-lK9cZUrHSJLMVAdCvDqs6Ug8gr0wmqksYiaoj/bxj2gweRQkSuhg2/V6Jswz2KiQ0RAULbqw1oQDJIMpQ5GfGA==", "requires": { - "@floating-ui/core": "^1.0.1" + "@floating-ui/core": "^1.2.2" } }, "@gitbeaker/core": { @@ -12436,14 +12414,22 @@ } }, "@lit-labs/react": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.0.8.tgz", - "integrity": "sha512-5qQzixu/bVqI819cNgr/fY8KX0v5C3FmanMaT7Q8qzUJ+EpB4BsOSQwacdaWfNkm7SV4jkWerSHxa9hvncszCA==" + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.1.1.tgz", + "integrity": "sha512-9TC+/ZWb6BJlWCyUr14FKFlaGnyKpeEDorufXozQgke/VoVrslUQNaL7nBmrAWdNrmzx5jWgi8lFmWwrxMjnlA==" + }, + "@lit-labs/ssr-dom-shim": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.0.0.tgz", + "integrity": "sha512-ic93MBXfApIFTrup4a70M/+ddD8xdt2zxxj9sRwHQzhS9ag/syqkD8JPdTXsc1gUy2K8TTirhlCqyTEM/sifNw==" }, "@lit/reactive-element": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.4.1.tgz", - "integrity": "sha512-qDv4851VFSaBWzpS02cXHclo40jsbAjRXnebNXpm0uVg32kCneZPo9RYVQtrTNICtZ+1wAYHu1ZtxWSWMbKrBw==" + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.1.tgz", + "integrity": "sha512-va15kYZr7KZNNPZdxONGQzpUr+4sxVu7V/VG7a8mRfPPXUyhEYj5RzXCQmGrlP3tAh0L3HHm5AjBMFYRqlM9SA==", + "requires": { + "@lit-labs/ssr-dom-shim": "^1.0.0" + } }, "@mrmlnc/readdir-enhanced": { "version": "2.2.1", @@ -12837,21 +12823,22 @@ "integrity": "sha512-Be+cahtZyI2dPKRm8EZSx3YJQ+jLvEcn3xzRP7tM4tqBnvd/eW/64Xh0iOf0t2w5P8iJKfdBbpVNE9naCaOf2g==" }, "@shoelace-style/localize": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@shoelace-style/localize/-/localize-3.0.1.tgz", - "integrity": "sha512-nmv1syJ3ormbGq29GsuxGRK6BFq7Jhx+kVFyuuozz0Pckkvk1SGk2vpZZcdnj2vRZCETvlVB7KYgakUwgGmn+A==" + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@shoelace-style/localize/-/localize-3.1.0.tgz", + "integrity": "sha512-evGxn5wIQh1/Ks1RbZm7rY4DxPKAUnXKTixZNgnYV/N2V8Bbbvsi+S14gNa42SQNUJK5WooNtlar2B8cehEwZQ==" }, "@shoelace-style/shoelace": { - "version": "2.0.0-beta.83", - "resolved": "https://registry.npmjs.org/@shoelace-style/shoelace/-/shoelace-2.0.0-beta.83.tgz", - "integrity": "sha512-dHVBtapuqxSRu3klBZhf9/LtEtircaLLnDajNbhuiBiY7PVCxjjf/9Kyd/S/BpbhKwMICqJr+PaKoCTd2iWDJA==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@shoelace-style/shoelace/-/shoelace-2.2.0.tgz", + "integrity": "sha512-53do7etYwygRRnx1tt5SPGfTL8YFtZVNTlfn5Tabno66otBXROKnUjWVqyLRP6xvj6BG6BP62DkZQG6pxIDMVg==", "requires": { - "@floating-ui/dom": "^1.0.0", - "@lit-labs/react": "^1.0.7", + "@ctrl/tinycolor": "^3.5.0", + "@floating-ui/dom": "^1.2.1", + "@lit-labs/react": "^1.1.1", "@shoelace-style/animations": "^1.1.0", - "@shoelace-style/localize": "^3.0.1", - "color": "4.2", - "lit": "^2.2.8", + "@shoelace-style/localize": "^3.1.0", + "composed-offset-position": "^0.0.4", + "lit": "^2.6.1", "qr-creator": "^1.0.0" } }, @@ -14259,30 +14246,6 @@ "object-visit": "^1.0.0" } }, - "color": { - "version": "4.2.3", - "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz", - "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==", - "requires": { - "color-convert": "^2.0.1", - "color-string": "^1.9.0" - }, - "dependencies": { - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "requires": { - "color-name": "~1.1.4" - } - }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" - } - } - }, "color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -14295,16 +14258,8 @@ "color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" - }, - "color-string": { - "version": "1.9.1", - "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz", - "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==", - "requires": { - "color-name": "^1.0.0", - "simple-swizzle": "^0.2.2" - } + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", + "dev": true }, "colorjs.io": { "version": "0.4.0", @@ -14382,6 +14337,11 @@ "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==", "dev": true }, + "composed-offset-position": { + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/composed-offset-position/-/composed-offset-position-0.0.4.tgz", + "integrity": "sha512-vMlvu1RuNegVE0YsCDSV/X4X10j56mq7PCIyOKK74FxkXzGLwhOUmdkJLSdOBOMwWycobGUMgft2lp+YgTe8hw==" + }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -16593,11 +16553,6 @@ "kind-of": "^6.0.0" } }, - "is-arrayish": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", - "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==" - }, "is-bigint": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz", @@ -17278,13 +17233,13 @@ "dev": true }, "lit": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/lit/-/lit-2.3.1.tgz", - "integrity": "sha512-TejktDR4mqG3qB32Y8Lm5Lye3c8SUehqz7qRsxe1PqGYL6me2Ef+jeQAEqh20BnnGncv4Yxy2njEIT0kzK1WCw==", + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/lit/-/lit-2.6.1.tgz", + "integrity": "sha512-DT87LD64f8acR7uVp7kZfhLRrHkfC/N4BVzAtnw9Yg8087mbBJ//qedwdwX0kzDbxgPccWRW6mFwGbRQIxy0pw==", "requires": { - "@lit/reactive-element": "^1.4.0", + "@lit/reactive-element": "^1.6.0", "lit-element": "^3.2.0", - "lit-html": "^2.3.0" + "lit-html": "^2.6.0" }, "dependencies": { "lit-element": { @@ -17475,9 +17430,9 @@ } }, "lit-html": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.3.1.tgz", - "integrity": "sha512-FyKH6LTW6aBdkfNhNSHyZTnLgJSTe5hMk7HFtc/+DcN1w74C215q8B+Cfxc2OuIEpBNcEKxgF64qL8as30FDHA==", + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.6.1.tgz", + "integrity": "sha512-Z3iw+E+3KKFn9t2YKNjsXNEu/LRLI98mtH/C6lnFg7kvaqPIzPn124Yd4eT/43lyqrejpc5Wb6BHq3fdv4S8Rw==", "requires": { "@types/trusted-types": "^2.0.2" } @@ -19553,14 +19508,6 @@ "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==", "dev": true }, - "simple-swizzle": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", - "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==", - "requires": { - "is-arrayish": "^0.3.1" - } - }, "slash": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", diff --git a/apps/pwabuilder/package.json b/apps/pwabuilder/package.json index 84fc63063..5bda7e893 100644 --- a/apps/pwabuilder/package.json +++ b/apps/pwabuilder/package.json @@ -24,7 +24,7 @@ "@pwabuilder/manifest-editor": "file:../../components/manifest-editor", "@pwabuilder/manifest-validation": "file:../../libraries/manifest-validation", "@pwabuilder/site-analytics": "file:../../libraries/site-analytics", - "@shoelace-style/shoelace": "^2.0.0-beta.83", + "@shoelace-style/shoelace": "^2.2.0", "@vaadin/router": "^1.7.4", "browser-fs-access": "^0.23.0", "colorjs.io": "^0.4.0", diff --git a/apps/pwabuilder/src/script/components/publish-pane.ts b/apps/pwabuilder/src/script/components/publish-pane.ts index ef73f5ba3..b582e7848 100644 --- a/apps/pwabuilder/src/script/components/publish-pane.ts +++ b/apps/pwabuilder/src/script/components/publish-pane.ts @@ -75,9 +75,9 @@ export class PublishPane extends LitElement { title: 'Windows', factoids: [ "PWAs can be indistinguishable from native apps on Windows", - "PWAs are first class applications.", - "Collect 100% of revenue generated via third party commerce platforms.", - "1B+ store enabled devices." + "PWAs are first class applications", + "Collect 100% of revenue generated via third party commerce platforms", + "1B+ store enabled devices" ], isActionCard: true, icon: '/assets/Publish_Windows.svg', @@ -99,8 +99,8 @@ export class PublishPane extends LitElement { title: 'iOS', factoids: [ "Leverage same codebase across all platforms", - "Large user base.", - "Premium devices." + "Large user base", + "Premium devices" ], isActionCard: true, icon: '/assets/Publish_Apple.svg', diff --git a/apps/pwabuilder/src/script/components/test-publish-pane.ts b/apps/pwabuilder/src/script/components/test-publish-pane.ts index cfcca9be8..4e985a7dd 100644 --- a/apps/pwabuilder/src/script/components/test-publish-pane.ts +++ b/apps/pwabuilder/src/script/components/test-publish-pane.ts @@ -45,9 +45,9 @@ export class TestPublishPane extends LitElement { title: 'Windows', factoids: [ "PWAs can be indistinguishable from native apps on Windows", - "PWAs are first class applications.", - "Collect 100% of revenue generated via third party commerce platforms.", - "1B+ store enabled devices." + "PWAs are first class applications", + "Collect 100% of revenue generated via third party commerce platforms", + "1B+ store enabled devices" ], isActionCard: true, icon: '/assets/Publish_Windows.svg', diff --git a/apps/pwabuilder/src/script/components/windows-form.ts b/apps/pwabuilder/src/script/components/windows-form.ts index c67a74418..4c1605691 100644 --- a/apps/pwabuilder/src/script/components/windows-form.ts +++ b/apps/pwabuilder/src/script/components/windows-form.ts @@ -17,6 +17,9 @@ import { ManifestContext, PackageOptions } from '../utils/interfaces'; export class WindowsForm extends AppPackageFormBase { @property({ type: Boolean }) generating: boolean = false; @state() showAdvanced = false; + @state() customSelected = false; + @state() initialBgColor: string = ''; + @state() currentSelectedColor: string = ''; @state() packageOptions: WindowsPackageOptions = emptyWindowsPackageOptions(); @state() activeLanguages: string[] = []; @state() activeLanguageCodes: string[] = []; @@ -93,28 +96,38 @@ export class WindowsForm extends AppPackageFormBase { color: rgba(0,0,0,.5); } + #color-input-holder { + display: flex; + align-items: center; + gap: 10px; + } + + #color-input-holder p { + margin: 0; + color: var(--secondary-font-color); + } + :host{ --sl-focus-ring-width: 3px; --sl-input-focus-ring-color: #4f3fb670; --sl-focus-ring: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color); --sl-input-border-color-focus: #4F3FB6ac; + --sl-input-font-size-small: 22px; + } - #languageDrop::part(control){ + #languageDrop::part(display-input){ min-height: 40px; } - #languageDrop::part(tag__base){ - height: 35px; + #languageDrop::part(tag){ font-size: var(--body-font-size); color: #757575; background-color: #f0f0f0; border-radius: var(--input-border-radius); - padding: 8px 15px; - gap: 40px; } - #languageDrop::part(menu){ + #languageDrop::part(listbox){ background-color: #ffffff; height: 200px; overflow-y: scroll; @@ -123,17 +136,17 @@ export class WindowsForm extends AppPackageFormBase { margin-top: 3px; } - #languageDrop sl-menu-item::part(base){ + #languageDrop sl-option::part(base){ font-size: var(--body-font-size); color: #757575; } - #languageDrop sl-menu-item:focus-within::part(base) { + #languageDrop sl-option:focus-within::part(base) { color: #ffffff; background-color: #4F3FB6; } - #languageDrop sl-menu-item::part(base):hover{ + #languageDrop sl-option::part(base):hover{ color: #ffffff; background-color: #4F3FB6; } @@ -142,6 +155,23 @@ export class WindowsForm extends AppPackageFormBase { font-size: var(--body-font-size); color: #757575; } + + sl-color-picker { + --grid-width: 315px; + height: 25px; + } + + sl-color-picker::part(trigger){ + border-radius: 0; + height: 25px; + width: 75px; + display: flex; + } + + .color-radio::part(control--checked){ + background-color: var(--primary-color); + border-color: var(--primary-color); + } ` ]; @@ -164,6 +194,9 @@ export class WindowsForm extends AppPackageFormBase { ); this.packageOptions.targetDeviceFamilies = ['Desktop', 'Holographic']; + + this.customSelected = this.packageOptions.images?.backgroundColor != 'transparent'; + this.initialBgColor = this.currentSelectedColor = (this.packageOptions.images?.backgroundColor as string); } toggleSettings(settingsToggleValue: 'basic' | 'advanced') { @@ -248,29 +281,77 @@ export class WindowsForm extends AppPackageFormBase { this.handleLanguage(e)} - .value=${this.packageOptions.resourceLanguage!} + value=${this.packageOptions.resourceLanguage!} ?stayopenonselect=${true} multiple - .maxTagsVisible=${5} + .maxOptionsVisible=${5} + size="small" > ${windowsLanguages.map((lang: any) => html` ${lang.codes.map((code: string) => html` - ${lang.name} - ${code} + ${lang.name} - ${code} ` )} ` )} - `; } + renderColorPicker(formInput: FormInput): TemplateResult { + return html` + +
+
+

Select your Windows icons background color

+ this.toggleIconBgRadios()} + > + Transparent + Custom Color + + ${this.customSelected ? html` +
+ this.switchIconBgColor()} + > +

${this.currentSelectedColor}

+
+ ` : html``} +
+
+ `; + } + + toggleIconBgRadios(){ + let input = (this.shadowRoot?.getElementById("icon-bg-radio-group") as any); + let selected = input.value; + this.customSelected = selected !== 'transparent'; + if(!this.customSelected){ + this.packageOptions.images!.backgroundColor = 'transparent'; + } else { + this.packageOptions.images!.backgroundColor = this.initialBgColor; + this.currentSelectedColor = this.initialBgColor; + } + } + + switchIconBgColor(){ + let input = (this.shadowRoot?.getElementById("icon-bg-color") as any); + let formattedValue = input.getFormattedValue('hex') + this.packageOptions.images!.backgroundColor = this.currentSelectedColor = formattedValue; + } + handleLanguage(e: any){ this.packageOptions.resourceLanguage = e.target.value; } @@ -422,6 +503,19 @@ export class WindowsForm extends AppPackageFormBase { (this.packageOptions.images!.baseImage = val), })} +
+ ${this.renderColorPicker({ + label: 'Icon Background Color', + tooltip: `Optional. The background color of the Windows icons that will be generated with your .msix.`, + tooltipLink: + 'https://learn.microsoft.com/en-us/windows/apps/design/style/iconography/app-icon-design#color-contrast', + inputId: 'icon-bg-color-input', + value: this.packageOptions.images!.backgroundColor || 'transparent', + placeholder: 'transparent', + inputHandler: (val: string) => + (this.packageOptions.images!.backgroundColor = val), + })} +
${this.renderMultiSelect({ label: 'Language', @@ -486,7 +580,7 @@ export class WindowsForm extends AppPackageFormBase { })}
-
+
${this.renderFormInput({ diff --git a/apps/pwabuilder/src/script/pages/app-report.ts b/apps/pwabuilder/src/script/pages/app-report.ts index 7596b39d7..d7cafbdfe 100644 --- a/apps/pwabuilder/src/script/pages/app-report.ts +++ b/apps/pwabuilder/src/script/pages/app-report.ts @@ -1650,12 +1650,6 @@ export class AppReport extends LitElement { this.pageNumber = 1; } - copyReportCardLink() { - navigator.clipboard.writeText(window.location.href).then(() => { - setTimeout(() =>{this.shadowRoot!.querySelector("#cl-mani-tooltip")!.removeAttribute('open')}, 2000) - }) - } - // Opens manifest editor and tracks analytics async openManifestEditorModal() { let dialog: any = this.shadowRoot!.querySelector("manifest-editor-frame")!.shadowRoot!.querySelector(".dialog"); @@ -2461,7 +2455,7 @@ export class AppReport extends LitElement { } - + ${this.manifestDataLoading ? html`` : html` this.addRetestTodo("Manifest")}>`} diff --git a/apps/pwabuilder/src/script/services/publish/windows-publish.ts b/apps/pwabuilder/src/script/services/publish/windows-publish.ts index 865caa602..290727dea 100644 --- a/apps/pwabuilder/src/script/services/publish/windows-publish.ts +++ b/apps/pwabuilder/src/script/services/publish/windows-publish.ts @@ -228,7 +228,7 @@ export const windowsLanguages = [ { "codes": ["et", "et-ee"], "name": "Estonian" }, { "codes": ["fil", "fil-latn", "fil-ph"], "name": "Filipino" }, { "codes": ["fi", "fi-fi"], "name": "Finnish" }, - { "codes": ["fr", "fr-be ", "fr-ca ", "fr-ch ", "fr-fr ", "fr-lu", "fr-015", "fr-cd", "fr-ci", "fr-cm", "fr-ht", "fr-ma", "fr-mc", "fr-ml", "fr-re", "frc-latn", "frp-latn", "fr-155", "fr-029", "fr-021", "fr-011"], "name": "French" }, + { "codes": ["fr", "fr-be", "fr-ca", "fr-ch", "fr-fr", "fr-lu", "fr-015", "fr-cd", "fr-ci", "fr-cm", "fr-ht", "fr-ma", "fr-mc", "fr-ml", "fr-re", "frc-latn", "frp-latn", "fr-155", "fr-029", "fr-021", "fr-011"], "name": "French" }, { "codes": ["gl", "gl-es"], "name": "Galician" }, { "codes": ["ka", "ka-ge"], "name": "Georgian" }, { "codes": ["de", "de-at", "de-ch", "de-de", "de-lu", "de-li"], "name": "German" }, diff --git a/apps/pwabuilder/src/shoelace.ts b/apps/pwabuilder/src/shoelace.ts index 2458a4b54..1de298486 100644 --- a/apps/pwabuilder/src/shoelace.ts +++ b/apps/pwabuilder/src/shoelace.ts @@ -16,6 +16,7 @@ import '@shoelace-style/shoelace/dist/components/tab-panel/tab-panel'; import '@shoelace-style/shoelace/dist/components/textarea/textarea'; import '@shoelace-style/shoelace/dist/components/tooltip/tooltip'; import '@shoelace-style/shoelace/dist/components/skeleton/skeleton'; +import '@shoelace-style/shoelace/dist/components/option/option'; // also needed for site diff --git a/components/manifest-editor/src/components/manifest-icons-form.ts b/components/manifest-editor/src/components/manifest-icons-form.ts index 3b83ae673..504a6b483 100644 --- a/components/manifest-editor/src/components/manifest-icons-form.ts +++ b/components/manifest-editor/src/components/manifest-icons-form.ts @@ -58,6 +58,11 @@ export class ManifestIconsForm extends LitElement { static get styles() { return css` + :host { + --sl-input-font-family: Hind, sans-serif; + } + + sl-checkbox::part(base), sl-checkbox::part(control), sl-button::part(base) { diff --git a/components/manifest-editor/src/components/manifest-info-form.ts b/components/manifest-editor/src/components/manifest-info-form.ts index 0f374828c..27f7c6b66 100644 --- a/components/manifest-editor/src/components/manifest-info-form.ts +++ b/components/manifest-editor/src/components/manifest-info-form.ts @@ -36,11 +36,12 @@ export class ManifestInfoForm extends LitElement { --sl-input-focus-ring-color: #4f3fb670; --sl-focus-ring: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color); --sl-input-border-color-focus: #4F3FB6ac; + --sl-input-font-family: Hind, sans-serif; } sl-input::part(base), sl-textarea::part(base), - sl-menu-item::part(base), + sl-option::part(base), sl-color-picker::part(base), sl-button::part(base) { --sl-input-font-size-medium: 16px; @@ -166,12 +167,12 @@ export class ManifestInfoForm extends LitElement { width: 100%; } - sl-menu-item:focus-within::part(base) { + sl-option:focus-within::part(base) { color: #ffffff; background-color: #4F3FB6; } - sl-menu-item::part(base):hover{ + sl-option::part(base):hover{ color: #ffffff; background-color: #4F3FB6; } @@ -212,7 +213,7 @@ export class ManifestInfoForm extends LitElement { @media(max-width: 480px){ sl-input::part(base), - sl-menu-item::part(base) { + sl-option::part(base) { --sl-input-font-size-medium: 14px; --sl-font-size-medium: 14px; --sl-input-height-medium: 2.5em; @@ -594,7 +595,7 @@ export class ManifestInfoForm extends LitElement {

Select a Background color

- this.handleColorSwitch("background_color")}> + this.handleColorSwitch("background_color")}>

${this.manifest.background_color?.toLocaleUpperCase() || defaultColor}

 @@ -618,7 +619,7 @@ export class ManifestInfoForm extends LitElement {

Select a Theme color

- this.handleColorSwitch("theme_color")}> + this.handleColorSwitch("theme_color")}>

${this.manifest.theme_color?.toLocaleUpperCase() || defaultColor}

 diff --git a/components/manifest-editor/src/components/manifest-platform-form.ts b/components/manifest-editor/src/components/manifest-platform-form.ts index cb7b820cb..8768b5709 100644 --- a/components/manifest-editor/src/components/manifest-platform-form.ts +++ b/components/manifest-editor/src/components/manifest-platform-form.ts @@ -42,11 +42,12 @@ export class ManifestPlatformForm extends LitElement { --sl-input-focus-ring-color: #4f3fb670; --sl-focus-ring: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color); --sl-input-border-color-focus: #4F3FB6ac; + --sl-input-font-family: Hind, sans-serif; } sl-input::part(base), - sl-select::part(control), - sl-menu-item::part(base), + sl-select::part(form-control), + sl-option::part(base), sl-button::part(base), sl-checkbox::part(base), sl-checkbox::part(control), @@ -56,8 +57,10 @@ export class ManifestPlatformForm extends LitElement { --sl-font-size-medium: 16px; --sl-input-height-medium: 3em; --sl-toggle-size: 16px; + --sl-toggle-size-small: 16px; + --sl-input-font-size-small: 16px; } - sl-details::part(base), sl-select::part(control), sl-input::part(base){ + sl-details::part(base), sl-select::part(combobox), sl-input::part(base){ background-color: #fbfbfb; } #form-holder { @@ -79,7 +82,7 @@ export class ManifestPlatformForm extends LitElement { color: #717171; } sl-input::part(input), - sl-select::part(display-label), + sl-select::part(display-input), sl-details::part(summary){ color: #717171; } @@ -141,12 +144,12 @@ export class ManifestPlatformForm extends LitElement { sl-menu { width: 100%; } - sl-menu-item:focus-within::part(base) { + sl-option:focus-within::part(base) { color: #ffffff; background-color: #4F3FB6; } - sl-menu-item::part(base):hover{ + sl-option::part(base):hover{ color: #ffffff; background-color: #4F3FB6; } @@ -272,7 +275,7 @@ export class ManifestPlatformForm extends LitElement { } } - @media(max-width: 600px){ + @media(max-width: 650px){ #cat-field { grid-template-columns: repeat(3, auto); } @@ -280,8 +283,8 @@ export class ManifestPlatformForm extends LitElement { @media(max-width: 480px){ sl-input::part(base), - sl-select::part(control), - sl-menu-item::part(base), + sl-select::part(form-control), + sl-option::part(base), sl-button::part(base), sl-checkbox::part(base), sl-checkbox::part(control) { @@ -538,7 +541,7 @@ export class ManifestPlatformForm extends LitElement {
this.addRelatedAppToManifest(e)}>

Related App #${this.manifest.related_applications ? this.manifest.related_applications.length + 1 : 1}

- ${platformOptions.map((_, i: number) => html`${platformText[i]}` )} + ${platformOptions.map((_, i: number) => html`${platformText[i]}` )} @@ -893,8 +896,8 @@ export class ManifestPlatformForm extends LitElement {

Should a user prefer a related app to this one

- true - false + true + false
@@ -925,7 +928,7 @@ export class ManifestPlatformForm extends LitElement { this.removeData("related " + i.toString())}> this.updateExistingData("related " + i.toString())}> - ${platformOptions.map((_, i: number) => html`${platformText[i]}` )} + ${platformOptions.map((_, i: number) => html`${platformText[i]}` )} this.updateExistingData("related " + i.toString())}> this.updateExistingData("related " + i.toString())}> @@ -1022,7 +1025,7 @@ export class ManifestPlatformForm extends LitElement {

The categories your PWA belongs to

${standardCategories.map((cat: string) => - html` this.updateCategories()} value=${cat} ?checked=${this.manifest.categories?.includes(cat)}>${cat}` + html` this.updateCategories()} value=${cat} ?checked=${this.manifest.categories?.includes(cat)}>${cat}` )}
diff --git a/components/manifest-editor/src/components/manifest-screenshots-form.ts b/components/manifest-editor/src/components/manifest-screenshots-form.ts index 95ffc059d..6d1fd30b7 100644 --- a/components/manifest-editor/src/components/manifest-screenshots-form.ts +++ b/components/manifest-editor/src/components/manifest-screenshots-form.ts @@ -50,6 +50,7 @@ export class ManifestScreenshotsForm extends LitElement { --sl-input-focus-ring-color: #4f3fb670; --sl-focus-ring: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color); --sl-input-border-color-focus: #4F3FB6ac; + --sl-input-font-family: Hind, sans-serif; } sl-input::part(base), sl-select::part(control), @@ -63,8 +64,6 @@ export class ManifestScreenshotsForm extends LitElement { sl-select::part(control){ background-color: #fbfbfb; } - - #form-holder { display: flex; diff --git a/components/manifest-editor/src/components/manifest-settings-form.ts b/components/manifest-editor/src/components/manifest-settings-form.ts index 28a30e6aa..4b316f439 100644 --- a/components/manifest-editor/src/components/manifest-settings-form.ts +++ b/components/manifest-editor/src/components/manifest-settings-form.ts @@ -35,11 +35,13 @@ export class ManifestSettingsForm extends LitElement { --sl-input-focus-ring-color: #4f3fb670; --sl-focus-ring: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color); --sl-input-border-color-focus: #4F3FB6ac; + --sl-input-font-family: Hind, sans-serif; } sl-input::part(base), - sl-select::part(control), + sl-select::part(form-control), sl-menu-item::part(base), + sl-option::part(base), sl-menu-label::part(base), sl-checkbox::part(base) { --sl-input-font-size-medium: 16px; @@ -47,9 +49,11 @@ export class ManifestSettingsForm extends LitElement { --sl-font-size-small: 14px; --sl-input-height-medium: 3em; --sl-toggle-size: 16px; + --sl-toggle-size-small: 16px; + --sl-input-font-size-small: 16px; } sl-input::part(base), - sl-select::part(control), + sl-select::part(combobox), sl-details::part(base){ background-color: #fbfbfb; } @@ -72,7 +76,7 @@ export class ManifestSettingsForm extends LitElement { color: #717171; } sl-input::part(input), - sl-select::part(display-label), + sl-select::part(display-input), sl-details::part(summary){ color: #717171; } @@ -213,6 +217,16 @@ export class ManifestSettingsForm extends LitElement { background-color: #4F3FB6; } + sl-option:focus-within::part(base) { + color: #ffffff; + background-color: #4F3FB6; + } + + sl-option::part(base):hover { + color: #ffffff; + background-color: #4F3FB6; + } + sl-checkbox[checked]::part(control) { background-color: #4f3fb6; border-color: #4f3fb6; @@ -233,7 +247,8 @@ export class ManifestSettingsForm extends LitElement { @media(max-width: 480px){ sl-input::part(base), sl-select::part(control), - sl-menu-item::part(base) { + sl-menu-item::part(base), + sl-option::part(base) { --sl-input-font-size-medium: 14px; --sl-font-size-medium: 14px; --sl-input-height-medium: 2.5em; @@ -577,7 +592,7 @@ export class ManifestSettingsForm extends LitElement {

The text direction of your PWA

- ${dirOptions.map((option: string) => html`${option}`)} + ${dirOptions.map((option: string) => html`${option}`)} @@ -620,7 +635,7 @@ export class ManifestSettingsForm extends LitElement {

The primary language of your app

- ${languageCodes.map((lang: langCodes) => html`${lang.formatted}`)} + ${languageCodes.map((lang: langCodes) => html`${lang.formatted}`)} @@ -643,7 +658,7 @@ export class ManifestSettingsForm extends LitElement {

The default screen orientation of your app

- ${orientationOptions.map((option: string) => html`${option}`)} + ${orientationOptions.map((option: string) => html`${option}`)}
@@ -664,7 +679,7 @@ export class ManifestSettingsForm extends LitElement {

The appearance of your app window

- ${displayOptions.map((option: string) => html`${option}`)} + ${displayOptions.map((option: string) => html`${option}`)} @@ -704,7 +719,7 @@ export class ManifestSettingsForm extends LitElement {
${overrideOptions.map((item: string) => html` - this.toggleOverrideList(item, "checkbox")} ?checked=${this.activeOverrideItems.includes(item)}> + this.toggleOverrideList(item, "checkbox")} ?checked=${this.activeOverrideItems.includes(item)}> ${item} `)} diff --git a/libraries/manifest-validation/src/validations.ts b/libraries/manifest-validation/src/validations.ts index e566404ac..d2688f9be 100644 --- a/libraries/manifest-validation/src/validations.ts +++ b/libraries/manifest-validation/src/validations.ts @@ -1,6 +1,6 @@ // import { currentManifest } from "."; import { Icon, Manifest, RelatedApplication, singleFieldValidation, Validation } from "./interfaces"; -import { containsStandardCategory, isAtLeast, isStandardOrientation, isValidLanguageCode, validateSingleRelatedApp, validProtocols } from "./utils/validation-utils"; +import { isAtLeast, isStandardOrientation, isValidLanguageCode, validateSingleRelatedApp, validProtocols } from "./utils/validation-utils"; export const maniTests: Array = [ {