From 6688805faf27d55d6733ba29e1726a5f7a1be3d9 Mon Sep 17 00:00:00 2001 From: Pascal Wilbrink Date: Tue, 3 Oct 2023 15:38:12 +0200 Subject: [PATCH 1/5] Added action pane --- components/oscd-action-pane/.gitignore | 20 ++ components/oscd-action-pane/.npmignore | 18 ++ .../oscd-action-pane/.storybook/main.ts | 30 +++ .../oscd-action-pane/.storybook/manager.ts | 5 + .../.storybook/preview-head.html | 16 ++ .../oscd-action-pane/.storybook/preview.ts | 44 ++++ components/oscd-action-pane/CHANGELOG.md | 1 + components/oscd-action-pane/EXAMPLE.md | 3 + components/oscd-action-pane/INTRO.md | 0 components/oscd-action-pane/LICENSE.md | 201 ++++++++++++++++++ components/oscd-action-pane/README.md | 29 +++ .../custom-elements-manifest.config.js | 6 + .../oscd-action-pane/custom-elements.json | 187 ++++++++++++++++ components/oscd-action-pane/package.json | 61 ++++++ components/oscd-action-pane/project.json | 33 +++ .../baseline/oscd-action-pane-icon.png | Bin 0 -> 6028 bytes .../Chromium/baseline/oscd-action-pane.png | Bin 0 -> 3936 bytes .../baseline/oscd-action-pane-icon.png | Bin 0 -> 6908 bytes .../Firefox/baseline/oscd-action-pane.png | Bin 0 -> 5054 bytes .../Firefox/failed/oscd-action-pane-icon.png | Bin 0 -> 6908 bytes .../Firefox/failed/oscd-action-pane.png | Bin 0 -> 5054 bytes .../Webkit/baseline/oscd-action-pane-icon.png | Bin 0 -> 7083 bytes .../Webkit/baseline/oscd-action-pane.png | Bin 0 -> 5110 bytes .../Webkit/failed/oscd-action-pane-icon.png | Bin 0 -> 7083 bytes .../Webkit/failed/oscd-action-pane.png | Bin 0 -> 5110 bytes .../oscd-action-pane/src/OscdActionPane.ts | 5 + .../src/oscd-action-pane.styles.ts | 101 +++++++++ .../oscd-action-pane/src/oscd-action-pane.ts | 131 ++++++++++++ .../stories/oscd-action-pane.mdx | 28 +++ .../stories/oscd-action-pane.stories.ts | 102 +++++++++ .../test/oscd-action-pane.spec.ts | 148 +++++++++++++ .../test/oscd-action-pane.test.ts | 44 ++++ components/oscd-action-pane/tsconfig.json | 25 +++ .../oscd-action-pane/tsconfig.storybook.json | 18 ++ .../oscd-action-pane/tsconfig.test.json | 7 + components/oscd-action-pane/typedoc.json | 4 + .../web-test-runner.config.js | 182 ++++++++++++++++ 37 files changed, 1449 insertions(+) create mode 100644 components/oscd-action-pane/.gitignore create mode 100644 components/oscd-action-pane/.npmignore create mode 100644 components/oscd-action-pane/.storybook/main.ts create mode 100644 components/oscd-action-pane/.storybook/manager.ts create mode 100644 components/oscd-action-pane/.storybook/preview-head.html create mode 100644 components/oscd-action-pane/.storybook/preview.ts create mode 100644 components/oscd-action-pane/CHANGELOG.md create mode 100644 components/oscd-action-pane/EXAMPLE.md create mode 100644 components/oscd-action-pane/INTRO.md create mode 100644 components/oscd-action-pane/LICENSE.md create mode 100644 components/oscd-action-pane/README.md create mode 100644 components/oscd-action-pane/custom-elements-manifest.config.js create mode 100644 components/oscd-action-pane/custom-elements.json create mode 100644 components/oscd-action-pane/package.json create mode 100644 components/oscd-action-pane/project.json create mode 100644 components/oscd-action-pane/screenshots/Chromium/baseline/oscd-action-pane-icon.png create mode 100644 components/oscd-action-pane/screenshots/Chromium/baseline/oscd-action-pane.png create mode 100644 components/oscd-action-pane/screenshots/Firefox/baseline/oscd-action-pane-icon.png create mode 100644 components/oscd-action-pane/screenshots/Firefox/baseline/oscd-action-pane.png create mode 100644 components/oscd-action-pane/screenshots/Firefox/failed/oscd-action-pane-icon.png create mode 100644 components/oscd-action-pane/screenshots/Firefox/failed/oscd-action-pane.png create mode 100644 components/oscd-action-pane/screenshots/Webkit/baseline/oscd-action-pane-icon.png create mode 100644 components/oscd-action-pane/screenshots/Webkit/baseline/oscd-action-pane.png create mode 100644 components/oscd-action-pane/screenshots/Webkit/failed/oscd-action-pane-icon.png create mode 100644 components/oscd-action-pane/screenshots/Webkit/failed/oscd-action-pane.png create mode 100644 components/oscd-action-pane/src/OscdActionPane.ts create mode 100644 components/oscd-action-pane/src/oscd-action-pane.styles.ts create mode 100644 components/oscd-action-pane/src/oscd-action-pane.ts create mode 100644 components/oscd-action-pane/stories/oscd-action-pane.mdx create mode 100644 components/oscd-action-pane/stories/oscd-action-pane.stories.ts create mode 100644 components/oscd-action-pane/test/oscd-action-pane.spec.ts create mode 100644 components/oscd-action-pane/test/oscd-action-pane.test.ts create mode 100644 components/oscd-action-pane/tsconfig.json create mode 100644 components/oscd-action-pane/tsconfig.storybook.json create mode 100644 components/oscd-action-pane/tsconfig.test.json create mode 100644 components/oscd-action-pane/typedoc.json create mode 100644 components/oscd-action-pane/web-test-runner.config.js diff --git a/components/oscd-action-pane/.gitignore b/components/oscd-action-pane/.gitignore new file mode 100644 index 0000000..63cc1db --- /dev/null +++ b/components/oscd-action-pane/.gitignore @@ -0,0 +1,20 @@ +## editors +/.idea +/.vscode + +## system files +.DS_Store + +## npm +/node_modules/ +/npm-debug.log +.tsbuildinfo + +## testing +/coverage/ + +## docs +/doc/ + +# build +/dist/ diff --git a/components/oscd-action-pane/.npmignore b/components/oscd-action-pane/.npmignore new file mode 100644 index 0000000..28f225d --- /dev/null +++ b/components/oscd-action-pane/.npmignore @@ -0,0 +1,18 @@ +## editors +/.idea +/.vscode + +## system files +.DS_Store + +## npm +/node_modules/ +/npm-debug.log +.tsbuildinfo + +## testing +/coverage/ + +## docs +/doc/ + diff --git a/components/oscd-action-pane/.storybook/main.ts b/components/oscd-action-pane/.storybook/main.ts new file mode 100644 index 0000000..c8e9fee --- /dev/null +++ b/components/oscd-action-pane/.storybook/main.ts @@ -0,0 +1,30 @@ +import type { StorybookConfig } from '@storybook/web-components-vite'; + +const config: StorybookConfig = { + stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)', '../stories/**/*.mdx'], + addons: [ + '@storybook/addon-docs', + '@storybook/addon-controls', + '@storybook/addon-actions', + '@storybook/addon-a11y', + '@storybook/addon-links', + { + name: '@storybook/adddon-essentials', + options: { + background: false, + }, + }, + '@etchteam/storybook-addon-status/register', + 'storybook-addon-root-attribute/register', + ], + framework: { + name: '@storybook/web-components-vite', + options: { + builder: { + viteConfigPath: '', + }, + }, + }, +}; + +export default config; diff --git a/components/oscd-action-pane/.storybook/manager.ts b/components/oscd-action-pane/.storybook/manager.ts new file mode 100644 index 0000000..66b6e89 --- /dev/null +++ b/components/oscd-action-pane/.storybook/manager.ts @@ -0,0 +1,5 @@ +import { addons } from '@storybook/manager-api'; + +addons.setConfig({ + enableShortcuts: false +}); diff --git a/components/oscd-action-pane/.storybook/preview-head.html b/components/oscd-action-pane/.storybook/preview-head.html new file mode 100644 index 0000000..89f0ee1 --- /dev/null +++ b/components/oscd-action-pane/.storybook/preview-head.html @@ -0,0 +1,16 @@ + + + diff --git a/components/oscd-action-pane/.storybook/preview.ts b/components/oscd-action-pane/.storybook/preview.ts new file mode 100644 index 0000000..94c4d5d --- /dev/null +++ b/components/oscd-action-pane/.storybook/preview.ts @@ -0,0 +1,44 @@ +import { setCustomElementsManifest } from '@storybook/web-components'; + +import { html } from 'lit'; +import { withRootAttribute } from 'storybook-addon-root-attribute'; + +import '../../../themes/prebuilt/oscd.css'; + +import customElements from '../custom-elements.json'; + +setCustomElementsManifest(customElements); + +export const decorators = [withRootAttribute]; + +export const parameters = { + controls: { expanded: true }, + actions: { argTypesRegex: '^on.*' }, + + statuses: { + released: { + background: '#0000ff', + color: '#ffffff', + description: 'This component is stable and released', + }, + beta: { + background: '#FF0000', + color: '#FFFFFF', + description: 'This component is still in beta', + }, + }, + rootAttribute: { + defaultState: { + name: 'Light', + value: null, + }, + attribute: 'dark', + tooltip: true, + states: [ + { + name: 'Dark', + value: 'dark', + }, + ], + }, +}; diff --git a/components/oscd-action-pane/CHANGELOG.md b/components/oscd-action-pane/CHANGELOG.md new file mode 100644 index 0000000..825c32f --- /dev/null +++ b/components/oscd-action-pane/CHANGELOG.md @@ -0,0 +1 @@ +# Changelog diff --git a/components/oscd-action-pane/EXAMPLE.md b/components/oscd-action-pane/EXAMPLE.md new file mode 100644 index 0000000..19b6555 --- /dev/null +++ b/components/oscd-action-pane/EXAMPLE.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/components/oscd-action-pane/INTRO.md b/components/oscd-action-pane/INTRO.md new file mode 100644 index 0000000..e69de29 diff --git a/components/oscd-action-pane/LICENSE.md b/components/oscd-action-pane/LICENSE.md new file mode 100644 index 0000000..c61b663 --- /dev/null +++ b/components/oscd-action-pane/LICENSE.md @@ -0,0 +1,201 @@ + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + +TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + +1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + +2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + +3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + +4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + +5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + +6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + +7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + +8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + +9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + +END OF TERMS AND CONDITIONS + +APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + +Copyright [yyyy] [name of copyright owner] + +Licensed 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 CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. diff --git a/components/oscd-action-pane/README.md b/components/oscd-action-pane/README.md new file mode 100644 index 0000000..ef9d1a7 --- /dev/null +++ b/components/oscd-action-pane/README.md @@ -0,0 +1,29 @@ +# `` ![NPM](https://img.shields.io/badge/NPM-0.0.1-cb0001) ![Status](https://img.shields.io/badge/WIP-3b72bf) + +--- + + + +## Example + +```html + +``` + +--- + +### Attributes + +| Name | Type | Description | +| ---- | ---- | ----------- | + +### Css Properties + +| Name | Default | Description | +| ----------------------------------- | ----------------------- | ---------------------------------- | +| --oscd-action-icon-theme-primary | --oscd-theme-primary | Color for border on even levels. | +| --oscd-action-icon-theme-on-primary | --oscd-theme-on-primary | Pane color for the uneven levels. | +| --oscd-action-icon-theme-secondary | --oscd-theme-secondary | Color for border on uneven levels. | +| --oscd-action-pane-theme-surface | --oscd-theme-surface | Pane color for the even levels. | +| --oscd-action-icon-theme-on-surface | --oscd-theme-on-surface | Icon and label color. | +| --oscd-action-icon-theme-font | --oscd-theme-font | Font for label. | \ No newline at end of file diff --git a/components/oscd-action-pane/custom-elements-manifest.config.js b/components/oscd-action-pane/custom-elements-manifest.config.js new file mode 100644 index 0000000..562fc21 --- /dev/null +++ b/components/oscd-action-pane/custom-elements-manifest.config.js @@ -0,0 +1,6 @@ +export default { + globs: ['src/*.ts'], + exclude: ['test/*.ts'], + litelement: true, + plugins: [], +}; diff --git a/components/oscd-action-pane/custom-elements.json b/components/oscd-action-pane/custom-elements.json new file mode 100644 index 0000000..7715414 --- /dev/null +++ b/components/oscd-action-pane/custom-elements.json @@ -0,0 +1,187 @@ +{ + "schemaVersion": "1.0.0", + "readme": "", + "modules": [ + { + "kind": "javascript-module", + "path": "src/OscdActionPane.ts", + "declarations": [], + "exports": [ + { + "kind": "custom-element-definition", + "name": "oscd-action-pane", + "declaration": { + "name": "OscdActionPane", + "module": "/src/oscd-action-pane" + } + }, + { + "kind": "js", + "name": "OscdActionPane", + "declaration": { + "name": "OscdActionPane", + "module": "src/OscdActionPane.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "*", + "declaration": { + "name": "*", + "package": "./OscdActionPane.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/oscd-action-pane.styles.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "module": "src/oscd-action-pane.styles.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/oscd-action-pane.ts", + "declarations": [ + { + "kind": "class", + "description": "", + "name": "OscdActionPane", + "cssProperties": [ + { + "description": "Color for border on even levels.", + "name": "--oscd-action-icon-theme-primary", + "default": "--oscd-theme-primary" + }, + { + "description": "Pane color for the uneven levels.", + "name": "--oscd-action-icon-theme-on-primary", + "default": "--oscd-theme-on-primary" + }, + { + "description": "Color for border on uneven levels.", + "name": "--oscd-action-icon-theme-secondary", + "default": "--oscd-theme-secondary" + }, + { + "description": "Pane color for the even levels.", + "name": "--oscd-action-pane-theme-surface", + "default": "--oscd-theme-surface" + }, + { + "description": "Icon and label color.", + "name": "--oscd-action-icon-theme-on-surface", + "default": "--oscd-theme-on-surface" + }, + { + "description": "Font for label.", + "name": "--oscd-action-icon-theme-font", + "default": "--oscd-theme-font" + } + ], + "slots": [ + { + "description": "May contain up to eight icon buttons.", + "name": "`action`" + }, + { + "description": "If filled overrides the icon property.", + "name": "`icon`" + }, + { + "description": "The default slot will be rendered into the pane body in a single column.", + "name": "`[default]`" + } + ], + "members": [ + { + "kind": "field", + "name": "label", + "type": { + "text": "string" + }, + "description": "Caption text, displayed in the header" + }, + { + "kind": "field", + "name": "icon", + "type": { + "text": "string" + }, + "description": "Icon name, displayed unless the \"icon\" slot is filled" + }, + { + "kind": "field", + "name": "secondary", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Color header with Secondary theme color while focus is within" + }, + { + "kind": "field", + "name": "highlighted", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Highlight pane with dotted outline" + }, + { + "kind": "field", + "name": "level", + "type": { + "text": "number" + }, + "default": "1", + "description": "Nesting level, default (closes pane ancestors level) + 1" + }, + { + "kind": "method", + "name": "renderHeader", + "privacy": "private", + "return": { + "type": { + "text": "TemplateResult" + } + } + } + ], + "superclass": { + "name": "OscdComponent", + "package": "@openscd/core" + }, + "tagName": "oscd-action-pane", + "summary": "A responsive container rendering actions in a header.", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "OscdActionPane", + "declaration": { + "name": "OscdActionPane", + "module": "src/oscd-action-pane.ts" + } + } + ] + } + ] +} diff --git a/components/oscd-action-pane/package.json b/components/oscd-action-pane/package.json new file mode 100644 index 0000000..f629838 --- /dev/null +++ b/components/oscd-action-pane/package.json @@ -0,0 +1,61 @@ +{ + "name": "@openscd/oscd-action-pane", + "description": "Webcomponent oscd-action-pane following open-wc recommendations", + "license": "Apache-2.0", + "author": "OpenSCD", + "version": "0.0.1", + "browser": "./dist/OscdActionPane.js", + "module": "./dist/OscdActionPane.js", + "types": "./dist/OscdActionPane.d.ts", + "files": [ + "./dist/**/*" + ], + "exports": { + ".": "./dist/OscdActionPane.js", + "./oscd-action-pane.js": "./dist/oscd-action-pane.js" + }, + "type": "module", + "readme": "./README.md", + "scripts": { + "analyze": "cem analyze", + "build": "tsc", + "clean": "rimraf .tsbuildinfo dist", + "storybook": "npx nx storybook oscd-action-pane", + "typedoc": "typedoc", + "test": "tsc --p tsconfig.test.json && wtr --coverage", + "test:unit": "tsc --p tsconfig.test.json && wtr --group default", + "test:visual": "tsc --p tsconfig.test.json && wtr --group visual", + "test:update": "tsc --p tsconfig.test.json && wtr --group visual --update-visual-baseline", + "test:watch": "tsc --p tsconfig.test.json && concurrently -k -r \"tsc --p tsconfig.test.json --watch --preserveWatchOutput\" \"wtr --watch\"" + }, + "dependencies": { + "@openscd/core": "*", + "lit": "^2.7.6" + }, + "devDependencies": { + "@commitlint/cli": "^17.3.0", + "@commitlint/config-conventional": "^17.3.0", + "@custom-elements-manifest/analyzer": "^0.4.17", + "@open-wc/demoing-storybook": "^2.4.7", + "@open-wc/eslint-config": "^8.0.2", + "@open-wc/scoped-elements": "^2.2.0", + "@open-wc/testing": "^3.1.6", + "@oscd/utils": "*", + "@typescript-eslint/eslint-plugin": "^4.33.0", + "@typescript-eslint/parser": "^4.33.0", + "@web/dev-server": "^0.1.34", + "@web/dev-server-storybook": "^0.5.4", + "@web/test-runner": "^0.14.0", + "@web/test-runner-playwright": "^0.9.0", + "@web/test-runner-visual-regression": "^0.7.0", + "concurrently": "^8.2.0", + "storybook-addon-root-attribute": "^1.0.2", + "tslib": "^2.6.0", + "typedoc": "^0.24.8", + "typescript": "^5.1.6" + }, + "customElements": "custom-elements.json", + "oscd": { + "status": "WIP" + } +} diff --git a/components/oscd-action-pane/project.json b/components/oscd-action-pane/project.json new file mode 100644 index 0000000..ed0e69e --- /dev/null +++ b/components/oscd-action-pane/project.json @@ -0,0 +1,33 @@ +{ + "name": "oscd-action-pane", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "library", + "sourceRoot": "components/oscd-action-pane/src", + "targets": { + "storybook": { + "executor": "@nx/storybook:storybook", + "options": { + "port": 4400, + "configDir": "components/oscd-action-pane/.storybook" + }, + "configurations": { + "ci": { + "quiet": true + } + } + }, + "build-storybook": { + "executor": "@nx/storybook:build", + "outputs": ["{options.outputDir}"], + "options": { + "outputDir": "dist/storybook/oscd-action-pane", + "configDir": "components/oscd-action-pane/.storybook" + }, + "configurations": { + "ci": { + "quiet": true + } + } + } + } +} diff --git a/components/oscd-action-pane/screenshots/Chromium/baseline/oscd-action-pane-icon.png b/components/oscd-action-pane/screenshots/Chromium/baseline/oscd-action-pane-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..5c0c0f098998b4a512ee20ec9f15202b1ed63d3a GIT binary patch literal 6028 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 ef2Ax*o7+ z`sOegw>a3_9Xkp>PcOds2!oxvh|Y@u|7bml?Yo&xRwFJ-Rvsl*qCP>Cx2V;V3?3^eW%{2{j@czqqJ$Qw3OmKxxA*m+_S4-8`#L2vl8Kt(gQKT?87bN>$ssEmjBQ( zXl0(h0xc<#utQ+^6M6VF^qBWkD75^_$8{Jip)SY7p+{pq7#CRV;s3#__lt|ZG{*`{ zOG|sznuUaf_y+{2*4&OYv$m!hk>zWHGP|5^=bKV|zJ4}yXEoS>y+u!k)&hPxNd}Wh zBIOJWpouF@g7P}TAOdG8S^lVZD_L*(gjGLts#%2EK4{ma#(IQqfwRBPGXr+!^KBXw zE?l^Nry6IGsZI3R+wzPR)3LP+-gcyH3J3^DYG`1EgoK(aH6qVIN3O8%hC5b|Nuc`r z`ZRn#Cv;OZ^E=22GV1D9Bmp?Q5bPJmYrS{&cbCteKQD(WEGTeJ?w+ji)U&X#zz0{0Sy@*=1}f~my|te9jt*wu3xi6(m3yduil#3D)uXkUj-c8#23J;v za7I<8)PMc;mO-3|;wXp%cB@*0Y(K&wJbCiOWo@>r413V%nx^WGKyk*ZF>~D%36xgA z*WN7M$B9WvgR)$?IXPGLB2V@$P1K+L@kgtNTBybB+J`Ob2!Bx zKG?4>4BrHY*7>dEAY9hjgVFKvY_Qe1;4tG*9px7(`0Foy@{Wj*(0qme>#{QQk&%&RThdsyhYV;kK$W?@eU_o2Az~uUg6gqV z(4!6&`T&pb4&B<`uH93WQBY9W-q|Uvsj>RSAP!wm;0XNfZ`q)vMQ+1%LlYBxVaVcp z#r4m9dgTv$hQhdckj}m0{(gSW%aaUJu8P}`^GKQF^=}U|{I6?kYwvtz-gF~2fB;Kn zX$>^XBG8S*;Mg^HIC$6iP9;)(rqlT1LiOdUt1`q%vUL6}724 zImRK3a5i{w=n^xQCsZJ8w9|3%j%2ypy1HRM{P4p-12M1?H-SAND35Fxl*1xWbwS%@ zyu7>*DzUM{!-S=AYj7#X(eY(&VEGx9v`Go7`&gALGtcC?f&)l}oUC9+cVXsDU}l$= zaI%|)^EUymACy|LAC)&uK^ImCtdH3&g@5{VulP>2DG3?4v4~yR1Jxug5nuH>mCp}Q zZ^JbSG!V@6)YJ=b)+Kk|gZij%OqLax4i6IHt`HA6C+ns2DvU&-$f2Tt|GoFao5z%P z*KW7T!kMKdy6>dFfeeN|0LD8hHMLN}DA{?4W_>DX&C;7EA@5WBKg)mZ`2o+~LP?`x zouE8G^;Yi=7=KI@|M?30H;0mvl3XTV`x~NAW?o)pK}6zm(Ln+C4Wi!TqJO4w*rb8y zFVIy|;tgl6*e=$pt8>VJJ`x52GqzTA-P8 zKAw6x)Mt5eLfsa?kT?U#1xk5?GnNl{(q(nJjg-6pZC6HF`L?I0Cn+~EQDA0nj^!JI z$K!ANj!1z2uNTh!JB`POTD#KJB&b6r;ZYG0lG4(KBq#z22?-%bOo{CvV9F#iIUfL} zsICr+LZPk);&3=@>Afe1xVa_T{LYqiIVq1y%E~4pl9H2E3wrt)e?;+6w}1b{(#ex- z+Y&Vl4sKX!rl)G}F>oeVyc|V93ZcnwXJ907YqxLj3w>YxQjP4Xjxg} z5D{^4agCNa#t@b#IThr4paadFR~;O(0h*x6!%ftoNDznBfgG`wu1Oih4eKcj#;N<& zV@Vkqxb%Z>TbW+o-V&&}o=o3V&M|)eWCUmn#7f?C-Gemias*0ef9r+WGJp)9C>-+(*?B6Ps%Gf5KXTxTLf5U%tEqhK9n{I@nu_OHUVh(f#CvponT(mqYo8 zNLW}{9LCna>8G}pej|lTt7~hN(K~fM)IL*v{fMd6nT~b#W}?(>@OMsw_9lC<<5_Ad zdw^9?P_WB>#A=xM_?x>D1 zjhWfm_OY?C_YZ9C@c%jx8TehSL*XX-=VZYZFu&9Pfo%U5ivK@`;}_re4dU26ItM=6&>66S8+`wa7Jg) zgfAa-iC_B++FM(D{|w`h z!{Y`hTf=`fSJizqx3%>~Q&W=*a8icG#)&{xGXmIB#J!akFJIr`xbvCR_Hp+VpSgi3tf=IXOSe+0+gAZKSHWq0P*)D=Lu1*h<5(D)-w2Le*;qBW)@la;LxP zmLE>o+VaB#sex==KtLU!Dg4HwHRu%e)hozE^=0ct4bW{go0^+7CfrJ`5GY`SqMttX zlwM#pHU?}gQXSq!Li7#S4yuVfB}NB5`w_4D=zUf~!f9YsTt4?^lX62tVe9kE{7b>o zQ1XIEBiQ!GC@}#M5gPdA$l=41+S<0e8yv{7B3%b0M;@v2o!3AEsbhj(QI?92i}y3M zBo3x$XJ>tufK(M0N>5!D7r(+HZc-3!6B9OoEy4mVp~F);MhEyTF_x|Bw;(0uM@S*h#awf6aDZR(dhlWt^69-u zxC*!V*gjrOP3=i!q$|KhUEn6&Q|p&s^xE3mfCB=oOy(EUrhy_-v;r-qq@=Dhnj09d zUp~A67e@fEa+D9A3+fMqzRt`YD!MZ~mRDR2H=cl?=!8tp?+AOm&IT61xidvkBWUZD z_Q9UFoYku&qfyNQvp`G~ngf@jCmrOikm!KvlRfF97mj1IqyH5wkr> z=B%LLMKLiki3=Arh+0~*vc^28MA4w@aOLmKgHz2|T>dEl_Y1RKX+XV{HV9}7i?*&V z6JVp+?@M3MEay(5(P)I79qTCPNG*OL*_OC&LEQQnRfa9DBkoq=#%r=8A`Ub5Ry$IW zF6Pho;M1& literal 0 HcmV?d00001 diff --git a/components/oscd-action-pane/screenshots/Firefox/baseline/oscd-action-pane-icon.png b/components/oscd-action-pane/screenshots/Firefox/baseline/oscd-action-pane-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..ca646f787ad21277dc9a1f8e847a0c410dfd13ed GIT binary patch literal 6908 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 co*lMWw?8af)!|8jutMMLdk&1;eW1(44a4*&oF literal 0 HcmV?d00001 diff --git a/components/oscd-action-pane/screenshots/Firefox/failed/oscd-action-pane-icon.png b/components/oscd-action-pane/screenshots/Firefox/failed/oscd-action-pane-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..ca646f787ad21277dc9a1f8e847a0c410dfd13ed GIT binary patch literal 6908 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 co*lMWw?8af)!|8jutMMLdk&1;eW1(44a4*&oF literal 0 HcmV?d00001 diff --git a/components/oscd-action-pane/screenshots/Webkit/baseline/oscd-action-pane-icon.png b/components/oscd-action-pane/screenshots/Webkit/baseline/oscd-action-pane-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..858f6237fa3d771d8bae8cf54377acba04c115e7 GIT binary patch literal 7083 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 Yvq^)lcijB_M;ZuzPvtJ=&g19*12@}2k^lez literal 0 HcmV?d00001 diff --git a/components/oscd-action-pane/screenshots/Webkit/baseline/oscd-action-pane.png b/components/oscd-action-pane/screenshots/Webkit/baseline/oscd-action-pane.png new file mode 100644 index 0000000000000000000000000000000000000000..69f973c2d804ee62dbe23e9360f68e0875e49b4c GIT binary patch literal 5110 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 Yvq^)lcijB_M;ZuzPvtJ=&g19*12@}2k^lez literal 0 HcmV?d00001 diff --git a/components/oscd-action-pane/screenshots/Webkit/failed/oscd-action-pane.png b/components/oscd-action-pane/screenshots/Webkit/failed/oscd-action-pane.png new file mode 100644 index 0000000000000000000000000000000000000000..69f973c2d804ee62dbe23e9360f68e0875e49b4c GIT binary patch literal 5110 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 div { + display: flex; + flex-direction: column; + gap: 12px; + padding: 8px 12px 16px; + clear: right; + } + + .highlighted { + outline-style: dotted; + outline-width: 2px; + } + + :host(:focus-within) .highlighted { + outline-style: solid; + } + + .contrasted { + background-color: var( + --oscd-action-pane-theme-on-primary, + var(--oscd-theme-on-primary) + ); + } + + h1, + h2, + h3, + h4 { + color: var( + --oscd-action-pane-theme-on-surface, + var(--oscd-theme-on-surface) + ); + font-family: var(--oscd-action-pane-theme-font, var(--oscd-theme-font)); + font-weight: 300; + overflow: clip visible; + white-space: nowrap; + text-overflow: ellipsis; + margin: 0px; + line-height: 52px; + padding-left: 0.3em; + } + + nav { + float: right; + } + + mwc-icon { + vertical-align: middle; + position: relative; + top: -0.1em; + --mdc-icon-size: 1em; + } + + ::slotted([slot='icon']) { + vertical-align: middle; + position: relative; + top: -0.1em; + --mdc-icon-size: 1em; + } +`; diff --git a/components/oscd-action-pane/src/oscd-action-pane.ts b/components/oscd-action-pane/src/oscd-action-pane.ts new file mode 100644 index 0000000..079409c --- /dev/null +++ b/components/oscd-action-pane/src/oscd-action-pane.ts @@ -0,0 +1,131 @@ +import { + html, + CSSResultGroup, + TemplateResult, + property, + nothing, +} from 'lit-element'; +import { classMap } from 'lit/directives/class-map.js'; + +import { OscdComponent } from '@openscd/core'; + +import styles from './oscd-action-pane.styles.js'; + +function closestTo(node: Node, selector: string): E | null { + const closest = + node.nodeType === Node.ELEMENT_NODE + ? (node).closest(selector) + : null; + + if (closest) return closest; + + const root = node.getRootNode(); + + if (root instanceof ShadowRoot) return closestTo(root.host, selector); + + return null; +} + +/** + * + * @slot `action` - May contain up to eight icon buttons. + * @slot `icon` - If filled overrides the icon property. + * @slot `[default]` - The default slot will be rendered into the pane body in a single column. + * + * @cssprop [--oscd-action-icon-theme-primary=--oscd-theme-primary] - Color for border on even levels. + * @cssprop [--oscd-action-icon-theme-on-primary=--oscd-theme-on-primary] - Pane color for the uneven levels. + * @cssprop [--oscd-action-icon-theme-secondary=--oscd-theme-secondary] - Color for border on uneven levels. + * @cssprop [--oscd-action-pane-theme-surface=--oscd-theme-surface] - Pane color for the even levels. + * @cssprop [--oscd-action-icon-theme-on-surface=--oscd-theme-on-surface] - Icon and label color. + * @cssprop [--oscd-action-icon-theme-font=--oscd-theme-font] - Font for label. + * + * @prop {string} label - Caption text, displayed in the header + * @prop {string} icon - Icon name, displayed unless the "icon" slot is filled + * @prop {boolean} secondary - Color header with Secondary theme color while focus is within + * @prop {boolean} highlighted - Highlight pane with dotted outline + * @prop {number} level - Nesting level, default (closes pane ancestors level) + 1 + * + * @summary A responsive container rendering actions in a header. + * @tag oscd-action-pane + */ +export class OscdActionPane extends OscdComponent { + static styles: CSSResultGroup = styles; + + /** + * @internal + */ + static get scopedElements() { + return {}; + } + + /** caption text, displayed in the header */ + @property({ type: String }) + label?: string; + + /** icon name, displayed unless the "icon" slot is filled */ + @property({ type: String }) + icon?: string; + + /** color header with secondary theme color while focus is within */ + @property({ type: Boolean }) + secondary = false; + + /** highlight pane with dotted outline */ + @property({ type: Boolean }) + highlighted = false; + + /** nesting level, default (closest pane ancestor's level) + 1 */ + @property({ type: Number }) + level = 1; + + async firstUpdated(): Promise { + this.tabIndex = 0; + + const parentPane = closestTo( + this.parentNode!, + 'oscd-action-pane' + ); + if (parentPane) this.level = parentPane.level + 1; + + this.level = Math.floor(this.level); + } + + private renderHeader(): TemplateResult { + const content = html`${this.icon + ? html`${this.icon}` + : nothing} + ${this.label ?? nothing} + `; + + const headingLevel = Math.floor(Math.max(this.level, 1)); + // Sometimes a TemplateResult is passed in as Label, not a string. So only when it's a string show a title. + const title = typeof this.label === 'string' ? this.label : ''; + switch (headingLevel) { + case 1: + return html`

