@vaadin/vaadin-element-mixin - npm Package Compare versions

Comparing version 20.0.0-alpha4 to 20.0.0-alpha5

package.json

 {
   "name": "@vaadin/vaadin-element-mixin",
-  "version": "20.0.0-alpha4",
+  "version": "20.0.0-alpha5",
   "description": "vaadin-element-mixin",
@@ -38,3 +38,3 @@ "main": "vaadin-element-mixin.js",
   },
-  "gitHead": "9231db8255f75ccf3a241224ed36015c5e31994e"
+  "gitHead": "78d1ead024055d57ef2badf52cfdb403290416b9"
 }

vaadin-dir-mixin.d.ts

@@ -7,2 +7,3 @@ export { DirMixin };
   new (...args: any[]): DirMixin;
+
   finalize(): void;
@@ -14,4 +15,2 @@ }
 interface DirMixin {
-  readonly dir: string | null | undefined;
-
   __getNormalizedScrollLeft(element: Element | null): number;
@@ -18,0 +17,0 @@

vaadin-dir-mixin.js

@@ -24,6 +24,6 @@ /**
 
-const alignDirs = function (element, documentDir) {
+const alignDirs = function (element, documentDir, elementDir = element.getAttribute('dir')) {
   if (documentDir) {
     element.setAttribute('dir', documentDir);
-  } else {
+  } else if (elementDir != null) {
     element.removeAttribute('dir');
@@ -49,3 +49,4 @@ }
           type: String,
-          readOnly: true
+          value: '',
+          reflectToAttribute: true
         }
@@ -70,3 +71,3 @@ };
         this.__subscribe();
-        alignDirs(this, getDocumentDir());
+        alignDirs(this, getDocumentDir(), null);
       }
@@ -82,12 +83,14 @@ }
 
+      const documentDir = getDocumentDir();
+
       // New value equals to the document direction and the element is not subscribed to the changes
-      const newValueEqlDocDir = newValue === getDocumentDir() && directionSubscribers.indexOf(this) === -1;
+      const newValueEqlDocDir = newValue === documentDir && directionSubscribers.indexOf(this) === -1;
       // Value was emptied and the element is not subscribed to the changes
       const newValueEmptied = !newValue && oldValue && directionSubscribers.indexOf(this) === -1;
       // New value is different and the old equals to document direction and the element is not subscribed to the changes
-      const newDiffValue = newValue !== getDocumentDir() && oldValue === getDocumentDir();
+      const newDiffValue = newValue !== documentDir && oldValue === documentDir;
 
       if (newValueEqlDocDir || newValueEmptied) {
         this.__subscribe();
-        alignDirs(this, getDocumentDir());
+        alignDirs(this, documentDir, newValue);
       } else if (newDiffValue) {
@@ -105,2 +108,23 @@ this.__subscribe(false);
 
+    /** @protected */
+    _valueToNodeAttribute(node, value, attribute) {
+      // Override default Polymer attribute reflection to match native behavior of HTMLElement.dir property
+      // If the property contains an empty string then it should not create an empty attribute
+      if (attribute === 'dir' && value === '' && !node.hasAttribute('dir')) {
+        return;
+      }
+      super._valueToNodeAttribute(node, value, attribute);
+    }
+
+    /** @protected */
+    _attributeToProperty(attribute, value, type) {
+      // Override default Polymer attribute reflection to match native behavior of HTMLElement.dir property
+      // If the attribute is removed, then the dir property should contain an empty string instead of null
+      if (attribute === 'dir' && !value) {
+        this.dir = '';
+      } else {
+        super._attributeToProperty(attribute, value, type);
+      }
+    }
+
     /** @private */
@@ -107,0 +131,0 @@ __subscribe(push = true) {

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

23402

increased by4.39%

Lines of code

340

increased by6.25%

No dependency changes