@microsoft/atlas-js - npm Package Compare versions

Comparing version 1.4.0 to 1.5.0

dist/elements/form-behavior.d.ts

@@ -10,3 +10,3 @@ export declare const defaultMessageStrings: {
 };
-declare class FormBehaviorElement extends HTMLElement {
+export declare class FormBehaviorElement extends HTMLElement {
     submitting: boolean;
@@ -30,5 +30,6 @@ initialData: FormData;
     constructor();
-    get isNew(): boolean;
     get canSave(): boolean;
     get form(): HTMLFormElement | null;
+    get hideUnloadMessage(): boolean;
+    get isNew(): boolean;
     connectedCallback(): void;
@@ -68,3 +69,3 @@ disconnectedCallback(): void;
 }
-interface HTMLValueElement extends HTMLElement {
+export interface HTMLValueElement extends HTMLElement {
     form: HTMLFormElement;
@@ -89,2 +90,6 @@ labels: NodeListOf<HTMLLabelElement> | null;
 declare type Validator = (input: HTMLValueElement, label: string) => string | null;
+export declare function getLabel(input: HTMLValueElement): string;
+export declare function getField(input: HTMLValueElement): HTMLElement;
+export declare function getFieldBody(input: HTMLValueElement): Element;
+export declare function setValidationMessage(element: HTMLValueElement, message: string): void;
 export declare function navigateAfterSubmit(href: string, navigationStep: NavigationSteps): void;
@@ -91,0 +96,0 @@ export declare function collectCustomElementsByName(form: HTMLFormElement): Element[];

dist/elements/form-behavior.js

@@ -12,3 +12,3 @@ import { generateElementId, kebabToCamelCase } from '../utilities/util';
 // <form-behavior>
-class FormBehaviorElement extends HTMLElement {
+export class FormBehaviorElement extends HTMLElement {
     submitting = false;
@@ -34,6 +34,2 @@ initialData = new FormData();
     }
-    // use the new attribute when you want to ignore isDirty validation (for example, if the only user action on the form is to click a button)
-    get isNew() {
-        return this.hasAttribute('new');
-    }
     get canSave() {
@@ -45,2 +41,10 @@ return this.isDirty || this.isNew;
     }
+    // disable browser message when leaving page
+    get hideUnloadMessage() {
+        return this.hasAttribute('nounload');
+    }
+    // use the new attribute when you want to ignore isDirty validation (for example, if the only user action on the form is to click a button)
+    get isNew() {
+        return this.hasAttribute('new');
+    }
     connectedCallback() {
@@ -124,3 +128,3 @@ const form = this.parentElement;
         this.setDirty();
-        if (!this.isDirty) {
+        if (!this.isDirty || this.hideUnloadMessage) {
             return;
@@ -268,8 +272,6 @@ }
         if ((input instanceof HTMLTextAreaElement || input instanceof HTMLInputElement) &&
-            (input.validity.tooLong ||
-                (input.maxLength > 0 && input.value.length > input.maxLength) ||
-                input.value.length > 255)) {
+            (input.validity.tooLong || (input.maxLength > 0 && input.value.length > input.maxLength))) {
             return `${this.locStrings.inputMaxLength
                 .replace('{inputLabel}', label)
-                .replace('{maxLength}', input.maxLength > 0 ? input.maxLength.toString() : '255')}`;
+                .replace('{maxLength}', input.maxLength.toString())}`;
         }
@@ -290,3 +292,3 @@ return null;
             }
-            if (input.hasAttribute('aria-hidden')) {
+            if (input.hasAttribute('aria-hidden') === true) {
                 continue;
@@ -340,2 +342,5 @@ }
         const clearValidationEvent = new CustomEvent('clear-validation-errors', {
+            detail: {
+                target
+            },
             bubbles: true
@@ -448,3 +453,3 @@ });
 }
-function getLabel(input) {
+export function getLabel(input) {
     const label = input.labels && input.labels.length
@@ -458,3 +463,3 @@ ? input.labels[0].textContent
 }
-function getField(input) {
+export function getField(input) {
     const group = input.closest('.field');
@@ -466,3 +471,3 @@ if (!group) {
 }
-function getFieldBody(input) {
+export function getFieldBody(input) {
     const body = input.closest('.field-body');
@@ -482,3 +487,3 @@ if (!body) {
 }
-function setValidationMessage(element, message) {
+export function setValidationMessage(element, message) {
     const group = getField(element);
@@ -485,0 +490,0 @@ const note = group.querySelector('.field-error') || createErrorNote(element);

dist/index.d.ts

 export * from './behaviors/popover';
+export * from './behaviors/snap-scroll';
 export * from './elements/form-behavior';
-export * from './elements/star-rating';
 //# sourceMappingURL=index.d.ts.map

dist/index.js

 export * from './behaviors/popover';
+export * from './behaviors/snap-scroll';
 export * from './elements/form-behavior';
-export * from './elements/star-rating';

package.json

 {
 	"name": "@microsoft/atlas-js",
-	"version": "1.4.0",
+	"version": "1.5.0",
 	"public": true,
@@ -5,0 +5,0 @@ "description": "Scripts backing the Atlas Design System used by Microsoft's Developer Relations.",

src/elements/form-behavior.ts

@@ -14,3 +14,3 @@ import { generateElementId, kebabToCamelCase } from '../utilities/util';
 // <form-behavior>
-class FormBehaviorElement extends HTMLElement {
+export class FormBehaviorElement extends HTMLElement {
 	submitting = false as boolean;
@@ -43,7 +43,2 @@ initialData = new FormData();
 
-	// use the new attribute when you want to ignore isDirty validation (for example, if the only user action on the form is to click a button)
-	get isNew() {
-		return this.hasAttribute('new');
-	}
-
 	get canSave() {
@@ -57,2 +52,12 @@ return this.isDirty || this.isNew;
 
+	// disable browser message when leaving page
+	get hideUnloadMessage() {
+		return this.hasAttribute('nounload');
+	}
+
+	// use the new attribute when you want to ignore isDirty validation (for example, if the only user action on the form is to click a button)
+	get isNew() {
+		return this.hasAttribute('new');
+	}
+
 	connectedCallback() {
@@ -156,3 +161,3 @@ const form = this.parentElement;
 		this.setDirty();
-		if (!this.isDirty) {
+		if (!this.isDirty || this.hideUnloadMessage) {
 			return;
@@ -335,9 +340,7 @@ }
 			(input instanceof HTMLTextAreaElement || input instanceof HTMLInputElement) &&
-			(input.validity.tooLong ||
-				(input.maxLength > 0 && input.value.length > input.maxLength) ||
-				input.value.length > 255)
+			(input.validity.tooLong || (input.maxLength > 0 && input.value.length > input.maxLength))
 		) {
 			return `${this.locStrings.inputMaxLength
 				.replace('{inputLabel}', label)
-				.replace('{maxLength}', input.maxLength > 0 ? input.maxLength.toString() : '255')}`;
+				.replace('{maxLength}', input.maxLength.toString())}`;
 		}
@@ -366,3 +369,3 @@ return null;
 
-			if (input.hasAttribute('aria-hidden')) {
+			if (input.hasAttribute('aria-hidden') === true) {
 				continue;
@@ -429,2 +432,5 @@ }
 		const clearValidationEvent = new CustomEvent('clear-validation-errors', {
+			detail: {
+				target
+			},
 			bubbles: true
@@ -535,3 +541,3 @@ });
 // Start <form behavior> Helper functions
-interface HTMLValueElement extends HTMLElement {
+export interface HTMLValueElement extends HTMLElement {
 	form: HTMLFormElement;
@@ -611,3 +617,3 @@ labels: NodeListOf<HTMLLabelElement> | null;
 
-function getLabel(input: HTMLValueElement): string {
+export function getLabel(input: HTMLValueElement): string {
 	const label =
@@ -625,3 +631,3 @@ input.labels && input.labels.length
 
-function getField(input: HTMLValueElement) {
+export function getField(input: HTMLValueElement) {
 	const group = input.closest<HTMLElement>('.field');
@@ -636,3 +642,3 @@ if (!group) {
 
-function getFieldBody(input: HTMLValueElement) {
+export function getFieldBody(input: HTMLValueElement) {
 	const body = input.closest('.field-body');
@@ -659,3 +665,3 @@ if (!body) {
 
-function setValidationMessage(element: HTMLValueElement, message: string) {
+export function setValidationMessage(element: HTMLValueElement, message: string) {
 	const group = getField(element);
@@ -662,0 +668,0 @@ const note = group.querySelector('.field-error') || createErrorNote(element);

src/index.ts

 export * from './behaviors/popover';
+export * from './behaviors/snap-scroll';
 export * from './elements/form-behavior';
-export * from './elements/star-rating';

No alert changes

Worsened metrics

Total package byte prevSize

61413

decreased by-22.11%

Lines of code

1558

decreased by-24.26%

No dependency changes