@material/mwc-base - npm Package Compare versions

Comparing version 0.23.0-canary.cc0aa7a9.0 to 0.23.0-canary.d00b098d.0

aria-property.d.ts

@@ -5,4 +5,8 @@ /**
  * SPDX-License-Identifier: Apache-2.0
- */ 
+ */
 /**
+ * A value for the `aria-haspopup` ARIA attribute.
+ */
+export declare type AriaHasPopup = 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+/**
  * A property decorator proxies an aria attribute to an internal node
@@ -9,0 +13,0 @@ *

aria-property.js

@@ -5,4 +5,3 @@ /**
  * SPDX-License-Identifier: Apache-2.0
- */ // tslint:disable:no-any
-// eslint-disable @typescript-eslint/no-explicit-any
+ */
 /**
@@ -9,0 +8,0 @@ * TypeScript version of the decorator

form-element.d.ts

@@ -8,3 +8,11 @@ /**
 import { RippleInterface } from './utils';
-export { addHasRemoveClass, BaseElement, CustomEventListener, EventType, RippleInterface, SpecificEventListener, };
+export { addHasRemoveClass, BaseElement, CustomEventListener, EventType, RippleInterface, SpecificEventListener };
+declare global {
+    interface FormDataEvent extends Event {
+        readonly formData: FormData;
+    }
+    interface HTMLElementEventMap {
+        formdata: FormDataEvent;
+    }
+}
 /** @soyCompatible */
@@ -20,8 +28,24 @@ export declare abstract class FormElement extends BaseElement {
     /**
+     * Disabled state for the component. When `disabled` is set to `true`, the
+     * component will not be added to form submission.
+     */
+    disabled: boolean;
+    /**
      * Implement ripple getter for Ripple integration with mwc-formfield
      */
     readonly ripple?: Promise<RippleInterface | null>;
+    /**
+     * Form element that contains this element
+     */
+    protected containingForm: HTMLFormElement | null;
+    protected formDataListener: (ev: FormDataEvent) => void;
+    protected findFormElement(): HTMLFormElement | null;
+    /**
+     * Implement this callback to submit form data
+     */
+    protected abstract setFormData(formData: FormData): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     click(): void;
-    setAriaLabel(label: string): void;
     protected firstUpdated(): void;
 }

form-element.js

@@ -6,8 +6,60 @@ /**
  */
+var _a, _b;
+import { __decorate } from "tslib";
+// Style preference for leading underscores.
+// tslint:disable:strip-private-property-underscore
+import { property } from 'lit-element';
 import { addHasRemoveClass, BaseElement } from './base-element';
-export { addHasRemoveClass, BaseElement, };
+export { addHasRemoveClass, BaseElement };
+// ShadyDOM should submit <input> elements in component internals
+const USING_SHADY_DOM = (_b = (_a = window.ShadyDOM) === null || _a === void 0 ? void 0 : _a.inUse) !== null && _b !== void 0 ? _b : false;
 /** @soyCompatible */
 export class FormElement extends BaseElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Disabled state for the component. When `disabled` is set to `true`, the
+         * component will not be added to form submission.
+         */
+        this.disabled = false;
+        /**
+         * Form element that contains this element
+         */
+        this.containingForm = null;
+        this.formDataListener = (ev) => {
+            if (!this.disabled) {
+                this.setFormData(ev.formData);
+            }
+        };
+    }
+    findFormElement() {
+        // If the component internals are not in Shadow DOM, subscribing to form
+        // data events could lead to duplicated data, which may not work correctly
+        // on the server side.
+        if (!this.shadowRoot || USING_SHADY_DOM) {
+            return null;
+        }
+        const root = this.getRootNode();
+        const forms = root.querySelectorAll('form');
+        for (const form of Array.from(forms)) {
+            if (form.contains(this)) {
+                return form;
+            }
+        }
+        return null;
+    }
+    connectedCallback() {
+        var _a;
+        super.connectedCallback();
+        this.containingForm = this.findFormElement();
+        (_a = this.containingForm) === null || _a === void 0 ? void 0 : _a.addEventListener('formdata', this.formDataListener);
+    }
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        (_a = this.containingForm) === null || _a === void 0 ? void 0 : _a.removeEventListener('formdata', this.formDataListener);
+        this.containingForm = null;
+    }
     click() {
-        if (this.formElement) {
+        if (this.formElement && !this.disabled) {
             this.formElement.focus();
@@ -17,7 +69,2 @@ this.formElement.click();
     }
-    setAriaLabel(label) {
-        if (this.formElement) {
-            this.formElement.setAttribute('aria-label', label);
-        }
-    }
     firstUpdated() {
@@ -33,2 +80,5 @@ super.firstUpdated();
 FormElement.shadowRootOptions = { mode: 'open', delegatesFocus: true };
+__decorate([
+    property({ type: Boolean })
+], FormElement.prototype, "disabled", void 0);
 //# sourceMappingURL=form-element.js.map

observer.d.ts

@@ -5,3 +5,3 @@ /**
  * SPDX-License-Identifier: Apache-2.0
- */ 
+ */
 /**
@@ -8,0 +8,0 @@ * Observer function type.

observer.js

@@ -5,3 +5,3 @@ /**
  * SPDX-License-Identifier: Apache-2.0
- */ // tslint:disable:no-any
+ */
 /**
@@ -8,0 +8,0 @@ * Specifies an observer callback that is run when the decorated property

package.json

 {
   "name": "@material/mwc-base",
-  "version": "0.23.0-canary.cc0aa7a9.0",
+  "version": "0.23.0-canary.d00b098d.0",
   "description": "",
@@ -14,4 +14,4 @@ "main": "base-element.js",
   "dependencies": {
-    "@material/base": "=12.0.0-canary.22d29cbb4.0",
-    "@material/dom": "=12.0.0-canary.22d29cbb4.0",
+    "@material/base": "=13.0.0-canary.15981e9d9.0",
+    "@material/dom": "=13.0.0-canary.15981e9d9.0",
     "lit-element": "^2.5.1",
@@ -21,6 +21,6 @@ "tslib": "^2.0.1"
   "devDependencies": {
-    "@material/elevation": "=12.0.0-canary.22d29cbb4.0",
-    "@material/feature-targeting": "=12.0.0-canary.22d29cbb4.0",
-    "@material/ripple": "=12.0.0-canary.22d29cbb4.0",
-    "@material/theme": "=12.0.0-canary.22d29cbb4.0"
+    "@material/elevation": "=13.0.0-canary.15981e9d9.0",
+    "@material/feature-targeting": "=13.0.0-canary.15981e9d9.0",
+    "@material/ripple": "=13.0.0-canary.15981e9d9.0",
+    "@material/theme": "=13.0.0-canary.15981e9d9.0"
   },
@@ -30,3 +30,3 @@ "publishConfig": {
   },
-  "gitHead": "46cd2c64b884400d63eb38fd81a1ad72accf42df"
+  "gitHead": "918e9dc10ef626db369abf76acaf3266d5437d5a"
 }

utils.js

@@ -6,2 +6,4 @@ /**
  */
+// Style preference for leading underscores.
+// tslint:disable:strip-private-property-underscore
 /**
@@ -8,0 +10,0 @@ * Determines whether a node is an element.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

50278

increased by14.67%

Lines of code

486

increased by19.41%

Dependency changes

• Updated@material/base@=13.0.0-canary.15981e9d9.0

• Updated@material/dom@=13.0.0-canary.15981e9d9.0