Skip to content

Commit

Permalink
feat: integrate form validation #44
Browse files Browse the repository at this point in the history
  • Loading branch information
@jordanjones243
jordanjones243 committed Dec 9, 2024
1 parent 76f8027 commit a673a6b
Show file tree
Hide file tree
Showing 31 changed files with 406 additions and 1,278 deletions.
82 changes: 6 additions & 76 deletions components/checkbox/demo/api.min.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ var checkLg = {"role":"img","color":"currentColor","title":"","desc":"","width":

/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */

let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
class AuroLibraryRuntimeUtils {

/* eslint-disable jsdoc/require-param */

Expand Down Expand Up @@ -119,7 +119,7 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {

return elemTag === tag || elem.hasAttribute(tag);
}
};
}

// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
// See LICENSE in the project root for license information.
Expand Down Expand Up @@ -150,7 +150,7 @@ class AuroCheckbox extends r {
/**
* @private
*/
this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
this.runtimeUtils = new AuroLibraryRuntimeUtils();
}

static get styles() {
Expand Down Expand Up @@ -191,7 +191,7 @@ class AuroCheckbox extends r {
*
*/
static register(name = "auro-checkbox") {
AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroCheckbox);
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroCheckbox);
}

// This custom event is only for the purpose of supporting IE
Expand Down Expand Up @@ -296,76 +296,6 @@ class AuroCheckbox extends r {
// 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 */

/**
* This will register a new custom element with the browser.
* @param {String} name - The name of the custom element.
* @param {Object} componentClass - The class to register as a custom element.
* @returns {void}
*/
registerComponent(name, componentClass) {
if (!customElements.get(name)) {
customElements.define(name, class extends componentClass {});
}
}

/**
* 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);
}
}

// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
// See LICENSE in the project root for license information.


class AuroFormValidation {
constructor() {
Expand Down Expand Up @@ -651,7 +581,7 @@ class AuroCheckboxGroup extends r {
/**
* @private
*/
this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
this.runtimeUtils = new AuroLibraryRuntimeUtils();
}

static get styles() {
Expand Down Expand Up @@ -712,7 +642,7 @@ class AuroCheckboxGroup extends r {
*
*/
static register(name = "auro-checkbox-group") {
AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroCheckboxGroup);
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroCheckboxGroup);
}

connectedCallback() {
Expand Down
82 changes: 6 additions & 76 deletions components/checkbox/demo/index.min.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ var checkLg = {"role":"img","color":"currentColor","title":"","desc":"","width":

/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */

let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
class AuroLibraryRuntimeUtils {

/* eslint-disable jsdoc/require-param */

Expand Down Expand Up @@ -119,7 +119,7 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {

return elemTag === tag || elem.hasAttribute(tag);
}
};
}

// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
// See LICENSE in the project root for license information.
Expand Down Expand Up @@ -150,7 +150,7 @@ class AuroCheckbox extends r {
/**
* @private
*/
this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
this.runtimeUtils = new AuroLibraryRuntimeUtils();
}

static get styles() {
Expand Down Expand Up @@ -191,7 +191,7 @@ class AuroCheckbox extends r {
*
*/
static register(name = "auro-checkbox") {
AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroCheckbox);
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroCheckbox);
}

// This custom event is only for the purpose of supporting IE
Expand Down Expand Up @@ -296,76 +296,6 @@ class AuroCheckbox extends r {
// 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 */

/**
* This will register a new custom element with the browser.
* @param {String} name - The name of the custom element.
* @param {Object} componentClass - The class to register as a custom element.
* @returns {void}
*/
registerComponent(name, componentClass) {
if (!customElements.get(name)) {
customElements.define(name, class extends componentClass {});
}
}

/**
* 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);
}
}

// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
// See LICENSE in the project root for license information.


class AuroFormValidation {
constructor() {
Expand Down Expand Up @@ -651,7 +581,7 @@ class AuroCheckboxGroup extends r {
/**
* @private
*/
this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
this.runtimeUtils = new AuroLibraryRuntimeUtils();
}

static get styles() {
Expand Down Expand Up @@ -712,7 +642,7 @@ class AuroCheckboxGroup extends r {
*
*/
static register(name = "auro-checkbox-group") {
AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroCheckboxGroup);
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroCheckboxGroup);
}

connectedCallback() {
Expand Down
2 changes: 1 addition & 1 deletion components/checkbox/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
},
"dependencies": {
"@alaskaairux/icons": "^4.44.1",
"@aurodesignsystem/auro-formvalidation": "^1.0.4",
"chalk": "^5.3.0",
"lit": "^3.2.1"
},
Expand All @@ -24,6 +23,7 @@
"devDependencies": {
"@auro-formkit/build-tools": "*",
"@auro-formkit/config": "*",
"@auro-formkit/form-validation": "*",
"@auro-formkit/typescript": "*",
"@aurodesignsystem/design-tokens": "^4.10.0",
"@aurodesignsystem/webcorestylesheets": "^5.1.2",
Expand Down
2 changes: 1 addition & 1 deletion components/checkbox/src/auro-checkbox-group.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
import { LitElement, html } from "lit";
import { classMap } from 'lit/directives/class-map.js';

import AuroFormValidation from '@aurodesignsystem/auro-formvalidation/src/validation.js';
import AuroFormValidation from '@auro-formkit/form-validation';
import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';

// Import the processed CSS file into the scope of the component
Expand Down
Loading

0 comments on commit a673a6b

Please sign in to comment.