@spectrum-web-components/swatch 0.1.0

package/custom-elements.json

@@ -0,0 +1,600 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "sp-swatch-group.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "sp-swatch-group",
+          "declaration": {
+            "name": "SwatchGroup",
+            "module": "/src/SwatchGroup.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "sp-swatch.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "sp-swatch",
+          "declaration": {
+            "name": "Swatch",
+            "module": "/src/Swatch.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/Swatch.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "Swatch",
+          "members": [
+            {
+              "kind": "field",
+              "name": "border",
+              "type": {
+                "text": "SwatchBorder"
+              },
+              "privacy": "public",
+              "attribute": "border",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "''",
+              "attribute": "color"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "''",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "mixedValue",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "attribute": "mixed-value",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "nothing",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "attribute": "nothing",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "role",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "'button'",
+              "attribute": "role",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "rounding",
+              "type": {
+                "text": "SwatchRounding"
+              },
+              "privacy": "public",
+              "attribute": "rounding",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "attribute": "selected",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "shape",
+              "type": {
+                "text": "SwatchShape"
+              },
+              "privacy": "public",
+              "attribute": "shape",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "_value",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "focusElement",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "public"
+            },
+            {
+              "kind": "method",
+              "name": "toggle",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "force",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleKeydown",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleKeypress",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyup",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "renderDisabled",
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "renderMixedValue",
+              "privacy": "protected"
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "Event"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "border",
+              "type": {
+                "text": "SwatchBorder"
+              },
+              "fieldName": "border"
+            },
+            {
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "color"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "label"
+            },
+            {
+              "name": "mixed-value",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "mixedValue"
+            },
+            {
+              "name": "nothing",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "nothing"
+            },
+            {
+              "name": "role",
+              "type": {
+                "text": "string"
+              },
+              "default": "'button'",
+              "fieldName": "role"
+            },
+            {
+              "name": "rounding",
+              "type": {
+                "text": "SwatchRounding"
+              },
+              "fieldName": "rounding"
+            },
+            {
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "selected"
+            },
+            {
+              "name": "shape",
+              "type": {
+                "text": "SwatchShape"
+              },
+              "fieldName": "shape"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "value"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "SizedMixin",
+              "package": "@spectrum-web-components/base"
+            }
+          ],
+          "superclass": {
+            "name": "Focusable",
+            "package": "@spectrum-web-components/shared/src/focusable.js"
+          },
+          "tagName": "sp-swatch",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Swatch",
+          "declaration": {
+            "name": "Swatch",
+            "module": "src/Swatch.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/SwatchGroup.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SwatchGroup",
+          "slots": [
+            {
+              "description": "Swatch elements to manage as a group",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "border",
+              "type": {
+                "text": "SwatchBorder"
+              },
+              "privacy": "public",
+              "attribute": "border",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "rounding",
+              "type": {
+                "text": "SwatchRounding"
+              },
+              "privacy": "public",
+              "attribute": "rounding",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "string[]"
+              },
+              "privacy": "public",
+              "attribute": "selected"
+            },
+            {
+              "kind": "field",
+              "name": "_selected",
+              "type": {
+                "text": "string[]"
+              },
+              "privacy": "private",
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "selects",
+              "type": {
+                "text": "'single' | 'multiple' | undefined"
+              },
+              "privacy": "public",
+              "attribute": "selects"
+            },
+            {
+              "kind": "field",
+              "name": "selectedSet",
+              "privacy": "private",
+              "default": "new Set<string>()"
+            },
+            {
+              "kind": "field",
+              "name": "shape",
+              "type": {
+                "text": "SwatchShape"
+              },
+              "privacy": "public",
+              "attribute": "shape",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "rovingTabindexController",
+              "default": "new RovingTabindexController<Swatch>(this, {\n        focusInIndex: (elements: Swatch[]) => {\n            let firstEnabledIndex = -1;\n            const firstSelectedIndex = elements.findIndex((el, index) => {\n                if (!elements[firstEnabledIndex] && !el.disabled) {\n                    firstEnabledIndex = index;\n                }\n                return el.selected && !el.disabled;\n            });\n            return elements[firstSelectedIndex]\n                ? firstSelectedIndex\n                : firstEnabledIndex;\n        },\n        elements: () => [...this.children] as Swatch[],\n        isFocusableElement: (el: Swatch) => !el.disabled,\n    })"
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleChange",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event & { target: Swatch }"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "manageChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "getPassthroughSwatchActions",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "((swatch: Swatch) => void)[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "changes",
+                  "type": {
+                    "text": "PropertyValues"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "getSelectionSwatchActions",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "((swatch: Swatch) => void)[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "changes",
+                  "type": {
+                    "text": "PropertyValues"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "Event"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "border",
+              "type": {
+                "text": "SwatchBorder"
+              },
+              "fieldName": "border"
+            },
+            {
+              "name": "rounding",
+              "type": {
+                "text": "SwatchRounding"
+              },
+              "fieldName": "rounding"
+            },
+            {
+              "name": "selected",
+              "type": {
+                "text": "string[]"
+              },
+              "fieldName": "selected"
+            },
+            {
+              "name": "selects",
+              "type": {
+                "text": "'single' | 'multiple' | undefined"
+              },
+              "fieldName": "selects"
+            },
+            {
+              "name": "shape",
+              "type": {
+                "text": "SwatchShape"
+              },
+              "fieldName": "shape"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "SizedMixin",
+              "package": "@spectrum-web-components/base"
+            }
+          ],
+          "superclass": {
+            "name": "SpectrumElement",
+            "package": "@spectrum-web-components/base"
+          },
+          "tagName": "sp-swatch-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SwatchGroup",
+          "declaration": {
+            "name": "SwatchGroup",
+            "module": "src/SwatchGroup.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/package.json

@@ -0,0 +1,64 @@
+{
+    "name": "@spectrum-web-components/swatch",
+    "version": "0.1.0",
+    "publishConfig": {
+        "access": "public"
+    },
+    "description": "Web component implementation of a Spectrum design Swatch",
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/adobe/spectrum-web-components.git",
+        "directory": "packages/swatch"
+    },
+    "author": "",
+    "homepage": "https://adobe.github.io/spectrum-web-components/components/swatch",
+    "bugs": {
+        "url": "https://github.com/adobe/spectrum-web-components/issues"
+    },
+    "main": "src/index.js",
+    "module": "src/index.js",
+    "type": "module",
+    "exports": {
+        ".": "./src/index.js",
+        "./src/*": "./src/*",
+        "./package.json": "./package.json",
+        "./sp-swatch": "./sp-swatch.js",
+        "./sp-swatch.js": "./sp-swatch.js",
+        "./sp-swatch-group": "./sp-swatch-group.js",
+        "./sp-swatch-group.js": "./sp-swatch-group.js"
+    },
+    "scripts": {
+        "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
+    },
+    "files": [
+        "**/*.d.ts",
+        "**/*.js",
+        "**/*.js.map",
+        "custom-elements.json",
+        "!stories/",
+        "!test/"
+    ],
+    "keywords": [
+        "spectrum css",
+        "web components",
+        "lit-element",
+        "lit-html"
+    ],
+    "dependencies": {
+        "@spectrum-web-components/base": "^0.5.8",
+        "@spectrum-web-components/reactive-controllers": "^0.2.4",
+        "@spectrum-web-components/shared": "^0.14.3",
+        "tslib": "^2.0.0"
+    },
+    "devDependencies": {
+        "@spectrum-css/swatch": "^1.1.1",
+        "@spectrum-css/swatchgroup": "^1.1.1"
+    },
+    "types": "./src/index.d.ts",
+    "customElements": "custom-elements.json",
+    "sideEffects": [
+        "./sp-*.js"
+    ],
+    "gitHead": "e5cd4a0db2201b8126eb9133ac3c24172d086359"
+}

package/sp-swatch-group.d.ts

@@ -0,0 +1,6 @@
+import { SwatchGroup } from './src/SwatchGroup.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-swatch-group': SwatchGroup;
+    }
+}

package/sp-swatch-group.js

@@ -0,0 +1,14 @@
+/*
+Copyright 2022 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import { SwatchGroup } from './src/SwatchGroup.js';
+customElements.define('sp-swatch-group', SwatchGroup);
+//# sourceMappingURL=sp-swatch-group.js.map

package/sp-swatch-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-swatch-group.js","sourceRoot":"","sources":["sp-swatch-group.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,WAAW,CAAC,CAAC","sourcesContent":["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { SwatchGroup } from './src/SwatchGroup.js';\n\ncustomElements.define('sp-swatch-group', SwatchGroup);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-swatch-group': SwatchGroup;\n    }\n}\n"]}

package/sp-swatch.d.ts

@@ -0,0 +1,6 @@
+import { Swatch } from './src/Swatch.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-swatch': Swatch;
+    }
+}