${content}

`; + case 2: + return html`

${content}

`; + case 3: + return html`

${content}

`; + default: + return html`

${content}

`; + } + } + + render(): TemplateResult { + return html`
+ ${this.renderHeader()} +
+
`; + } +} diff --git a/components/oscd-action-pane/stories/oscd-action-pane.mdx b/components/oscd-action-pane/stories/oscd-action-pane.mdx new file mode 100644 index 0000000..f4c3c2f --- /dev/null +++ b/components/oscd-action-pane/stories/oscd-action-pane.mdx @@ -0,0 +1,28 @@ +import { Meta, Story, Canvas, Source, ArgTypes, Title, Description, Subtitle } from '@storybook/blocks'; + +import { Markdown } from '@storybook/addon-docs'; + +import * as OscdActionPaneStories from './oscd-action-pane.stories'; + +import Readme from '../README.md?raw'; +import Changelog from '../CHANGELOG.md?raw'; + + +Oscd-Action-Pane + + +Properties + + + + + + +# Example + + +{Readme} + +# Changelog + +{Changelog} diff --git a/components/oscd-action-pane/stories/oscd-action-pane.stories.ts b/components/oscd-action-pane/stories/oscd-action-pane.stories.ts new file mode 100644 index 0000000..52eddd5 --- /dev/null +++ b/components/oscd-action-pane/stories/oscd-action-pane.stories.ts @@ -0,0 +1,102 @@ +import type { Meta, StoryObj } from '@storybook/web-components'; +import { action } from '@storybook/addon-actions'; + +import { html, TemplateResult } from 'lit'; + +import '../src/OscdActionPane'; + +import { createBadge } from '@oscd/utils'; + +import pckgJson from '../package.json'; + +const meta: Meta = { + title: 'Action/OscdActionPane', + component: 'oscd-action-pane', + parameters: { + status: { + type: createBadge(pckgJson), + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +/** Basic */ +export const Basic: Story = { + render: ({ label, description, highlighted, secondary, level, icon }) => + html`${description}`, + args: { + label: 'Label', + description: 'Some Text', + level: 0, + }, +}; + +/** + * Nested + */ +export const Nested: Story = { + render: ({ label, description, highlighted, secondary, level }) => + html` + ${description} + `, + args: { + ...Basic.args, + }, +}; + +/** + * With Icon + */ +export const WithIcon: Story = { + render: ({ label, description, highlighted, secondary, level, icon }) => + html`${description}`, + args: { + ...Basic.args, + icon: 'edit', + }, +}; + +/** + * With Actions + */ +export const WithActions: Story = { + render: ({ label, description, highlighted, secondary, level, icon }) => + html` + ${description} + edit + delete + `, + args: { + ...Basic.args, + icon: 'edit', + }, +}; diff --git a/components/oscd-action-pane/test/oscd-action-pane.spec.ts b/components/oscd-action-pane/test/oscd-action-pane.spec.ts new file mode 100644 index 0000000..8e5540b --- /dev/null +++ b/components/oscd-action-pane/test/oscd-action-pane.spec.ts @@ -0,0 +1,148 @@ +import { expect, fixture, html } from '@open-wc/testing'; + +import '../src/OscdActionPane.js'; +import { OscdActionPane } from '../src/OscdActionPane.js'; + +describe('oscd-action-pane', () => { + let element: OscdActionPane; + const label = 'test label'; + + beforeEach(async () => { + element = await fixture( + html`` + ); + await element.updateComplete; + }); + + it('looks like the latest snapshot', () => { + expect(element).shadowDom.to.equalSnapshot(); + }); + it('renders the header as

per default', () => { + const header: HTMLElement | null = + element.shadowRoot?.querySelector(`[title="${label}"]`) ?? null; + expect(header).to.exist; + expect(header?.tagName).to.equal('H1'); + }); + + it('renders the header as

with level 1', async () => { + element.level = 1; + await element.updateComplete; + const header: HTMLElement | null = + element.shadowRoot?.querySelector(`[title="${label}"]`) ?? null; + expect(header).to.exist; + expect(header?.tagName).to.equal('H1'); + }); + + it('renders the header as

with level 2', async () => { + element.level = 2; + await element.updateComplete; + const header: HTMLElement | null = + element.shadowRoot?.querySelector(`[title="${label}"]`) ?? null; + expect(header).to.exist; + expect(header?.tagName).to.equal('H2'); + }); + + it('renders the header as

with level 3', async () => { + element.level = 3; + await element.updateComplete; + const header: HTMLElement | null = + element.shadowRoot?.querySelector(`[title="${label}"]`) ?? null; + expect(header).to.exist; + expect(header?.tagName).to.equal('H3'); + }); + + it('renders the header as

with level 4', async () => { + element.level = 4; + await element.updateComplete; + const header: HTMLElement | null = + element.shadowRoot?.querySelector(`[title="${label}"]`) ?? null; + expect(header).to.exist; + expect(header?.tagName).to.equal('H4'); + }); + + it('renders the header as

for levels > 4', async () => { + element.level = 7; + await element.updateComplete; + const header: HTMLElement | null = + element.shadowRoot?.querySelector(`[title="${label}"]`) ?? null; + expect(header).to.exist; + expect(header?.tagName).to.equal('H4'); + }); + + it('renders the header as

for levels < 1', async () => { + element.level = -1; + await element.updateComplete; + const header: HTMLElement | null = + element.shadowRoot?.querySelector(`[title="${label}"]`) ?? null; + expect(header).to.exist; + expect(header?.tagName).to.equal('H1'); + }); + + it('renders the title on the

', async () => { + element.level = 1; + await element.updateComplete; + expect( + element.shadowRoot?.querySelector('h1')!.getAttribute('title') + ).to.be.equals(label); + }); + + it('renders the title on the

', async () => { + element.level = 2; + await element.updateComplete; + expect( + element.shadowRoot?.querySelector('h2')!.getAttribute('title') + ).to.be.equals(label); + }); + + it('renders the title on the

', async () => { + element.level = 3; + await element.updateComplete; + expect( + element.shadowRoot?.querySelector('h3')!.getAttribute('title') + ).to.be.equals(label); + }); + + it('renders the title on the

', async () => { + element.level = 4; + await element.updateComplete; + expect( + element.shadowRoot?.querySelector('h4')!.getAttribute('title') + ).to.be.equals(label); + }); + + it('does not set contrasted class property with odd level', async () => { + element.level = 3; + await element.updateComplete; + + expect( + element.shadowRoot + ?.querySelector('section') + ?.classList.contains('contrasted') + ).to.be.false; + }); + + it('sets contrasted class property with even levels', async () => { + element.level = 4; + await element.updateComplete; + + expect( + element.shadowRoot + ?.querySelector('section') + ?.classList.contains('contrasted') + ).to.be.true; + }); + + describe('with icon property set', () => { + beforeEach(async () => { + element.icon = 'edit'; + await element.updateComplete; + }); + + it('looks like the latest snapshot', () => { + expect(element).shadowDom.to.equalSnapshot(); + }); + }); +}); diff --git a/components/oscd-action-pane/test/oscd-action-pane.test.ts b/components/oscd-action-pane/test/oscd-action-pane.test.ts new file mode 100644 index 0000000..d894bef --- /dev/null +++ b/components/oscd-action-pane/test/oscd-action-pane.test.ts @@ -0,0 +1,44 @@ +import { fixture } from '@open-wc/testing'; +import { html } from 'lit-html'; + +import { visualDiff } from '@web/test-runner-visual-regression'; + +import '../src/OscdActionPane.js'; +import type { OscdActionPane } from '../src/OscdActionPane.js'; + +const factor = process.env.CI ? 2 : 1; + +function timeout(ms: number) { + return new Promise((res) => { + setTimeout(res, ms * factor); + }); +} + +mocha.timeout(2000 * factor); + +describe('oscd-action-pane', () => { + let element: OscdActionPane; + const label = 'Test Title'; + + beforeEach(async () => { + element = await fixture( + html`Testing` + ); + document.body.prepend(element); + }); + + afterEach(() => element.remove()); + + it('displays the title', async () => { + await element.updateComplete; + await timeout(500); + await visualDiff(element, 'oscd-action-pane'); + }); + + it('displays the title and icon', async () => { + element.icon = 'arrow_back'; + await element.updateComplete; + await timeout(500); + await visualDiff(element, 'oscd-action-pane-icon'); + }); +}); diff --git a/components/oscd-action-pane/tsconfig.json b/components/oscd-action-pane/tsconfig.json new file mode 100644 index 0000000..4627f8a --- /dev/null +++ b/components/oscd-action-pane/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "target": "es2018", + "module": "esnext", + "moduleResolution": "node", + "noEmitOnError": true, + "lib": ["es2018", "dom"], + "strict": true, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "experimentalDecorators": true, + "declaration": true, + "importHelpers": true, + "outDir": "dist", + "sourceMap": true, + "inlineSources": true, + "rootDir": "./src", + "tsBuildInfoFile": ".tsbuildinfo", + "incremental": true, + "skipLibCheck": true, + "resolveJsonModule": true + }, + "include": ["./src/**/*.ts"], + "exclude": ["**/*.stories.ts", "**/*.stories.js"] +} diff --git a/components/oscd-action-pane/tsconfig.storybook.json b/components/oscd-action-pane/tsconfig.storybook.json new file mode 100644 index 0000000..cda53dc --- /dev/null +++ b/components/oscd-action-pane/tsconfig.storybook.json @@ -0,0 +1,18 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "emitDecoratorMetadata": true, + "composite": true, + "incremental": false, + "tsBuildInfoFile": null, + "rootDir": "./" + }, + "exclude": ["./test/**/*.ts"], + "include": [ + "./stories/**/*.stories.ts", + "./src/**/*.ts", + "./src/*.ts", + "./.storybook/*.js", + "./.storybook/*.ts" + ] +} diff --git a/components/oscd-action-pane/tsconfig.test.json b/components/oscd-action-pane/tsconfig.test.json new file mode 100644 index 0000000..29717e3 --- /dev/null +++ b/components/oscd-action-pane/tsconfig.test.json @@ -0,0 +1,7 @@ +{ + "compilerOptions": { + "rootDir": "./" + }, + "extends": "./tsconfig", + "include": ["*/*.ts"] +} diff --git a/components/oscd-action-pane/typedoc.json b/components/oscd-action-pane/typedoc.json new file mode 100644 index 0000000..2c43ad9 --- /dev/null +++ b/components/oscd-action-pane/typedoc.json @@ -0,0 +1,4 @@ +{ + "entryPoints": ["src/index.ts"], + "out": "docs" +} diff --git a/components/oscd-action-pane/web-test-runner.config.js b/components/oscd-action-pane/web-test-runner.config.js new file mode 100644 index 0000000..28aec99 --- /dev/null +++ b/components/oscd-action-pane/web-test-runner.config.js @@ -0,0 +1,182 @@ +import { visualRegressionPlugin } from '@web/test-runner-visual-regression/plugin'; +import { playwrightLauncher } from '@web/test-runner-playwright'; + +import pixelmatch from 'pixelmatch'; +import { PNG } from 'pngjs'; + +const fuzzy = ['win32', 'darwin'].includes(process.platform); // allow for 1% difference on non-linux OSs +const local = !process.env.CI; + +console.assert(local, 'Running in CI!'); +console.assert(!fuzzy, 'Running on OS with 1% test pixel diff threshold!'); + +const thresholdPercentage = fuzzy && local ? 0 : 0; + +const filteredLogs = [ + 'Running in dev mode', + 'Lit is in dev mode', + 'mwc-list-item scheduled an update', +]; + +const browsers = [ + playwrightLauncher({ + product: 'chromium', + }), + playwrightLauncher({ product: 'firefox' }), + playwrightLauncher({ product: 'webkit' }), +]; + +function defaultGetImageDiff({ baselineImage, image, options }) { + let error = ''; + let basePng = PNG.sync.read(baselineImage); + let png = PNG.sync.read(image); + let { width, height } = png; + + if (basePng.width !== png.width || basePng.height !== png.height) { + error = + `Screenshot is not the same width and height as the baseline. ` + + `Baseline: { width: ${basePng.width}, height: ${basePng.height} }` + + `Screenshot: { width: ${png.width}, height: ${png.height} }`; + width = Math.max(basePng.width, png.width); + height = Math.max(basePng.height, png.height); + let oldPng = basePng; + basePng = new PNG({ width, height }); + oldPng.data.copy(basePng.data, 0, 0, oldPng.data.length); + oldPng = png; + png = new PNG({ width, height }); + oldPng.data.copy(png.data, 0, 0, oldPng.data.length); + } + + const diff = new PNG({ width, height }); + + const numDiffPixels = pixelmatch( + basePng.data, + png.data, + diff.data, + width, + height, + options + ); + const diffPercentage = (numDiffPixels / (width * height)) * 100; + + return { + error, + diffImage: PNG.sync.write(diff), + diffPercentage, + }; +} + +export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({ + plugins: [ + visualRegressionPlugin({ + update: process.argv.includes('--update-visual-baseline'), + getImageDiff: (options) => { + const result = defaultGetImageDiff(options); + if (result.diffPercentage < thresholdPercentage) + result.diffPercentage = 0; + return result; + }, + }), + ], + + files: 'dist/**/*.spec.js', + + groups: [ + { + name: 'visual', + files: 'dist/**/*.test.js', + testRunnerHtml: (testFramework) => ` + + + + + + + + + + + + + +`, + }, + ], + + /** Resolve bare module imports */ + nodeResolve: { + exportConditions: ['browser', 'development'], + }, + + /** Filter out lit dev mode logs */ + filterBrowserLogs(log) { + for (const arg of log.args) { + if ( + typeof arg === 'string' && + filteredLogs.some((l) => arg.includes(l)) + ) { + return false; + } + } + return true; + }, + + /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */ + // esbuildTarget: 'auto', + + /** Amount of browsers to run concurrently */ + concurrentBrowsers: 3, + + /** Amount of test files per browser to test concurrently */ + concurrency: 2, + + /** Browsers to run tests on */ + browsers, + + // See documentation for all available options +}); From 28e02b047a31a5efe064c769a9ea20bb837cfe1a Mon Sep 17 00:00:00 2001 From: Pascal Wilbrink Date: Tue, 3 Oct 2023 15:39:00 +0200 Subject: [PATCH 2/5] Added button --- components/oscd-button/.gitignore | 20 ++ components/oscd-button/.npmignore | 18 ++ components/oscd-button/.storybook/main.ts | 30 +++ components/oscd-button/.storybook/manager.ts | 5 + .../oscd-button/.storybook/preview-head.html | 16 ++ components/oscd-button/.storybook/preview.ts | 39 ++++ components/oscd-button/CHANGELOG.md | 1 + components/oscd-button/EXAMPLE.md | 3 + components/oscd-button/INTRO.md | 0 components/oscd-button/LICENSE.md | 201 ++++++++++++++++++ components/oscd-button/README.md | 23 ++ .../custom-elements-manifest.config.js | 6 + components/oscd-button/custom-elements.json | 116 ++++++++++ components/oscd-button/package.json | 61 ++++++ components/oscd-button/project.json | 33 +++ .../oscd-button--outlined-disabled.png | Bin 0 -> 1544 bytes .../baseline/oscd-button--outlined-icon.png | Bin 0 -> 1791 bytes .../baseline/oscd-button--outlined.png | Bin 0 -> 1649 bytes .../baseline/oscd-button--raised-disabled.png | Bin 0 -> 1442 bytes .../baseline/oscd-button--raised-icon.png | Bin 0 -> 1790 bytes .../Chromium/baseline/oscd-button--raised.png | Bin 0 -> 1620 bytes .../baseline/oscd-button-disabled.png | Bin 0 -> 1376 bytes .../Chromium/baseline/oscd-button-icon.png | Bin 0 -> 1613 bytes .../Chromium/baseline/oscd-button.png | Bin 0 -> 1463 bytes .../oscd-button--outlined-disabled.png | Bin 0 -> 1563 bytes .../baseline/oscd-button--outlined-icon.png | Bin 0 -> 1978 bytes .../baseline/oscd-button--outlined.png | Bin 0 -> 1852 bytes .../baseline/oscd-button--raised-disabled.png | Bin 0 -> 1498 bytes .../baseline/oscd-button--raised-icon.png | Bin 0 -> 1987 bytes .../Firefox/baseline/oscd-button--raised.png | Bin 0 -> 1864 bytes .../Firefox/baseline/oscd-button-disabled.png | Bin 0 -> 1356 bytes .../Firefox/baseline/oscd-button-icon.png | Bin 0 -> 1791 bytes .../Firefox/baseline/oscd-button.png | Bin 0 -> 1646 bytes .../oscd-button--outlined-disabled.png | Bin 0 -> 1582 bytes .../baseline/oscd-button--outlined-icon.png | Bin 0 -> 2057 bytes .../Webkit/baseline/oscd-button--outlined.png | Bin 0 -> 1861 bytes .../baseline/oscd-button--raised-disabled.png | Bin 0 -> 1511 bytes .../baseline/oscd-button--raised-icon.png | Bin 0 -> 2038 bytes .../Webkit/baseline/oscd-button--raised.png | Bin 0 -> 1863 bytes .../Webkit/baseline/oscd-button-disabled.png | Bin 0 -> 1389 bytes .../Webkit/baseline/oscd-button-icon.png | Bin 0 -> 1842 bytes .../Webkit/baseline/oscd-button.png | Bin 0 -> 1647 bytes components/oscd-button/src/OscdButton.ts | 5 + .../oscd-button/src/oscd-button.styles.ts | 14 ++ components/oscd-button/src/oscd-button.ts | 64 ++++++ .../oscd-button/stories/oscd-button.mdx | 38 ++++ .../stories/oscd-button.stories.ts | 123 +++++++++++ .../oscd-button/test/oscd-button.spec.ts | 61 ++++++ .../oscd-button/test/oscd-button.test.ts | 107 ++++++++++ components/oscd-button/tsconfig.json | 25 +++ .../oscd-button/tsconfig.storybook.json | 18 ++ components/oscd-button/tsconfig.test.json | 7 + components/oscd-button/typedoc.json | 4 + .../oscd-button/web-test-runner.config.js | 182 ++++++++++++++++ 54 files changed, 1220 insertions(+) create mode 100644 components/oscd-button/.gitignore create mode 100644 components/oscd-button/.npmignore create mode 100644 components/oscd-button/.storybook/main.ts create mode 100644 components/oscd-button/.storybook/manager.ts create mode 100644 components/oscd-button/.storybook/preview-head.html create mode 100644 components/oscd-button/.storybook/preview.ts create mode 100644 components/oscd-button/CHANGELOG.md create mode 100644 components/oscd-button/EXAMPLE.md create mode 100644 components/oscd-button/INTRO.md create mode 100644 components/oscd-button/LICENSE.md create mode 100644 components/oscd-button/README.md create mode 100644 components/oscd-button/custom-elements-manifest.config.js create mode 100644 components/oscd-button/custom-elements.json create mode 100644 components/oscd-button/package.json create mode 100644 components/oscd-button/project.json create mode 100644 components/oscd-button/screenshots/Chromium/baseline/oscd-button--outlined-disabled.png create mode 100644 components/oscd-button/screenshots/Chromium/baseline/oscd-button--outlined-icon.png create mode 100644 components/oscd-button/screenshots/Chromium/baseline/oscd-button--outlined.png create mode 100644 components/oscd-button/screenshots/Chromium/baseline/oscd-button--raised-disabled.png create mode 100644 components/oscd-button/screenshots/Chromium/baseline/oscd-button--raised-icon.png create mode 100644 components/oscd-button/screenshots/Chromium/baseline/oscd-button--raised.png create mode 100644 components/oscd-button/screenshots/Chromium/baseline/oscd-button-disabled.png create mode 100644 components/oscd-button/screenshots/Chromium/baseline/oscd-button-icon.png create mode 100644 components/oscd-button/screenshots/Chromium/baseline/oscd-button.png create mode 100644 components/oscd-button/screenshots/Firefox/baseline/oscd-button--outlined-disabled.png create mode 100644 components/oscd-button/screenshots/Firefox/baseline/oscd-button--outlined-icon.png create mode 100644 components/oscd-button/screenshots/Firefox/baseline/oscd-button--outlined.png create mode 100644 components/oscd-button/screenshots/Firefox/baseline/oscd-button--raised-disabled.png create mode 100644 components/oscd-button/screenshots/Firefox/baseline/oscd-button--raised-icon.png create mode 100644 components/oscd-button/screenshots/Firefox/baseline/oscd-button--raised.png create mode 100644 components/oscd-button/screenshots/Firefox/baseline/oscd-button-disabled.png create mode 100644 components/oscd-button/screenshots/Firefox/baseline/oscd-button-icon.png create mode 100644 components/oscd-button/screenshots/Firefox/baseline/oscd-button.png create mode 100644 components/oscd-button/screenshots/Webkit/baseline/oscd-button--outlined-disabled.png create mode 100644 components/oscd-button/screenshots/Webkit/baseline/oscd-button--outlined-icon.png create mode 100644 components/oscd-button/screenshots/Webkit/baseline/oscd-button--outlined.png create mode 100644 components/oscd-button/screenshots/Webkit/baseline/oscd-button--raised-disabled.png create mode 100644 components/oscd-button/screenshots/Webkit/baseline/oscd-button--raised-icon.png create mode 100644 components/oscd-button/screenshots/Webkit/baseline/oscd-button--raised.png create mode 100644 components/oscd-button/screenshots/Webkit/baseline/oscd-button-disabled.png create mode 100644 components/oscd-button/screenshots/Webkit/baseline/oscd-button-icon.png create mode 100644 components/oscd-button/screenshots/Webkit/baseline/oscd-button.png create mode 100644 components/oscd-button/src/OscdButton.ts create mode 100644 components/oscd-button/src/oscd-button.styles.ts create mode 100644 components/oscd-button/src/oscd-button.ts create mode 100644 components/oscd-button/stories/oscd-button.mdx create mode 100644 components/oscd-button/stories/oscd-button.stories.ts create mode 100644 components/oscd-button/test/oscd-button.spec.ts create mode 100644 components/oscd-button/test/oscd-button.test.ts create mode 100644 components/oscd-button/tsconfig.json create mode 100644 components/oscd-button/tsconfig.storybook.json create mode 100644 components/oscd-button/tsconfig.test.json create mode 100644 components/oscd-button/typedoc.json create mode 100644 components/oscd-button/web-test-runner.config.js diff --git a/components/oscd-button/.gitignore b/components/oscd-button/.gitignore new file mode 100644 index 0000000..63cc1db --- /dev/null +++ b/components/oscd-button/.gitignore @@ -0,0 +1,20 @@ +## editors +/.idea +/.vscode + +## system files +.DS_Store + +## npm +/node_modules/ +/npm-debug.log +.tsbuildinfo + +## testing +/coverage/ + +## docs +/doc/ + +# build +/dist/ diff --git a/components/oscd-button/.npmignore b/components/oscd-button/.npmignore new file mode 100644 index 0000000..28f225d --- /dev/null +++ b/components/oscd-button/.npmignore @@ -0,0 +1,18 @@ +## editors +/.idea +/.vscode + +## system files +.DS_Store + +## npm +/node_modules/ +/npm-debug.log +.tsbuildinfo + +## testing +/coverage/ + +## docs +/doc/ + diff --git a/components/oscd-button/.storybook/main.ts b/components/oscd-button/.storybook/main.ts new file mode 100644 index 0000000..c8e9fee --- /dev/null +++ b/components/oscd-button/.storybook/main.ts @@ -0,0 +1,30 @@ +import type { StorybookConfig } from '@storybook/web-components-vite'; + +const config: StorybookConfig = { + stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)', '../stories/**/*.mdx'], + addons: [ + '@storybook/addon-docs', + '@storybook/addon-controls', + '@storybook/addon-actions', + '@storybook/addon-a11y', + '@storybook/addon-links', + { + name: '@storybook/adddon-essentials', + options: { + background: false, + }, + }, + '@etchteam/storybook-addon-status/register', + 'storybook-addon-root-attribute/register', + ], + framework: { + name: '@storybook/web-components-vite', + options: { + builder: { + viteConfigPath: '', + }, + }, + }, +}; + +export default config; diff --git a/components/oscd-button/.storybook/manager.ts b/components/oscd-button/.storybook/manager.ts new file mode 100644 index 0000000..66b6e89 --- /dev/null +++ b/components/oscd-button/.storybook/manager.ts @@ -0,0 +1,5 @@ +import { addons } from '@storybook/manager-api'; + +addons.setConfig({ + enableShortcuts: false +}); diff --git a/components/oscd-button/.storybook/preview-head.html b/components/oscd-button/.storybook/preview-head.html new file mode 100644 index 0000000..89f0ee1 --- /dev/null +++ b/components/oscd-button/.storybook/preview-head.html @@ -0,0 +1,16 @@ + + + diff --git a/components/oscd-button/.storybook/preview.ts b/components/oscd-button/.storybook/preview.ts new file mode 100644 index 0000000..455de07 --- /dev/null +++ b/components/oscd-button/.storybook/preview.ts @@ -0,0 +1,39 @@ +import { setCustomElementsManifest } from '@storybook/web-components'; +import { withRootAttribute } from 'storybook-addon-root-attribute'; + +import '../../../themes/prebuilt/oscd.css'; + +import customElements from '../custom-elements.json'; + +setCustomElementsManifest(customElements); + +export const decorators = [withRootAttribute]; + +export const parameters = { + statuses: { + released: { + background: '#0000ff', + color: '#ffffff', + description: 'This component is stable and released', + }, + beta: { + background: '#FF0000', + color: '#FFFFFF', + description: 'This component is still in beta', + }, + }, + rootAttribute: { + defaultState: { + name: 'Light', + value: null, + }, + attribute: 'dark', + tooltip: true, + states: [ + { + name: 'Dark', + value: 'dark', + }, + ], + }, +}; diff --git a/components/oscd-button/CHANGELOG.md b/components/oscd-button/CHANGELOG.md new file mode 100644 index 0000000..825c32f --- /dev/null +++ b/components/oscd-button/CHANGELOG.md @@ -0,0 +1 @@ +# Changelog diff --git a/components/oscd-button/EXAMPLE.md b/components/oscd-button/EXAMPLE.md new file mode 100644 index 0000000..090b738 --- /dev/null +++ b/components/oscd-button/EXAMPLE.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/components/oscd-button/INTRO.md b/components/oscd-button/INTRO.md new file mode 100644 index 0000000..e69de29 diff --git a/components/oscd-button/LICENSE.md b/components/oscd-button/LICENSE.md new file mode 100644 index 0000000..c61b663 --- /dev/null +++ b/components/oscd-button/LICENSE.md @@ -0,0 +1,201 @@ + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + +TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + +1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + +2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + +3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + +4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + +5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + +6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + +7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + +8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + +9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + +END OF TERMS AND CONDITIONS + +APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + +Copyright [yyyy] [name of copyright owner] + +Licensed 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 CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. diff --git a/components/oscd-button/README.md b/components/oscd-button/README.md new file mode 100644 index 0000000..92e9c77 --- /dev/null +++ b/components/oscd-button/README.md @@ -0,0 +1,23 @@ +# `` ![NPM](https://img.shields.io/badge/NPM-0.0.1-cb0001) ![Status](https://img.shields.io/badge/WIP-3b72bf) + +--- + + + +## Example + +```html + +``` + +--- + +### Attributes + +| Name | Type | Description | +| ---- | ---- | ----------- | + +### Css Properties + +| Name | Default | Description | +| ---- | ------- | ----------- | \ No newline at end of file diff --git a/components/oscd-button/custom-elements-manifest.config.js b/components/oscd-button/custom-elements-manifest.config.js new file mode 100644 index 0000000..562fc21 --- /dev/null +++ b/components/oscd-button/custom-elements-manifest.config.js @@ -0,0 +1,6 @@ +export default { + globs: ['src/*.ts'], + exclude: ['test/*.ts'], + litelement: true, + plugins: [], +}; diff --git a/components/oscd-button/custom-elements.json b/components/oscd-button/custom-elements.json new file mode 100644 index 0000000..bf55585 --- /dev/null +++ b/components/oscd-button/custom-elements.json @@ -0,0 +1,116 @@ +{ + "schemaVersion": "1.0.0", + "readme": "", + "modules": [ + { + "kind": "javascript-module", + "path": "src/OscdButton.ts", + "declarations": [], + "exports": [ + { + "kind": "custom-element-definition", + "name": "oscd-button", + "declaration": { + "name": "OscdButton", + "module": "/src/oscd-button" + } + }, + { + "kind": "js", + "name": "OscdButton", + "declaration": { + "name": "OscdButton", + "module": "src/OscdButton.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/oscd-button.styles.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "module": "src/oscd-button.styles.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/oscd-button.ts", + "declarations": [ + { + "kind": "class", + "description": "", + "name": "OscdButton", + "members": [ + { + "kind": "field", + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Whether the Button is disabled or not" + }, + { + "kind": "field", + "name": "label", + "type": { + "text": "string" + }, + "default": "''", + "description": "Text for the Button" + }, + { + "kind": "field", + "name": "icon", + "type": { + "text": "string" + }, + "description": "The icon for the Button" + }, + { + "kind": "field", + "name": "raised", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Whether the Button is raised or not" + }, + { + "kind": "field", + "name": "outlined", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Whether the Button is outlined or not" + } + ], + "superclass": { + "name": "OscdComponent", + "package": "@openscd/core" + }, + "tagName": "oscd-button", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "OscdButton", + "declaration": { + "name": "OscdButton", + "module": "src/oscd-button.ts" + } + } + ] + } + ] +} diff --git a/components/oscd-button/package.json b/components/oscd-button/package.json new file mode 100644 index 0000000..00d299a --- /dev/null +++ b/components/oscd-button/package.json @@ -0,0 +1,61 @@ +{ + "name": "@openscd/oscd-button", + "description": "Webcomponent oscd-button following open-wc recommendations", + "license": "Apache-2.0", + "author": "OpenSCD", + "version": "0.0.1", + "browser": "./dist/OscdButton.js", + "module": "./dist/OscdButton.js", + "files": [ + "dist/**/*" + ], + "exports": { + ".": "./dist/OscdButton.js", + "./oscd-button.js": "./dist/oscd-button.js" + }, + "type": "module", + "readme": "./README.md", + "scripts": { + "analyze": "cem analyze", + "build": "tsc", + "clean": "rimraf .tsbuildinfo dist", + "storybook": "npx nx storybook oscd-button", + "typedoc": "typedoc", + "test": "tsc --p tsconfig.test.json && wtr --coverage", + "test:unit": "tsc --p tsconfig.test.json && wtr --group default", + "test:visual": "tsc --p tsconfig.test.json && wtr --group visual", + "test:update": "tsc --p tsconfig.test.json && wtr --group visual --update-visual-baseline", + "test:watch": "tsc --p tsconfig.test.json && concurrently -k -r \"tsc --p tsconfig.test.json --watch --preserveWatchOutput\" \"wtr --watch\"" + }, + "dependencies": { + "@openscd/core": "*", + "lit": "^2.7.6", + "@material/mwc-button": "0.27.0" + }, + "devDependencies": { + "@commitlint/cli": "^17.3.0", + "@commitlint/config-conventional": "^17.3.0", + "@custom-elements-manifest/analyzer": "^0.4.17", + "@open-wc/demoing-storybook": "^2.4.7", + "@open-wc/eslint-config": "^8.0.2", + "@open-wc/scoped-elements": "^2.2.0", + "@open-wc/testing": "^3.1.6", + "@oscd/utils": "*", + "@typescript-eslint/eslint-plugin": "^4.33.0", + "@typescript-eslint/parser": "^4.33.0", + "@web/dev-server": "^0.1.34", + "@web/dev-server-storybook": "^0.5.4", + "@web/test-runner": "^0.14.0", + "@web/test-runner-playwright": "^0.9.0", + "@web/test-runner-visual-regression": "^0.7.0", + "concurrently": "^8.2.0", + "storybook-addon-root-attribute": "^1.0.2", + "tslib": "^2.6.0", + "typedoc": "^0.24.8", + "typescript": "^5.1.6" + }, + "customElements": "custom-elements.json", + "oscd": { + "status": "WIP" + } +} diff --git a/components/oscd-button/project.json b/components/oscd-button/project.json new file mode 100644 index 0000000..059ab84 --- /dev/null +++ b/components/oscd-button/project.json @@ -0,0 +1,33 @@ +{ + "name": "oscd-button", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "library", + "sourceRoot": "components/oscd-button/src", + "targets": { + "storybook": { + "executor": "@nx/storybook:storybook", + "options": { + "port": 4400, + "configDir": "components/oscd-button/.storybook" + }, + "configurations": { + "ci": { + "quiet": true + } + } + }, + "build-storybook": { + "executor": "@nx/storybook:build", + "outputs": ["{options.outputDir}"], + "options": { + "outputDir": "dist/storybook/oscd-button", + "configDir": "components/oscd-button/.storybook" + }, + "configurations": { + "ci": { + "quiet": true + } + } + } + } +} diff --git a/components/oscd-button/screenshots/Chromium/baseline/oscd-button--outlined-disabled.png b/components/oscd-button/screenshots/Chromium/baseline/oscd-button--outlined-disabled.png new file mode 100644 index 0000000000000000000000000000000000000000..ef28d1444ac7f6abbfc60f0a0e72263442c541d4 GIT binary patch literal 1544 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 literal 0 HcmV?d00001 diff --git a/components/oscd-button/screenshots/Chromium/baseline/oscd-button--outlined.png b/components/oscd-button/screenshots/Chromium/baseline/oscd-button--outlined.png new file mode 100644 index 0000000000000000000000000000000000000000..c2c028ef293d80700aff7c10318a87ad1adc8a69 GIT binary patch literal 1649 zcmV-%29EiOP)Px*D@jB_RA_Ii9n;IfpVghf+SRmt&)mzSE$us zh-cfa_=~D-YMRpa52z9UK*S$ZFtKQ@5rd6Z{1p)_2q;J>u~Ixm;k<(E-tFw%%k+ZQCZDPGg!TQc3~_AF8SnkH<+Q z5&#IxvSfREJ9Tw+#9}cNMLEkZ1{A}#ZBnTes;W|7UytbM=#aXuQ(IemwtWjIgCj?d z(9qC;VwxtgSnO>36Hq3RNQCb0ZWJkHP#&uYMNyDa5-3)s1j1D*fpAqyAY7Fa2v?;9 z!c{4Oa8-)$!sRWHuHU_Sv9rPbRNsVqZ)1-8zthFf6DRm-^aKxnFGKr>j^{ToujnQj zPjT>_e93;EY|WC4r|9~RR~)lb^5iX9?zte%&tfT-o}Xs(gWdGKCw}mqJjr;9msfQ6 zw0(Kl<(>=D+})Vw_$Q?^>ZEV?j!EMdaqrQE2FZAehvsEG?YAaUB;);$S03o~VfA$x zlJOL-b84>xNA;tV1Fz?KWI=|p(^PI;6XWOshpkUoJTNE2vb{ry4ix}6Ij{_Q+5mEv z#4@Bu5H}AGHyeEPcAl$#sgwAcVCP?L{&JTIz??gEpfJ)cLz1@(c9tPo^@9wlBQAHn zQcFW)={!B@n`KD${XNH|xivlCWsXU9KX2pYz&5>hmLVB_p~9@B?r9%4J=E*J1GXtq zLimO+!mV#L&?16gyjDx-fAJ0(A$ay~lU>i*%)B{VQUBXF*!=U=9L>ukeE;6U1)6?S zn5E~Z*u2u}5w0&%!rB`RKHcN6=&>jl%_=X{c!OZ;I?E&6_6;_!1JOEB)TVxv!guc| z9iyrVRIRw}K&e=`%yG%Fk6k9st?3aBU}kHWhDL=E<10_Ik9QVo*M!-aO#vF6*)S1~@e&Sp*Ut`;Pi_CFJyrFQhx2?CBFuR5?{xz^#7t%o0 z24q^2iiJD8rx47z>E5m)3Bi;Wf4n`s$3cq-Mo;!8!MJZ1cYn_&o3>pJ@nM4b%OhuW zu1kNYv1P5rjtw?fED7`32M(XU@9>jnbe_H~Th!*zyAI1HclLZ9J~l-1x!xx(p_+nt zep2z`#L0d2D?BH6X1{OSx8UxNgMi z1Q*S!={d$+=1s6cSt>_PEI4^+hj%GvXC-aB9fqE#Fk)h*D=YsX(~#eNJf7%#L`!5S$Sm_n|^2VjVo2gTvlGFc2+WDvBskd4L;fJu>H># zQ?J)h!;mwJC+Ruk6&9>4J+f7;e<`n&ibveg^AzevDjeLF_w3)cthHG&vy1(k&v3XD z;lil}u|9gcH#zb){Bc%>H7$lmG=Qe-G~&Yqtxv@Wse;FEFtCjBDuZ;PX`V*3PVlFj z3_3d`moF~Nkpo@Mx7;6L*#|=gW?TYaR+S4^MtEd_!Rq-Lrrn_N`F@u-AGS!Gt1zXx ze{tXUQjU&;y($kmM=uKj)KOh5PH5X~zh zJbinXXYMdr^mw$ac+@a_>w1khR$Gjo9O^f>o=WPdWa~QH(>7{Sh{mRZ-Tuva{{4?U z&1X2@p4LY{I+@a`YMYxEd~e}KSSlmtD@8n?_b+rTJD{9zJ9rSTH&;);IY#5TYe{PYksR!qx&=0iMF;j+1S|VOJ@Mt6A~>dP%GQI zmBe+x_)->4h`~(W_Ge3wPN$Jl`ZMDCQfiax7fOh#6Ak>|#|2LZs+2&uDkTuEN(qFk zQUc+slt8#DB@nJkQG^hbg!i97Y7M5?2SOzDoRGW8O#QJ}Fwa00000NkvXXu0mjfIleL5 literal 0 HcmV?d00001 diff --git a/components/oscd-button/screenshots/Chromium/baseline/oscd-button--raised-disabled.png b/components/oscd-button/screenshots/Chromium/baseline/oscd-button--raised-disabled.png new file mode 100644 index 0000000000000000000000000000000000000000..fcc23404ccc65acb29fde90fbba7fd1f47b146d8 GIT binary patch literal 1442 zcmV;T1zq}yP)Px)TuDShRA_-Y#4{Hc5K~Xa}(zl*qlK45Hb)0i5dyU6JqqpztjT{JwQ!l zibRntgy^!(!N#To_Mw|CbbSxV8pas%FO;Hqz#Uj;e z6;0DHxq5VTbl`M4al73B2(m0|*=*Jn%pka2F1owB5sSs5DVl*Om&?eqj99H!FFO~L zQ}XxkUqrLF84pd<5HC9kle1w8XHZPx42mh7K{16hD5h`*#T3qMD;PKjy}b8%O$CT3RBNO7Z;p zb0kU9?Yq0XtgNh%&1R`oD%kCIMn*;$9v;@O+1lFT?c2AEjg4{V&K&?Ml?wCo^8h?~ z@`TRL&LiX2bCV>AXV0D?2tvd84<9~|$z<^R{XBZ~NVmUy`SQqy8V-l`+!huV$Y!&= zc=4ji?^$V!a6f^?I3_nxa%Hkw_$X_wF5Yb8}d&R$za}ud3>?J+fA-HT5V> z(}+YO{QC8a(a}-tc023q>wNwC6+o|`y8l|O2Eg9l9`E13r&_HtJ3HG_w1Z_Ul?vHx zmY$v-{hTbzY;0`k*BnGuRl2&m7#tjIupexg^>XbJ4ca8!($W$Zi-p=O>cmQ>Fn%eXlSUVPf-;0dTAHu7EVzV{`~nvPft%nasvYcbai#% zbUM!)g6-{X0Q`QxZWBe3nVA`?)he}Gt*K(7(J1M3n&IJL1_lOB94i6sW)#sCoYKp@a^HEXq6@%eoE(cRtM zaQ;dPSAUgWAI|Eis!Bee=lAd5=M90!<3Uwbip64sy;LfZ&*z&KJ06dRr%#{a@pxEW zU2V$kI8;@ozrUYCp}@}04nKbUAQTEAiegLQTrL-P@7~pqk&%&x^H)+hhr@xx;b^MB zcs$Ph{5-i_?z|!N7F^$IztHlPbVfOn46nBQ`uIuWmP#jIY}fEArgrY3WX?@O2lF@>~{N+ z^W5g&2R;whF$p)L-?dJOR>j30(IkvX8PCefqM_Yso27^pb zPxJlzcOsDp05@;m(UvDk^WGUalaPoF+D*hWW3b>T9Z4C!>5v9U2M z7R!m^{|h0ROt$s;l%gnfbab?ROs}J98j7ME*&wbmM{QZoirejO-y^R&^}WwUAqaxu zL<6qg;>6@~FoiQHrf>$u6waWS!Wk4(ID=veXHdj;zLhoke-H!#(cy4hb{;0D#BR4E wy4~)!{ujdJVsW`#NRotLeoAZ%4u4AgAEb9T%2OSg+yDRo07*qoM6N<$f^gf$aR2}S literal 0 HcmV?d00001 diff --git a/components/oscd-button/screenshots/Chromium/baseline/oscd-button--raised-icon.png b/components/oscd-button/screenshots/Chromium/baseline/oscd-button--raised-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..f7e3d987a7dcc5bb38bf41f01d844cfcc14d2ea5 GIT binary patch literal 1790 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 Rt8xGU002ovPDHLkV1gQ;yy*Y{ literal 0 HcmV?d00001 diff --git a/components/oscd-button/screenshots/Firefox/baseline/oscd-button--outlined-disabled.png b/components/oscd-button/screenshots/Firefox/baseline/oscd-button--outlined-disabled.png new file mode 100644 index 0000000000000000000000000000000000000000..4b362d83873fe09d4f7683ea9021c7ade7ecb74c GIT binary patch literal 1563 zcmV+$2ITpPP)~40mni+q)D|0~5-I=-Pp3iCbUPtq&m0!Pp(aFgP-Q3&|epki1EMRYMPtMNH zw}Hh);){QR7>fkwW*zNFdN*?ANcRa;rN1rT}2j-jEUq}kZmc#MdMux^c2?Ia6q zZf+8Iso-qPDO7Ma227}{f>XiSs0D0PZ8hRla5icI8&zA4I2D|}1+YluEg6mG#Y}_U z0|y6(7kj=nKUndI!vnv5{YpniM?CMKpdiZ3%p`AbZ^;e|3kx(qKTq%9zo&qJ0HgL9 zA0Mah-@j8uMFqLIxJcLB-QCfbFJEYPcb6_NFUif#jS>?RDIp<2x&~wS_4QFoN(v<< zCGqFj-~06G6aQXVSjhXa#zg3bG0V%#|8TtF;bGd|-lmX{5X#TbmmbmF+)Ubi`ad3- znwl!Pp%jAKKg7ql}CU$w2rXkkZo97#<=M zf1jS7va?`o&y)z=@cp}Y?ri_?2FY~k6oal4(7li;*c$Jb91FjmzI`jW@d&R5HJkE;rfDt0+Y5M8X977 zb#--5f`gqN2W?`F%1xT&crPQ#_8rFG2E;crn*4Eajs;Y|5z#!e--5mYMBuM?w1vfG>!r+i9<%(k9 zkS2S2di0{foL4_LRU+N}`0>MRjS%1v724w}HZ}l=Ebup@32+}ie4yUmUarsa@$sBy zySlpQ?c28m2ZG}mg2Ndm98?HWr*6cKjg67^6oxaBTu}@hiZ1G#ZW>b>+{cd}*?{JX zy8wsr5iQ6DqTZP^m;i^GJUcr}*Voq^;Yg7p0$W>KxsDrxL(PqhjFg7J-=aCfhZ7SM z9C2_WxuO_2q$<=J95v+SF+h}{`xA$>|Js~j;wvjF+~|n3i-C~3U|<*%%MSq# zQGuF+$N});;$o>$Fy~YyB_-UoqKgDLG(~`tm6b(}jg8z@J~ve&QUMN~vRqLN92Dv3 z=-~fVsjjY;+Fca%>FH_8&d!!Pu73rG4)ycr&ul!TF9I3t`6;6-h1XlO9nRhnx~U>oS`=;$by8#h~uoyVayhlip`h>D8h$u2K1 zGeks*SdR(gBqt~9)dZxLH*enXq>L>G5WT3Q0D;tpG`POLPFq`Bda2M59G)i}2%Rmu zOLGwiaEM^h5CI~-|eZ!hkSCAP*BLzLtNTHm_6-B{88AJt)1ZWVf(-0v(K0cDJ zx@#rf3BY5qI5q_ipCctsPEHbF%n?_2U2Ie!zW7 zcWX|U7XxQ*VD)=>7Er;-v!BK8R>4`!^zsH)!O63q#qL(YS4`! z^zsH)!O63q#qO5C;iV7kT)fnR*cK zrTB=GYWx!o;3=^!^D3-lMUyc4VxxGK7@MltXH;J$wjyHxsbcI^;@|GJ{=#u*nN$D( N002ovPDHLkV1mcf`8ogq literal 0 HcmV?d00001 diff --git a/components/oscd-button/screenshots/Firefox/baseline/oscd-button--outlined-icon.png b/components/oscd-button/screenshots/Firefox/baseline/oscd-button--outlined-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..a3ad004a90f086629e8c403e11b058baea037042 GIT binary patch literal 1978 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 V6iPq(jZ6Rl002ovPDHLkV1h{Flwkk> literal 0 HcmV?d00001 diff --git a/components/oscd-button/screenshots/Firefox/baseline/oscd-button--raised.png b/components/oscd-button/screenshots/Firefox/baseline/oscd-button--raised.png new file mode 100644 index 0000000000000000000000000000000000000000..70b0c7a826c17296d76adc6a80c2de9abbdc0b3c GIT binary patch literal 1864 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 O0000+uoH0}gQug!uLN z2<8EYxCKJ|dd-gDgV{z11VHjCX^Wc5W(LB-$*4`(qTANl%whnCBJA8Oz!dJ0 zH6{#MAi>OSEn}(jgI1IlnebP9H$|AXF%mI7-K2l|+=RocjaYVEjvjA_yxOs3 zo&mq^H6!nD736J+2R;*{#)8ul@WmvA4V{aN`;=CKT?bF*;0&I z5y5=+^qvFj61AW|&19XHqjhKRp2zAYZ!5&w+e(CasJCsZ9#@W7&}(=&79WbL(QA>i z3J!byt0d=2F>0Ahhs_gpjNV(Sqah6Q&wV%pX5l8yBXGCNYK-IGvEILRv($zSqqXQh zP=rCVC3tw#jx%4HA&C?q_lg2Cm5ab(;#7x-bFCnTj!*Osc-Krl&VOyehJRI1v~#Vq z6Q3y@qs6T=HjK@ZLJ=dt#RC@5bEgzYF*40%$lGUa3{0Ap#%D*stOwQ(*5JW)JJNra z~=&#bK*{d>vbDD)Xe($F)}J#iwvgBo@#@XAOLvllBVqAIlQCd69{T{^JRV~_}4 z2e@b!P0$hNuws`z+HW&+0?fiqoGZqxoslg9mukGCTQzi*4s3c7&7@~4$JU#0Ak#?B zks&EX!hFURaM@QD6wlIQ(mHo!(o&G#Q4KMvFzfHB>H!}2Nd&e`(%}-xEVFhH9f(6W zCai9etp(^gM1)1(yQB2vCNuV>86Z^(7-*h=>Gv~B-OxSH+4`;v@OEPW0kd!i%@Jcx zam&HgRXVY>jT*g)$1f$G&x*0yiEAV+wT}x!r&nE`%oXsS#Ri<(Y)1A)1-kTe=Qx^@ zt128wNES1WRXc*MCMS-5X2OUx38ohKE<>ztN%JK*S7JuN0~MkOY$~}48m3%4y5&Gj zys*iDcT9JscbcO8l_o_n3zs%N@kt_|4N%4jxzF#giqbT>ez+Es){^MTs+*=fFT)iu zO}lq~v*8O}bfbE)fV=b$!<~zEM70qhzd{9(*tc0(-7-$fnL7S{p$x+oOK|V19XWk8 zSgf$B;dZ=s-Gx~Ao!i-qXX|nGs1+L@yE2VG^1=ZA{g@SnqjdoV zyykTc?h`}%3z!-(vXub(r_P#s?8~Su;GD|}99V9E_OTP6mMgF?-GH*)7AB&Xw5ej6 zLr=h}4np*w?5^3$7$HV4cRTy;`33^m!Z@41(j>ri(?F$Y^#doCky_X{IUK16-Cj$d zGBoPw<*7$ECq+{Oo!)5%HGXU#cceVL>45f$gK6$)*ULt5EQvCjh4M#f8OK<8PJynk zHQv6mfLE5uQTdMp+ez0O#S!asPC`mD38Zq*)RM%cM3y|4K&HTNA zoJ+;Ci>3~clTeLTu|nirQj)H|Vf(Uxv(C!VwZ8~yFR2mTQHY9bb|#WL^$o*ZL6z4o z+81Dpk-P+~PDmB*XP+<9O^#r8!$3TfE|4e7wkdk_oe++JGbE@W&yruZni$x*SClpH zS=NZOR=1CLN0g$y0KLb!Qk=JE63qsALp6BxhXe1dmNM!0!hQ=b|7b-r`F}j=n7sj} zpRtaXNILo1q@!<0Y6FfVPaGO`r?!|GuoN(rh5*yX>+Q_C10$MgIw!d9cMtjNEwLU`kSXpL&k0?a}V#HdnV<%C2gfT;0j zr@xL|?|XD=M4PADQ!dV%J;#N#r1;a#vnn+k@N>Kye-sA`@PIiOEtr<@fP;w^2VHr< z9E=uBOL)M+M2my2JYWt+3#KJJ;9#P~L029y2crek5*~0c(c+*h5150|f@uj4IGAX0 h(3J@4fe1 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 literal 0 HcmV?d00001 diff --git a/components/oscd-button/screenshots/Webkit/baseline/oscd-button--outlined-icon.png b/components/oscd-button/screenshots/Webkit/baseline/oscd-button--outlined-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..a59f1d880e532017d4a93ef7abe8c355f0950afc GIT binary patch literal 2057 zcmV+k2=@1hP)Px#L}ge>W=%~1DgXcg2mk?xX#fNO00031000^Q000001E2u_0{{R30RRC20H6W@ z1ONa40RR91h@b-i1ONa40RR91Bme*a04q6izW@LSb4f%&RCodHTnTJcMHv3x+oQ{F z*S1J0D5OBSG$MjrN-YS2gu@6*071f;P*A|234#J5BoYOU$Q3z?M2%2Gf(nsCBv3#= zlo%)~NAUnD*Dkx;?!C^x%iDc#+qd0awhc|^Pqy!vnSW;f|C|4q*Y|_~Bag=ei^T$` z(+R)d4^9nJ0-`9wU@#yvGZQ+UE+_=S?RE#QUcHKpj0~7eCQv0#4O0SS92^b@tX3;> za&m$o5z5QU1B4p0+1xOt!e?DY0ydj1=uNV-vmugOA7>FqW4v?7Q;e{L^90M^WzyT6dJiL$tgkvD4 z1Zo{1+uyFl_63zO2a!yn#}#0?dLWsmakXKOsNk-wJ^pbG;vT3}s{kQze7nR6TY2gp z0G{0L#{2zjcqPMvLZbyM2H9}scb`I(8z(wYn0^cPo9g|}?`Xy1ZnqWf=;GQ%AJ&br zV|I=eg(eH;b+F?2Hn*bQFFV{p{s%X>!uKzi`tVva3+6v$h3&d}ztY$~7+?#xm7gqp z>~@fM@!SgeZOq8H6}(ULlK;M69@_Dw%CoX9SU#|Nz6xduTxb)hn^08=90gPLczKO6 zp|)z3&+PMH?I;KGp3nw)USUc(xY3Oj1MPU{lo`g%5Z*mbw)!26OAG_xst7=cS{{yD zetb084#&*^hP-KjAOMFya|io0m<4ni6netx_aeyO>j{n2e#4KChuPt@2QYhAI?PR? z7|SLkjjeQ_7v<-DXqu-9m!3P~#XqM)VD~C92^X7Bb{i4>rl*DL(@ERj5fysf%&IEa zilS~Z7ZL8sv{q>&fg^vi9^=;;nV^}ZQ$U-iRzTMXn6oz>T3v{zxv7Y4Z&cz$u?GcH zl)_82%U#Qy`0uPAGruvR^H6=Td6(yPn45PSdp>lA0V3z?^#ri$1qZHO@MFf;CggUh zS)_XQ=!-yBve}K{i`j(kP)U&sruzjrZd8x##w|q*m~D`%S2=3+0<@uFS1C*OhC0-f z!t(U0~8x-d9shy_#AFm0;|t-3{4Vvge(Q| zY0^rAS>L6j|Etx5@ADZI_~U>VBbFM_b$EQ*5!p})ct@CZqF9HBEX(n)Jm~gfr0-xs z0)Ge`1d>!z&2UekHwheMx=EQIJY$d9dd{A7_MkAn3H|kJ$ac1qnN(tK%n;ChWPFN= zIT%(*eYEJLK_li){-iVp2s=uD@Z#bA zI-K0@L8Uc-9;5X*urA8K++lF>m=}w>MB=8Vc_OA4r-#{Vm{rxJMigP5DYqbD&M7|e z-SPJ+W~*T5_p;Tj#D=0g`hvh=YAm4qoF6}`C^fnbUDI4T^wA=#rGS#65E#h4wCb)= z#3a#ejadRZKCKP^TK7<{Zvw|XZ9#^=8}g@=xio1lV&aC>xtJD@hFr*npP2KO5e1u< ze)b~s0WqdY`^1UH zEkryyzWRV#owIt0y0p~W#8n~(2?ed=*WUfVHBvC@ydA*al`gCq=?Lyqw9D7xrIn3f z&aP?*emj^rF zbK;RfTC{&EK3ktZNgo6V9c!X1rG9Lhq})IoGT#se$RV~T)SNAXR02dOD=Q1+=H}Kk zwxr7`v!TFGp6@5kOxBP#we&^-y0nOekQLwcDQ)GuSv+9MstUZjW?oASd@RVO6gn0A zPM0oS0^y?8EQlln$&yIdsXErS;s|)P1-?|tAexUxoBG94f0jqIH28I$NPq*RPQ+Y) zJK+GSzq+fFk#m65iJ0qeCmbO4S9f(Xat@F>5p(_Rgaf4h>aI>k&R)xnyoXsQJ@QWO zc?rnh*B0s15A;n4PFw<#1PBj=3nG!eCPN<#p>IM+Z*)r)`LSV1fb>r|AUqH*hy?aH no_~U>Vc|e^wiIqee}d|Nj>?E&U$tPr00000NkvXXu0mjfm}|RP literal 0 HcmV?d00001 diff --git a/components/oscd-button/screenshots/Webkit/baseline/oscd-button--outlined.png b/components/oscd-button/screenshots/Webkit/baseline/oscd-button--outlined.png new file mode 100644 index 0000000000000000000000000000000000000000..449217c7863ec0f29284090c00ee2e7e1ca4e5ee GIT binary patch literal 1861 zcmV-L2fFx)P)Px#L}ge>W=%~1DgXcg2mk?xX#fNO00031000^Q000001E2u_0{{R30RRC20H6W@ z1ONa40RR91ZlD7I1ONa40RR91Bme*a07Yb3Q2+o2uSrBfRA>e5TMKMcRT%#6?PFcL zx(yiv9T_qh(})Q2Qsz(yNI;CB1Q0YhAz`2}gC-LaK>~?HK_dc^APk8bVTJ@1B7#U@ zfPg45FjQch4<_T)t`GXSz4iRJTie_AZe{CY8}6Ts-g_SZ`Op9TuXDrU{EWO_FDw=d zTrL+xQG`m#r2(GjVK5kwm6ZjZPA3V+c|0Ef<;$0mnVAWb$pjjtQgUg4oXO#Ez-qN3 zH#b)Tk85mf^b?w9vpKn>Ri%m2fX!x;qGC=?4tNTWJ8Sr(7D`kD`?Lzr&CcVWC^?Re|78OE%D zeRy5WTO5o{D-Pp!`oTq*ljDYn_s84exbDY_LI|_ z$EbN}!SVFaXGBP~f`>&Rxed$4w&x|py*;y==WLzhgf1Oev@Zi%9n&f!b2lD4UcZTx zRbG_LmT#(gTHHT-R=M!+IS~uKGGV}zdTHLkr*)_(Xu@~zxq`rjGZegjtb4|RD;Gt~ z|I&o~fo*S9&pz1__|;oIn6#X2sF|uO-7wwB!Er6N#dYb)V@$cBWq8!DR?k5j5Id@` zy$#AH7$--v>Z`RP3QKfB&}eGOoHWecZbGlYAlzB7dQX=xi6JK~S_}S3fQpYX)L!c3O ziKMp8u#MIJ{3Q?r`i6xDnqti4Fl0)63TtBt&>DIDHArV+F`QaLWOy4rAKvUn-3b=% z`tTTEq3j8f^Sn2K;?gt*lpQtS3%GBz4ySf{antI@&}n)c+!zrjn;Fy|7qDz#C@*&_ z;4!Z%BgkIEqL3yrstEGzu*dnD^GT3nCp?G(vwk^dt*%0#nYwUjJTKx01!c!#Kzr#o zQj6@K9I7h=AW@j?HAExJd69FC*&K=<*9QOY87lV&0xju0F7JUrD7^S1OAcW~MMnKk z0*uKaqDYQqw_(Hb8 z3epj?(y*6Rg_l?%batPB8S9Lo{U}jxUk#?MF)DRS`AyUQNE?%HhdnNv0h67_;g4#j z#IW<*p-pbADzW3tUOAvKrD&s(ESS9E!m$vq>wk$@G0cXl3KriYh{76Gkh8a$;AKE; zn&|))EAf!%^P_l{o*4;P)oO>9rO;v1_3(F~DqMWz4$NGy3~W4dMUIi1YGiMm?^Btz z(Q#lstKx>w)Z@|_9}cW{BeMq=GpQf@%mYJ4$aA_EY0!rqC6wriMFyN?XST|hoOo)f z0aTJx2qR@G6(_`tc+&CV>lH5STIOPfN~ls)T8r9qdTUVhm=@;_2pB#?FXd~?Kgu(# z4I&P237s8jWX}N_p^%W#N)zc>1>6PL3EZ;gzqDf&l+vV0gIF;b<8$W^4t7f1ujJmKm|?(E=4tvqGGEa zrvjIv8c0#GRgX(m;OO2!%l}7D(LLNYVu#=J;OUAL-MvyN`87Z|5ne<*-EyQ0b9DDg z^}OT+k8mM;2q(geh*Pf;Cns3pQc*gKyh{8Z0s}{Zg2v0T00000NkvXXu0mjf{4ZtB literal 0 HcmV?d00001 diff --git a/components/oscd-button/screenshots/Webkit/baseline/oscd-button--raised-disabled.png b/components/oscd-button/screenshots/Webkit/baseline/oscd-button--raised-disabled.png new file mode 100644 index 0000000000000000000000000000000000000000..effde2c2c3c09376a9ca47836785111561b08a84 GIT binary patch literal 1511 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 U@~ literal 0 HcmV?d00001 diff --git a/components/oscd-button/screenshots/Webkit/baseline/oscd-button--raised.png b/components/oscd-button/screenshots/Webkit/baseline/oscd-button--raised.png new file mode 100644 index 0000000000000000000000000000000000000000..aff50bfbefd5dd07a831b3f33010f2553ef4742c GIT binary patch literal 1863 zcmV-N2e|l&P)Px#L}ge>W=%~1DgXcg2mk?xX#fNO00031000^Q000001E2u_0{{R30RRC20H6W@ z1ONa40RR91ZlD7I1ONa40RR91Bme*a07Yb3Q2+o2u}MThRA>e5TM29wRT%zec4l|k z-5v-;TY^~7z(NcthtNWxf+S!d8fr-}NU20Q#K;v%KtTgaf|#O0O*ljau|a_d5T(d9ysr&nYEfZVF(zrfW=37 zbnj;XyL+idS{OoUdV?M=%9kJrU@smK)6`7OtVjq@zC0ceSht;t^jy1_rU+2Jq!X8> z_GxCtK)~zuf{pQ9dz7XKh@z+wm!{mrG)p5cCOql;P$MpVxru9;mgC|=l%4__ap}oR zT&q$}9A^NSlxvmkgS4G|C)xM^>1E0we(FUYiw;@v+1+fEJF+qVfCZ2AQL3Nug$WyM z*)Ts8z3E?BlZkh#GQ#NSn#ba`9cGl>%tE<68>?zFG5953AvbUmFX$I9a4 z8(CO+ArqFa(bo;ww(uA7MmNG(aV|sBJ$bd#Yv_LIp4$J7TSz?k{wQn8!h)Y8>kY^x z`pG3aA(Fgx42M}2X4Ib)@bzp5a;!RxEY%ZZGq8NXJ+!s>U#sy(1_m<$FFJlOm>7sY z+JilQMMt+eYN{)nVO48_w_ZFHpV5 zgVpt!cy7Lt5EuSil#Y-$_j@zC^V@D*-2wd5Gk0h$DVhcLHU9b18jGE zuyj#Ikbpq*RUdvWQxX?=Mn46&NdDw^lE02@NdkJQS9in*kTg2|*hV+Xi*2}E z6(6v8%jFH#!7GTkc=WzkkO_A#`>^hL8xDRN8L*evo6u(zk6lZhsNNl#7i%paF_k*R zaB`XhQGqi8L#F6a^Bz@u@9q5k%btjYrwcQm_we!DkR=!EP#z^!_vW6ISy{t;1gSP1?#oC)PODo066b*N1G z#9ce@-%zh-l-XBr0(uVO&~n|UNc8dzcl4UBLBl0I5j2+uM$bVyDJM0YR)ShfLh1(M z@k>u-pm?oG0`x|0sMrY1kMv2~nG;)G7`Kq*RZmr)3`S3&mr|92C&NN`ju?+Mdm;8~W9!yU|?_nW7>)eCEveOwT zYFD09aA;Vg738LAcJPFVncK|hXk=h@3@W#}p(jo0z+{o>(L*X0)S{i*MsfP#mVN>;R+Cm<9qsB{G z3FWDgFZa`0C+XSrDA{bn5AQiic}*%m62d6R(TWo~pX#LT!^CBsFlmL6{OsSce0Q6a z_cccZSPOZa-0lL+*V)~p_b^#GEDB~QL-N(%y|{ALzo#*87$xUE`BgX;@_i<9of6_` z5wbPYfwA)pn7z|1^;vb50=}8o23u2zpnzdhKOu2cHV%L8A|OZi$dgC&%-cu!Ob^0_u({^N-97#bxCdw?rKMj5l&g-&(qb zG<34DZ&h26xDlkMZLIMjmBcZnXbwkKW5Z>m^{rvdeWrRg5W_J zv^S)!Mj{1Pti7#jbRi`tPQHlRfKrDLTn`Ru6dPa14!Io0xYtP+CvjKM1XMvlBTf}q z)mN$!r#{B2te_F63asiY)reCcV^vnrh*Jetb(Jy<`F&5_B{c17A;9vcj=g+U%K%Mp zVhB*aq!ag8e*9NDiK*74)kJ{uB@s7zQ5*D@=r4HHG(yvz7y^{1!o?2hKT_FTD~F;l z8__+#89Jj1?`9ISO_Pp*0Of`9LwU;S%Y)-M{0m{@J+?g}i8lZM002ovPDHLkV1jY} BUBv(Z literal 0 HcmV?d00001 diff --git a/components/oscd-button/screenshots/Webkit/baseline/oscd-button-disabled.png b/components/oscd-button/screenshots/Webkit/baseline/oscd-button-disabled.png new file mode 100644 index 0000000000000000000000000000000000000000..f6cef8d06174f433dcddea2561331a1eca573954 GIT binary patch literal 1389 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 literal 0 HcmV?d00001 diff --git a/components/oscd-button/screenshots/Webkit/baseline/oscd-button.png b/components/oscd-button/screenshots/Webkit/baseline/oscd-button.png new file mode 100644 index 0000000000000000000000000000000000000000..c370ac1ba43578a716b5023c589e162e25c00fe6 GIT binary patch literal 1647 zcmaKsdpr{g8^?EHxr>~}uxQFLI?8-pl6e=+b{I=L8ETnaw&S?fS)AO~iiyT?Yq`Yc zlH1{+A-zUBjPw#Sg;uDX*pcgT?TB~%)1T*$-|zQ*p6B=XbDQYpuBir70{{S;c$}M$ zA}I=)sX!DC2qOub3yX%d*NQ`|7Nhc5hnFRhze(qgTt7>l z6Svw}K2BOs*Lx`pbWf?-*Ba?HYTe=I8!YO5ho(ZOIw#+X8^m@b?Ka*Y;~6a}2a6|{ z4i5e!=M{}jt!7(}PE9O|EfLq77Afk#*;gz;HaDJohSTaBn|4KLO6+Bh>o})Y0PigQ zbYv&-;R}Ppwv!K`0bysx3=8!n!)~wLg~H*FBDVU%(|GdD*=w-jGsO`#S1-$~3@1;8 zrBc&elHlgly8G2>7&5ne-_gUbH{e=JgRP>;h3?|9^+5gUt-i>~2a^MVo&|TOpna^d zq3b&`!JC=o-3x}rc86-Uivr;=K6#oD9knoM)o^hmh+J~g_PSgtqibjz-;;h>6S`uK z@=cNFTky99*)B&kjOUN~{bv9pc}=r_`$B>RC&v3a@CeE;Z3}o3T~gXTc1`16OHwg? zjrVhV+_@Ves+Y8)V%|+<7@bd~_l%qWyz@B5n|?NTj2$(_NM%Bi!OrN9aj!DxeH}=N z)Sl{?m5UMsAgrTR7&#!r8L8m{gzCLc2IEoKFi&i&8mewxBnLOZjKQ2_8MwFNWQBz; z8RN$&zv+spu~Rx}jJ%l5%Gbos=&=hBA!d~1J_~D-QX8u#DO9@cdUcfixkVL4$%K!3 z*BWgt=x1yft?Rp3pZNWU;5u8L`BSOh4oWFe*DHAuvx1_^RyGVBy)aeN=7<>j>g>>N z7)>xODT8RxHI7>02HwUQmf1D;R%d@dl1^kI1@(BbgDfJuPD%Oe=gO| z%d6VYi=gdgiW5-+hxjKqlQOgqK;_Xt`MQ;;emmzN4(fii+-_^-o$?HO4ks)O1~PJp zJs}8+$qPrbkMS-V{*^gJ*b*}e+KXM*_bnL{qk`d7Hf4-b?*%!)=K1be}q z(aKarbpBkGqhoB&xC8{Egp}(PnFmN3dqrTI=HpFyeK{=Jvt~Ub(;x8Wj!&&^o5;=G zfWNZxG!E7GmPJ5nsOYY`+yPRIL8%v$Fch>LZwSN?yV^cpqk7b6&Ss^754ZnUADoBD z<8ZxG8H_zKRcdAl3&$m;?Jqn?Q+}9GssjhjELL6{?zYo;+kwurl4hISBoXXrPjzhQ zOj6eYSa2X7;~qV#1en#2-fDTc4cnq zW4?V#fm0cdli-v7egFILH3!!pH$Fj) zRLgHH0t7B7UrrevcHz{spjBPtWXk$3Liopsn9uOudUNCX0KBfZdL^l}&?WjX!Xw4K zB#WZrCbi(uSsz1GM zih@xXftOOiYx^sHdDJn-4n)9HYIr$OB5hG1q`&gV_7PtE11s@4qAU){V@G;>f|^!aF4a zj$CUIv&WzDa%(sp$ofCP#P4(f literal 0 HcmV?d00001 diff --git a/components/oscd-button/src/OscdButton.ts b/components/oscd-button/src/OscdButton.ts new file mode 100644 index 0000000..8a5ae76 --- /dev/null +++ b/components/oscd-button/src/OscdButton.ts @@ -0,0 +1,5 @@ +import { OscdButton } from './oscd-button'; + +window.customElements.define('oscd-button', OscdButton); + +export { OscdButton }; diff --git a/components/oscd-button/src/oscd-button.styles.ts b/components/oscd-button/src/oscd-button.styles.ts new file mode 100644 index 0000000..4388eb8 --- /dev/null +++ b/components/oscd-button/src/oscd-button.styles.ts @@ -0,0 +1,14 @@ +import { css } from 'lit-element'; + +import { styles } from '@openscd/core'; + +export default css` + ${styles} + + :host { + display: inline-flex; + + --mdc-theme-primary: var(--oscd-theme-primary); + --mdc-theme-on-primary: var(--oscd-theme-on-primary); + } +`; diff --git a/components/oscd-button/src/oscd-button.ts b/components/oscd-button/src/oscd-button.ts new file mode 100644 index 0000000..57818d7 --- /dev/null +++ b/components/oscd-button/src/oscd-button.ts @@ -0,0 +1,64 @@ +import { html, CSSResultGroup, TemplateResult, property } from 'lit-element'; + +import { OscdComponent } from '@openscd/core'; + +import styles from './oscd-button.styles.js'; + +import '@material/mwc-button'; + +/** + * @prop {string} label - Text for the Button + * @prop {boolean} raised - Whether the Button is raised or not + * @prop {boolean} disabled - Whether the Button is disabled or not + * @prop {string} icon - The icon for the Button + * @prop {boolean} outlined - Whether the Button is outlined or not + * + * @example + * @tagname oscd-button + */ +export class OscdButton extends OscdComponent { + static styles: CSSResultGroup = styles; + + /** + * @internal + */ + static get scopedElements() { + return {}; + } + + @property({ + type: Boolean, + }) + disabled?: boolean = false; + + @property({ + type: String, + }) + label: string = ''; + + @property({ + type: String, + }) + icon?: string; + + @property({ + type: Boolean, + }) + raised?: boolean = false; + + @property({ + type: Boolean, + }) + outlined?: boolean = false; + + render(): TemplateResult { + return html` + `; + } +} diff --git a/components/oscd-button/stories/oscd-button.mdx b/components/oscd-button/stories/oscd-button.mdx new file mode 100644 index 0000000..068ddc8 --- /dev/null +++ b/components/oscd-button/stories/oscd-button.mdx @@ -0,0 +1,38 @@ +import { + Meta, + Story, + Canvas, + Source, + ArgTypes, + Title, + Description, + Subtitle, +} from '@storybook/blocks'; + +import { Markdown } from '@storybook/addon-docs'; + +import * as OscdButtonStories from './oscd-button.stories'; + +import Readme from '../README.md?raw'; +import Changelog from '../CHANGELOG.md?raw'; + + +oscd-button + + +Properties + + + + + + +# Example + + + +{Readme} + +# Changelog + +{Changelog} diff --git a/components/oscd-button/stories/oscd-button.stories.ts b/components/oscd-button/stories/oscd-button.stories.ts new file mode 100644 index 0000000..13e7594 --- /dev/null +++ b/components/oscd-button/stories/oscd-button.stories.ts @@ -0,0 +1,123 @@ +import type { Meta, StoryObj } from '@storybook/web-components'; +import { action } from '@storybook/addon-actions'; + +import { html, TemplateResult } from 'lit'; + +import '../src/OscdButton'; + +import { createBadge } from '@oscd/utils'; + +import pckgJson from '../package.json'; + +const meta: Meta = { + title: 'Buttons/OscdButton', + component: 'oscd-button', + parameters: { + status: { + type: createBadge(pckgJson), + }, + }, + args: { + onclick: action('Clicked'), + }, +}; + +export default meta; + +type Story = StoryObj; + +/** + * Basic + */ +export const Basic: Story = { + args: { + label: 'Click me!', + }, + parameters: { + docs: { + description: { + story: 'Basic oscd-button', + }, + }, + }, +}; + +/** + * Raised + */ +export const Raised: Story = { + args: { + ...Basic.args, + raised: true, + }, +}; + +/** + * Outliend + */ +export const Outlined: Story = { + args: { + ...Basic.args, + outlined: true, + }, +}; + +/** + * Disabled + */ +export const Disabled: Story = { + args: { + ...Basic.args, + disabled: true, + }, +}; + +/** + * Raised Disabled + */ +export const RaisedDisabled: Story = { + args: { + ...Raised.args, + ...Disabled.args, + }, +}; + +/** + * Outlined Disabled + */ +export const OutlinedDisabled: Story = { + args: { + ...Outlined.args, + ...Disabled.args, + }, +}; + +/** + * With Icon + */ +export const WithIcon: Story = { + args: { + ...Basic.args, + icon: 'edit', + }, +}; + +/** + * Raised with Icon + */ +export const RaisedWithIcon: Story = { + args: { + ...Raised.args, + ...WithIcon.args, + }, +}; + +/** + * Outlined with Icon + */ +export const OutlinedWithIcon: Story = { + args: { + ...Outlined.args, + ...WithIcon.args, + }, +}; diff --git a/components/oscd-button/test/oscd-button.spec.ts b/components/oscd-button/test/oscd-button.spec.ts new file mode 100644 index 0000000..055b5f9 --- /dev/null +++ b/components/oscd-button/test/oscd-button.spec.ts @@ -0,0 +1,61 @@ +import { expect, fixture, html } from '@open-wc/testing'; + +import '../src/OscdButton.js'; +import type { OscdButton } from '../src/oscd-button.js'; + +describe('Basic component oscd-button', () => { + let element: OscdButton; + + beforeEach(async () => { + element = await fixture(html``); + await element.updateComplete; + }); + + it('Should have basic text', async () => { + const label = 'Click me!'; + element.label = label; + + await element.updateComplete; + + expect(element.shadowRoot!.querySelector('mwc-button')?.label).to.equal( + label + ); + }); + + it('Should be raised', async () => { + element.raised = true; + + await element.updateComplete; + + expect(element.shadowRoot?.querySelector('mwc-button')!.raised).to.be.true; + }); + + it('Should be outlined', async () => { + element.outlined = true; + + await element.updateComplete; + + expect(element.shadowRoot?.querySelector('mwc-button')?.outlined).to.be + .true; + }); + + it('Should be disabled', async () => { + element.disabled = true; + + await element.updateComplete; + + expect(element.shadowRoot?.querySelector('mwc-button')?.disabled).to.be + .true; + }); + + it('Should have icon', async () => { + const icon = 'edit'; + element.icon = icon; + + await element.updateComplete; + + expect(element.shadowRoot?.querySelector('mwc-button')?.icon).to.equal( + icon + ); + }); +}); diff --git a/components/oscd-button/test/oscd-button.test.ts b/components/oscd-button/test/oscd-button.test.ts new file mode 100644 index 0000000..6ce21c1 --- /dev/null +++ b/components/oscd-button/test/oscd-button.test.ts @@ -0,0 +1,107 @@ +import { fixture, html } from '@open-wc/testing'; + +import { visualDiff } from '@web/test-runner-visual-regression'; + +import '../src/OscdButton.js'; +import type { OscdButton } from '../src/oscd-button.js'; + +const factor = process.env.CI ? 2 : 1; + +function timeout(ms: number) { + return new Promise((res) => { + setTimeout(res, ms * factor); + }); +} + +mocha.timeout(2000 * factor); + +describe('oscd-button', () => { + let element: OscdButton; + + beforeEach(async () => { + element = await fixture( + html`` + ); + document.body.prepend(element); + }); + + afterEach(() => element.remove()); + + it('displays the label', async () => { + await element.updateComplete; + await timeout(500); + await visualDiff(element, 'oscd-button'); + }); + + it('displays the icon', async () => { + element.icon = 'arrow_back'; + await element.updateComplete; + await timeout(500); + await visualDiff(element, 'oscd-button-icon'); + }); + + it('is disabled', async () => { + element.disabled = true; + await element.updateComplete; + await timeout(500); + await visualDiff(element, 'oscd-button-disabled'); + }); + + describe('raised', () => { + beforeEach(async () => { + element = await fixture( + html`` + ); + document.body.prepend(element); + }); + + it('displays the label', async () => { + await element.updateComplete; + await timeout(500); + await visualDiff(element, 'oscd-button--raised'); + }); + + it('displays the icon', async () => { + element.icon = 'arrow_back'; + await element.updateComplete; + await timeout(500); + await visualDiff(element, 'oscd-button--raised-icon'); + }); + + it('is disabled', async () => { + element.disabled = true; + await element.updateComplete; + await timeout(500); + await visualDiff(element, 'oscd-button--raised-disabled'); + }); + }); + + describe('outlined', () => { + beforeEach(async () => { + element = await fixture( + html`` + ); + document.body.prepend(element); + }); + + it('displays the label', async () => { + await element.updateComplete; + await timeout(500); + await visualDiff(element, 'oscd-button--outlined'); + }); + + it('displays the icon', async () => { + element.icon = 'arrow_back'; + await element.updateComplete; + await timeout(500); + await visualDiff(element, 'oscd-button--outlined-icon'); + }); + + it('is disabled', async () => { + element.disabled = true; + await element.updateComplete; + await timeout(500); + await visualDiff(element, 'oscd-button--outlined-disabled'); + }); + }); +}); diff --git a/components/oscd-button/tsconfig.json b/components/oscd-button/tsconfig.json new file mode 100644 index 0000000..4627f8a --- /dev/null +++ b/components/oscd-button/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "target": "es2018", + "module": "esnext", + "moduleResolution": "node", + "noEmitOnError": true, + "lib": ["es2018", "dom"], + "strict": true, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "experimentalDecorators": true, + "declaration": true, + "importHelpers": true, + "outDir": "dist", + "sourceMap": true, + "inlineSources": true, + "rootDir": "./src", + "tsBuildInfoFile": ".tsbuildinfo", + "incremental": true, + "skipLibCheck": true, + "resolveJsonModule": true + }, + "include": ["./src/**/*.ts"], + "exclude": ["**/*.stories.ts", "**/*.stories.js"] +} diff --git a/components/oscd-button/tsconfig.storybook.json b/components/oscd-button/tsconfig.storybook.json new file mode 100644 index 0000000..cda53dc --- /dev/null +++ b/components/oscd-button/tsconfig.storybook.json @@ -0,0 +1,18 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "emitDecoratorMetadata": true, + "composite": true, + "incremental": false, + "tsBuildInfoFile": null, + "rootDir": "./" + }, + "exclude": ["./test/**/*.ts"], + "include": [ + "./stories/**/*.stories.ts", + "./src/**/*.ts", + "./src/*.ts", + "./.storybook/*.js", + "./.storybook/*.ts" + ] +} diff --git a/components/oscd-button/tsconfig.test.json b/components/oscd-button/tsconfig.test.json new file mode 100644 index 0000000..29717e3 --- /dev/null +++ b/components/oscd-button/tsconfig.test.json @@ -0,0 +1,7 @@ +{ + "compilerOptions": { + "rootDir": "./" + }, + "extends": "./tsconfig", + "include": ["*/*.ts"] +} diff --git a/components/oscd-button/typedoc.json b/components/oscd-button/typedoc.json new file mode 100644 index 0000000..2c43ad9 --- /dev/null +++ b/components/oscd-button/typedoc.json @@ -0,0 +1,4 @@ +{ + "entryPoints": ["src/index.ts"], + "out": "docs" +} diff --git a/components/oscd-button/web-test-runner.config.js b/components/oscd-button/web-test-runner.config.js new file mode 100644 index 0000000..28aec99 --- /dev/null +++ b/components/oscd-button/web-test-runner.config.js @@ -0,0 +1,182 @@ +import { visualRegressionPlugin } from '@web/test-runner-visual-regression/plugin'; +import { playwrightLauncher } from '@web/test-runner-playwright'; + +import pixelmatch from 'pixelmatch'; +import { PNG } from 'pngjs'; + +const fuzzy = ['win32', 'darwin'].includes(process.platform); // allow for 1% difference on non-linux OSs +const local = !process.env.CI; + +console.assert(local, 'Running in CI!'); +console.assert(!fuzzy, 'Running on OS with 1% test pixel diff threshold!'); + +const thresholdPercentage = fuzzy && local ? 0 : 0; + +const filteredLogs = [ + 'Running in dev mode', + 'Lit is in dev mode', + 'mwc-list-item scheduled an update', +]; + +const browsers = [ + playwrightLauncher({ + product: 'chromium', + }), + playwrightLauncher({ product: 'firefox' }), + playwrightLauncher({ product: 'webkit' }), +]; + +function defaultGetImageDiff({ baselineImage, image, options }) { + let error = ''; + let basePng = PNG.sync.read(baselineImage); + let png = PNG.sync.read(image); + let { width, height } = png; + + if (basePng.width !== png.width || basePng.height !== png.height) { + error = + `Screenshot is not the same width and height as the baseline. ` + + `Baseline: { width: ${basePng.width}, height: ${basePng.height} }` + + `Screenshot: { width: ${png.width}, height: ${png.height} }`; + width = Math.max(basePng.width, png.width); + height = Math.max(basePng.height, png.height); + let oldPng = basePng; + basePng = new PNG({ width, height }); + oldPng.data.copy(basePng.data, 0, 0, oldPng.data.length); + oldPng = png; + png = new PNG({ width, height }); + oldPng.data.copy(png.data, 0, 0, oldPng.data.length); + } + + const diff = new PNG({ width, height }); + + const numDiffPixels = pixelmatch( + basePng.data, + png.data, + diff.data, + width, + height, + options + ); + const diffPercentage = (numDiffPixels / (width * height)) * 100; + + return { + error, + diffImage: PNG.sync.write(diff), + diffPercentage, + }; +} + +export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({ + plugins: [ + visualRegressionPlugin({ + update: process.argv.includes('--update-visual-baseline'), + getImageDiff: (options) => { + const result = defaultGetImageDiff(options); + if (result.diffPercentage < thresholdPercentage) + result.diffPercentage = 0; + return result; + }, + }), + ], + + files: 'dist/**/*.spec.js', + + groups: [ + { + name: 'visual', + files: 'dist/**/*.test.js', + testRunnerHtml: (testFramework) => ` + + + + + + + + + + + + + +`, + }, + ], + + /** Resolve bare module imports */ + nodeResolve: { + exportConditions: ['browser', 'development'], + }, + + /** Filter out lit dev mode logs */ + filterBrowserLogs(log) { + for (const arg of log.args) { + if ( + typeof arg === 'string' && + filteredLogs.some((l) => arg.includes(l)) + ) { + return false; + } + } + return true; + }, + + /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */ + // esbuildTarget: 'auto', + + /** Amount of browsers to run concurrently */ + concurrentBrowsers: 3, + + /** Amount of test files per browser to test concurrently */ + concurrency: 2, + + /** Browsers to run tests on */ + browsers, + + // See documentation for all available options +}); From 935bd5ef783ca6240543037d8b3366f09d13be64 Mon Sep 17 00:00:00 2001 From: Pascal Wilbrink Date: Tue, 3 Oct 2023 15:39:41 +0200 Subject: [PATCH 3/5] Added oscd dialog --- components/oscd-dialog/.gitignore | 20 ++ components/oscd-dialog/.npmignore | 18 ++ components/oscd-dialog/.storybook/main.ts | 30 +++ components/oscd-dialog/.storybook/manager.ts | 5 + .../oscd-dialog/.storybook/preview-head.html | 15 ++ components/oscd-dialog/.storybook/preview.ts | 40 ++++ components/oscd-dialog/CHANGELOG.md | 1 + components/oscd-dialog/EXAMPLE.md | 3 + components/oscd-dialog/INTRO.md | 0 components/oscd-dialog/LICENSE.md | 201 ++++++++++++++++++ components/oscd-dialog/README.md | 23 ++ .../custom-elements-manifest.config.js | 6 + components/oscd-dialog/custom-elements.json | 131 ++++++++++++ components/oscd-dialog/package.json | 61 ++++++ components/oscd-dialog/project.json | 33 +++ components/oscd-dialog/src/OscdDialog.ts | 5 + .../oscd-dialog/src/oscd-dialog.styles.ts | 7 + components/oscd-dialog/src/oscd-dialog.ts | 58 +++++ .../oscd-dialog/stories/oscd-dialog.mdx | 38 ++++ .../stories/oscd-dialog.stories.ts | 93 ++++++++ .../oscd-dialog/test/oscd-dialog.spec.ts | 13 ++ .../oscd-dialog/test/oscd-dialog.test.ts | 27 +++ components/oscd-dialog/tsconfig.json | 25 +++ .../oscd-dialog/tsconfig.storybook.json | 18 ++ components/oscd-dialog/tsconfig.test.json | 7 + components/oscd-dialog/typedoc.json | 4 + .../oscd-dialog/web-test-runner.config.js | 182 ++++++++++++++++ 27 files changed, 1064 insertions(+) create mode 100644 components/oscd-dialog/.gitignore create mode 100644 components/oscd-dialog/.npmignore create mode 100644 components/oscd-dialog/.storybook/main.ts create mode 100644 components/oscd-dialog/.storybook/manager.ts create mode 100644 components/oscd-dialog/.storybook/preview-head.html create mode 100644 components/oscd-dialog/.storybook/preview.ts create mode 100644 components/oscd-dialog/CHANGELOG.md create mode 100644 components/oscd-dialog/EXAMPLE.md create mode 100644 components/oscd-dialog/INTRO.md create mode 100644 components/oscd-dialog/LICENSE.md create mode 100644 components/oscd-dialog/README.md create mode 100644 components/oscd-dialog/custom-elements-manifest.config.js create mode 100644 components/oscd-dialog/custom-elements.json create mode 100644 components/oscd-dialog/package.json create mode 100644 components/oscd-dialog/project.json create mode 100644 components/oscd-dialog/src/OscdDialog.ts create mode 100644 components/oscd-dialog/src/oscd-dialog.styles.ts create mode 100644 components/oscd-dialog/src/oscd-dialog.ts create mode 100644 components/oscd-dialog/stories/oscd-dialog.mdx create mode 100644 components/oscd-dialog/stories/oscd-dialog.stories.ts create mode 100644 components/oscd-dialog/test/oscd-dialog.spec.ts create mode 100644 components/oscd-dialog/test/oscd-dialog.test.ts create mode 100644 components/oscd-dialog/tsconfig.json create mode 100644 components/oscd-dialog/tsconfig.storybook.json create mode 100644 components/oscd-dialog/tsconfig.test.json create mode 100644 components/oscd-dialog/typedoc.json create mode 100644 components/oscd-dialog/web-test-runner.config.js diff --git a/components/oscd-dialog/.gitignore b/components/oscd-dialog/.gitignore new file mode 100644 index 0000000..63cc1db --- /dev/null +++ b/components/oscd-dialog/.gitignore @@ -0,0 +1,20 @@ +## editors +/.idea +/.vscode + +## system files +.DS_Store + +## npm +/node_modules/ +/npm-debug.log +.tsbuildinfo + +## testing +/coverage/ + +## docs +/doc/ + +# build +/dist/ diff --git a/components/oscd-dialog/.npmignore b/components/oscd-dialog/.npmignore new file mode 100644 index 0000000..28f225d --- /dev/null +++ b/components/oscd-dialog/.npmignore @@ -0,0 +1,18 @@ +## editors +/.idea +/.vscode + +## system files +.DS_Store + +## npm +/node_modules/ +/npm-debug.log +.tsbuildinfo + +## testing +/coverage/ + +## docs +/doc/ + diff --git a/components/oscd-dialog/.storybook/main.ts b/components/oscd-dialog/.storybook/main.ts new file mode 100644 index 0000000..c8e9fee --- /dev/null +++ b/components/oscd-dialog/.storybook/main.ts @@ -0,0 +1,30 @@ +import type { StorybookConfig } from '@storybook/web-components-vite'; + +const config: StorybookConfig = { + stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)', '../stories/**/*.mdx'], + addons: [ + '@storybook/addon-docs', + '@storybook/addon-controls', + '@storybook/addon-actions', + '@storybook/addon-a11y', + '@storybook/addon-links', + { + name: '@storybook/adddon-essentials', + options: { + background: false, + }, + }, + '@etchteam/storybook-addon-status/register', + 'storybook-addon-root-attribute/register', + ], + framework: { + name: '@storybook/web-components-vite', + options: { + builder: { + viteConfigPath: '', + }, + }, + }, +}; + +export default config; diff --git a/components/oscd-dialog/.storybook/manager.ts b/components/oscd-dialog/.storybook/manager.ts new file mode 100644 index 0000000..66b6e89 --- /dev/null +++ b/components/oscd-dialog/.storybook/manager.ts @@ -0,0 +1,5 @@ +import { addons } from '@storybook/manager-api'; + +addons.setConfig({ + enableShortcuts: false +}); diff --git a/components/oscd-dialog/.storybook/preview-head.html b/components/oscd-dialog/.storybook/preview-head.html new file mode 100644 index 0000000..cee1d43 --- /dev/null +++ b/components/oscd-dialog/.storybook/preview-head.html @@ -0,0 +1,15 @@ + + + diff --git a/components/oscd-dialog/.storybook/preview.ts b/components/oscd-dialog/.storybook/preview.ts new file mode 100644 index 0000000..738938f --- /dev/null +++ b/components/oscd-dialog/.storybook/preview.ts @@ -0,0 +1,40 @@ +import { setCustomElementsManifest } from '@storybook/web-components'; + +import { withRootAttribute } from 'storybook-addon-root-attribute'; + +import '../../../themes/prebuilt/oscd.css'; + +import customElements from '../custom-elements.json'; + +setCustomElementsManifest(customElements); + +export const decorators = [withRootAttribute]; + +export const parameters = { + statuses: { + released: { + background: '#0000ff', + color: '#ffffff', + description: 'This component is stable and released', + }, + beta: { + background: '#FF0000', + color: '#FFFFFF', + description: 'This component is still in beta', + }, + }, + rootAttribute: { + defaultState: { + name: 'Light', + value: null, + }, + attribute: 'dark', + tooltip: true, + states: [ + { + name: 'Dark', + value: 'dark', + }, + ], + }, +}; diff --git a/components/oscd-dialog/CHANGELOG.md b/components/oscd-dialog/CHANGELOG.md new file mode 100644 index 0000000..825c32f --- /dev/null +++ b/components/oscd-dialog/CHANGELOG.md @@ -0,0 +1 @@ +# Changelog diff --git a/components/oscd-dialog/EXAMPLE.md b/components/oscd-dialog/EXAMPLE.md new file mode 100644 index 0000000..db17cf8 --- /dev/null +++ b/components/oscd-dialog/EXAMPLE.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/components/oscd-dialog/INTRO.md b/components/oscd-dialog/INTRO.md new file mode 100644 index 0000000..e69de29 diff --git a/components/oscd-dialog/LICENSE.md b/components/oscd-dialog/LICENSE.md new file mode 100644 index 0000000..c61b663 --- /dev/null +++ b/components/oscd-dialog/LICENSE.md @@ -0,0 +1,201 @@ + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + +TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + +1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + +2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + +3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + +4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + +5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + +6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + +7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + +8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + +9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + +END OF TERMS AND CONDITIONS + +APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + +Copyright [yyyy] [name of copyright owner] + +Licensed 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 CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. diff --git a/components/oscd-dialog/README.md b/components/oscd-dialog/README.md new file mode 100644 index 0000000..c5c4d6e --- /dev/null +++ b/components/oscd-dialog/README.md @@ -0,0 +1,23 @@ +# `` ![NPM](https://img.shields.io/badge/NPM-0.0.1-cb0001) ![Status](https://img.shields.io/badge/WIP-3b72bf) + +--- + + + +## Example + +```html + +``` + +--- + +### Attributes + +| Name | Type | Description | +| ---- | ---- | ----------- | + +### Css Properties + +| Name | Default | Description | +| ---- | ------- | ----------- | \ No newline at end of file diff --git a/components/oscd-dialog/custom-elements-manifest.config.js b/components/oscd-dialog/custom-elements-manifest.config.js new file mode 100644 index 0000000..562fc21 --- /dev/null +++ b/components/oscd-dialog/custom-elements-manifest.config.js @@ -0,0 +1,6 @@ +export default { + globs: ['src/*.ts'], + exclude: ['test/*.ts'], + litelement: true, + plugins: [], +}; diff --git a/components/oscd-dialog/custom-elements.json b/components/oscd-dialog/custom-elements.json new file mode 100644 index 0000000..9a4ef94 --- /dev/null +++ b/components/oscd-dialog/custom-elements.json @@ -0,0 +1,131 @@ +{ + "schemaVersion": "1.0.0", + "readme": "", + "modules": [ + { + "kind": "javascript-module", + "path": "src/OscdDialog.ts", + "declarations": [], + "exports": [ + { + "kind": "custom-element-definition", + "name": "oscd-dialog", + "declaration": { + "name": "OscdDialog", + "module": "/src/oscd-dialog" + } + }, + { + "kind": "js", + "name": "OscdDialog", + "declaration": { + "name": "OscdDialog", + "module": "src/OscdDialog.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "*", + "declaration": { + "name": "*", + "package": "./OscdDialog.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/oscd-dialog.styles.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "module": "src/oscd-dialog.styles.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/oscd-dialog.ts", + "declarations": [ + { + "kind": "class", + "description": "", + "name": "OscdDialog", + "members": [ + { + "kind": "field", + "name": "open", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Determines if the Dialog is open or not" + }, + { + "kind": "method", + "name": "show", + "return": { + "type": { + "text": "void" + } + } + }, + { + "kind": "method", + "name": "hide", + "return": { + "type": { + "text": "void" + } + } + }, + { + "kind": "method", + "name": "onClosed", + "return": { + "type": { + "text": "void" + } + }, + "parameters": [ + { + "name": "evt", + "type": { + "text": "Event" + } + } + ] + } + ], + "superclass": { + "name": "OscdComponent", + "package": "@openscd/core" + }, + "tagName": "oscd-dialog", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "OscdDialog", + "declaration": { + "name": "OscdDialog", + "module": "src/oscd-dialog.ts" + } + } + ] + } + ] +} diff --git a/components/oscd-dialog/package.json b/components/oscd-dialog/package.json new file mode 100644 index 0000000..75bf7cb --- /dev/null +++ b/components/oscd-dialog/package.json @@ -0,0 +1,61 @@ +{ + "name": "@openscd/oscd-dialog", + "description": "Webcomponent oscd-dialog following open-wc recommendations", + "license": "Apache-2.0", + "author": "OpenSCD", + "version": "0.0.1", + "browser": "./dist/OscdDialog.js", + "module": "./dist/OscdDialog.js", + "files": [ + "dist/**/*" + ], + "exports": { + ".": "./dist/OscdDialog.js", + "./oscd-dialog.js": "./dist/oscd-dialog.js" + }, + "type": "module", + "readme": "./README.md", + "scripts": { + "analyze": "cem analyze", + "build": "tsc", + "clean": "rimraf .tsbuildinfo dist", + "storybook": "npx nx storybook oscd-dialog", + "typedoc": "typedoc", + "test": "tsc --p tsconfig.test.json && wtr --coverage", + "test:unit": "tsc --p tsconfig.test.json && wtr --group default", + "test:visual": "tsc --p tsconfig.test.json && wtr --group visual", + "test:update": "tsc --p tsconfig.test.json && wtr --group visual --update-visual-baseline", + "test:watch": "tsc --p tsconfig.test.json && concurrently -k -r \"tsc --p tsconfig.test.json --watch --preserveWatchOutput\" \"wtr --watch\"" + }, + "dependencies": { + "@openscd/core": "*", + "@material/mwc-dialog": "0.27.0", + "lit": "^2.7.6" + }, + "devDependencies": { + "@commitlint/cli": "^17.3.0", + "@commitlint/config-conventional": "^17.3.0", + "@custom-elements-manifest/analyzer": "^0.4.17", + "@open-wc/demoing-storybook": "^2.4.7", + "@open-wc/eslint-config": "^8.0.2", + "@open-wc/scoped-elements": "^2.2.0", + "@open-wc/testing": "^3.1.6", + "@oscd/utils": "*", + "@typescript-eslint/eslint-plugin": "^4.33.0", + "@typescript-eslint/parser": "^4.33.0", + "@web/dev-server": "^0.1.34", + "@web/dev-server-storybook": "^0.5.4", + "@web/test-runner": "^0.14.0", + "@web/test-runner-playwright": "^0.9.0", + "@web/test-runner-visual-regression": "^0.7.0", + "concurrently": "^8.2.0", + "storybook-addon-root-attribute": "^1.0.2", + "tslib": "^2.6.0", + "typedoc": "^0.24.8", + "typescript": "^5.1.6" + }, + "customElements": "custom-elements.json", + "oscd": { + "status": "WIP" + } +} diff --git a/components/oscd-dialog/project.json b/components/oscd-dialog/project.json new file mode 100644 index 0000000..ffb4f35 --- /dev/null +++ b/components/oscd-dialog/project.json @@ -0,0 +1,33 @@ +{ + "name": "oscd-dialog", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "library", + "sourceRoot": "components/oscd-dialog/src", + "targets": { + "storybook": { + "executor": "@nx/storybook:storybook", + "options": { + "port": 4400, + "configDir": "components/oscd-dialog/.storybook" + }, + "configurations": { + "ci": { + "quiet": true + } + } + }, + "build-storybook": { + "executor": "@nx/storybook:build", + "outputs": ["{options.outputDir}"], + "options": { + "outputDir": "dist/storybook/oscd-dialog", + "configDir": "components/oscd-dialog/.storybook" + }, + "configurations": { + "ci": { + "quiet": true + } + } + } + } +} diff --git a/components/oscd-dialog/src/OscdDialog.ts b/components/oscd-dialog/src/OscdDialog.ts new file mode 100644 index 0000000..f97df35 --- /dev/null +++ b/components/oscd-dialog/src/OscdDialog.ts @@ -0,0 +1,5 @@ +import { OscdDialog } from './oscd-dialog'; + +window.customElements.define('oscd-dialog', OscdDialog); + +export { OscdDialog }; diff --git a/components/oscd-dialog/src/oscd-dialog.styles.ts b/components/oscd-dialog/src/oscd-dialog.styles.ts new file mode 100644 index 0000000..59d6881 --- /dev/null +++ b/components/oscd-dialog/src/oscd-dialog.styles.ts @@ -0,0 +1,7 @@ +import { css } from 'lit-element'; + +import { styles } from '@openscd/core'; + +export default css` + ${styles} +`; diff --git a/components/oscd-dialog/src/oscd-dialog.ts b/components/oscd-dialog/src/oscd-dialog.ts new file mode 100644 index 0000000..49f4663 --- /dev/null +++ b/components/oscd-dialog/src/oscd-dialog.ts @@ -0,0 +1,58 @@ +import { + html, + CSSResultGroup, + TemplateResult, + property, + query, +} from 'lit-element'; + +import '@material/mwc-dialog'; + +import { OscdComponent, redispatchEvent } from '@openscd/core'; + +import styles from './oscd-dialog.styles.js'; + +/** + * + * @prop {boolean} open - Determines if the Dialog is open or not + * + * @example + * @tagname oscd-dialog + */ +export class OscdDialog extends OscdComponent { + static styles: CSSResultGroup = styles; + + /** + * @internal + */ + static get scopedElements() { + return {}; + } + + @property({ + type: Boolean, + reflect: true, + }) + open = false; + + show(): void { + this.open = true; + } + + hide(): void { + this.open = false; + } + + onClosed(evt: Event): void { + this.hide(); + redispatchEvent(this, evt); + } + + render(): TemplateResult { + return html``; + } +} diff --git a/components/oscd-dialog/stories/oscd-dialog.mdx b/components/oscd-dialog/stories/oscd-dialog.mdx new file mode 100644 index 0000000..a119c22 --- /dev/null +++ b/components/oscd-dialog/stories/oscd-dialog.mdx @@ -0,0 +1,38 @@ +import { + Meta, + Story, + Canvas, + Source, + ArgTypes, + Title, + Description, + Subtitle, +} from '@storybook/blocks'; + +import { Markdown } from '@storybook/addon-docs'; + +import * as OscdDialogStories from './oscd-dialog.stories'; + +import Readme from '../README.md?raw'; +import Changelog from '../CHANGELOG.md?raw'; + + +oscd-dialog + + +Properties + + + + + + +# Example + + + +{Readme} + +# Changelog + +{Changelog} diff --git a/components/oscd-dialog/stories/oscd-dialog.stories.ts b/components/oscd-dialog/stories/oscd-dialog.stories.ts new file mode 100644 index 0000000..be7544e --- /dev/null +++ b/components/oscd-dialog/stories/oscd-dialog.stories.ts @@ -0,0 +1,93 @@ +import type { Meta, StoryObj } from '@storybook/web-components'; +import { action } from '@storybook/addon-actions'; + +import { html } from 'lit'; + +import '../src/OscdDialog'; + +import { createBadge } from '@oscd/utils'; + +import pckgJson from '../package.json'; + +const meta: Meta = { + title: 'Dialog/OscdDialog', + component: 'oscd-dialog', + parameters: { + status: { + type: createBadge(pckgJson), + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +/** + * Basic + */ +export const Basic: Story = { + render: ({ content, open, onClose }) => + html`${content}`, + args: { + content: html`This is the content for the dialog`, + open: true, + onClose: action('on close'), + }, + parameters: { + docs: { + description: { + story: 'Basic oscd-dialog', + }, + }, + }, +}; + +/** + * With Primary Action + */ +export const WithPrimaryAction: Story = { + render: ({ content, open, onClose }) => + html`${content}`, + args: { + ...Basic.args, + }, +}; + +/** + * With Secondary Action + */ +export const WithSecondaryAction: Story = { + render: ({ content, open, onClose }) => + html`${content}`, + args: { + ...Basic.args, + }, +}; + +/** + * With Actions + */ +export const WithActions: Story = { + render: ({ content, open, onClose }) => + html`${content}`, + args: { + ...Basic.args, + }, +}; diff --git a/components/oscd-dialog/test/oscd-dialog.spec.ts b/components/oscd-dialog/test/oscd-dialog.spec.ts new file mode 100644 index 0000000..4c7d8e4 --- /dev/null +++ b/components/oscd-dialog/test/oscd-dialog.spec.ts @@ -0,0 +1,13 @@ +import { expect, fixture, html } from '@open-wc/testing'; + +import '../src'; +import type { OscdDialog } from '../src'; + +describe('Basic component oscd-dialog', () => { + let element: OscdDialog; + + beforeEach(async () => { + element = await fixture(html``); + await element.updateComplete; + }); +}); diff --git a/components/oscd-dialog/test/oscd-dialog.test.ts b/components/oscd-dialog/test/oscd-dialog.test.ts new file mode 100644 index 0000000..0320b3a --- /dev/null +++ b/components/oscd-dialog/test/oscd-dialog.test.ts @@ -0,0 +1,27 @@ +import { fixture, html } from '@open-wc/testing'; + +import { visualDiff } from '@web/test-runner-visual-regression'; + +import '../src'; +import { OscdDialog } from '../src'; + +const factor = process.env.CI ? 2 : 1; + +function timeout(ms: number) { + return new Promise((res) => { + setTimeout(res, ms * factor); + }); +} + +mocha.timeout(2000 * factor); + +describe('oscd-dialog', () => { + let element: OscdDialog; + + beforeEach(async () => { + element = await fixture(html``); + document.body.prepend(element); + }); + + afterEach(() => element.remove()); +}); diff --git a/components/oscd-dialog/tsconfig.json b/components/oscd-dialog/tsconfig.json new file mode 100644 index 0000000..4627f8a --- /dev/null +++ b/components/oscd-dialog/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "target": "es2018", + "module": "esnext", + "moduleResolution": "node", + "noEmitOnError": true, + "lib": ["es2018", "dom"], + "strict": true, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "experimentalDecorators": true, + "declaration": true, + "importHelpers": true, + "outDir": "dist", + "sourceMap": true, + "inlineSources": true, + "rootDir": "./src", + "tsBuildInfoFile": ".tsbuildinfo", + "incremental": true, + "skipLibCheck": true, + "resolveJsonModule": true + }, + "include": ["./src/**/*.ts"], + "exclude": ["**/*.stories.ts", "**/*.stories.js"] +} diff --git a/components/oscd-dialog/tsconfig.storybook.json b/components/oscd-dialog/tsconfig.storybook.json new file mode 100644 index 0000000..cda53dc --- /dev/null +++ b/components/oscd-dialog/tsconfig.storybook.json @@ -0,0 +1,18 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "emitDecoratorMetadata": true, + "composite": true, + "incremental": false, + "tsBuildInfoFile": null, + "rootDir": "./" + }, + "exclude": ["./test/**/*.ts"], + "include": [ + "./stories/**/*.stories.ts", + "./src/**/*.ts", + "./src/*.ts", + "./.storybook/*.js", + "./.storybook/*.ts" + ] +} diff --git a/components/oscd-dialog/tsconfig.test.json b/components/oscd-dialog/tsconfig.test.json new file mode 100644 index 0000000..29717e3 --- /dev/null +++ b/components/oscd-dialog/tsconfig.test.json @@ -0,0 +1,7 @@ +{ + "compilerOptions": { + "rootDir": "./" + }, + "extends": "./tsconfig", + "include": ["*/*.ts"] +} diff --git a/components/oscd-dialog/typedoc.json b/components/oscd-dialog/typedoc.json new file mode 100644 index 0000000..2c43ad9 --- /dev/null +++ b/components/oscd-dialog/typedoc.json @@ -0,0 +1,4 @@ +{ + "entryPoints": ["src/index.ts"], + "out": "docs" +} diff --git a/components/oscd-dialog/web-test-runner.config.js b/components/oscd-dialog/web-test-runner.config.js new file mode 100644 index 0000000..28aec99 --- /dev/null +++ b/components/oscd-dialog/web-test-runner.config.js @@ -0,0 +1,182 @@ +import { visualRegressionPlugin } from '@web/test-runner-visual-regression/plugin'; +import { playwrightLauncher } from '@web/test-runner-playwright'; + +import pixelmatch from 'pixelmatch'; +import { PNG } from 'pngjs'; + +const fuzzy = ['win32', 'darwin'].includes(process.platform); // allow for 1% difference on non-linux OSs +const local = !process.env.CI; + +console.assert(local, 'Running in CI!'); +console.assert(!fuzzy, 'Running on OS with 1% test pixel diff threshold!'); + +const thresholdPercentage = fuzzy && local ? 0 : 0; + +const filteredLogs = [ + 'Running in dev mode', + 'Lit is in dev mode', + 'mwc-list-item scheduled an update', +]; + +const browsers = [ + playwrightLauncher({ + product: 'chromium', + }), + playwrightLauncher({ product: 'firefox' }), + playwrightLauncher({ product: 'webkit' }), +]; + +function defaultGetImageDiff({ baselineImage, image, options }) { + let error = ''; + let basePng = PNG.sync.read(baselineImage); + let png = PNG.sync.read(image); + let { width, height } = png; + + if (basePng.width !== png.width || basePng.height !== png.height) { + error = + `Screenshot is not the same width and height as the baseline. ` + + `Baseline: { width: ${basePng.width}, height: ${basePng.height} }` + + `Screenshot: { width: ${png.width}, height: ${png.height} }`; + width = Math.max(basePng.width, png.width); + height = Math.max(basePng.height, png.height); + let oldPng = basePng; + basePng = new PNG({ width, height }); + oldPng.data.copy(basePng.data, 0, 0, oldPng.data.length); + oldPng = png; + png = new PNG({ width, height }); + oldPng.data.copy(png.data, 0, 0, oldPng.data.length); + } + + const diff = new PNG({ width, height }); + + const numDiffPixels = pixelmatch( + basePng.data, + png.data, + diff.data, + width, + height, + options + ); + const diffPercentage = (numDiffPixels / (width * height)) * 100; + + return { + error, + diffImage: PNG.sync.write(diff), + diffPercentage, + }; +} + +export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({ + plugins: [ + visualRegressionPlugin({ + update: process.argv.includes('--update-visual-baseline'), + getImageDiff: (options) => { + const result = defaultGetImageDiff(options); + if (result.diffPercentage < thresholdPercentage) + result.diffPercentage = 0; + return result; + }, + }), + ], + + files: 'dist/**/*.spec.js', + + groups: [ + { + name: 'visual', + files: 'dist/**/*.test.js', + testRunnerHtml: (testFramework) => ` + + + + + + + + + + + + + +`, + }, + ], + + /** Resolve bare module imports */ + nodeResolve: { + exportConditions: ['browser', 'development'], + }, + + /** Filter out lit dev mode logs */ + filterBrowserLogs(log) { + for (const arg of log.args) { + if ( + typeof arg === 'string' && + filteredLogs.some((l) => arg.includes(l)) + ) { + return false; + } + } + return true; + }, + + /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */ + // esbuildTarget: 'auto', + + /** Amount of browsers to run concurrently */ + concurrentBrowsers: 3, + + /** Amount of test files per browser to test concurrently */ + concurrency: 2, + + /** Browsers to run tests on */ + browsers, + + // See documentation for all available options +}); From 82841857e9574bd8c7938143382a4b41e6bc4e77 Mon Sep 17 00:00:00 2001 From: Pascal Wilbrink Date: Tue, 3 Oct 2023 15:40:48 +0200 Subject: [PATCH 4/5] Added oscd-switch --- components/oscd-switch/.gitignore | 20 ++ components/oscd-switch/.npmignore | 18 ++ components/oscd-switch/.storybook/main.ts | 30 +++ components/oscd-switch/.storybook/manager.ts | 5 + .../oscd-switch/.storybook/preview-head.html | 16 ++ components/oscd-switch/.storybook/preview.ts | 44 ++++ components/oscd-switch/CHANGELOG.md | 1 + components/oscd-switch/EXAMPLE.md | 3 + components/oscd-switch/INTRO.md | 0 components/oscd-switch/LICENSE.md | 201 ++++++++++++++++++ components/oscd-switch/README.md | 23 ++ .../custom-elements-manifest.config.js | 6 + components/oscd-switch/custom-elements.json | 126 +++++++++++ components/oscd-switch/package.json | 62 ++++++ components/oscd-switch/project.json | 33 +++ .../baseline/oscd-switch-selected.png | Bin 0 -> 718 bytes .../Chromium/baseline/oscd-switch.png | Bin 0 -> 611 bytes .../Firefox/baseline/oscd-switch-selected.png | Bin 0 -> 568 bytes .../Firefox/baseline/oscd-switch.png | Bin 0 -> 421 bytes .../Webkit/baseline/oscd-switch-selected.png | Bin 0 -> 967 bytes .../Webkit/baseline/oscd-switch.png | Bin 0 -> 699 bytes components/oscd-switch/src/OscdSwitch.ts | 7 + .../oscd-switch/src/oscd-switch.styles.ts | 54 +++++ components/oscd-switch/src/oscd-switch.ts | 102 +++++++++ .../oscd-switch/stories/oscd-switch.mdx | 28 +++ .../stories/oscd-switch.stories.ts | 84 ++++++++ .../oscd-switch/test/oscd-switch.spec.ts | 24 +++ .../oscd-switch/test/oscd-switch.test.ts | 42 ++++ components/oscd-switch/tsconfig.json | 25 +++ .../oscd-switch/tsconfig.storybook.json | 17 ++ components/oscd-switch/tsconfig.test.json | 7 + components/oscd-switch/typedoc.json | 4 + .../oscd-switch/web-test-runner.config.js | 182 ++++++++++++++++ 33 files changed, 1164 insertions(+) create mode 100644 components/oscd-switch/.gitignore create mode 100644 components/oscd-switch/.npmignore create mode 100644 components/oscd-switch/.storybook/main.ts create mode 100644 components/oscd-switch/.storybook/manager.ts create mode 100644 components/oscd-switch/.storybook/preview-head.html create mode 100644 components/oscd-switch/.storybook/preview.ts create mode 100644 components/oscd-switch/CHANGELOG.md create mode 100644 components/oscd-switch/EXAMPLE.md create mode 100644 components/oscd-switch/INTRO.md create mode 100644 components/oscd-switch/LICENSE.md create mode 100644 components/oscd-switch/README.md create mode 100644 components/oscd-switch/custom-elements-manifest.config.js create mode 100644 components/oscd-switch/custom-elements.json create mode 100644 components/oscd-switch/package.json create mode 100644 components/oscd-switch/project.json create mode 100644 components/oscd-switch/screenshots/Chromium/baseline/oscd-switch-selected.png create mode 100644 components/oscd-switch/screenshots/Chromium/baseline/oscd-switch.png create mode 100644 components/oscd-switch/screenshots/Firefox/baseline/oscd-switch-selected.png create mode 100644 components/oscd-switch/screenshots/Firefox/baseline/oscd-switch.png create mode 100644 components/oscd-switch/screenshots/Webkit/baseline/oscd-switch-selected.png create mode 100644 components/oscd-switch/screenshots/Webkit/baseline/oscd-switch.png create mode 100644 components/oscd-switch/src/OscdSwitch.ts create mode 100644 components/oscd-switch/src/oscd-switch.styles.ts create mode 100644 components/oscd-switch/src/oscd-switch.ts create mode 100644 components/oscd-switch/stories/oscd-switch.mdx create mode 100644 components/oscd-switch/stories/oscd-switch.stories.ts create mode 100644 components/oscd-switch/test/oscd-switch.spec.ts create mode 100644 components/oscd-switch/test/oscd-switch.test.ts create mode 100644 components/oscd-switch/tsconfig.json create mode 100644 components/oscd-switch/tsconfig.storybook.json create mode 100644 components/oscd-switch/tsconfig.test.json create mode 100644 components/oscd-switch/typedoc.json create mode 100644 components/oscd-switch/web-test-runner.config.js diff --git a/components/oscd-switch/.gitignore b/components/oscd-switch/.gitignore new file mode 100644 index 0000000..63cc1db --- /dev/null +++ b/components/oscd-switch/.gitignore @@ -0,0 +1,20 @@ +## editors +/.idea +/.vscode + +## system files +.DS_Store + +## npm +/node_modules/ +/npm-debug.log +.tsbuildinfo + +## testing +/coverage/ + +## docs +/doc/ + +# build +/dist/ diff --git a/components/oscd-switch/.npmignore b/components/oscd-switch/.npmignore new file mode 100644 index 0000000..28f225d --- /dev/null +++ b/components/oscd-switch/.npmignore @@ -0,0 +1,18 @@ +## editors +/.idea +/.vscode + +## system files +.DS_Store + +## npm +/node_modules/ +/npm-debug.log +.tsbuildinfo + +## testing +/coverage/ + +## docs +/doc/ + diff --git a/components/oscd-switch/.storybook/main.ts b/components/oscd-switch/.storybook/main.ts new file mode 100644 index 0000000..c8e9fee --- /dev/null +++ b/components/oscd-switch/.storybook/main.ts @@ -0,0 +1,30 @@ +import type { StorybookConfig } from '@storybook/web-components-vite'; + +const config: StorybookConfig = { + stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)', '../stories/**/*.mdx'], + addons: [ + '@storybook/addon-docs', + '@storybook/addon-controls', + '@storybook/addon-actions', + '@storybook/addon-a11y', + '@storybook/addon-links', + { + name: '@storybook/adddon-essentials', + options: { + background: false, + }, + }, + '@etchteam/storybook-addon-status/register', + 'storybook-addon-root-attribute/register', + ], + framework: { + name: '@storybook/web-components-vite', + options: { + builder: { + viteConfigPath: '', + }, + }, + }, +}; + +export default config; diff --git a/components/oscd-switch/.storybook/manager.ts b/components/oscd-switch/.storybook/manager.ts new file mode 100644 index 0000000..66b6e89 --- /dev/null +++ b/components/oscd-switch/.storybook/manager.ts @@ -0,0 +1,5 @@ +import { addons } from '@storybook/manager-api'; + +addons.setConfig({ + enableShortcuts: false +}); diff --git a/components/oscd-switch/.storybook/preview-head.html b/components/oscd-switch/.storybook/preview-head.html new file mode 100644 index 0000000..89f0ee1 --- /dev/null +++ b/components/oscd-switch/.storybook/preview-head.html @@ -0,0 +1,16 @@ + + + diff --git a/components/oscd-switch/.storybook/preview.ts b/components/oscd-switch/.storybook/preview.ts new file mode 100644 index 0000000..94c4d5d --- /dev/null +++ b/components/oscd-switch/.storybook/preview.ts @@ -0,0 +1,44 @@ +import { setCustomElementsManifest } from '@storybook/web-components'; + +import { html } from 'lit'; +import { withRootAttribute } from 'storybook-addon-root-attribute'; + +import '../../../themes/prebuilt/oscd.css'; + +import customElements from '../custom-elements.json'; + +setCustomElementsManifest(customElements); + +export const decorators = [withRootAttribute]; + +export const parameters = { + controls: { expanded: true }, + actions: { argTypesRegex: '^on.*' }, + + statuses: { + released: { + background: '#0000ff', + color: '#ffffff', + description: 'This component is stable and released', + }, + beta: { + background: '#FF0000', + color: '#FFFFFF', + description: 'This component is still in beta', + }, + }, + rootAttribute: { + defaultState: { + name: 'Light', + value: null, + }, + attribute: 'dark', + tooltip: true, + states: [ + { + name: 'Dark', + value: 'dark', + }, + ], + }, +}; diff --git a/components/oscd-switch/CHANGELOG.md b/components/oscd-switch/CHANGELOG.md new file mode 100644 index 0000000..825c32f --- /dev/null +++ b/components/oscd-switch/CHANGELOG.md @@ -0,0 +1 @@ +# Changelog diff --git a/components/oscd-switch/EXAMPLE.md b/components/oscd-switch/EXAMPLE.md new file mode 100644 index 0000000..aa26c80 --- /dev/null +++ b/components/oscd-switch/EXAMPLE.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/components/oscd-switch/INTRO.md b/components/oscd-switch/INTRO.md new file mode 100644 index 0000000..e69de29 diff --git a/components/oscd-switch/LICENSE.md b/components/oscd-switch/LICENSE.md new file mode 100644 index 0000000..c61b663 --- /dev/null +++ b/components/oscd-switch/LICENSE.md @@ -0,0 +1,201 @@ + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + +TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + +1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + +2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + +3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + +4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + +5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + +6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + +7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + +8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + +9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + +END OF TERMS AND CONDITIONS + +APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + +Copyright [yyyy] [name of copyright owner] + +Licensed 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 CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. diff --git a/components/oscd-switch/README.md b/components/oscd-switch/README.md new file mode 100644 index 0000000..88e60f6 --- /dev/null +++ b/components/oscd-switch/README.md @@ -0,0 +1,23 @@ +# `` ![NPM](https://img.shields.io/badge/NPM-0.0.1-cb0001) ![Status](https://img.shields.io/badge/WIP-3b72bf) + +--- + + + +## Example + +```html + +``` + +--- + +### Attributes + +| Name | Type | Description | +| ---- | ---- | ----------- | + +### Css Properties + +| Name | Default | Description | +| ---- | ------- | ----------- | \ No newline at end of file diff --git a/components/oscd-switch/custom-elements-manifest.config.js b/components/oscd-switch/custom-elements-manifest.config.js new file mode 100644 index 0000000..562fc21 --- /dev/null +++ b/components/oscd-switch/custom-elements-manifest.config.js @@ -0,0 +1,6 @@ +export default { + globs: ['src/*.ts'], + exclude: ['test/*.ts'], + litelement: true, + plugins: [], +}; diff --git a/components/oscd-switch/custom-elements.json b/components/oscd-switch/custom-elements.json new file mode 100644 index 0000000..cac71e7 --- /dev/null +++ b/components/oscd-switch/custom-elements.json @@ -0,0 +1,126 @@ +{ + "schemaVersion": "1.0.0", + "readme": "", + "modules": [ + { + "kind": "javascript-module", + "path": "src/OscdSwitch.ts", + "declarations": [], + "exports": [ + { + "kind": "custom-element-definition", + "name": "oscd-switch", + "declaration": { + "name": "OscdSwitch", + "module": "/src/oscd-switch.js" + } + }, + { + "kind": "js", + "name": "OscdSwitch", + "declaration": { + "name": "OscdSwitch", + "module": "src/OscdSwitch.ts" + } + }, + { + "kind": "js", + "name": "OscdSwitchChangeEvent", + "declaration": { + "name": "OscdSwitchChangeEvent", + "module": "./oscd-switch.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/oscd-switch.styles.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "module": "src/oscd-switch.styles.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/oscd-switch.ts", + "declarations": [ + { + "kind": "class", + "description": "", + "name": "OscdSwitch", + "members": [ + { + "kind": "field", + "name": "selected", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Selected state of the Switch" + }, + { + "kind": "field", + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Disabled state of the Switch" + }, + { + "kind": "field", + "name": "value", + "type": { + "text": "string" + }, + "default": "'on'", + "description": "Value of the Switch" + }, + { + "kind": "field", + "name": "name", + "type": { + "text": "string" + }, + "default": "''", + "description": "Name of the Switch" + }, + { + "kind": "method", + "name": "onClick" + } + ], + "events": [ + { + "description": "{OscdSwitchChangeEvent} Fired whenever `selected` changes due to user interaction (bubbles and composed).", + "name": "change" + } + ], + "superclass": { + "name": "OscdComponent", + "package": "@openscd/core" + }, + "tagName": "oscd-switch", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "OscdSwitch", + "declaration": { + "name": "OscdSwitch", + "module": "src/oscd-switch.ts" + } + } + ] + } + ] +} diff --git a/components/oscd-switch/package.json b/components/oscd-switch/package.json new file mode 100644 index 0000000..acd5e4b --- /dev/null +++ b/components/oscd-switch/package.json @@ -0,0 +1,62 @@ +{ + "name": "@openscd/oscd-switch", + "description": "Webcomponent oscd-switch following open-wc recommendations", + "license": "Apache-2.0", + "author": "OpenSCD", + "version": "0.0.1", + "browser": "./dist/OscdSwitch.js", + "module": "./dist/OscdSwitch.js", + "types": "./dist/OscdSwitch.d.ts", + "files": [ + "./dist/**/*" + ], + "exports": { + ".": "./dist/OscdSwitch.js", + "./oscd-switch.js": "./dist/oscd-switch.js" + }, + "type": "module", + "readme": "./README.md", + "scripts": { + "analyze": "cem analyze", + "build": "tsc --build tsconfig.json", + "clean": "rimraf .tsbuildinfo dist", + "storybook": "npx nx storybook oscd-switch", + "typedoc": "typedoc", + "test": "tsc --p tsconfig.test.json && wtr --coverage", + "test:unit": "tsc --p tsconfig.test.json && wtr --group default", + "test:visual": "tsc --p tsconfig.test.json && wtr --group visual", + "test:update": "tsc --p tsconfig.test.json && wtr --group visual --update-visual-baseline", + "test:watch": "tsc --p tsconfig.test.json && concurrently -k -r \"tsc --p tsconfig.test.json --watch --preserveWatchOutput\" \"wtr --watch\"" + }, + "dependencies": { + "@openscd/core": "*", + "lit": "^2.7.6", + "@material/mwc-switch": "0.27.0" + }, + "devDependencies": { + "@commitlint/cli": "^17.3.0", + "@commitlint/config-conventional": "^17.3.0", + "@custom-elements-manifest/analyzer": "^0.4.17", + "@open-wc/demoing-storybook": "^2.4.7", + "@open-wc/eslint-config": "^8.0.2", + "@open-wc/scoped-elements": "^2.2.0", + "@open-wc/testing": "^3.1.6", + "@oscd/utils": "*", + "@typescript-eslint/eslint-plugin": "^4.33.0", + "@typescript-eslint/parser": "^4.33.0", + "@web/dev-server": "^0.1.34", + "@web/dev-server-storybook": "^0.5.4", + "@web/test-runner": "^0.14.0", + "@web/test-runner-playwright": "^0.9.0", + "@web/test-runner-visual-regression": "^0.7.0", + "concurrently": "^8.2.0", + "storybook-addon-root-attribute": "^1.0.2", + "tslib": "^2.6.0", + "typedoc": "^0.24.8", + "typescript": "^5.1.6" + }, + "customElements": "custom-elements.json", + "oscd": { + "status": "WIP" + } +} diff --git a/components/oscd-switch/project.json b/components/oscd-switch/project.json new file mode 100644 index 0000000..2c7237b --- /dev/null +++ b/components/oscd-switch/project.json @@ -0,0 +1,33 @@ +{ + "name": "oscd-switch", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "application", + "sourceRoot": "components/oscd-switch/src", + "targets": { + "storybook": { + "executor": "@nx/storybook:storybook", + "options": { + "port": 4400, + "configDir": "components/oscd-switch/.storybook" + }, + "configurations": { + "ci": { + "quiet": true + } + } + }, + "build-storybook": { + "executor": "@nx/storybook:build", + "outputs": ["{options.outputDir}"], + "options": { + "outputDir": "dist/storybook/oscd-switch", + "configDir": "components/oscd-switch/.storybook" + }, + "configurations": { + "ci": { + "quiet": true + } + } + } + } +} diff --git a/components/oscd-switch/screenshots/Chromium/baseline/oscd-switch-selected.png b/components/oscd-switch/screenshots/Chromium/baseline/oscd-switch-selected.png new file mode 100644 index 0000000000000000000000000000000000000000..4a018f8f26807e567aecef6cdd06a368ea42a9d1 GIT binary patch literal 718 zcmV;<0x|uGP){26h>42>gMr1x zXa@<=1VQ`(#kfEvU<;N?>Djy9<8b|H0=c^|_)TuOCwY?B^U3#lzCubV`HxDi|1osP zreHe*#XLBnN+~Is7VpP*n0jh@LR`3`a`oW>nlz;b%Km`$MQ4b5jFgh(Tir7T;PqpZ zSeMT5?Ep#zv$o(4QzntmnS6Tb4Rh~Jh%4~`0MpM*Hd7|5q1(y0rj*lJnKxLOwLD>Z zhiVFF6P8g#kz}NxP|CW3UkxjlI)5q%tO3tBvXgQz@k>=!I0PSWhjXz9ByV zBcoaa$|)w+BT<{9@Mqf{LLiVxRG&huN0MF=08GRSRnW+&20-sQ)e#1u?WjbFbb=7> zKv3Qz1Red2>l5(;llS#1%qa$-`z$Da4chwLgFv7NLFaKF?E|G97~wjt(INp@>HJ#Z6Y{8XI{cUSKg{kW4sxrv|PUi5_l7)K7c2!&OR)l4ViY$um9v zi;vG+oS&wyPTkz%+JjbFBEiOK@7EyKWq(deN`aILrWqjGr=vD+F!SV~E6mAT8(g{@ zA`}jwC`w~OUP?-dWm%L;B{Dy=yc%2Q+hmm0589sl+6Q&IM=}iGXd`+kg3ssMAJD(3 zd_K?oREqEKie$b7Nq=rZ&)7IEsuSzqB6=*(k<(3_IMYcm7_4E0*dI^@Re>3XL7`9} zm&=jM<HI2A#8JV8UwENV0;K^H2m%)qU*3Goy4A^IwPg$TrjAc7)-AW`H(Vp11VVfg2q zy9no2i>r<2xs0u+G4ZG0bK&eBWm<81Vl7{#R%`9#gB; zLdz^^wOT(KuZuB;(P$LZ%4W04^Yio8Lj8W9r>Cd2r}Ufgc+7l0M|Qj2t!0)xK0czg z4pnQ6;qC1WIT#FfCiL?15^6e2CX)%u^SmD~udlB+YI1XP6FhsK7euzsZu`xAK1Xg` zwSwh@!cI!X<8i)E>HCT|B_5B5t_4s^A&-xbw`%g8SS%Jq6(%yvvXGffW@kdlWD+4n zC>bFHwrwNx`8h*dknTv}H&d<+@L?UZN_OHuTNhz^yn^LKS)|y76v5`!nP@r5c zlSm|j+dgb;077eRwAL&Z3x>lXcXxO6dOcR1;3p?1WV2bWuC8!hmq;XnlyWN>0Aaph zDfRL3LA%}N;o*VdaLDWHE1#dA0POGY6N|-gU6*t^O)i(?;NW0qGJy~f9Qj&nX0sWS x$pqi`@qPb?kmEQwj)P@c?CtFZBD;_Q_yag=^+U&szUlw~002ovPDHLkV1jRs9p?Z5 literal 0 HcmV?d00001 diff --git a/components/oscd-switch/screenshots/Firefox/baseline/oscd-switch-selected.png b/components/oscd-switch/screenshots/Firefox/baseline/oscd-switch-selected.png new file mode 100644 index 0000000000000000000000000000000000000000..4e2289c0f441578e6f4d8584d24ef22ba084e5da GIT binary patch literal 568 zcmV-80>}M{P)jaUkSKm@f&VPTUX7Ai!I zVhTmhBIjq}cf8=O+&;H~%{jV$;LYY$3;W)Ge*514?J(iRg$?X1B2c)(g>YRs z7a4qQcW|~Js2q<<8M=QIV`eao#Zd=kRY33W5Eub%F96xJzMxkE0^&T2tzQ-<`}Aum zQ^8c#7GOWh@v$~31>SxJSn@=O!?j?763FGUJ5z%;HfIX71#ZI(yfI;)30Ys=z`+jI zgfLIE^<*M-$K@P$#==+!_r}Gv1RjDRfwD>g7Mu1yH()5Blx^Zm%S{+MRDH2uHXn@2 z{cj-hPs&PSC~`fnO3xEy)Uhs08dZfZ4CS+fs5i2Buofvp6VSIFj(9921?u00@P6cp zd>(E~NvI$&&uSd7R6>ZomEb_+AsX4-=s7mN7hehZp{P@@TZ^E!$#3BMPJ9tDFW3I3 zxAqx*D8H#=O9{*kl-?-zL(vOb?R+ql7a1~gKtX?u{Ld2V2H^%M*J6?a-(*IbD8+3dYrcRRW1(-B@po?Zi~1j_&n z?;6Nwbai!PoHYI>{vbNxU}L;of9}4_m#xQW>VAz!5BR<>48&Tt*=*?feEtYfuh)aoXe8V+X6pTZPY;K~M}Qp1 zVPh|1>etv`uUER=ZsGBGl!8Lvc%BEkt_zJl?jW`*(ln)~(+Q5pV=18Fa0vZ=A6l&z z*J4Bn!!VeJP1*DLq*<0Rpd?9zpl~4$1_Nlf+n^{)p^--eV^wRl+S{97hSgzpLsYW3 P00000NkvXXu0mjfC?mYy literal 0 HcmV?d00001 diff --git a/components/oscd-switch/screenshots/Webkit/baseline/oscd-switch-selected.png b/components/oscd-switch/screenshots/Webkit/baseline/oscd-switch-selected.png new file mode 100644 index 0000000000000000000000000000000000000000..c050f30fb9366c9eac245e40c247b0c6ed747427 GIT binary patch literal 967 zcmV;&133JNP)Px#L}ge>W=%~1DgXcg2mk?xX#fNO00031000^Q000001E2u_0{{R30RRC20H6W@ z1ONa40RR91B%lKT1ONa40RR915&!@I00eKY+5i9pF-b&0R7ef2mO)GtK@^7n-EJvu z*S3IC3MN7f9E=*21W44xpfQ?wF>>=}qA`Sn9E=yw>dAQEpiyr|4#r4K)Psf?(L@>z z5S4h)21ptxv864g+wN{#=WW?-3oUHHmrQ2%&Ad0?zIpR@xf~Pd!bZtuAR5f~s;o~` z?z7n})Qp0!FOvBDr1HAWX8MMJ{yPp>tyXY4keUW&{Q&jVh{9mzrdRRuX5qa|+jDH? zn%U(M4&4`>;K`UEet)VShN7dSWPE&>G0mVaw28otF%i9&YBbfWTNy~JG6W)|$mpcH zftfy&RWbiVLO5VCv)ouiFhg&5q5Zf3!Ny@?M8@AgJSIma@RT#v9us-iaz|AV@Mn#U z%nS(T`WsP$3HVjqKbJsm&BgTVEcj)Xz}t}=3#r0@f>YY5n{uJUbeyoV7g2HVOafA@ zkbCof9=yaNv>hQJx?PFIQlJ_~d2d_6kktzFRqCz0ud-UI7CDyG#nRSo!QFrx2hR${ zYUnvrDKf>2c}HFGV|8PKayF@k(cZ%rxEeVOj*1494nqlC?wAZ?HV~OF-qTX7GC$@x z4%EDdQijp^V;N5ek`UNUCaA7{t8tsQf*~i(T`6c05^RP~(*uSBL9n8^v$T?acu;^E zcwV?o>l3)#MjfZqEQeUNZ0%;#R5hy*9ca&fz|$&~Sn5!8q-G*R#&vBH+D|f!oqRfE zC5>n-jKKFO#&7#dpy+{)Z04O>a+UPXS2NvywoCl4=u`gRMTUR2-Ai z3YH=Z`1L-ApU;{q?YF7^=+#A>8sgyd`PiqUSlF>S>hrBwU3ttymhFf{JS>+&usRno z^=M2w002ovPDHLkV1l79rD6a8 literal 0 HcmV?d00001 diff --git a/components/oscd-switch/screenshots/Webkit/baseline/oscd-switch.png b/components/oscd-switch/screenshots/Webkit/baseline/oscd-switch.png new file mode 100644 index 0000000000000000000000000000000000000000..38a6104f844e504623eb3415d2c6a10449b933a5 GIT binary patch literal 699 zcmeAS@N?(olHy`uVBq!ia0vp^DnKm6!3HFam1{JB6k~CayA#8@b22Z19GBDx&op0O z1}z|)gMqOlFz z@!(w>cJkCG1ChPGrDExG#PdW%Vl?!=Zmr>nKRT6vf%f!85273oGCDdI9((znMdxd9 zj`V--g_*_gPoCVFnYZNi*DCw@=R;OsU2!vKQpZ#;Rjui#RZbfj9y3w&Q4_wIV^*{? z=FdvL1b(M0dD~l0GOW3pbuqy}A>pOrkGEykv(7&^k?W6tbmL*cf~vji*q^WVUwlzP zqjvY*eZT(7vRImGUVB-Ru`%M$SK~kXV)Rzte}DODk)cd?!_Ayyk0aJ!7iRh)!r~OM zF>q=_>yF1CJ#tK>Y7dG1VtYAp+wZ@6BKz;=dEU!0(?2-X>*>?j*Gr?;YUv$tI_1Jy z*ebH+{}o2bK&J%?k98u}hH=S$?V8$eWqsgRE6+JKvHs(we#_sAb-H*=Qn|Nf?|s`1 z3e&un-g9T!uOh@*7u7r^uzKD-owi>F zZ$*p!lG|^ym{!St`f0QN%Z&?l`{(P3bywXe_+OYjfiv@PA%75q>(}`8*W(Y`$nlGI zyPithEW*`l!M35!RPwv{>Z_+ho#eG${MrvI`YsQybG`BYdyU+ii3JvCE>HGR)0E%| zQV@8M(y;Kk-V)b{swJJ`aw6te6n*$g1Hv!(EuS28a3O=5+q;Vkgglb&+n6uC))Mvj ZKf`mY8{FzWyT5=Ej;E`i%Q~loCII^dAy5DS literal 0 HcmV?d00001 diff --git a/components/oscd-switch/src/OscdSwitch.ts b/components/oscd-switch/src/OscdSwitch.ts new file mode 100644 index 0000000..4e9fa02 --- /dev/null +++ b/components/oscd-switch/src/OscdSwitch.ts @@ -0,0 +1,7 @@ +import { OscdSwitch } from './oscd-switch.js'; + +window.customElements.define('oscd-switch', OscdSwitch); + +export { OscdSwitch }; + +export type { OscdSwitchChangeEvent } from './oscd-switch.js'; diff --git a/components/oscd-switch/src/oscd-switch.styles.ts b/components/oscd-switch/src/oscd-switch.styles.ts new file mode 100644 index 0000000..5b1b934 --- /dev/null +++ b/components/oscd-switch/src/oscd-switch.styles.ts @@ -0,0 +1,54 @@ +import { css } from 'lit-element'; + +import { styles } from '@openscd/core'; + +export default css` + ${styles} + + mwc-switch { + --mdc-theme-primary: var( + --oscd-theme-switch-primary, + var(--oscd-theme-primary) + ); + + --mdc-switch-selected-track-color: var( + --oscd-theme-switch-primary-surface, + var(--oscd-theme-primary-surface) + ); + + --mdc-switch-selected-hover-track-color: var( + --oscd-theme-switch-primary-surface-active, + var(--oscd-theme-primary-surface-active) + ); + + --mdc-switch-selected-pressed-track-color: var( + --oscd-theme-switch-primary-surface-active, + var(--oscd-theme-primary-surface-active) + ); + + --mdc-switch-selected-focus-track-color: var( + --oscd-theme-switch-primary-surface-active, + var(--oscd-theme-primary-surface-active) + ); + + --mdc-switch-selected-hover-handle-color: var( + --oscd-theme-switch-primary-active, + var(--oscd-theme-primary-active) + ); + + --mdc-switch-selected-pressed-handle-color: var( + --oscd-theme-switch-primary-active, + var(--oscd-theme-primary-active) + ); + + --mdc-switch-selected-focus-handle-color: var( + --oscd-theme-switch-primary-active, + var(--oscd-theme-primary-active) + ); + + --mdc-switch-disabled-unselected-track-color: var( + --oscd-theme-switch-disabled, + var(--oscd-theme-disabled) + ); + +`; diff --git a/components/oscd-switch/src/oscd-switch.ts b/components/oscd-switch/src/oscd-switch.ts new file mode 100644 index 0000000..49b079c --- /dev/null +++ b/components/oscd-switch/src/oscd-switch.ts @@ -0,0 +1,102 @@ +import { + html, + CSSResultGroup, + TemplateResult, + property, + query, +} from 'lit-element'; + +import '@material/mwc-switch'; + +import type { Switch } from '@material/mwc-switch'; + +import { OscdComponent } from '@openscd/core'; + +import styles from './oscd-switch.styles.js'; + +export interface OscdSwitchChangeEvent extends CustomEvent { + detail: { + selected: boolean; + }; +} + +const newOscdSwitchChangeEvent = (selected: boolean): OscdSwitchChangeEvent => { + return new CustomEvent('change', { + detail: { selected: selected }, + bubbles: true, + composed: true, + }); +}; + +/** + * + * @prop {boolean} selected - Selected state of the Switch + * @prop {boolean} disabled - Disabled state of the Switch + * + * @prop {string} value - Value of the Switch + * @prop {string} name - Name of the Switch + * + * @fires change {OscdSwitchChangeEvent} Fired whenever `selected` changes due to user + * interaction (bubbles and composed). + * + * @example + * @tagname oscd-switch + */ +export class OscdSwitch extends OscdComponent { + static styles: CSSResultGroup = styles; + + @property({ + type: Boolean, + }) + selected?: boolean = false; + + @property({ + type: Boolean, + }) + disabled?: boolean = false; + + @property({ + type: String, + }) + value: string = 'on'; + + @property({ + type: String, + }) + name: string = ''; + + /** + * @internal + */ + @query('mwc-switch') + switch!: Switch; + + /** + * @internal + */ + static get scopedElements() { + return {}; + } + + constructor() { + super(); + } + + render(): TemplateResult { + return html``; + } + + onClick() { + if (this.disabled) { + return; + } + + this.dispatchEvent(newOscdSwitchChangeEvent(this.switch.selected)); + } +} diff --git a/components/oscd-switch/stories/oscd-switch.mdx b/components/oscd-switch/stories/oscd-switch.mdx new file mode 100644 index 0000000..7bbf495 --- /dev/null +++ b/components/oscd-switch/stories/oscd-switch.mdx @@ -0,0 +1,28 @@ +import { Meta, Story, Canvas, Source, ArgTypes, Title, Description, Subtitle } from '@storybook/blocks'; + +import { Markdown } from '@storybook/addon-docs'; + +import * as OscdSwitchStories from './oscd-switch.stories'; + +import Readme from '../README.md?raw'; +import Changelog from '../CHANGELOG.md?raw'; + + +Oscd-Switch + + +Properties + + + + + + +# Example + + +{Readme} + +# Changelog + +{Changelog} diff --git a/components/oscd-switch/stories/oscd-switch.stories.ts b/components/oscd-switch/stories/oscd-switch.stories.ts new file mode 100644 index 0000000..022aae5 --- /dev/null +++ b/components/oscd-switch/stories/oscd-switch.stories.ts @@ -0,0 +1,84 @@ +import type { Meta, StoryObj } from '@storybook/web-components'; +import { action } from '@storybook/addon-actions'; + +import { html } from 'lit'; + +import { createBadge } from '@oscd/utils'; + +import pckgJson from '../package.json'; + +import '../src/OscdSwitch'; + +const meta: Meta = { + title: 'Forms/OscdSwitch', + component: 'oscd-switch', + parameters: { + status: { + type: createBadge(pckgJson), + }, + }, + args: { + onChange: action('Changed'), + }, +}; + +export default meta; + +type Story = StoryObj; + +/** + * Basic + */ +export const Basic: Story = { + render: ({ selected, disabled, name, value, onChange }) => + html``, + args: { + onChange: action('Changed'), + }, + parameters: { + docs: { + description: { + story: 'Basic OSCD Switch', + }, + }, + }, +}; + +/** Selected */ +export const Selected: Story = { + render: ({ selected, onChange }) => + html``, + args: { + selected: true, + onChange: action('Changed'), + }, + parameters: { + docs: { + description: { + story: 'Default Selected OSCD Switch', + }, + }, + }, +}; +/** Disabled */ +export const Disabled: Story = { + render: ({ disabled, onChange }) => + html``, + args: { + disabled: true, + onChange: action('Changed'), + }, + parameters: { + docs: { + description: { + story: 'Default disabled OSCD Switch', + }, + }, + }, +}; diff --git a/components/oscd-switch/test/oscd-switch.spec.ts b/components/oscd-switch/test/oscd-switch.spec.ts new file mode 100644 index 0000000..0cf095b --- /dev/null +++ b/components/oscd-switch/test/oscd-switch.spec.ts @@ -0,0 +1,24 @@ +import { Switch } from '@material/mwc-switch'; +import { expect, fixture, html } from '@open-wc/testing'; + +import '../src/OscdSwitch.js'; +import type { OscdSwitch } from '../src/OscdSwitch.js'; + +describe('Basic component oscd-switch', () => { + let element: OscdSwitch; + + beforeEach(async () => { + element = await fixture(html``); + await element.updateComplete; + }); + + it('Should be selected', async () => { + element.selected = true; + + await element.updateComplete; + + const el: Switch = element.shadowRoot!.querySelector('mwc-switch')!; + + expect(el.selected).to.be.true; + }); +}); diff --git a/components/oscd-switch/test/oscd-switch.test.ts b/components/oscd-switch/test/oscd-switch.test.ts new file mode 100644 index 0000000..11af110 --- /dev/null +++ b/components/oscd-switch/test/oscd-switch.test.ts @@ -0,0 +1,42 @@ +import { fixture, html } from '@open-wc/testing'; + +import { visualDiff } from '@web/test-runner-visual-regression'; + +import '../src/OscdSwitch.js'; +import { OscdSwitch } from '../src/OscdSwitch.js'; + +const factor = process.env.CI ? 2 : 1; + +function timeout(ms: number) { + return new Promise((res) => { + setTimeout(res, ms * factor); + }); +} + +mocha.timeout(2000 * factor); + +describe('oscd-switch', () => { + let element: OscdSwitch; + + beforeEach(async () => { + element = await fixture(html``); + document.body.prepend(element); + }); + + it('Should look like screenshot', async () => { + await element.updateComplete; + await timeout(500); + await visualDiff(element, 'oscd-switch'); + }); + + describe('selected', () => { + it('Should look like screenshot', async () => { + element.selected = true; + await element.updateComplete; + await timeout(500); + await visualDiff(element, 'oscd-switch-selected'); + }); + }); + + afterEach(() => element.remove()); +}); diff --git a/components/oscd-switch/tsconfig.json b/components/oscd-switch/tsconfig.json new file mode 100644 index 0000000..05497c6 --- /dev/null +++ b/components/oscd-switch/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "target": "es2018", + "module": "esnext", + "moduleResolution": "node", + "noEmitOnError": true, + "lib": ["es2018", "dom"], + "strict": true, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "experimentalDecorators": true, + "declaration": true, + "importHelpers": true, + "outDir": "./dist", + "sourceMap": true, + "inlineSources": true, + "rootDir": "./src", + "tsBuildInfoFile": ".tsbuildinfo", + "incremental": true, + "skipLibCheck": true, + "resolveJsonModule": true + }, + "include": ["./src/**/*.ts"], + "exclude": ["**/*.stories.ts", "**/*.stories.js"], +} diff --git a/components/oscd-switch/tsconfig.storybook.json b/components/oscd-switch/tsconfig.storybook.json new file mode 100644 index 0000000..da8737c --- /dev/null +++ b/components/oscd-switch/tsconfig.storybook.json @@ -0,0 +1,17 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "emitDecoratorMetadata": true, + "composite": true, + "incremental": false, + "rootDir": "./" + }, + "exclude": ["./test/**/*.ts"], + "include": [ + "./stories/**/*.stories.ts", + "./src/**/*.ts", + "./src/*.ts", + "./.storybook/*.js", + "./.storybook/*.ts" + ] +} diff --git a/components/oscd-switch/tsconfig.test.json b/components/oscd-switch/tsconfig.test.json new file mode 100644 index 0000000..29717e3 --- /dev/null +++ b/components/oscd-switch/tsconfig.test.json @@ -0,0 +1,7 @@ +{ + "compilerOptions": { + "rootDir": "./" + }, + "extends": "./tsconfig", + "include": ["*/*.ts"] +} diff --git a/components/oscd-switch/typedoc.json b/components/oscd-switch/typedoc.json new file mode 100644 index 0000000..2c43ad9 --- /dev/null +++ b/components/oscd-switch/typedoc.json @@ -0,0 +1,4 @@ +{ + "entryPoints": ["src/index.ts"], + "out": "docs" +} diff --git a/components/oscd-switch/web-test-runner.config.js b/components/oscd-switch/web-test-runner.config.js new file mode 100644 index 0000000..28aec99 --- /dev/null +++ b/components/oscd-switch/web-test-runner.config.js @@ -0,0 +1,182 @@ +import { visualRegressionPlugin } from '@web/test-runner-visual-regression/plugin'; +import { playwrightLauncher } from '@web/test-runner-playwright'; + +import pixelmatch from 'pixelmatch'; +import { PNG } from 'pngjs'; + +const fuzzy = ['win32', 'darwin'].includes(process.platform); // allow for 1% difference on non-linux OSs +const local = !process.env.CI; + +console.assert(local, 'Running in CI!'); +console.assert(!fuzzy, 'Running on OS with 1% test pixel diff threshold!'); + +const thresholdPercentage = fuzzy && local ? 0 : 0; + +const filteredLogs = [ + 'Running in dev mode', + 'Lit is in dev mode', + 'mwc-list-item scheduled an update', +]; + +const browsers = [ + playwrightLauncher({ + product: 'chromium', + }), + playwrightLauncher({ product: 'firefox' }), + playwrightLauncher({ product: 'webkit' }), +]; + +function defaultGetImageDiff({ baselineImage, image, options }) { + let error = ''; + let basePng = PNG.sync.read(baselineImage); + let png = PNG.sync.read(image); + let { width, height } = png; + + if (basePng.width !== png.width || basePng.height !== png.height) { + error = + `Screenshot is not the same width and height as the baseline. ` + + `Baseline: { width: ${basePng.width}, height: ${basePng.height} }` + + `Screenshot: { width: ${png.width}, height: ${png.height} }`; + width = Math.max(basePng.width, png.width); + height = Math.max(basePng.height, png.height); + let oldPng = basePng; + basePng = new PNG({ width, height }); + oldPng.data.copy(basePng.data, 0, 0, oldPng.data.length); + oldPng = png; + png = new PNG({ width, height }); + oldPng.data.copy(png.data, 0, 0, oldPng.data.length); + } + + const diff = new PNG({ width, height }); + + const numDiffPixels = pixelmatch( + basePng.data, + png.data, + diff.data, + width, + height, + options + ); + const diffPercentage = (numDiffPixels / (width * height)) * 100; + + return { + error, + diffImage: PNG.sync.write(diff), + diffPercentage, + }; +} + +export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({ + plugins: [ + visualRegressionPlugin({ + update: process.argv.includes('--update-visual-baseline'), + getImageDiff: (options) => { + const result = defaultGetImageDiff(options); + if (result.diffPercentage < thresholdPercentage) + result.diffPercentage = 0; + return result; + }, + }), + ], + + files: 'dist/**/*.spec.js', + + groups: [ + { + name: 'visual', + files: 'dist/**/*.test.js', + testRunnerHtml: (testFramework) => ` + + + + + + + + + + + + + +`, + }, + ], + + /** Resolve bare module imports */ + nodeResolve: { + exportConditions: ['browser', 'development'], + }, + + /** Filter out lit dev mode logs */ + filterBrowserLogs(log) { + for (const arg of log.args) { + if ( + typeof arg === 'string' && + filteredLogs.some((l) => arg.includes(l)) + ) { + return false; + } + } + return true; + }, + + /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */ + // esbuildTarget: 'auto', + + /** Amount of browsers to run concurrently */ + concurrentBrowsers: 3, + + /** Amount of test files per browser to test concurrently */ + concurrency: 2, + + /** Browsers to run tests on */ + browsers, + + // See documentation for all available options +}); From f50b86f065e8dd7b014cb603def00c403addcd21 Mon Sep 17 00:00:00 2001 From: Pascal Wilbrink Date: Tue, 3 Oct 2023 15:42:18 +0200 Subject: [PATCH 5/5] Added form library --- lib/core/src/index.ts | 1 + lib/core/src/oscd-component.styles.ts | 4 +- lib/core/src/redispatch-event.ts | 17 ++++++++ lib/core/tsconfig.json | 2 +- lib/form/.tsbuildinfo | 1 + lib/form/package.json | 24 +++++++++++ lib/form/project.json | 9 ++++ lib/form/src/index.ts | 4 ++ lib/form/src/oscd-form-component.styles.ts | 21 +++++++++ lib/form/src/oscd-form-component.ts | 50 ++++++++++++++++++++++ lib/form/tsconfig.json | 26 +++++++++++ 11 files changed, 156 insertions(+), 3 deletions(-) create mode 100644 lib/core/src/redispatch-event.ts create mode 100644 lib/form/.tsbuildinfo create mode 100644 lib/form/package.json create mode 100644 lib/form/project.json create mode 100644 lib/form/src/index.ts create mode 100644 lib/form/src/oscd-form-component.styles.ts create mode 100644 lib/form/src/oscd-form-component.ts create mode 100644 lib/form/tsconfig.json diff --git a/lib/core/src/index.ts b/lib/core/src/index.ts index f1a025e..833672e 100644 --- a/lib/core/src/index.ts +++ b/lib/core/src/index.ts @@ -1,2 +1,3 @@ export * from './oscd-component'; export * from './oscd-component.styles'; +export * from './redispatch-event'; diff --git a/lib/core/src/oscd-component.styles.ts b/lib/core/src/oscd-component.styles.ts index 28a8b3a..7b1646c 100644 --- a/lib/core/src/oscd-component.styles.ts +++ b/lib/core/src/oscd-component.styles.ts @@ -1,6 +1,6 @@ -import { css } from 'lit-element'; +import { css, CSSResult } from 'lit-element'; -export const styles = css` +export const styles: CSSResult = css` :host { box-sizing: border-box; } diff --git a/lib/core/src/redispatch-event.ts b/lib/core/src/redispatch-event.ts new file mode 100644 index 0000000..0b169e7 --- /dev/null +++ b/lib/core/src/redispatch-event.ts @@ -0,0 +1,17 @@ +import { OscdComponent } from './oscd-component'; + +export function redispatchEvent(element: OscdComponent, event: Event) { + element.requestUpdate(); + // For bubbling events in SSR light DOM (or composed), stop their propagation // and dispatch the copy. + const copy = Reflect.construct(event.constructor, [event.type, event]); + if (event.bubbles && (!element.shadowRoot || event.composed)) { + event.stopPropagation(); + copy.stopPropagation(); + } + + const dispatched = element.dispatchEvent(copy); + if (!dispatched) { + event.preventDefault(); + } + return dispatched; +} diff --git a/lib/core/tsconfig.json b/lib/core/tsconfig.json index ced6010..14fe222 100644 --- a/lib/core/tsconfig.json +++ b/lib/core/tsconfig.json @@ -11,7 +11,7 @@ "experimentalDecorators": true, "declaration": true, "importHelpers": true, - "outDir": "dist", + "outDir": "./dist", "sourceMap": true, "inlineSources": true, "rootDir": "./src", diff --git a/lib/form/.tsbuildinfo b/lib/form/.tsbuildinfo new file mode 100644 index 0000000..4f8f532 --- /dev/null +++ b/lib/form/.tsbuildinfo @@ -0,0 +1 @@ +{"program":{"fileNames":["../../node_modules/typescript/lib/lib.es5.d.ts","../../node_modules/typescript/lib/lib.es2015.d.ts","../../node_modules/typescript/lib/lib.es2016.d.ts","../../node_modules/typescript/lib/lib.es2017.d.ts","../../node_modules/typescript/lib/lib.es2018.d.ts","../../node_modules/typescript/lib/lib.es2019.d.ts","../../node_modules/typescript/lib/lib.es2020.d.ts","../../node_modules/typescript/lib/lib.dom.d.ts","../../node_modules/typescript/lib/lib.es2015.core.d.ts","../../node_modules/typescript/lib/lib.es2015.collection.d.ts","../../node_modules/typescript/lib/lib.es2015.generator.d.ts","../../node_modules/typescript/lib/lib.es2015.iterable.d.ts","../../node_modules/typescript/lib/lib.es2015.promise.d.ts","../../node_modules/typescript/lib/lib.es2015.proxy.d.ts","../../node_modules/typescript/lib/lib.es2015.reflect.d.ts","../../node_modules/typescript/lib/lib.es2015.symbol.d.ts","../../node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","../../node_modules/typescript/lib/lib.es2016.array.include.d.ts","../../node_modules/typescript/lib/lib.es2017.object.d.ts","../../node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts","../../node_modules/typescript/lib/lib.es2017.string.d.ts","../../node_modules/typescript/lib/lib.es2017.intl.d.ts","../../node_modules/typescript/lib/lib.es2017.typedarrays.d.ts","../../node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts","../../node_modules/typescript/lib/lib.es2018.asynciterable.d.ts","../../node_modules/typescript/lib/lib.es2018.intl.d.ts","../../node_modules/typescript/lib/lib.es2018.promise.d.ts","../../node_modules/typescript/lib/lib.es2018.regexp.d.ts","../../node_modules/typescript/lib/lib.es2019.array.d.ts","../../node_modules/typescript/lib/lib.es2019.object.d.ts","../../node_modules/typescript/lib/lib.es2019.string.d.ts","../../node_modules/typescript/lib/lib.es2019.symbol.d.ts","../../node_modules/typescript/lib/lib.es2019.intl.d.ts","../../node_modules/typescript/lib/lib.es2020.bigint.d.ts","../../node_modules/typescript/lib/lib.es2020.date.d.ts","../../node_modules/typescript/lib/lib.es2020.promise.d.ts","../../node_modules/typescript/lib/lib.es2020.sharedmemory.d.ts","../../node_modules/typescript/lib/lib.es2020.string.d.ts","../../node_modules/typescript/lib/lib.es2020.symbol.wellknown.d.ts","../../node_modules/typescript/lib/lib.es2020.intl.d.ts","../../node_modules/typescript/lib/lib.es2020.number.d.ts","../../node_modules/typescript/lib/lib.esnext.intl.d.ts","../../node_modules/typescript/lib/lib.decorators.d.ts","../../node_modules/typescript/lib/lib.decorators.legacy.d.ts","../../node_modules/tslib/tslib.d.ts","../../node_modules/@lit/reactive-element/css-tag.d.ts","../../node_modules/@lit/reactive-element/reactive-controller.d.ts","../../node_modules/@lit/reactive-element/reactive-element.d.ts","../../node_modules/@types/trusted-types/lib/index.d.ts","../../node_modules/@types/trusted-types/index.d.ts","../../node_modules/lit-html/directive.d.ts","../../node_modules/lit-html/lit-html.d.ts","../../node_modules/lit-element/lit-element.d.ts","../../node_modules/@lit/reactive-element/decorators/base.d.ts","../../node_modules/@lit/reactive-element/decorators/custom-element.d.ts","../../node_modules/@lit/reactive-element/decorators/property.d.ts","../../node_modules/@lit/reactive-element/decorators/state.d.ts","../../node_modules/@lit/reactive-element/decorators/event-options.d.ts","../../node_modules/@lit/reactive-element/decorators/query.d.ts","../../node_modules/@lit/reactive-element/decorators/query-all.d.ts","../../node_modules/@lit/reactive-element/decorators/query-async.d.ts","../../node_modules/@lit/reactive-element/decorators/query-assigned-nodes.d.ts","../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.d.ts","../../node_modules/lit-element/decorators.d.ts","../../node_modules/lit-element/index.d.ts","../core/dist/oscd-component.d.ts","../core/dist/oscd-component.styles.d.ts","../core/dist/redispatch-event.d.ts","../core/dist/index.d.ts","../../node_modules/@material/base/foundation.d.ts","../../node_modules/lit-html/is-server.d.ts","../../node_modules/lit/index.d.ts","../../node_modules/@material/mwc-base/utils.d.ts","../../node_modules/@material/base/types.d.ts","../../node_modules/@material/mwc-base/base-element.d.ts","../../node_modules/@material/ripple/types.d.ts","../../node_modules/@material/ripple/adapter.d.ts","../../node_modules/@material/ripple/foundation.d.ts","../../node_modules/@material/mwc-ripple/mwc-ripple-base.d.ts","../../node_modules/@material/mwc-ripple/mwc-ripple.d.ts","../../node_modules/@material/mwc-base/form-element.d.ts","../../node_modules/@material/mwc-ripple/ripple-handlers.d.ts","../../node_modules/@material/switch/constants.d.ts","../../node_modules/@material/switch/adapter.d.ts","../../node_modules/@material/base/observer.d.ts","../../node_modules/@material/base/observer-foundation.d.ts","../../node_modules/@material/switch/foundation.d.ts","../../node_modules/lit-html/directives/class-map.d.ts","../../node_modules/lit/directives/class-map.d.ts","../../node_modules/@material/mwc-switch/mwc-switch-base.d.ts","../../node_modules/@material/mwc-switch/mwc-switch.d.ts","../../components/oscd-switch/dist/oscd-switch.d.ts","../../components/oscd-switch/dist/oscdswitch.d.ts","./src/oscd-form-component.ts","./src/oscd-form-component.styles.ts","./src/index.ts","../../node_modules/@types/node/assert.d.ts","../../node_modules/@types/node/assert/strict.d.ts","../../node_modules/@types/node/globals.d.ts","../../node_modules/@types/node/async_hooks.d.ts","../../node_modules/@types/node/buffer.d.ts","../../node_modules/@types/node/child_process.d.ts","../../node_modules/@types/node/cluster.d.ts","../../node_modules/@types/node/console.d.ts","../../node_modules/@types/node/constants.d.ts","../../node_modules/@types/node/crypto.d.ts","../../node_modules/@types/node/dgram.d.ts","../../node_modules/@types/node/diagnostics_channel.d.ts","../../node_modules/@types/node/dns.d.ts","../../node_modules/@types/node/dns/promises.d.ts","../../node_modules/@types/node/domain.d.ts","../../node_modules/@types/node/events.d.ts","../../node_modules/@types/node/fs.d.ts","../../node_modules/@types/node/fs/promises.d.ts","../../node_modules/@types/node/http.d.ts","../../node_modules/@types/node/http2.d.ts","../../node_modules/@types/node/https.d.ts","../../node_modules/@types/node/inspector.d.ts","../../node_modules/@types/node/module.d.ts","../../node_modules/@types/node/net.d.ts","../../node_modules/@types/node/os.d.ts","../../node_modules/@types/node/path.d.ts","../../node_modules/@types/node/perf_hooks.d.ts","../../node_modules/@types/node/process.d.ts","../../node_modules/@types/node/punycode.d.ts","../../node_modules/@types/node/querystring.d.ts","../../node_modules/@types/node/readline.d.ts","../../node_modules/@types/node/repl.d.ts","../../node_modules/@types/node/stream.d.ts","../../node_modules/@types/node/stream/promises.d.ts","../../node_modules/@types/node/stream/consumers.d.ts","../../node_modules/@types/node/stream/web.d.ts","../../node_modules/@types/node/string_decoder.d.ts","../../node_modules/@types/node/test.d.ts","../../node_modules/@types/node/timers.d.ts","../../node_modules/@types/node/timers/promises.d.ts","../../node_modules/@types/node/tls.d.ts","../../node_modules/@types/node/trace_events.d.ts","../../node_modules/@types/node/tty.d.ts","../../node_modules/@types/node/url.d.ts","../../node_modules/@types/node/util.d.ts","../../node_modules/@types/node/v8.d.ts","../../node_modules/@types/node/vm.d.ts","../../node_modules/@types/node/wasi.d.ts","../../node_modules/@types/node/worker_threads.d.ts","../../node_modules/@types/node/zlib.d.ts","../../node_modules/@types/node/globals.global.d.ts","../../node_modules/@types/node/index.d.ts","../../node_modules/@types/accepts/index.d.ts","../../node_modules/@types/estree/index.d.ts","../../node_modules/@types/acorn/index.d.ts","../../node_modules/@types/aria-query/index.d.ts","../../node_modules/@types/babel__code-frame/index.d.ts","../../node_modules/@babel/types/lib/index.d.ts","../../node_modules/@types/babel__generator/index.d.ts","../../node_modules/@babel/parser/typings/babel-parser.d.ts","../../node_modules/@types/babel__template/index.d.ts","../../node_modules/@types/babel__traverse/index.d.ts","../../node_modules/@types/babel__core/index.d.ts","../../node_modules/@types/connect/index.d.ts","../../node_modules/@types/body-parser/index.d.ts","../../node_modules/@types/browserslist-useragent/index.d.ts","../../node_modules/keyv/src/index.d.ts","../../node_modules/@types/http-cache-semantics/index.d.ts","../../node_modules/@types/responselike/index.d.ts","../../node_modules/@types/cacheable-request/index.d.ts","../../node_modules/@types/caniuse-api/index.d.ts","../../node_modules/@types/chai/index.d.ts","../../node_modules/@types/chai-dom/index.d.ts","../../node_modules/@types/clean-css/node_modules/source-map/source-map.d.ts","../../node_modules/@types/clean-css/index.d.ts","../../node_modules/@types/qs/index.d.ts","../../node_modules/@types/co-body/index.d.ts","../../node_modules/@types/command-line-args/index.d.ts","../../node_modules/@types/command-line-usage/index.d.ts","../../node_modules/@types/content-disposition/index.d.ts","../../node_modules/@types/convert-source-map/index.d.ts","../../node_modules/@types/keygrip/index.d.ts","../../node_modules/@types/mime/index.d.ts","../../node_modules/@types/send/index.d.ts","../../node_modules/@types/range-parser/index.d.ts","../../node_modules/@types/express-serve-static-core/index.d.ts","../../node_modules/@types/http-errors/index.d.ts","../../node_modules/@types/serve-static/index.d.ts","../../node_modules/@types/express/index.d.ts","../../node_modules/@types/cookies/index.d.ts","../../node_modules/@types/cross-spawn/index.d.ts","../../node_modules/@types/debounce/index.d.ts","../../node_modules/@types/ms/index.d.ts","../../node_modules/@types/debug/index.d.ts","../../node_modules/@types/detect-port/index.d.ts","../../node_modules/@types/doctrine/index.d.ts","../../node_modules/@types/ejs/index.d.ts","../../node_modules/@types/emscripten/index.d.ts","../../node_modules/@types/eslint/helpers.d.ts","../../node_modules/@types/json-schema/index.d.ts","../../node_modules/@types/eslint/index.d.ts","../../node_modules/@types/eslint-scope/index.d.ts","../../node_modules/@types/estree-jsx/index.d.ts","../../node_modules/@types/etag/index.d.ts","../../node_modules/@types/find-cache-dir/index.d.ts","../../node_modules/@types/graceful-fs/index.d.ts","../../node_modules/@types/unist/index.d.ts","../../node_modules/@types/hast/index.d.ts","../../node_modules/@types/uglify-js/node_modules/source-map/source-map.d.ts","../../node_modules/@types/uglify-js/index.d.ts","../../node_modules/@types/relateurl/index.d.ts","../../node_modules/@types/html-minifier/index.d.ts","../../node_modules/@types/http-assert/index.d.ts","../../node_modules/@types/istanbul-lib-coverage/index.d.ts","../../node_modules/@types/istanbul-lib-report/index.d.ts","../../node_modules/@types/istanbul-reports/index.d.ts","../../node_modules/chalk/index.d.ts","../../node_modules/@types/jest/node_modules/@sinclair/typebox/typebox.d.ts","../../node_modules/@types/jest/node_modules/@jest/schemas/build/index.d.ts","../../node_modules/@types/jest/node_modules/pretty-format/build/index.d.ts","../../node_modules/@types/jest/node_modules/jest-diff/build/index.d.ts","../../node_modules/@types/jest/node_modules/jest-matcher-utils/build/index.d.ts","../../node_modules/@types/jest/index.d.ts","../../node_modules/@types/json5/index.d.ts","../../node_modules/@types/keyv/index.d.ts","../../node_modules/@types/koa-compose/index.d.ts","../../node_modules/@types/koa/index.d.ts","../../node_modules/@types/koa-compress/index.d.ts","../../node_modules/@types/koa-etag/index.d.ts","../../node_modules/@types/koa-send/index.d.ts","../../node_modules/@types/koa-static/index.d.ts","../../node_modules/@types/koa__cors/index.d.ts","../../node_modules/@types/lodash/common/common.d.ts","../../node_modules/@types/lodash/common/array.d.ts","../../node_modules/@types/lodash/common/collection.d.ts","../../node_modules/@types/lodash/common/date.d.ts","../../node_modules/@types/lodash/common/function.d.ts","../../node_modules/@types/lodash/common/lang.d.ts","../../node_modules/@types/lodash/common/math.d.ts","../../node_modules/@types/lodash/common/number.d.ts","../../node_modules/@types/lodash/common/object.d.ts","../../node_modules/@types/lodash/common/seq.d.ts","../../node_modules/@types/lodash/common/string.d.ts","../../node_modules/@types/lodash/common/util.d.ts","../../node_modules/@types/lodash/index.d.ts","../../node_modules/@types/lru-cache/index.d.ts","../../node_modules/@types/mdast/index.d.ts","../../node_modules/@types/mdx/types.d.ts","../../node_modules/@types/mdx/index.d.ts","../../node_modules/@types/mime-types/index.d.ts","../../node_modules/@types/minimatch/index.d.ts","../../node_modules/@types/minimist/index.d.ts","../../node_modules/@types/mkdirp/index.d.ts","../../node_modules/@types/mocha/index.d.ts","../../node_modules/form-data/index.d.ts","../../node_modules/@types/node-fetch/externals.d.ts","../../node_modules/@types/node-fetch/index.d.ts","../../node_modules/@types/normalize-package-data/index.d.ts","../../node_modules/@types/parse-json/index.d.ts","../../node_modules/@types/parse5/lib/tree-adapters/default.d.ts","../../node_modules/@types/parse5/index.d.ts","../../node_modules/@types/path-is-inside/index.d.ts","../../node_modules/@types/pixelmatch/index.d.ts","../../node_modules/@types/pngjs/index.d.ts","../../node_modules/@types/pretty-hrtime/index.d.ts","../../node_modules/@types/prismjs/index.d.ts","../../node_modules/@types/prop-types/index.d.ts","../../node_modules/@types/react/global.d.ts","../../node_modules/csstype/index.d.ts","../../node_modules/@types/scheduler/tracing.d.ts","../../node_modules/@types/react/index.d.ts","../../node_modules/@types/react-transition-group/transition.d.ts","../../node_modules/@types/react-transition-group/csstransition.d.ts","../../node_modules/@types/react-transition-group/transitiongroup.d.ts","../../node_modules/@types/react-transition-group/switchtransition.d.ts","../../node_modules/@types/react-transition-group/config.d.ts","../../node_modules/@types/react-transition-group/index.d.ts","../../node_modules/@types/resolve/index.d.ts","../../node_modules/@types/scheduler/index.d.ts","../../node_modules/@types/semver/classes/semver.d.ts","../../node_modules/@types/semver/functions/parse.d.ts","../../node_modules/@types/semver/functions/valid.d.ts","../../node_modules/@types/semver/functions/clean.d.ts","../../node_modules/@types/semver/functions/inc.d.ts","../../node_modules/@types/semver/functions/diff.d.ts","../../node_modules/@types/semver/functions/major.d.ts","../../node_modules/@types/semver/functions/minor.d.ts","../../node_modules/@types/semver/functions/patch.d.ts","../../node_modules/@types/semver/functions/prerelease.d.ts","../../node_modules/@types/semver/functions/compare.d.ts","../../node_modules/@types/semver/functions/rcompare.d.ts","../../node_modules/@types/semver/functions/compare-loose.d.ts","../../node_modules/@types/semver/functions/compare-build.d.ts","../../node_modules/@types/semver/functions/sort.d.ts","../../node_modules/@types/semver/functions/rsort.d.ts","../../node_modules/@types/semver/functions/gt.d.ts","../../node_modules/@types/semver/functions/lt.d.ts","../../node_modules/@types/semver/functions/eq.d.ts","../../node_modules/@types/semver/functions/neq.d.ts","../../node_modules/@types/semver/functions/gte.d.ts","../../node_modules/@types/semver/functions/lte.d.ts","../../node_modules/@types/semver/functions/cmp.d.ts","../../node_modules/@types/semver/functions/coerce.d.ts","../../node_modules/@types/semver/classes/comparator.d.ts","../../node_modules/@types/semver/classes/range.d.ts","../../node_modules/@types/semver/functions/satisfies.d.ts","../../node_modules/@types/semver/ranges/max-satisfying.d.ts","../../node_modules/@types/semver/ranges/min-satisfying.d.ts","../../node_modules/@types/semver/ranges/to-comparators.d.ts","../../node_modules/@types/semver/ranges/min-version.d.ts","../../node_modules/@types/semver/ranges/valid.d.ts","../../node_modules/@types/semver/ranges/outside.d.ts","../../node_modules/@types/semver/ranges/gtr.d.ts","../../node_modules/@types/semver/ranges/ltr.d.ts","../../node_modules/@types/semver/ranges/intersects.d.ts","../../node_modules/@types/semver/ranges/simplify.d.ts","../../node_modules/@types/semver/ranges/subset.d.ts","../../node_modules/@types/semver/internals/identifiers.d.ts","../../node_modules/@types/semver/index.d.ts","../../node_modules/@types/sinonjs__fake-timers/index.d.ts","../../node_modules/@types/sinon/index.d.ts","../../node_modules/@types/sinon-chai/index.d.ts","../../node_modules/@types/stack-utils/index.d.ts","../../node_modules/@types/testing-library__jest-dom/matchers.d.ts","../../node_modules/@types/testing-library__jest-dom/index.d.ts","../../node_modules/@types/whatwg-url/index.d.ts","../../node_modules/@types/ws/index.d.ts","../../node_modules/@types/yargs-parser/index.d.ts","../../node_modules/@types/yargs/index.d.ts","../../node_modules/@types/yauzl/index.d.ts"],"fileInfos":[{"version":"f59215c5f1d886b05395ee7aca73e0ac69ddfad2843aa88530e797879d511bad","affectsGlobalScope":true},"45b7ab580deca34ae9729e97c13cfd999df04416a79116c3bfb483804f85ded4","dc48272d7c333ccf58034c0026162576b7d50ea0e69c3b9292f803fc20720fd5","27147504487dc1159369da4f4da8a26406364624fa9bc3db632f7d94a5bae2c3","5e1c4c362065a6b95ff952c0eab010f04dcd2c3494e813b493ecfd4fcb9fc0d8","68d73b4a11549f9c0b7d352d10e91e5dca8faa3322bfb77b661839c42b1ddec7","5efce4fc3c29ea84e8928f97adec086e3dc876365e0982cc8479a07954a3efd4",{"version":"3dda5344576193a4ae48b8d03f105c86f20b2f2aff0a1d1fd7935f5d68649654","affectsGlobalScope":true},{"version":"9d9885c728913c1d16e0d2831b40341d6ad9a0ceecaabc55209b306ad9c736a5","affectsGlobalScope":true},{"version":"17bea081b9c0541f39dd1ae9bc8c78bdd561879a682e60e2f25f688c0ecab248","affectsGlobalScope":true},{"version":"4443e68b35f3332f753eacc66a04ac1d2053b8b035a0e0ac1d455392b5e243b3","affectsGlobalScope":true},{"version":"ab22100fdd0d24cfc2cc59d0a00fc8cf449830d9c4030dc54390a46bd562e929","affectsGlobalScope":true},{"version":"f7bd636ae3a4623c503359ada74510c4005df5b36de7f23e1db8a5c543fd176b","affectsGlobalScope":true},{"version":"ce691fb9e5c64efb9547083e4a34091bcbe5bdb41027e310ebba8f7d96a98671","affectsGlobalScope":true},{"version":"8d697a2a929a5fcb38b7a65594020fcef05ec1630804a33748829c5ff53640d0","affectsGlobalScope":true},{"version":"0c20f4d2358eb679e4ae8a4432bdd96c857a2960fd6800b21ec4008ec59d60ea","affectsGlobalScope":true},{"version":"36ae84ccc0633f7c0787bc6108386c8b773e95d3b052d9464a99cd9b8795fbec","affectsGlobalScope":true},{"version":"82d0d8e269b9eeac02c3bd1c9e884e85d483fcb2cd168bccd6bc54df663da031","affectsGlobalScope":true},{"version":"b8deab98702588840be73d67f02412a2d45a417a3c097b2e96f7f3a42ac483d1","affectsGlobalScope":true},{"version":"4738f2420687fd85629c9efb470793bb753709c2379e5f85bc1815d875ceadcd","affectsGlobalScope":true},{"version":"2f11ff796926e0832f9ae148008138ad583bd181899ab7dd768a2666700b1893","affectsGlobalScope":true},{"version":"376d554d042fb409cb55b5cbaf0b2b4b7e669619493c5d18d5fa8bd67273f82a","affectsGlobalScope":true},{"version":"9fc46429fbe091ac5ad2608c657201eb68b6f1b8341bd6d670047d32ed0a88fa","affectsGlobalScope":true},{"version":"61c37c1de663cf4171e1192466e52c7a382afa58da01b1dc75058f032ddf0839","affectsGlobalScope":true},{"version":"c4138a3dd7cd6cf1f363ca0f905554e8d81b45844feea17786cdf1626cb8ea06","affectsGlobalScope":true},{"version":"6ff3e2452b055d8f0ec026511c6582b55d935675af67cdb67dd1dc671e8065df","affectsGlobalScope":true},{"version":"03de17b810f426a2f47396b0b99b53a82c1b60e9cba7a7edda47f9bb077882f4","affectsGlobalScope":true},{"version":"8184c6ddf48f0c98429326b428478ecc6143c27f79b79e85740f17e6feb090f1","affectsGlobalScope":true},{"version":"261c4d2cf86ac5a89ad3fb3fafed74cbb6f2f7c1d139b0540933df567d64a6ca","affectsGlobalScope":true},{"version":"6af1425e9973f4924fca986636ac19a0cf9909a7e0d9d3009c349e6244e957b6","affectsGlobalScope":true},{"version":"576711e016cf4f1804676043e6a0a5414252560eb57de9faceee34d79798c850","affectsGlobalScope":true},{"version":"89c1b1281ba7b8a96efc676b11b264de7a8374c5ea1e6617f11880a13fc56dc6","affectsGlobalScope":true},{"version":"15a630d6817718a2ddd7088c4f83e4673fde19fa992d2eae2cf51132a302a5d3","affectsGlobalScope":true},{"version":"f06948deb2a51aae25184561c9640fb66afeddb34531a9212d011792b1d19e0a","affectsGlobalScope":true},{"version":"01e0ee7e1f661acedb08b51f8a9b7d7f959e9cdb6441360f06522cc3aea1bf2e","affectsGlobalScope":true},{"version":"ac17a97f816d53d9dd79b0d235e1c0ed54a8cc6a0677e9a3d61efb480b2a3e4e","affectsGlobalScope":true},{"version":"bf14a426dbbf1022d11bd08d6b8e709a2e9d246f0c6c1032f3b2edb9a902adbe","affectsGlobalScope":true},{"version":"ec0104fee478075cb5171e5f4e3f23add8e02d845ae0165bfa3f1099241fa2aa","affectsGlobalScope":true},{"version":"2b72d528b2e2fe3c57889ca7baef5e13a56c957b946906d03767c642f386bbc3","affectsGlobalScope":true},{"version":"9cc66b0513ad41cb5f5372cca86ef83a0d37d1c1017580b7dace3ea5661836df","affectsGlobalScope":true},{"version":"368af93f74c9c932edd84c58883e736c9e3d53cec1fe24c0b0ff451f529ceab1","affectsGlobalScope":true},{"version":"307c8b7ebbd7f23a92b73a4c6c0a697beca05b06b036c23a34553e5fe65e4fdc","affectsGlobalScope":true},{"version":"189c0703923150aa30673fa3de411346d727cc44a11c75d05d7cf9ef095daa22","affectsGlobalScope":true},{"version":"782dec38049b92d4e85c1585fbea5474a219c6984a35b004963b00beb1aab538","affectsGlobalScope":true},"7a1971efcba559ea9002ada4c4e3c925004fb67a755300d53b5edf9399354900","e59262ddaae67dec2d226f8a5d05cf6c4dc353c0d9b1e4980a61d7fcf9a2b051","5e30131b6a5587fe666926ad1d9807e733c0a597ed12d682669fcaa331aea576","470b8c2386c916bad4aa0d05e89b271a47dbe1250cb25dc0f93102b457228dde","2fcd2d22b1f30555e785105597cd8f57ed50300e213c4f1bbca6ae149f782c38",{"version":"3c150a2e1758724811db3bdc5c773421819343b1627714e09f29b1f40a5dfb26","affectsGlobalScope":true},"7000ec8572390d035ba5ef993953957150d0c38ffb31b56653c97dd78cb6e1aa","056892cca68dca10a914f1580ba0e5710d26794e8707225dca9b5717ed702f1e","4ddf3962990379d1ea59b369a5516c7533b7944010d6998e0e9b1ab35d5af1f0","2a8f0a19a927e83421597c056c90695557142f54ca96358f01eb1f2a5eb228be","d08415b3d6d7fd153ba6e7bf7707ffc57f3c6ad85730ea63544756610b4350c6","411f23da7a63c3d3fd4860c41a458e8df239776fd5d9cd36dd3ad6be92afccbd","6ada3e065916c0ef2dbc9bc0f9b5d59afb25d9176f81fa2c8993a536924140c6","356cc1b058e05e07d2acd73bfa87f83a6f4a343450ee375dad232ff4a55d41d8","df286e6b181ed08766bc19cf1a2fddc50bc5d540f233bc1ce4430a3c1c8c8379","f436800c0af503703110c93144fcc7392524636fb4216296411243b29fe0162d","0d5002560b45ce4fd6c4124632f61789e584be0634602486a2ce59541311d153","bbe13c947d7d6c3426e0e5815e2b3464fa03d34a4bf47298c43b9237cf59555b","9f7d0ee33b9f8fa4dc2e9628e0cdf8683104d01de9d3d24f62cd5da014a5bec4","23056c9b3dac109ce202026810f8b09b6978883d8fd038d17dbe89e7b41f84b5","f5edc7f57484ff1569209c7933f3576e7d791743d178756177a05cef9c4625c2","1ace5b091a00007142bda2b23980d7be85d279033be3d9b6b3d872984de82973","e3960955d262c89644fb68262ad0a2370c1a600d4e0dec6ee7efbb26dbe5fd82","d375e53e9239ed52ae39c2f560f3569c4087efb987e7e8e6be5fb45fb0a25e65","77fe45d1242d668a5fd63c99d3ffb81a4382179dede8534534f114f592810087","a0667520a6521c12128fc28cbd5b2af58eef11c5b2a7441e0f0d47f50bf6c8e3","1bcd560deed90a43c51b08aa18f7f55229f2e30974ab5ed1b7bb5721be379013","dc08fe04e50bc24d1baded4f33e942222bbdd5d77d6341a93cfe6e4e4586a3be","0dcf4c2bf1bb547e2ae5b8dce4656a56fbd15e3401ff5236ea0b93b6c60f9249","820c26194ad4089bc503b02bbedbd86a865e9c8a05c58ef88c8d19d9c019712a","790b453e1b76814112c3870d6e12f5db992d3194fdb3529445317dd75cb538be","d375de88ab19f6c105a65fc89eca1ae782362c5c395283b0c85ef39c7b835dfe","aeda2fffbc651fe1fa60b913d45f291f5544c4840206cb3b1badc16d9f01a0f0","7b3c1d688dcb8645b5a6c37bce5b047da92b4c298ed8709e03e987e0efb035b1","29c64e1acb5b73f08a60e71154c65c8a34f885f1f2cc55ffa06dfd244c058883",{"version":"7d176f155e5f6fc9756ddcc1a6d3eb2673030a066e2b7846dfc81b5271f3e269","affectsGlobalScope":true},{"version":"301b1a33102a2bf93e997834ff2f76a6766014572bfc3210310549225fbb023b","affectsGlobalScope":true},"aea18a267a0770c365cc390ad0a0b9725ed7a4540e9a96319b0f5094ee0ca124","05c8e6f2612075f7f856112b9c0ffa769e94913c535dfa22dd3713e64725923e","beb04cbdfe6da759ffb80e0149cfd2e08ec2a8f40994dea8026939297fe4d8cc","833bfbe9c3e25383e954bc3ca1fe399edf73edadaeb77e82fec890ee46a1e386","f66ffd63874851758c52e03d81766bd9461e5a73bf0a73371e3b7d94477aa329","3ff42786bfcced3f3b38b152d106c768ce97525e5ac79f45cb05328c8ff1028c","8a9b7a437bea4cc34e5e103e01573ab3afc4564a22c838942b6dcca0f68020e8","8bb8931e629d9adfac6fe0c067de1a3c2f82b47262f83fa76eb0772ef13808e8","df5befd9df9ff28d164a890c5baa7d142730f01a4c8b9e39199df603117ab69a",{"version":"fc0396f2aecb500d184800e7a5e76bb50d7e35b399758a51f12396e3e33b527a","affectsGlobalScope":true},"23e07ea5a770bfe07a275a409302610cde64a570ed55c536c2b6cae697f7f01f","e5920c994d4738d2026b96f0dffe7a720a80674d03ef7d352f8480cfe0225ff1",{"version":"47d98bdf3410cdbe8fa98f823d09144bdd7074db7c529fa9ad1b1cc15f41c4fd","signature":"847ab707b78056d3ae03237ef31676ac8258322f2b93a848b80455e69ed885ff"},{"version":"cbabab6652fc18c1b5467b3e67b9aff42e21d661e38e10fd1f8543e0fd6f29cf","signature":"e3960955d262c89644fb68262ad0a2370c1a600d4e0dec6ee7efbb26dbe5fd82"},{"version":"fabe2d01709fdc49fe146464cb3f0acdba7d67c96fb793803dd2bc0cb3637815","signature":"b80b8a77182803ad90a65b0cd4a84887bd9711e1febd2b3a3834c32397563889"},"9122ed7070e054b73ebab37c2373a196def2d90e7d1a9a7fcd9d46b0e51fae78","a69c09dbea52352f479d3e7ac949fde3d17b195abe90b045d619f747b38d6d1a",{"version":"77f0b5c6a193a699c9f7d7fb0578e64e562d271afa740783665d2a827104a873","affectsGlobalScope":true},"21a167fec8f933752fb8157f06d28fab6817af3ad9b0bdb1908a10762391eab9",{"version":"002d6d5f044365b3fbfba0ba9be3bb57cac09b81547c8df4b0795755d2081d90","affectsGlobalScope":true},"0c0cee62cb619aed81133b904f644515ba3064487002a7da83fd8aa07b1b4abd","5a94487653355b56018122d92392beb2e5f4a6c63ba5cef83bbe1c99775ef713",{"version":"d5135ad93b33adcce80b18f8065087934cdc1730d63db58562edcf017e1aad9b","affectsGlobalScope":true},"82408ed3e959ddc60d3e9904481b5a8dc16469928257af22a3f7d1a3bc7fd8c4","34ec1daf3566f26c43dbab380af0de1aac29166e57e4f9ef379a2f154e0cb290","bb9c4ffa5e6290c6980b63c815cdd1625876dadb2efaf77edbe82984be93e55e","75ecef44f126e2ae018b4abbd85b6e8a2e2ba1638ebec56cc64274643ce3567b","f30bb836526d930a74593f7b0f5c1c46d10856415a8f69e5e2fc3db80371e362","14b5aa23c5d0ae1907bc696ac7b6915d88f7d85799cc0dc2dcf98fbce2c5a67c","5c439dafdc09abe4d6c260a96b822fa0ba5be7203c71a63ab1f1423cd9e838ea",{"version":"bae4ea23beb8397755b935cb84d3cdc6cdb0b1b4a329b90de9fc6c8774d71994","affectsGlobalScope":true},"cec36af22f514322f870e81d30675c78df82ae8bf4863f5fd4e4424c040c678d","c57870f6664fd657ec2cf096bbb043b9556b0228ec0c12dd54193361ca563ea1","aeee0090b38de0dd47ca9a79ad5c2d156e3e09d92306719b0b45a3e96098e564","acfbb5aaef964e1d441f961a1846197f03241dba3c63b1e4d1903684888ef465","09416dd69576b03a3f485adf329a02f043e4a481e060ef5b208194e488d31fd9","8acf99b1c8682276a63ea5bb68433782715892726b97e4604a415e4e56bce41c",{"version":"e8b18c6385ff784228a6f369694fcf1a6b475355ba89090a88de13587a9391d5","affectsGlobalScope":true},"9499ba4dcd1ee0596d8c98d01341bc874840c5291156513bda667fecad54d5be","a907bf91df26df2400858ef75f749498fb5cf00062bf90a737ac3949cc07978d","cb92bc2e42b261e4299025756f1beb826b3d9666a3f0d46f8a7254ca512f57e4","4275d5f964e7fc7afc18538e26b3748c207dd772998346d17f409749aa1f3a63",{"version":"59104b2e80c588b813d03d3a45f57117ca4601ae3fc216c5ffbcbafc4effc1c5","affectsGlobalScope":true},"5153a2fd150e46ce57bb3f8db1318d33f6ad3261ed70ceeff92281c0608c74a3","d1a78a3c5708807e8de3e399f91df4797c62e44b02195eefc2209b2e713e54ee","8c4c1a64db28930732033c31418f817dcb9d09d706766707ae6d38f23faf0c53","25846d43937c672bab7e8195f3d881f93495df712ee901860effc109918938cc","556bf5c36deb62cffa1bf697c1789fe008ec82db0273025001db66732714e9d9","1b952304137851e45bc009785de89ada562d9376177c97e37702e39e60c2f1ff",{"version":"806ef4cac3b3d9fa4a48d849c8e084d7c72fcd7b16d76e06049a9ed742ff79c0","affectsGlobalScope":true},"44b8b584a338b190a59f4f6929d072431950c7bd92ec2694821c11bce180c8a5","23b89798789dffbd437c0c423f5d02d11f9736aea73d6abf16db4f812ff36eda","653968fc1b35c5eb3d273d36fac1c1dc66f9537edf28f33485b8776bd956e23d",{"version":"970a90f76d4d219ad60819d61f5994514087ba94c985647a3474a5a3d12714ed","affectsGlobalScope":true},"664d8f2d59164f2e08c543981453893bc7e003e4dfd29651ce09db13e9457980","a381f079c4804442f179d742fdb2e495fe28d67a47cac673485f75ae2e77aeca","3c13ef48634e7b5012fcf7e8fce7496352c2d779a7201389ca96a2a81ee4314d","5d0a25ec910fa36595f85a67ac992d7a53dd4064a1ba6aea1c9f14ab73a023f2",{"version":"bfe39beb986d2a2e512c091cbe924f1c415bc65de54de0e2f6a0dc6f84c183d9","affectsGlobalScope":true},"2d526e6f21d8cc66ac11ada32874e95ae88d870c6c9d3d9d4e03b1d1f9ad7b8e","06d7c42d256f0ce6afe1b2b6cfbc97ab391f29dadb00dd0ae8e8f23f5bc916c3","ec4bd1b200670fb567920db572d6701ed42a9641d09c4ff6869768c8f81b404c","e59a892d87e72733e2a9ca21611b9beb52977be2696c7ba4b216cbbb9a48f5aa","d2ec52f565f0570e90b659811347bd689f8c6039b11eaaccd0f243759d46da6e","8a300fa9b698845a1f9c41ecbe2c5966634582a8e2020d51abcace9b55aa959e",{"version":"ab9b9a36e5284fd8d3bf2f7d5fcbc60052f25f27e4d20954782099282c60d23e","affectsGlobalScope":true},"9c3df5971dc261aa29f25fdfcf7e8cfa248ff95a3d09ae4a6b81b1b09473f80f","6738101ae8e56cd3879ab3f99630ada7d78097fc9fd334df7e766216778ca219","bee89e1eb6425eb49894f3f25e4562dc2564e84e5aa7610b7e13d8ecddf8f5db","3777eb752cef9aa8dd35bb997145413310008aa54ec44766de81a7ad891526cd","21522c0f405e58c8dd89cd97eb3d1aa9865ba017fde102d01f86ab50b44e5610","b95f751a58d283cb5e32f2655361f6e2a27f0368f69edc463a3472aae21d1303","1905eab6570faf3010802b4c00196eda6285b028f0b41bdfa7f7a29427502b62","cc957354aa3c94c9961ebf46282cfde1e81d107fc5785a61f62c67f1dd3ac2eb","a2e86df4db576d80704e25293cec6f20fc6101a11f4747440e2eef58fb3c860c","93de1c6dab503f053efe8d304cb522bb3a89feab8c98f307a674a4fae04773e9","6704f0b54df85640baaeebd86c9d4a1dbb661d5a4d57a75bc84162f562f6531d","9d255af1b09c6697089d3c9bf438292a298d8b7a95c68793c9aae80afc9e5ca7","6d829824ead8999f87b6df21200df3c6150391b894b4e80662caa462bd48d073","afc559c1b93df37c25aef6b3dfa2d64325b0e112e887ee18bf7e6f4ec383fc90","9eb49645576740f4fb4cca25cadbc0d7e61a218c215e8578dd899b01d5db89d4","42baf4ca38c38deaf411ea73f37bc39ff56c6e5c761a968b64ac1b25c92b5cd8","cab425b5559edac18327eb2c3c0f47e7e9f71b667290b7689faafd28aac69eae","3cfb0cb51cc2c2e1b313d7c4df04dbf7e5bda0a133c6b309bf6af77cf614b971","f992cd6cc0bcbaa4e6c810468c90f2d8595f8c6c3cf050c806397d3de8585562","d59cea1102bba38053ca19260e37bda2715df10d147c40db92035c0420489358",{"version":"c3bc5d095c3c22fd20b5a6550b9c9a6d56c3ffbb87ef057ccce7764b6bed4428","affectsGlobalScope":true},{"version":"4cdd1b520504f86d680470dc91baa79d625fa20e1f9dc1f99eba242eae9fada4","affectsGlobalScope":true},"2887592574fcdfd087647c539dcb0fbe5af2521270dad4a37f9d17c16190d579","2d1323c55cb7a4f2cf73f03797b26645a7657dd0217beb41b0079b0490ec3370","ba601641fac98c229ccd4a303f747de376d761babb33229bb7153bed9356c9cc","495da6628b9474e31d0636d66c54448bb8d84dbce902e8f70539ef6a525a2d7b","629766229f541d92210f30a92b6038568ec165fab14b7ee53bdf13667da37ca3","29193c018378ca9c8033eaa974c02c1f503e8fcd8a2bf406057c53f7d3fa17a8","204dbe6c72467fb14bbe8f06510b11fb541b6ce29580c6e10ebd3bdb2eb0c1f9","13d94ac3ee5780f99988ae4cce0efd139598ca159553bc0100811eba74fc2351","ce013414484233b24f42c0fcfca48a60bb66ab4e13c82953662305e8f1ee4925","84e3bbd6f80983d468260fdbfeeb431cc81f7ea98d284d836e4d168e36875e86","aad5ffa61406b8e19524738fcf0e6fda8b3485bba98626268fdf252d1b2b630a","16d51f964ec125ad2024cf03f0af444b3bc3ec3614d9345cc54d09bab45c9a4c",{"version":"352fc8497a30bc806d7defa0043d85802e5f35a7688731ee9a21456f5cb32a94","affectsGlobalScope":true},"f463d61cf39c3a6a5f96cdf7adfdb72a0b1d663f7b5d5b6dd042adba835430c2","f7a9cb83c8fbc081a8b605880d191e0d0527cde2c1b2b2b623beca8f0203a2cd","43cdd474c5aa3340da4816bb8f1ae7f3b1bcf9e70d997afc36a0f2c432378c84","eb96a2321f717bccc3e49e104e299152984b927ea4546b559ae631c06565819c","5e3a55837aa1f42af2d2334c9b750f59f5f50a2205471875f5dd6aadc3e49ddb","68c559681a043ca6d622debcce75c4d82446fec08e06bf1066f71d6c325f224e","6a9c5127096b35264eb7cd21b2417bfc1d42cceca9ba4ce2bb0c3410b7816042","93b7325b49dfbf613d940ed0e471216657b2d77459dac34f1b5b1678f08f884c","4b4c4c74c41b52cada66c85638633d2b0fe7c43445daf877cfddb310d3f5e998","febcc45f9517827496659c229a21b058831eef4cf9b71b77fd9a364ae12c3b9e","de8877483ce1e67bced3ad1f4ac877fd5066f8465ab6a9e8b716662d727553e5",{"version":"3f547f989aa9c12dc888ae25c4afc076eb442f681ba17f50924642fe29c01da0","affectsGlobalScope":true},{"version":"64d4b35c5456adf258d2cf56c341e203a073253f229ef3208fc0d5020253b241","affectsGlobalScope":true},"dca41e86e89dfb2e85e6935260250f02eb6683b86c2fa16bec729ddd1bcd9b4b","facc7572c3330810ff4728113a324790679d4ed41fbd9e371028f08f1cad29f3","e050a0afcdbb269720a900c85076d18e0c1ab73e580202a2bf6964978181222a","99373707de2fdfdce847a4d138c36cf137b243ad206cf82d32e0653e2f0dcb4e","7e510fb0ca02da05976eb0dbfeb42bdb0dc64b78acbb3b5ecf77ddd57ce08cda","19f1159e1fa24300e2eaf72cb53f0815f5879ec53cad3c606802f0c55f0917e9","bf88ef4208a770ca39a844b182b3695df536326ea566893fdc5b8418702a331e","cddf5c26907c0b8378bc05543161c11637b830da9fadf59e02a11e675d11e180","3d2cd8f3047fff04a71e7037a6a4cb9f4accb28dbd8c0d83164d414811025af0","2887592574fcdfd087647c539dcb0fbe5af2521270dad4a37f9d17c16190d579","9dcd1a6ae84def6ce3e80b27a367912e5b8e9f15c039143820ab76f7ceb8f3ab","0def05b4e59413659e7f1cad8b0e32858d7d272a4701457e7fea95618f6ef7db","3f6bff86e78e065dad71ca8e395824703f56977f7309139127e58718d7915410","e98185f4249720ace1921d59c1ff4612fa5c633a183fc9bf28e2e7b8e3c7fd51","8b06ac3faeacb8484d84ddb44571d8f410697f98d7bfa86c0fda60373a9f5215","7eb06594824ada538b1d8b48c3925a83e7db792f47a081a62cf3e5c4e23cf0ee","f5638f7c2f12a9a1a57b5c41b3c1ea7db3876c003bab68e6a57afd6bcc169af0","0d14fa22c41fdc7277e6f71473b20ebc07f40f00e38875142335d5b63cdfc9d2","3054ef91b855e005b9c4681399e9d64d2a7b07a22d539314d794f09e53b876a7","ffcc5500e77223169833fc6eb59b3a507944a1f89574e0a1276b0ea7fc22c4a4","22f13de9e2fe5f0f4724797abd3d34a1cdd6e47ef81fc4933fea3b8bf4ad524b","e3ba509d3dce019b3190ceb2f3fc88e2610ab717122dabd91a9efaa37804040d","cda0cb09b995489b7f4c57f168cd31b83dcbaa7aad49612734fb3c9c73f6e4f2",{"version":"2abad7477cf6761b55c18bea4c21b5a5dcf319748c13696df3736b35f8ac149e","affectsGlobalScope":true},"96d14f21b7652903852eef49379d04dbda28c16ed36468f8c9fa08f7c14c9538","fec943fdb3275eb6e006b35e04a8e2e99e9adf3f4b969ddf15315ac7575a93e4","5006668996956580886022c05108e32c742823e1b5652aff7914917233731518","d8ff10c7c1f825a87b2b2a1cef499c7079d2d1b880323ce9edbb81282aceee8d","d1494c6dbbe5fca590ca73ccd21d013e6617e9ea19773c9ca7c0f3214df86628","97395602cea957af0cf517d84b651a07e010192db667ba379d36bec40cdbef52","f88d8a4ba9ad0270309cf46121d3dc9fb055bea08ac3e699d2b4673b1e6a25ea","b6360d5b5a52a1d6fc6b9838135f766b638e7c7a03b227974344200be603c150","0f141d684b22a8ff995c19137ec8a90b297461154ad4212b4f45b7e8b10357b7","675e702f2032766a91eeadee64f51014c64688525da99dccd8178f0c599f13a8","458111fc89d11d2151277c822dfdc1a28fa5b6b2493cf942e37d4cd0a6ee5f22","19c816167e076e7c24f074389c6cf3ed87bdbb917d1ea439ca281f9d26db2439","187119ff4f9553676a884e296089e131e8cc01691c546273b1d0089c3533ce42","febf0b2de54781102b00f61653b21377390a048fbf5262718c91860d11ff34a6","98f9d826db9cd99d27a01a59ee5f22863df00ccf1aaf43e1d7db80ebf716f7c3","0aaef8cded245bf5036a7a40b65622dd6c4da71f7a35343112edbe112b348a1e","00baffbe8a2f2e4875367479489b5d43b5fc1429ecb4a4cc98cfc3009095f52a","dcd91d3b697cb650b95db5471189b99815af5db2a1cd28760f91e0b12ede8ed5","3c92b6dfd43cc1c2485d9eba5ff0b74a19bb8725b692773ef1d66dac48cda4bd","b03afe4bec768ae333582915146f48b161e567a81b5ebc31c4d78af089770ac9","df996e25faa505f85aeb294d15ebe61b399cf1d1e49959cdfaf2cc0815c203f9","30abc554c7ad13063a02ddd06757929b34357aea1f6fcf4ca39114cb0fc19384","6d727c1f6a7122c04e4f7c164c5e6f460c21ada618856894cdaa6ac25e95f38c","5774751340e987a6a9e4a5dcc03ff68a6515adc2b91423e1af2f660fc8f30e81","62ba3a124b971abfc9cc9d42bfde270d7b1d74c4de8c2b74dbf0557552afc132","6571f33cd3c23ee70fb48839c9a7486381cd3f439e17d97d10fc908e41468052","c757372a092924f5c16eaf11a1475b80b95bb4dae49fe3242d2ad908f97d5abe","8841e2aa774b89bd23302dede20663306dc1b9902431ac64b24be8b8d0e3f649","209e814e8e71aec74f69686a9506dd7610b97ab59dcee9446266446f72a76d05","875d567ecf2f865a1b19d30f2acf3203817e19fd95f7675351d046914ee39ac8",{"version":"5f186a758a616c107c70e8918db4630d063bd782f22e6e0b17573b125765b40b","affectsGlobalScope":true},"736097ddbb2903bef918bb3b5811ef1c9c5656f2a73bd39b22a91b9cc2525e50","626bccaba2f61f03abe558a39501631565389a748bc47dd52b305c80176333c1","3663d1b50f356656a314e5df169bb51cb9d5fd75905fa703f75db6bb32030568","6fa0008bf91a4cc9c8963bace4bba0bd6865cbfa29c3e3ccc461155660fb113a","2b8264b2fefd7367e0f20e2c04eed5d3038831fe00f5efbc110ff0131aab899b","fc37aca06f6b8b296c42412a2e75ab53d30cd1fa8a340a3bb328a723fd678377","5f2c582b9ef260cb9559a64221b38606378c1fabe17694592cdfe5975a6d7efa","a0b27b55228349ea85cecd9479ace1009697af44b66527f30526a1539d4e78ea","f30350dd37c3f3c11f47adb7ce4e7a4928f578f4ae8a3197e0c8a0811da46b92","0b6a0b628776a3e3a4aeeba090438a26e7ffa15373ce658452c78c1f2254665d","c0a3ea3aee13c4946a6aefce3a6ab9292a40a29f6622cde0fda0b1067a1a1f5f","6484309596f594ae824513336bd2a2e04a1902b06bb149fa904f5cae5fbe5c50","6a386ff939f180ae8ef064699d8b7b6e62bc2731a62d7fbf5e02589383838dea",{"version":"549df62b64a71004aee17685b445a8289013daf96246ce4d9b087d13d7a27a61","affectsGlobalScope":true},"4c68749a564a6facdf675416d75789ee5a557afda8960e0803cf6711fa569288","f5a8b384f182b3851cec3596ccc96cb7464f8d3469f48c74bf2befb782a19de5",{"version":"571f3b382f9360208e56233415e07530ff2627c4e6f1d7c37076816f07d01286","affectsGlobalScope":true},"332c7ccf95426d3156ebedb7295979ef2435bd1c1a940024a4d068da3418718f","e03334588c63840b7054accd0b90f29c5890db6a6555ac0869a78a23297f1396","c3052485f32a96bfde75a2976c1238995522584ba464f04ff16a8a40af5e50d1","c220410b8e956fa157ce4e5e6ac871f0f433aa120c334d906ff1f5e2c7369e95","960a68ced7820108787135bdae5265d2cc4b511b7dcfd5b8f213432a8483daf1","5e8db4872785292074b394d821ae2fc10e4f8edc597776368aebbe8aefb24422","2880728492d6a6baa55411d14cc42fa55714a24b1d1d27ff9a8a610abd47c761","7ccce4adb23a87a044c257685613126b47160f6975b224cea5f6af36c7f37514","2b93035328f7778d200252681c1d86285d501ed424825a18f81e4c3028aa51d9","2ac9c8332c5f8510b8bdd571f8271e0f39b0577714d5e95c1e79a12b2616f069","42c21aa963e7b86fa00801d96e88b36803188018d5ad91db2a9101bccd40b3ff","d31eb848cdebb4c55b4893b335a7c0cca95ad66dee13cbb7d0893810c0a9c301","b9f96255e1048ed2ea33ec553122716f0e57fc1c3ad778e9aa15f5b46547bd23","7a9e0a564fee396cacf706523b5aeed96e04c6b871a8bebefad78499fbffc5bc","906c751ef5822ec0dadcea2f0e9db64a33fb4ee926cc9f7efa38afe5d5371b2a","5387c049e9702f2d2d7ece1a74836a14b47fbebe9bbeb19f94c580a37c855351","c68391fb9efad5d99ff332c65b1606248c4e4a9f1dd9a087204242b56c7126d6","e9cf02252d3a0ced987d24845dcb1f11c1be5541f17e5daa44c6de2d18138d0c","e8b02b879754d85f48489294f99147aeccc352c760d95a6fe2b6e49cd400b2fe","9f6908ab3d8a86c68b86e38578afc7095114e66b2fc36a2a96e9252aac3998e0","0eedb2344442b143ddcd788f87096961cd8572b64f10b4afc3356aa0460171c6","71405cc70f183d029cc5018375f6c35117ffdaf11846c35ebf85ee3956b1b2a6","c68baff4d8ba346130e9753cefe2e487a16731bf17e05fdacc81e8c9a26aae9d","2cd15528d8bb5d0453aa339b4b52e0696e8b07e790c153831c642c3dea5ac8af","479d622e66283ffa9883fbc33e441f7fc928b2277ff30aacbec7b7761b4e9579","ade307876dc5ca267ca308d09e737b611505e015c535863f22420a11fffc1c54","f8cdefa3e0dee639eccbe9794b46f90291e5fd3989fcba60d2f08fde56179fb9","86c5a62f99aac7053976e317dbe9acb2eaf903aaf3d2e5bb1cafe5c2df7b37a8","2b300954ce01a8343866f737656e13243e86e5baef51bd0631b21dcef1f6e954","a2d409a9ffd872d6b9d78ead00baa116bbc73cfa959fce9a2f29d3227876b2a1","b288936f560cd71f4a6002953290de9ff8dfbfbf37f5a9391be5c83322324898","61178a781ef82e0ff54f9430397e71e8f365fc1e3725e0e5346f2de7b0d50dfa","6a6ccb37feb3aad32d9be026a3337db195979cd5727a616fc0f557e974101a54","c649ea79205c029a02272ef55b7ab14ada0903db26144d2205021f24727ac7a3","38e2b02897c6357bbcff729ef84c736727b45cc152abe95a7567caccdfad2a1d","d6610ea7e0b1a7686dba062a1e5544dd7d34140f4545305b7c6afaebfb348341","3dee35db743bdba2c8d19aece7ac049bde6fa587e195d86547c882784e6ba34c","b15e55c5fa977c2f25ca0b1db52cfa2d1fd4bf0baf90a8b90d4a7678ca462ff1","f41d30972724714763a2698ae949fbc463afb203b5fa7c4ad7e4de0871129a17","843dd7b6a7c6269fd43827303f5cbe65c1fecabc30b4670a50d5a15d57daeeb9","f06d8b8567ee9fd799bf7f806efe93b67683ef24f4dea5b23ef12edff4434d9d","6017384f697ff38bc3ef6a546df5b230c3c31329db84cbfe686c83bec011e2b2","e1a5b30d9248549ca0c0bb1d653bafae20c64c4aa5928cc4cd3017b55c2177b0","a593632d5878f17295bd53e1c77f27bf4c15212822f764a2bfc1702f4b413fa0","a868a534ba1c2ca9060b8a13b0ffbbbf78b4be7b0ff80d8c75b02773f7192c29","da7545aba8f54a50fde23e2ede00158dc8112560d934cee58098dfb03aae9b9d","34baf65cfee92f110d6653322e2120c2d368ee64b3c7981dff08ed105c4f19b0","a1a261624efb3a00ff346b13580f70f3463b8cdcc58b60f5793ff11785d52cab","f83b320cceccfc48457a818d18fc9a006ab18d0bdd727aa2c2e73dc1b4a45e98","5445b5383991fff958fe3a7b0a9c1b9c672a613bc30fda97aee6eddb4053c0d3",{"version":"4f0ad52a7fbd6bfba88ec22ec719b6956a0fc647030462f9db490e74236d116f","affectsGlobalScope":true},"b0d10e46cfe3f6c476b69af02eaa38e4ccc7430221ce3109ae84bb9fb8282298","3f36c0c7508302f3dca3dc5ab0a66d822b2222f70c24bb1796ddb5c9d1168a05",{"version":"b23d5b89c465872587e130f427b39458b8e3ad16385f98446e9e86151ba6eb15","affectsGlobalScope":true},"0f048a7e91a4c764f08be48e156c9d274a038cb454d312427214ab4d34a9a5ab","bc81aff061c53a7140270555f4b22da4ecfe8601e8027cf5aa175fbdc7927c31","70e9a18da08294f75bf23e46c7d69e67634c0765d355887b9b41f0d959e1426e","e9eb1b173aa166892f3eddab182e49cfe59aa2e14d33aedb6b49d175ed6a3750","65dfa4bc49ccd1355789abb6ae215b302a5b050fdee9651124fe7e826f33113c"],"root":[[94,96]],"options":{"allowSyntheticDefaultImports":true,"declaration":true,"esModuleInterop":false,"experimentalDecorators":true,"importHelpers":true,"inlineSources":true,"module":99,"noEmitOnError":true,"outDir":"./dist","rootDir":"./src","skipLibCheck":true,"sourceMap":true,"strict":true,"target":5,"tsBuildInfoFile":"./.tsbuildinfo"},"fileIdsList":[[65,69,91,141],[92,141],[66,67,68,141],[65,141],[66,141],[45,69,94,95,141],[45,65,69,141],[45,65,69,93,141],[141,154],[141],[48,141],[54,141],[48,54,141],[48,54,62,141],[46,47,141],[70,85,141],[74,141],[70,72,73,74,141],[73,75,141],[72,73,75,77,78,141],[72,79,141],[73,141],[72,80,81,82,84,87,89,141],[72,90,141],[74,76,141],[70,77,141],[83,141],[84,86,141],[115,141,148],[141,150,199],[141,154,155,156,157,158],[141,154,156],[115,141,148,160],[112,115,140,141,148,163,164,165],[141,168],[115,117,141,148,170],[115,141,148,172],[115,141,148,160,178,185],[102,141,148],[141,189],[141,150,197,199],[141,150,195,196,199],[141,148],[112,115,141,148,172,180,181],[141,161,172,182,184],[113,141,148],[141,203],[141,171,206,207],[141,210],[141,211],[141,216,218],[141,214],[141,216],[141,213,217],[141,215],[112,141,148],[141,223],[141,146,148,223],[141,200,223],[113,141,223],[141,223,226],[112,115,116,120,126,140,141,148,149,176,178,183,186,209,222],[141,229,231,232,233,234,235,236,237,238,239,240,241],[141,229,230,232,233,234,235,236,237,238,239,240,241],[141,230,231,232,233,234,235,236,237,238,239,240,241],[141,229,230,231,233,234,235,236,237,238,239,240,241],[141,229,230,231,232,234,235,236,237,238,239,240,241],[141,229,230,231,232,233,235,236,237,238,239,240,241],[141,229,230,231,232,233,234,236,237,238,239,240,241],[141,229,230,231,232,233,234,235,237,238,239,240,241],[141,229,230,231,232,233,234,235,236,238,239,240,241],[141,229,230,231,232,233,234,235,236,237,239,240,241],[141,229,230,231,232,233,234,235,236,237,238,240,241],[141,229,230,231,232,233,234,235,236,237,238,239,241],[141,229,230,231,232,233,234,235,236,237,238,239,240],[141,244,245],[115,140,141,148,251,252],[97,141],[100,141],[101,106,141],[102,112,113,120,129,140,141],[102,103,112,120,141],[104,141],[105,106,113,121,141],[106,129,137,141],[107,109,112,120,141],[108,141],[109,110,141],[111,112,141],[112,141],[112,113,114,129,140,141],[112,113,114,129,132,141],[141,145],[115,120,129,140,141],[112,113,115,116,120,129,137,140,141],[115,117,129,137,140,141],[97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147],[112,118,141],[119,140,141],[109,112,120,129,141],[121,141],[122,141],[100,123,141],[124,139,141,145],[125,141],[126,141],[112,127,141],[127,128,141,143],[112,129,130,131,132,141],[129,131,141],[129,130,141],[132,141],[133,141],[112,135,136,141],[135,136,141],[106,120,129,137,141],[138,141],[120,139,141],[101,115,126,140,141],[106,141],[129,141,142],[141,143],[141,144],[101,106,112,114,123,129,140,141,143,145],[129,141,146],[141,256],[141,257],[129,141,146,148],[141,267,268],[141,268,269,270,271,272],[141,267],[141,263,264,265,266],[115,129,141,148],[141,276,315],[141,276,300,315],[141,315],[141,276],[141,276,301,315],[141,276,277,278,279,280,281,282,283,284,285,286,287,288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314],[141,301,315],[113,129,141,148,179],[115,141,148,179,183],[141,168,317],[141,316],[141,219,320],[49,141],[141,170],[112,115,117,120,129,137,140,141,146,148],[141,324],[112,129,141,148],[54,55,56,57,58,59,60,61,62,63,141],[48,52,53,64,141],[48,52,141],[52,141],[51,52,141],[50,51,141],[88,141],[48,52,53,71,141],[69,94,95],[65],[65,69,93]],"referencedMap":[[92,1],[93,2],[69,3],[66,4],[67,4],[68,5],[96,6],[95,7],[94,8],[156,9],[154,10],[46,10],[54,11],[55,12],[58,13],[56,13],[60,13],[63,14],[62,10],[61,13],[59,13],[57,12],[47,10],[48,15],[70,10],[86,16],[85,17],[74,10],[75,18],[81,19],[73,10],[79,20],[80,21],[82,22],[90,23],[91,24],[77,25],[78,26],[76,10],[84,27],[83,10],[87,28],[149,29],[151,30],[152,10],[153,10],[159,31],[155,9],[157,32],[158,9],[161,33],[162,10],[166,34],[167,10],[169,35],[168,10],[171,36],[170,10],[173,37],[174,10],[175,10],[160,29],[176,10],[177,10],[186,38],[187,39],[188,10],[190,40],[191,10],[192,10],[193,10],[194,10],[198,41],[195,10],[197,42],[199,30],[150,10],[200,43],[182,44],[185,45],[201,10],[202,46],[204,47],[208,48],[209,10],[164,10],[183,10],[210,10],[211,49],[212,50],[219,51],[215,52],[214,10],[217,53],[218,54],[216,55],[196,10],[220,10],[178,10],[221,56],[222,57],[224,58],[225,59],[226,60],[227,61],[223,62],[228,57],[230,63],[231,64],[229,65],[232,66],[233,67],[234,68],[235,69],[236,70],[237,71],[238,72],[239,73],[240,74],[241,75],[242,10],[243,47],[245,76],[244,10],[246,10],[179,10],[247,10],[248,10],[249,46],[250,10],[189,10],[252,10],[253,77],[97,78],[98,78],[100,79],[101,80],[102,81],[103,82],[104,83],[105,84],[106,85],[107,86],[108,87],[109,88],[110,88],[111,89],[112,90],[113,91],[114,92],[99,93],[147,10],[115,94],[116,95],[117,96],[148,97],[118,98],[119,99],[120,100],[121,101],[122,102],[123,103],[124,104],[125,105],[126,106],[127,107],[128,108],[129,109],[131,110],[130,111],[132,112],[133,113],[134,10],[135,114],[136,115],[137,116],[138,117],[139,118],[140,119],[141,120],[142,121],[143,122],[144,123],[145,124],[146,125],[254,10],[255,10],[257,126],[256,127],[258,10],[259,43],[260,128],[261,10],[262,10],[263,10],[172,10],[181,10],[272,10],[269,129],[273,130],[271,131],[268,131],[270,129],[264,10],[267,132],[207,10],[274,43],[165,133],[275,10],[266,10],[300,134],[301,135],[276,136],[279,136],[298,134],[299,134],[289,134],[288,137],[286,134],[281,134],[294,134],[292,134],[296,134],[280,134],[293,134],[297,134],[282,134],[283,134],[295,134],[277,134],[284,134],[285,134],[287,134],[291,134],[302,138],[290,134],[278,134],[315,139],[314,10],[309,138],[311,140],[310,138],[303,138],[304,138],[306,138],[308,138],[312,140],[313,140],[305,140],[307,140],[180,141],[184,142],[318,143],[317,144],[316,10],[319,10],[321,145],[320,10],[50,146],[49,10],[206,147],[205,10],[203,10],[322,43],[323,148],[324,10],[325,149],[326,150],[213,10],[265,10],[251,133],[163,90],[64,151],[65,152],[53,153],[51,154],[88,155],[71,10],[52,156],[89,157],[72,158],[45,10],[43,10],[44,10],[8,10],[10,10],[9,10],[2,10],[11,10],[12,10],[13,10],[14,10],[15,10],[16,10],[17,10],[18,10],[3,10],[4,10],[22,10],[19,10],[20,10],[21,10],[23,10],[24,10],[25,10],[5,10],[26,10],[27,10],[28,10],[29,10],[6,10],[33,10],[30,10],[31,10],[32,10],[34,10],[7,10],[35,10],[40,10],[41,10],[36,10],[37,10],[38,10],[39,10],[1,10],[42,10]],"exportedModulesMap":[[92,1],[93,2],[69,3],[66,4],[67,4],[68,5],[96,159],[95,160],[94,161],[156,9],[154,10],[46,10],[54,11],[55,12],[58,13],[56,13],[60,13],[63,14],[62,10],[61,13],[59,13],[57,12],[47,10],[48,15],[70,10],[86,16],[85,17],[74,10],[75,18],[81,19],[73,10],[79,20],[80,21],[82,22],[90,23],[91,24],[77,25],[78,26],[76,10],[84,27],[83,10],[87,28],[149,29],[151,30],[152,10],[153,10],[159,31],[155,9],[157,32],[158,9],[161,33],[162,10],[166,34],[167,10],[169,35],[168,10],[171,36],[170,10],[173,37],[174,10],[175,10],[160,29],[176,10],[177,10],[186,38],[187,39],[188,10],[190,40],[191,10],[192,10],[193,10],[194,10],[198,41],[195,10],[197,42],[199,30],[150,10],[200,43],[182,44],[185,45],[201,10],[202,46],[204,47],[208,48],[209,10],[164,10],[183,10],[210,10],[211,49],[212,50],[219,51],[215,52],[214,10],[217,53],[218,54],[216,55],[196,10],[220,10],[178,10],[221,56],[222,57],[224,58],[225,59],[226,60],[227,61],[223,62],[228,57],[230,63],[231,64],[229,65],[232,66],[233,67],[234,68],[235,69],[236,70],[237,71],[238,72],[239,73],[240,74],[241,75],[242,10],[243,47],[245,76],[244,10],[246,10],[179,10],[247,10],[248,10],[249,46],[250,10],[189,10],[252,10],[253,77],[97,78],[98,78],[100,79],[101,80],[102,81],[103,82],[104,83],[105,84],[106,85],[107,86],[108,87],[109,88],[110,88],[111,89],[112,90],[113,91],[114,92],[99,93],[147,10],[115,94],[116,95],[117,96],[148,97],[118,98],[119,99],[120,100],[121,101],[122,102],[123,103],[124,104],[125,105],[126,106],[127,107],[128,108],[129,109],[131,110],[130,111],[132,112],[133,113],[134,10],[135,114],[136,115],[137,116],[138,117],[139,118],[140,119],[141,120],[142,121],[143,122],[144,123],[145,124],[146,125],[254,10],[255,10],[257,126],[256,127],[258,10],[259,43],[260,128],[261,10],[262,10],[263,10],[172,10],[181,10],[272,10],[269,129],[273,130],[271,131],[268,131],[270,129],[264,10],[267,132],[207,10],[274,43],[165,133],[275,10],[266,10],[300,134],[301,135],[276,136],[279,136],[298,134],[299,134],[289,134],[288,137],[286,134],[281,134],[294,134],[292,134],[296,134],[280,134],[293,134],[297,134],[282,134],[283,134],[295,134],[277,134],[284,134],[285,134],[287,134],[291,134],[302,138],[290,134],[278,134],[315,139],[314,10],[309,138],[311,140],[310,138],[303,138],[304,138],[306,138],[308,138],[312,140],[313,140],[305,140],[307,140],[180,141],[184,142],[318,143],[317,144],[316,10],[319,10],[321,145],[320,10],[50,146],[49,10],[206,147],[205,10],[203,10],[322,43],[323,148],[324,10],[325,149],[326,150],[213,10],[265,10],[251,133],[163,90],[64,151],[65,152],[53,153],[51,154],[88,155],[71,10],[52,156],[89,157],[72,158],[45,10],[43,10],[44,10],[8,10],[10,10],[9,10],[2,10],[11,10],[12,10],[13,10],[14,10],[15,10],[16,10],[17,10],[18,10],[3,10],[4,10],[22,10],[19,10],[20,10],[21,10],[23,10],[24,10],[25,10],[5,10],[26,10],[27,10],[28,10],[29,10],[6,10],[33,10],[30,10],[31,10],[32,10],[34,10],[7,10],[35,10],[40,10],[41,10],[36,10],[37,10],[38,10],[39,10],[1,10],[42,10]],"semanticDiagnosticsPerFile":[92,93,69,66,67,68,96,95,94,156,154,46,54,55,58,56,60,63,62,61,59,57,47,48,70,86,85,74,75,81,73,79,80,82,90,91,77,78,76,84,83,87,149,151,152,153,159,155,157,158,161,162,166,167,169,168,171,170,173,174,175,160,176,177,186,187,188,190,191,192,193,194,198,195,197,199,150,200,182,185,201,202,204,208,209,164,183,210,211,212,219,215,214,217,218,216,196,220,178,221,222,224,225,226,227,223,228,230,231,229,232,233,234,235,236,237,238,239,240,241,242,243,245,244,246,179,247,248,249,250,189,252,253,97,98,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,99,147,115,116,117,148,118,119,120,121,122,123,124,125,126,127,128,129,131,130,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,254,255,257,256,258,259,260,261,262,263,172,181,272,269,273,271,268,270,264,267,207,274,165,275,266,300,301,276,279,298,299,289,288,286,281,294,292,296,280,293,297,282,283,295,277,284,285,287,291,302,290,278,315,314,309,311,310,303,304,306,308,312,313,305,307,180,184,318,317,316,319,321,320,50,49,206,205,203,322,323,324,325,326,213,265,251,163,64,65,53,51,88,71,52,89,72,45,43,44,8,10,9,2,11,12,13,14,15,16,17,18,3,4,22,19,20,21,23,24,25,5,26,27,28,29,6,33,30,31,32,34,7,35,40,41,36,37,38,39,1,42]},"version":"5.1.6"} \ No newline at end of file diff --git a/lib/form/package.json b/lib/form/package.json new file mode 100644 index 0000000..2f2e928 --- /dev/null +++ b/lib/form/package.json @@ -0,0 +1,24 @@ +{ + "name": "@openscd/form", + "version": "0.0.1", + "description": "Core for Oscd Form Components", + "main": "./dist/index.js", + "types": "./dist/index.d.ts", + "module": "./dist/index.js", + "private": true, + "scripts": { + "build": "tsc", + "clean": "rimraf .tsbuildinfo dist" + }, + "dependencies": { + "lit": "^2.7.6", + "@openscd/core": "*", + "@openscd/oscd-switch": "*" + }, + "author": "OpenSCD", + "license": "ISC", + "devDependencies": { + "tslib": "^2.6.0", + "typescript": "^5.1.6" + } +} \ No newline at end of file diff --git a/lib/form/project.json b/lib/form/project.json new file mode 100644 index 0000000..eec5674 --- /dev/null +++ b/lib/form/project.json @@ -0,0 +1,9 @@ +{ + "name": "form", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "library", + "sourceRoot": "lib/form/src", + "targets": { + } + } + \ No newline at end of file diff --git a/lib/form/src/index.ts b/lib/form/src/index.ts new file mode 100644 index 0000000..5b24e58 --- /dev/null +++ b/lib/form/src/index.ts @@ -0,0 +1,4 @@ +export * from './oscd-form-component'; +export * from './oscd-form-component.styles'; + +export { redispatchEvent } from '@openscd/core'; diff --git a/lib/form/src/oscd-form-component.styles.ts b/lib/form/src/oscd-form-component.styles.ts new file mode 100644 index 0000000..5685ed2 --- /dev/null +++ b/lib/form/src/oscd-form-component.styles.ts @@ -0,0 +1,21 @@ +import { css, CSSResult } from 'lit-element'; + +import { styles as coreStyles } from '@openscd/core'; + +export const styles: CSSResult = css` + ${coreStyles} + + .container { + display: flex; + flex-direction: row; + } + + .container > div { + flex: auto; + } + .container.container--switch { + align-items: center; + margin-left: 16px; + height: 56px; + } +`; diff --git a/lib/form/src/oscd-form-component.ts b/lib/form/src/oscd-form-component.ts new file mode 100644 index 0000000..01ff97e --- /dev/null +++ b/lib/form/src/oscd-form-component.ts @@ -0,0 +1,50 @@ +import { TemplateResult, html, property, state, query } from 'lit-element'; + +import { OscdComponent } from '@openscd/core'; + +import '@openscd/oscd-switch'; +import type { OscdSwitch, OscdSwitchChangeEvent } from '@openscd/oscd-switch'; + +export abstract class OscdFormComponent extends OscdComponent { + /** + * Form Control can be nullable. If true, use the [[maybeValue]] + * @default false + */ + @property({ + type: Boolean, + }) + nullable = false; + + /** + * @internal + */ + protected isNull = false; + + protected abstract get null(): boolean; + protected abstract set null(value: boolean); + + @state() + protected _disabledSwitch: boolean = false; + + /** + * @internal + */ + @query('oscd-switch') + protected nullSwitch?: OscdSwitch; + + /** + * @internal + */ + protected renderSwitch(): TemplateResult { + if (this.nullable) { + return html` { + this.null = !evt.detail.selected; + }} + >`; + } + return html``; + } +} diff --git a/lib/form/tsconfig.json b/lib/form/tsconfig.json new file mode 100644 index 0000000..14fe222 --- /dev/null +++ b/lib/form/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "target": "es2018", + "module": "esnext", + "moduleResolution": "node", + "noEmitOnError": true, + "lib": ["es2018", "dom"], + "strict": true, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "experimentalDecorators": true, + "declaration": true, + "importHelpers": true, + "outDir": "./dist", + "sourceMap": true, + "inlineSources": true, + "rootDir": "./src", + "tsBuildInfoFile": ".tsbuildinfo", + "incremental": true, + "skipLibCheck": true + }, + "include": [ + "./src/**/*.ts" + ] + } + \ No newline at end of file