@spectrum-web-components/reactive-controllers 1.9.1 → 1.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/reactive-controllers",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.10.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"repository": {
|
|
10
10
|
"type": "git",
|
|
11
11
|
"url": "https://github.com/adobe/spectrum-web-components.git",
|
|
12
|
-
"directory": "tools/reactive-controllers"
|
|
12
|
+
"directory": "1st-gen/tools/reactive-controllers"
|
|
13
13
|
},
|
|
14
14
|
"author": "Adobe",
|
|
15
15
|
"homepage": "https://opensource.adobe.com/spectrum-web-components/tools/reactive-controllers",
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
"css"
|
|
90
90
|
],
|
|
91
91
|
"dependencies": {
|
|
92
|
-
"@spectrum-web-components/progress-circle": "1.
|
|
92
|
+
"@spectrum-web-components/progress-circle": "1.10.0",
|
|
93
93
|
"colorjs.io": "0.5.2",
|
|
94
94
|
"lit": "^2.5.0 || ^3.1.3"
|
|
95
95
|
},
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["PendingState.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport '@spectrum-web-components/progress-circle/sp-progress-circle.js';\nimport { html, LitElement, ReactiveController, TemplateResult } from 'lit';\n\n/**\n * Renders a pending state visual element and manages the aria-label of the host element.\n
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport '@spectrum-web-components/progress-circle/sp-progress-circle.js';\nimport { html, LitElement, ReactiveController, TemplateResult } from 'lit';\n\n/**\n * Renders a pending state visual element and manages the aria-label of the host element.\n *\n * Currently this is used by Button only since the host element is the interactive element that needs pending state. This pattern does not work for components where the interactive element that needs pending state is in the shadow DOM. i.e. Combobox and Picker.\n *\n * @TODO consider deprecating this controller since it is not used by any other component.\n */\nexport interface HostWithPendingState extends LitElement {\n pendingLabel?: string;\n pending: boolean;\n disabled: boolean;\n pendingStateController: PendingStateController<HostWithPendingState>;\n}\n\n/**\n * Represents a controller for managing the pending state of a reactive element.\n *\n * @template T - The type of the reactive element.\n */\nexport class PendingStateController<T extends HostWithPendingState>\n implements ReactiveController\n{\n /**\n * The host element that this controller is attached to.\n */\n public host: T;\n\n /**\n * Creates an instance of PendingStateController.\n * @param host - The host element that this controller is attached to.\n */\n constructor(host: T) {\n this.host = host;\n this.host.addController(this);\n }\n\n public cachedAriaLabel: string | null = null;\n /**\n * Renders the pending state UI.\n * @returns A TemplateResult representing the pending state UI.\n *\n * @TODO [SWC-1119, SWC-1255, SWC-459] Confirm the accessibility warning and a11y dom tree are accurate for the pending state in button, combobox, and picker components.\n */\n public renderPendingState(): TemplateResult {\n return this.host.pending\n ? html`\n <sp-progress-circle\n id=\"loader\"\n size=\"s\"\n indeterminate\n class=\"progress-circle\"\n role=\"presentation\"\n ></sp-progress-circle>\n `\n : html``;\n }\n\n /**\n * Updates the ARIA label of the host element based on the pending state.\n * Manages Cached Aria Label\n */\n private updateAriaLabel(): void {\n const { pending, disabled, pendingLabel } = this.host;\n const currentAriaLabel = this.host.getAttribute('aria-label');\n\n function shouldCacheAriaLabel(\n cached: string | null,\n current: string | null,\n pending: string | undefined\n ): boolean {\n return (\n (!cached && current !== pending) ||\n (cached !== current && current !== pending)\n );\n }\n\n // If the current `aria-label` is different from the pending label, cache it\n // or if the cached `aria-label` is different from the current `aria-label`, cache it\n if (\n shouldCacheAriaLabel(\n this.cachedAriaLabel,\n currentAriaLabel,\n pendingLabel\n )\n ) {\n this.cachedAriaLabel = currentAriaLabel;\n }\n\n if (pending && !disabled) {\n // Since it is pending, we set the aria-label to `pendingLabel` or \"Pending\"\n this.host.setAttribute('aria-label', pendingLabel || 'Pending');\n } else {\n // Restore the cached `aria-label` if it exists\n if (this.cachedAriaLabel) {\n this.host.setAttribute('aria-label', this.cachedAriaLabel);\n } else {\n this.host.removeAttribute('aria-label');\n }\n }\n }\n\n hostConnected(): void {\n if (!this.cachedAriaLabel)\n this.cachedAriaLabel = this.host.getAttribute('aria-label');\n this.updateAriaLabel();\n }\n\n hostUpdated(): void {\n this.updateAriaLabel();\n }\n}\n"],
|
|
5
5
|
"mappings": ";AAYA,OAAO;AACP,SAAS,YAA4D;AAqB9D,aAAM,uBAEb;AAAA;AAAA;AAAA;AAAA;AAAA,EAUI,YAAY,MAAS;AAKrB,SAAO,kBAAiC;AAJpC,SAAK,OAAO;AACZ,SAAK,KAAK,cAAc,IAAI;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASO,qBAAqC;AACxC,WAAO,KAAK,KAAK,UACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBASA;AAAA,EACV;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,kBAAwB;AAC5B,UAAM,EAAE,SAAS,UAAU,aAAa,IAAI,KAAK;AACjD,UAAM,mBAAmB,KAAK,KAAK,aAAa,YAAY;AAE5D,aAAS,qBACL,QACA,SACAA,UACO;AACP,aACK,CAAC,UAAU,YAAYA,YACvB,WAAW,WAAW,YAAYA;AAAA,IAE3C;AAIA,QACI;AAAA,MACI,KAAK;AAAA,MACL;AAAA,MACA;AAAA,IACJ,GACF;AACE,WAAK,kBAAkB;AAAA,IAC3B;AAEA,QAAI,WAAW,CAAC,UAAU;AAEtB,WAAK,KAAK,aAAa,cAAc,gBAAgB,SAAS;AAAA,IAClE,OAAO;AAEH,UAAI,KAAK,iBAAiB;AACtB,aAAK,KAAK,aAAa,cAAc,KAAK,eAAe;AAAA,MAC7D,OAAO;AACH,aAAK,KAAK,gBAAgB,YAAY;AAAA,MAC1C;AAAA,IACJ;AAAA,EACJ;AAAA,EAEA,gBAAsB;AAClB,QAAI,CAAC,KAAK;AACN,WAAK,kBAAkB,KAAK,KAAK,aAAa,YAAY;AAC9D,SAAK,gBAAgB;AAAA,EACzB;AAAA,EAEA,cAAoB;AAChB,SAAK,gBAAgB;AAAA,EACzB;AACJ;",
|
|
6
6
|
"names": ["pending"]
|
|
7
7
|
}
|
package/src/PendingState.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["PendingState.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport '@spectrum-web-components/progress-circle/sp-progress-circle.js';\nimport { html, LitElement, ReactiveController, TemplateResult } from 'lit';\n\n/**\n * Renders a pending state visual element and manages the aria-label of the host element.\n
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport '@spectrum-web-components/progress-circle/sp-progress-circle.js';\nimport { html, LitElement, ReactiveController, TemplateResult } from 'lit';\n\n/**\n * Renders a pending state visual element and manages the aria-label of the host element.\n *\n * Currently this is used by Button only since the host element is the interactive element that needs pending state. This pattern does not work for components where the interactive element that needs pending state is in the shadow DOM. i.e. Combobox and Picker.\n *\n * @TODO consider deprecating this controller since it is not used by any other component.\n */\nexport interface HostWithPendingState extends LitElement {\n pendingLabel?: string;\n pending: boolean;\n disabled: boolean;\n pendingStateController: PendingStateController<HostWithPendingState>;\n}\n\n/**\n * Represents a controller for managing the pending state of a reactive element.\n *\n * @template T - The type of the reactive element.\n */\nexport class PendingStateController<T extends HostWithPendingState>\n implements ReactiveController\n{\n /**\n * The host element that this controller is attached to.\n */\n public host: T;\n\n /**\n * Creates an instance of PendingStateController.\n * @param host - The host element that this controller is attached to.\n */\n constructor(host: T) {\n this.host = host;\n this.host.addController(this);\n }\n\n public cachedAriaLabel: string | null = null;\n /**\n * Renders the pending state UI.\n * @returns A TemplateResult representing the pending state UI.\n *\n * @TODO [SWC-1119, SWC-1255, SWC-459] Confirm the accessibility warning and a11y dom tree are accurate for the pending state in button, combobox, and picker components.\n */\n public renderPendingState(): TemplateResult {\n return this.host.pending\n ? html`\n <sp-progress-circle\n id=\"loader\"\n size=\"s\"\n indeterminate\n class=\"progress-circle\"\n role=\"presentation\"\n ></sp-progress-circle>\n `\n : html``;\n }\n\n /**\n * Updates the ARIA label of the host element based on the pending state.\n * Manages Cached Aria Label\n */\n private updateAriaLabel(): void {\n const { pending, disabled, pendingLabel } = this.host;\n const currentAriaLabel = this.host.getAttribute('aria-label');\n\n function shouldCacheAriaLabel(\n cached: string | null,\n current: string | null,\n pending: string | undefined\n ): boolean {\n return (\n (!cached && current !== pending) ||\n (cached !== current && current !== pending)\n );\n }\n\n // If the current `aria-label` is different from the pending label, cache it\n // or if the cached `aria-label` is different from the current `aria-label`, cache it\n if (\n shouldCacheAriaLabel(\n this.cachedAriaLabel,\n currentAriaLabel,\n pendingLabel\n )\n ) {\n this.cachedAriaLabel = currentAriaLabel;\n }\n\n if (pending && !disabled) {\n // Since it is pending, we set the aria-label to `pendingLabel` or \"Pending\"\n this.host.setAttribute('aria-label', pendingLabel || 'Pending');\n } else {\n // Restore the cached `aria-label` if it exists\n if (this.cachedAriaLabel) {\n this.host.setAttribute('aria-label', this.cachedAriaLabel);\n } else {\n this.host.removeAttribute('aria-label');\n }\n }\n }\n\n hostConnected(): void {\n if (!this.cachedAriaLabel)\n this.cachedAriaLabel = this.host.getAttribute('aria-label');\n this.updateAriaLabel();\n }\n\n hostUpdated(): void {\n this.updateAriaLabel();\n }\n}\n"],
|
|
5
5
|
"mappings": "aAYA,MAAO,iEACP,OAAS,QAAAA,MAA4D,MAqB9D,aAAM,sBAEb,CAUI,YAAYC,EAAS,CAKrB,KAAO,gBAAiC,KAJpC,KAAK,KAAOA,EACZ,KAAK,KAAK,cAAc,IAAI,CAChC,CASO,oBAAqC,CACxC,OAAO,KAAK,KAAK,QACXD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBASAA,GACV,CAMQ,iBAAwB,CAC5B,KAAM,CAAE,QAAAE,EAAS,SAAAC,EAAU,aAAAC,CAAa,EAAI,KAAK,KAC3CC,EAAmB,KAAK,KAAK,aAAa,YAAY,EAE5D,SAASC,EACLC,EACAC,EACAN,EACO,CACP,MACK,CAACK,GAAUC,IAAYN,GACvBK,IAAWC,GAAWA,IAAYN,CAE3C,CAKII,EACI,KAAK,gBACLD,EACAD,CACJ,IAEA,KAAK,gBAAkBC,GAGvBH,GAAW,CAACC,EAEZ,KAAK,KAAK,aAAa,aAAcC,GAAgB,SAAS,EAG1D,KAAK,gBACL,KAAK,KAAK,aAAa,aAAc,KAAK,eAAe,EAEzD,KAAK,KAAK,gBAAgB,YAAY,CAGlD,CAEA,eAAsB,CACb,KAAK,kBACN,KAAK,gBAAkB,KAAK,KAAK,aAAa,YAAY,GAC9D,KAAK,gBAAgB,CACzB,CAEA,aAAoB,CAChB,KAAK,gBAAgB,CACzB,CACJ",
|
|
6
6
|
"names": ["html", "host", "pending", "disabled", "pendingLabel", "currentAriaLabel", "shouldCacheAriaLabel", "cached", "current"]
|
|
7
7
|
}
|