@aurodesignsystem/auro-loader - npm Package Compare versions

Comparing version 2.1.0-beta.2 to 2.1.0-beta.3

CHANGELOG.md

 # Semantic Release Automated Changelog
 
-# [2.1.0-beta.2](https://github.com/AlaskaAirlines/auro-loader/compare/v2.1.0-beta.1...v2.1.0-beta.2) (2024-07-02)
+# [2.1.0-beta.3](https://github.com/AlaskaAirlines/auro-loader/compare/v2.1.0-beta.2...v2.1.0-beta.3) (2024-09-17)
 
 
-### Features
+### Bug Fixes
 
-* add function to handle custom name registration ([d269851](https://github.com/AlaskaAirlines/auro-loader/commit/d269851220c240e04fdb961c145a7cb2a3e6d84a))
+* **color:** resolve minor color theming issues [#32](https://github.com/AlaskaAirlines/auro-loader/issues/32) ([3f5164a](https://github.com/AlaskaAirlines/auro-loader/commit/3f5164a8d16d45b3fe6f05d7be936917666a9817))
 
-# [2.1.0-beta.1](https://github.com/AlaskaAirlines/auro-loader/compare/v2.0.6...v2.1.0-beta.1) (2024-07-02)
 
+### Performance Improvements
 
-### Features
+* refactor custom component registration config [#34](https://github.com/AlaskaAirlines/auro-loader/issues/34) ([3c35f89](https://github.com/AlaskaAirlines/auro-loader/commit/3c35f89f571d14c9a2d3fdc516e91a9d77832929))
 
-* refactor color styles to use tier 3 tokens ([3ec4e0e](https://github.com/AlaskaAirlines/auro-loader/commit/3ec4e0edbe3a5f0b69da1c2b61492a2aea530ccf))
-
 ## [2.0.6](https://github.com/AlaskaAirlines/auro-loader/compare/v2.0.5...v2.0.6) (2024-02-21)
@@ -18,0 +16,0 @@

demo/api.md

@@ -358,1 +358,17 @@ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../api.md) -->
 </auro-accordion>
+
+### Theme Support
+
+The component may be restyled using the following code sample and changing the values of the following token(s).
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../src/tokens.scss) -->
+<!-- The below code snippet is automatically added from ./../../src/tokens.scss -->
+
+```scss
+:host {
+  --ds-auro-loader-background-color: currentcolor;
+  --ds-auro-loader-border-color: currentcolor;
+  --ds-auro-loader-color: currentcolor;
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->

demo/index.md

@@ -195,4 +195,6 @@ <!--
 ```js
-import './node_modules/@aurodesignsystem/auro-loader';
-registerComponent('custom-loader');
+import { AuroLoader } from './src/auro-loader.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+RuntimeUtils.default.prototype.registerComponent('custom-loader', AuroLoader);
 ```
@@ -199,0 +201,0 @@

dist/auro-loader__bundled.js

@@ -27,5 +27,62 @@ /**
 
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
+
+class AuroLibraryRuntimeUtils {
+
+  /* eslint-disable jsdoc/require-param */
+  /**
+   * Finds and returns the closest HTML Element based on a selector.
+   * @returns {void}
+   */
+  closestElement(
+    selector, // selector like in .closest()
+    base = this, // extra functionality to skip a parent
+    __Closest = (el, found = el && el.closest(selector)) =>
+      !el || el === document || el === window
+        ? null // standard .closest() returns null for non-found selectors also
+        : found
+          ? found // found a selector INside this element
+          : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
+  ) {
+    return __Closest(base);
+  }
+  /* eslint-enable jsdoc/require-param */
+
+  /**
+   * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
+   * @param {Object} elem - The element to check.
+   * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
+   * @returns {void}
+   */
+  handleComponentTagRename(elem, tagName) {
+    const tag = tagName.toLowerCase();
+    const elemTag = elem.tagName.toLowerCase();
+
+    if (elemTag !== tag) {
+      elem.setAttribute(tag, true);
+    }
+  }
+
+  /**
+   * Validates if an element is a specific Auro component.
+   * @param {Object} elem - The element to validate.
+   * @param {String} tagName - The name of the Auro component to check against.
+   * @returns {Boolean} - Returns true if the element is the specified Auro component.
+   */
+  elementMatch(elem, tagName) {
+    const tag = tagName.toLowerCase();
+    const elemTag = elem.tagName.toLowerCase();
+
+    return elemTag === tag || elem.hasAttribute(tag);
+  }
+}
+
 var styleCss = i$2`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin:0.375rem;--margin-xs:0.2rem;--margin-sm:0.5rem;--margin-md:0.75rem;--margin-lg:1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin)*6);height:1.5rem}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(2.55rem + var(--margin-xs)*6);height:1.55rem}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm)*6);height:2.5rem}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md)*6);height:3.5rem}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg)*6);height:5.5rem}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-400ms}:host([pulse])>span:nth-child(2){animation-delay:-200ms}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,100%{opacity:.1;transform:scale(0.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}100%{left:110%}}:host>.no-animation{display:none}@media(prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center;font-size:1rem}:host>span{opacity:1}:host>.loader{display:none}:host>.no-animation{display:block}}`;
 
-var colorCss = i$2`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]){--ds-auro-loader-color:var(--ds-color-ui-default-default, #0074c8)}:host([ondark]){--ds-auro-loader-color:var(--ds-color-brand-breeze-300, #00cff0)}:host([white]){--ds-auro-loader-color:var(--ds-color-container-ui-secondary-default-default, #ffffff)}:host([orbit])>span{--ds-auro-loader-background-color:transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color:currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color:currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}`;
+var colorCss = i$2`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]){--ds-auro-loader-color:var(--ds-color-utility-navy-default, #326aa5)}:host([ondark]){--ds-auro-loader-color:var(--ds-color-utility-cyan-inverse, #a8e9f7)}:host([white]){--ds-auro-loader-color:var(--ds-color-utility-neutral-inverse, #ccd2db)}:host([orbit])>span{--ds-auro-loader-background-color:transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color:currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color:currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}`;
 
@@ -76,2 +133,7 @@ var tokensCss = i$2`:host{--ds-auro-loader-background-color:currentcolor;--ds-auro-loader-border-color:currentcolor;--ds-auro-loader-color:currentcolor}`;
 
+    /**
+     * @private
+     */
+    this.runtimeUtils = new AuroLibraryRuntimeUtils();
+
     this.orbit = false;
@@ -113,16 +175,5 @@ this.ringworm = false;
 
-  /**
-   * If component is registered as a custom name,
-   * this function will add an attribute to the element
-   * with the default name. This is so that other parent
-   * components can still this the element.
-   * @private
-   * @param {string} name - The default tag name.
-   * @param {HTMLElement} elem - The element to add the attribute to.
-   * @returns {void}
-   */
-  handleCustomTagName(name, elem) {
-    if (name.toLowerCase() !== elem.tagName.toLowerCase()) {
-      elem.setAttribute(name, true);
-    }
+  firstUpdated() {
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-loader');
   }
@@ -132,3 +183,2 @@
     super.connectedCallback();
-    this.handleCustomTagName('auro-loader', this);
   }
@@ -179,14 +229,2 @@
 
-/**
- * Register Custom Element.
- * @param {Object} name - Name to use for custom element.
- * @returns {void}
- */
- const registerComponent = (name = 'custom-loader') => {
-  // alias definition
-  if (!customElements.get(name)) {
-    customElements.define(name, class extends AuroLoader {});
-  }
-};
-
-export { registerComponent };
+AuroLibraryRuntimeUtils.prototype.registerComponent('custom-loader', AuroLoader);

dist/auro-loader.d.ts

@@ -49,2 +49,6 @@ /**
     private smCount;
+    /**
+     * @private
+     */
+    private runtimeUtils;
     orbit: boolean;
@@ -54,15 +58,5 @@ ringworm: boolean;
     pulse: boolean;
+    firstUpdated(): void;
     /**
-     * If component is registered as a custom name,
-     * this function will add an attribute to the element
-     * with the default name. This is so that other parent
-     * components can still this the element.
      * @private
-     * @param {string} name - The default tag name.
-     * @param {HTMLElement} elem - The element to add the attribute to.
-     * @returns {void}
-     */
-    private handleCustomTagName;
-    /**
-     * @private
      * @returns {Array} Numbered array for template map.
@@ -69,0 +63,0 @@ */

index.js

 import { AuroLoader } from './src/auro-loader.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-/**
- * Register Custom Element.
- * @param {Object} name - Name to use for custom element.
- * @returns {void}
- */
- const registerComponent = (name = 'custom-loader') => {
-  // alias definition
-  if (!customElements.get(name)) {
-    customElements.define(name, class extends AuroLoader {});
-  }
-}
-
-export { registerComponent }
+RuntimeUtils.default.prototype.registerComponent('custom-loader', AuroLoader);

package.json

@@ -10,3 +10,3 @@ {
   "name": "@aurodesignsystem/auro-loader",
-  "version": "2.1.0-beta.2",
+  "version": "2.1.0-beta.3",
   "description": "auro-loader HTML custom element",
@@ -13,0 +13,0 @@ "repository": {

README.md

@@ -69,11 +69,2 @@ <!--
 
-### CSS Custom Property fallbacks
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/cssFallbacks.md) -->
-[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) are [not supported](https://auro.alaskaair.com/support/custom-properties) in older browsers. For this, fallback properties are pre-generated and included with the npm.
-
-Any update to the Auro Design Tokens will be immediately reflected with browsers that support CSS custom properties, legacy browsers will require updated components with pre-generated fallback properties.
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
 ### Define dependency in project component
@@ -120,3 +111,3 @@
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.0.8/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-loader@2.1.0-beta.2/dist/auro-loader__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-loader@2.1.0-beta.3/dist/auro-loader__bundled.js" type="module"></script>
 ```
@@ -123,0 +114,0 @@

src/auro-loader.js

@@ -11,2 +11,4 @@ // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
 import styleCss from "./style-css.js";
@@ -54,2 +56,7 @@ import colorCss from "./color-css.js";
 
+    /**
+     * @private
+     */
+    this.runtimeUtils = new AuroLibraryRuntimeUtils();
+
     this.orbit = false;
@@ -91,16 +98,5 @@ this.ringworm = false;
 
-  /**
-   * If component is registered as a custom name,
-   * this function will add an attribute to the element
-   * with the default name. This is so that other parent
-   * components can still this the element.
-   * @private
-   * @param {string} name - The default tag name.
-   * @param {HTMLElement} elem - The element to add the attribute to.
-   * @returns {void}
-   */
-  handleCustomTagName(name, elem) {
-    if (name.toLowerCase() !== elem.tagName.toLowerCase()) {
-      elem.setAttribute(name, true);
-    }
+  firstUpdated() {
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-loader');
   }
@@ -110,3 +106,2 @@
     super.connectedCallback();
-    this.handleCustomTagName('auro-loader', this);
   }
@@ -113,0 +108,0 @@

src/color-css.js

 import {css} from 'lit';
-export default css`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]){--ds-auro-loader-color:var(--ds-color-ui-default-default, #0074c8)}:host([ondark]){--ds-auro-loader-color:var(--ds-color-brand-breeze-300, #00cff0)}:host([white]){--ds-auro-loader-color:var(--ds-color-container-ui-secondary-default-default, #ffffff)}:host([orbit])>span{--ds-auro-loader-background-color:transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color:currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color:currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}`;
+export default css`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]){--ds-auro-loader-color:var(--ds-color-utility-navy-default, #326aa5)}:host([ondark]){--ds-auro-loader-color:var(--ds-color-utility-cyan-inverse, #a8e9f7)}:host([white]){--ds-auro-loader-color:var(--ds-color-utility-neutral-inverse, #ccd2db)}:host([orbit])>span{--ds-auro-loader-background-color:transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color:currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color:currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}`;

No alert changes

Improved metrics

Total package byte prevSize

95604

increased by0.81%

Lines of code

497

increased by1.22%

Worsened metrics

Number of lines in readme file

187

decreased by-4.59%

No dependency changes