From b46d51fe4bdafb5751e8ca4c19be10daa4fe48a0 Mon Sep 17 00:00:00 2001 From: rmenner Date: Wed, 4 Dec 2024 19:51:37 -0500 Subject: [PATCH] refactor: refactor and add component registration #54 --- components/counter/demo/api.min.js | 56 ++++++++++++++++++- components/counter/demo/index.min.js | 10 +++- components/counter/package.json | 2 +- ...-countergroup.js => auro-counter-group.js} | 10 +++- components/counter/src/auro-counter.js | 6 ++ components/counter/src/index.js | 5 ++ .../{countergroup.scss => counter-group.scss} | 0 7 files changed, 81 insertions(+), 8 deletions(-) rename components/counter/src/{auro-countergroup.js => auro-counter-group.js} (73%) rename components/counter/src/styles/{countergroup.scss => counter-group.scss} (100%) diff --git a/components/counter/demo/api.min.js b/components/counter/demo/api.min.js index befbd1d9..11f8b0db 100644 --- a/components/counter/demo/api.min.js +++ b/components/counter/demo/api.min.js @@ -31,7 +31,7 @@ const t=globalThis,e$1=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShad * SPDX-License-Identifier: BSD-3-Clause */class r extends b{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1);}render(){return T}}r._$litElement$=!0,r["finalized"]=!0,globalThis.litElementHydrateSupport?.({LitElement:r});const i=globalThis.litElementPolyfillSupport;i?.({LitElement:r});(globalThis.litElementVersions??=[]).push("4.1.1"); -var styleCss = i$2`:host{position:relative}`; +var styleCss$1 = i$2`:host{position:relative}`; // Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license // See LICENSE in the project root for license information. @@ -40,7 +40,7 @@ var styleCss = i$2`:host{position:relative}`; class AuroCounter extends r { static get styles() { - return [styleCss]; + return [styleCss$1]; } // function that renders the HTML and CSS into the scope of the component @@ -53,7 +53,59 @@ class AuroCounter extends r { } } +/* istanbul ignore else */ +// define the name of the custom component +if (!customElements.get("auro-counter")) { + customElements.define("auro-counter", AuroCounter); +} + +var styleCss = i$2`:host{position:relative}`; + +// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + + +class AuroCounterGroup extends r { + + static get styles() { + return [styleCss]; + } + + static get properties() { + return { + common: { + type: Boolean, + reflect: true + }, + inset: { + type: Boolean, + reflect: true + }, + rounded: { + type: Boolean, + reflect: true + } + }; + } + + // function that renders the HTML and CSS into the scope of the component + render() { + return u$1` +
+ +
+ `; + } +} + +/* istanbul ignore else */ +// define the name of the custom component +if (!customElements.get("auro-counter-group")) { + customElements.define("auro-counter-group", AuroCounterGroup); +} + AuroCounter.register(); +AuroCounterGroup.register(); /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers */ diff --git a/components/counter/demo/index.min.js b/components/counter/demo/index.min.js index fa55db97..a1b7d715 100644 --- a/components/counter/demo/index.min.js +++ b/components/counter/demo/index.min.js @@ -53,13 +53,17 @@ class AuroCounter extends r { } } +/* istanbul ignore else */ +// define the name of the custom component +if (!customElements.get("auro-counter")) { + customElements.define("auro-counter", AuroCounter); +} + /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */ -// import { AuroDropdownBib } from '../src/auro-dropdownBib.js'; -// AuroDropdownBib.register(); AuroCounter.register(); -AuroCounter.register('custom-dropdown'); +AuroCounter.register('custom-counter'); function initExamples(initialCount = 0) { } diff --git a/components/counter/package.json b/components/counter/package.json index ca193dc8..c85d5e58 100644 --- a/components/counter/package.json +++ b/components/counter/package.json @@ -36,7 +36,7 @@ "build": "run-s build:sass bundler types", "build:sass": "sass --no-source-map --load-path=../../node_modules \"./src/styles/:./src/styles/\"", "build:watch": "nodemon -e scss,js --watch src --ignore \"*.css\" --ignore \"*-css.js\" --exec \"npm run build\"", - "bundler": "rollup -c node:@auro-formkit/config/rollup --input src/index.js", + "bundler": "rollup -c node:@auro-formkit/config/rollup", "clean": "rm -rf dist build", "dev": "concurrently \"npm run build:watch\" \"npm run serve\"", "postCss:component": "node ../../node_modules/@aurodesignsystem/auro-library/scripts/build/postCss.mjs", diff --git a/components/counter/src/auro-countergroup.js b/components/counter/src/auro-counter-group.js similarity index 73% rename from components/counter/src/auro-countergroup.js rename to components/counter/src/auro-counter-group.js index 0416d61a..9d2c668d 100644 --- a/components/counter/src/auro-countergroup.js +++ b/components/counter/src/auro-counter-group.js @@ -6,9 +6,9 @@ import { html } from "lit/static-html.js"; import { LitElement } from "lit"; -import styleCss from "./styles/countergroup-css.js"; +import styleCss from "./styles/counter-group-css.js"; -export class AuroCountergroup extends LitElement { +export class AuroCounterGroup extends LitElement { static get styles() { return [styleCss]; @@ -40,3 +40,9 @@ export class AuroCountergroup extends LitElement { `; } } + +/* istanbul ignore else */ +// define the name of the custom component +if (!customElements.get("auro-counter-group")) { + customElements.define("auro-counter-group", AuroCounterGroup); +} diff --git a/components/counter/src/auro-counter.js b/components/counter/src/auro-counter.js index a60fa9da..32eb7188 100644 --- a/components/counter/src/auro-counter.js +++ b/components/counter/src/auro-counter.js @@ -21,3 +21,9 @@ export class AuroCounter extends LitElement { `; } } + +/* istanbul ignore else */ +// define the name of the custom component +if (!customElements.get("auro-counter")) { + customElements.define("auro-counter", AuroCounter); +} diff --git a/components/counter/src/index.js b/components/counter/src/index.js index 9cbc7931..898ba890 100644 --- a/components/counter/src/index.js +++ b/components/counter/src/index.js @@ -1,3 +1,8 @@ import { AuroCounter } from './auro-counter.js'; +import { AuroCounterGroup } from './auro-counter-group.js'; AuroCounter.register(); +AuroCounterGroup.register(); + +// Enable TypeScript support +export { AuroCounter, AuroCounterGroup }; diff --git a/components/counter/src/styles/countergroup.scss b/components/counter/src/styles/counter-group.scss similarity index 100% rename from components/counter/src/styles/countergroup.scss rename to components/counter/src/styles/counter-group.scss