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

Comparing version 1.6.2 to 20.0.0-alpha1

package.json

 {
+  "name": "@vaadin/vaadin-themable-mixin",
+  "version": "20.0.0-alpha1",
   "description": "vaadin-themable-mixin",
+  "main": "vaadin-themable-mixin.js",
+  "module": "vaadin-themable-mixin.js",
+  "repository": "vaadin/vaadin-themable-mixin",
   "keywords": [
@@ -9,7 +14,2 @@ "Vaadin",
   ],
-  "repository": "vaadin/vaadin-themable-mixin",
-  "homepage": "https://vaadin.com/elements",
-  "name": "@vaadin/vaadin-themable-mixin",
-  "version": "1.6.2",
-  "main": "vaadin-themable-mixin.js",
   "author": "Vaadin Ltd",
@@ -20,2 +20,3 @@ "license": "Apache-2.0",
   },
+  "homepage": "https://vaadin.com/elements",
   "files": [
@@ -26,22 +27,15 @@ "*.d.ts",
   ],
-  "resolutions": {
-    "es-abstract": "1.17.6",
-    "@types/doctrine": "0.0.3",
-    "inherits": "2.0.3",
-    "samsam": "1.1.3",
-    "supports-color": "3.1.2",
-    "type-detect": "1.0.0"
-  },
   "dependencies": {
-    "lit-element": "^2.0.0",
-    "@polymer/polymer": "^3.0.0"
+    "@polymer/polymer": "^3.0.0",
+    "lit-element": "^2.0.0"
   },
-  "scripts": {
-    "generate-typings": "gen-typescript-declarations --outDir . --verify"
+  "devDependencies": {
+    "@esm-bundle/chai": "^4.1.5",
+    "@open-wc/testing-helpers": "^1.8.12",
+    "sinon": "^9.2.4"
   },
-  "devDependencies": {
-    "@polymer/iron-test-helpers": "^3.0.0",
-    "@webcomponents/webcomponentsjs": "^2.0.0",
-    "wct-browser-legacy": "^1.0.1"
-  }
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "93c8e0ec03a178c6d74261261f985bd07f7cc79c"
 }

register-styles.d.ts

@@ -1,21 +0,5 @@
-/**
- * DO NOT EDIT
- *
- * This file was automatically generated by
- *   https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
- *
- * To modify these typings, edit the source file(s):
- *   register-styles.js
- */
+import { CSSResult } from 'lit-element';
 
+export { css, unsafeCSS } from 'lit-element';
 
-// tslint:disable:variable-name Describing an API that's defined elsewhere.
-
-import {CSSResult} from 'lit-element';
-
-export {css, unsafeCSS} from 'lit-element';
-
-export {registerStyles};
-
-
 /**
@@ -25,2 +9,8 @@ * Registers CSS styles for a component type. Make sure to register the styles before
  */
-declare function registerStyles(themeFor: String|null, styles: CSSResult|Array<CSSResult|null>|null, options?: object|null): void;
+declare function registerStyles(
+  themeFor: String | null,
+  styles: CSSResult | Array<CSSResult | null> | null,
+  options?: object | null
+): void;
+
+export { registerStyles };

register-styles.js

@@ -26,6 +26,5 @@ import '@polymer/polymer/lib/elements/dom-module.js';
 
-  styles.forEach(cssResult => {
+  styles.forEach((cssResult) => {
     if (!(cssResult instanceof CSSResult)) {
-      throw new Error(
-        'An item in styles is not of type CSSResult. Use `unsafeCSS` or `css`.');
+      throw new Error('An item in styles is not of type CSSResult. Use `unsafeCSS` or `css`.');
     }
@@ -48,4 +47,4 @@ if (!styleMap[cssResult]) {
   if (themeFor) {
-    const elementClass = window.customElements && window.customElements.get(themeFor);
-    if (elementClass && elementClass.hasOwnProperty('__finalized')) {
+    const elementClass = customElements.get(themeFor);
+    if (elementClass && Object.prototype.hasOwnProperty.call(elementClass, '__finalized')) {
       console.warn(`The custom element definition for "${themeFor}"
@@ -63,4 +62,4 @@ was finalized before a style module was registered.
     <template>
-      ${moduleIncludes.map(include => `<style include=${include}></style>`)}
-      ${styles.map(style => `<style include=${styleMap[style]}></style>`)}
+      ${moduleIncludes.map((include) => `<style include=${include}></style>`)}
+      ${styles.map((style) => `<style include=${styleMap[style]}></style>`)}
     </template>
@@ -67,0 +66,0 @@ `;

vaadin-themable-mixin.d.ts

@@ -1,33 +0,14 @@
-/**
- * DO NOT EDIT
- *
- * This file was automatically generated by
- *   https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
- *
- * To modify these typings, edit the source file(s):
- *   vaadin-themable-mixin.js
- */
+import { ThemePropertyMixin, ThemePropertyMixinConstructor } from './vaadin-theme-property-mixin.js';
 
+declare function ThemableMixin<T extends new (...args: any[]) => {}>(
+  base: T
+): T & ThemableMixinConstructor & ThemePropertyMixinConstructor;
 
-// tslint:disable:variable-name Describing an API that's defined elsewhere.
-// tslint:disable:no-any describes the API as best we are able today
-
-import {DomModule} from '@polymer/polymer/lib/elements/dom-module.js';
-
-import {ThemePropertyMixin} from './vaadin-theme-property-mixin.js';
-
-export {ThemableMixin};
-
-declare function ThemableMixin<T extends new (...args: any[]) => {}>(base: T): T & ThemableMixinConstructor & ThemePropertyMixinConstructor;
-
-import {ThemePropertyMixinConstructor} from './vaadin-theme-property-mixin.js';
-
 interface ThemableMixinConstructor {
-  new(...args: any[]): ThemableMixin;
+  new (...args: any[]): ThemableMixin;
   finalize(): void;
 }
 
-export {ThemableMixinConstructor};
+interface ThemableMixin extends ThemePropertyMixin {}
 
-interface ThemableMixin extends ThemePropertyMixin {
-}
+export { ThemableMixin, ThemableMixinConstructor };

vaadin-themable-mixin.js

@@ -8,79 +8,77 @@ import { DomModule } from '@polymer/polymer/lib/elements/dom-module.js';
  */
-export const ThemableMixin = superClass => class VaadinThemableMixin extends ThemePropertyMixin(superClass) {
+export const ThemableMixin = (superClass) =>
+  class VaadinThemableMixin extends ThemePropertyMixin(superClass) {
+    /** @protected */
+    static finalize() {
+      super.finalize();
 
-  /** @protected */
-  static finalize() {
-    super.finalize();
+      const template = this.prototype._template;
 
-    const template = this.prototype._template;
+      const inheritedTemplate = Object.getPrototypeOf(this.prototype)._template;
+      if (inheritedTemplate) {
+        // Include the theme modules from the inherited template
+        Array.from(inheritedTemplate.content.querySelectorAll('style[include]')).forEach((s) => {
+          this._includeStyle(s.getAttribute('include'), template);
+        });
+      }
 
-    const hasOwnTemplate = this.template && this.template.parentElement && this.template.parentElement.id === this.is;
-    const inheritedTemplate = Object.getPrototypeOf(this.prototype)._template;
-    if (inheritedTemplate && !hasOwnTemplate) {
-      // The element doesn't define its own template -> include the theme modules from the inherited template
-      Array.from(inheritedTemplate.content.querySelectorAll('style[include]')).forEach(s => {
-        this._includeStyle(s.getAttribute('include'), template);
-      });
+      this._includeMatchingThemes(template);
     }
 
-    this._includeMatchingThemes(template);
-  }
+    /** @private */
+    static _includeMatchingThemes(template) {
+      const domModule = DomModule;
+      const modules = domModule.prototype.modules;
 
-  /** @private */
-  static _includeMatchingThemes(template) {
-    const domModule = DomModule;
-    const modules = domModule.prototype.modules;
+      let hasThemes = false;
+      const defaultModuleName = this.is + '-default-theme';
 
-    let hasThemes = false;
-    const defaultModuleName = this.is + '-default-theme';
+      Object.keys(modules)
+        .sort((moduleNameA, moduleNameB) => {
+          const vaadinA = moduleNameA.indexOf('vaadin-') === 0;
+          const vaadinB = moduleNameB.indexOf('vaadin-') === 0;
 
-    Object.keys(modules)
-      .sort((moduleNameA, moduleNameB) => {
-        const vaadinA = moduleNameA.indexOf('vaadin-') === 0;
-        const vaadinB = moduleNameB.indexOf('vaadin-') === 0;
+          const vaadinThemePrefixes = ['lumo-', 'material-'];
+          const vaadinThemeA = vaadinThemePrefixes.filter((prefix) => moduleNameA.indexOf(prefix) === 0).length > 0;
+          const vaadinThemeB = vaadinThemePrefixes.filter((prefix) => moduleNameB.indexOf(prefix) === 0).length > 0;
 
-        const vaadinThemePrefixes = ['lumo-', 'material-'];
-        const vaadinThemeA = vaadinThemePrefixes.filter(prefix => moduleNameA.indexOf(prefix) === 0).length > 0;
-        const vaadinThemeB = vaadinThemePrefixes.filter(prefix => moduleNameB.indexOf(prefix) === 0).length > 0;
-
-        if (vaadinA !== vaadinB) {
-          // Include vaadin core styles first
-          return vaadinA ? -1 : 1;
-        } else if (vaadinThemeA !== vaadinThemeB) {
-          // Include vaadin theme styles after that
-          return vaadinThemeA ? -1 : 1;
-        } else {
-          // Lastly include custom styles so they override all vaadin styles
-          return 0;
-        }
-      })
-      .forEach(moduleName => {
-        if (moduleName !== defaultModuleName) {
-          const themeFor = modules[moduleName].getAttribute('theme-for');
-          if (themeFor) {
-            themeFor.split(' ').forEach(themeForToken => {
-              if (new RegExp('^' + themeForToken.split('*').join('.*') + '$').test(this.is)) {
-                hasThemes = true;
-                this._includeStyle(moduleName, template);
-              }
-            });
+          if (vaadinA !== vaadinB) {
+            // Include vaadin core styles first
+            return vaadinA ? -1 : 1;
+          } else if (vaadinThemeA !== vaadinThemeB) {
+            // Include vaadin theme styles after that
+            return vaadinThemeA ? -1 : 1;
+          } else {
+            // Lastly include custom styles so they override all vaadin styles
+            return 0;
           }
-        }
-      });
+        })
+        .forEach((moduleName) => {
+          if (moduleName !== defaultModuleName) {
+            const themeFor = modules[moduleName].getAttribute('theme-for');
+            if (themeFor) {
+              themeFor.split(' ').forEach((themeForToken) => {
+                if (new RegExp('^' + themeForToken.split('*').join('.*') + '$').test(this.is)) {
+                  hasThemes = true;
+                  this._includeStyle(moduleName, template);
+                }
+              });
+            }
+          }
+        });
 
-    if (!hasThemes && modules[defaultModuleName]) {
-      // No theme modules found, include the default module if it exists
-      this._includeStyle(defaultModuleName, template);
+      if (!hasThemes && modules[defaultModuleName]) {
+        // No theme modules found, include the default module if it exists
+        this._includeStyle(defaultModuleName, template);
+      }
     }
-  }
 
-  /** @private */
-  static _includeStyle(moduleName, template) {
-    if (template && !template.content.querySelector(`style[include="${moduleName}"]`)) {
-      const styleEl = document.createElement('style');
-      styleEl.setAttribute('include', moduleName);
-      template.content.appendChild(styleEl);
+    /** @private */
+    static _includeStyle(moduleName, template) {
+      if (template && !template.content.querySelector(`style[include="${moduleName}"]`)) {
+        const styleEl = document.createElement('style');
+        styleEl.setAttribute('include', moduleName);
+        template.content.appendChild(styleEl);
+      }
     }
-  }
-
-};
+  };

vaadin-theme-property-mixin.d.ts

@@ -1,27 +0,8 @@
-/**
- * DO NOT EDIT
- *
- * This file was automatically generated by
- *   https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
- *
- * To modify these typings, edit the source file(s):
- *   vaadin-theme-property-mixin.js
- */
-
-
-// tslint:disable:variable-name Describing an API that's defined elsewhere.
-// tslint:disable:no-any describes the API as best we are able today
-
-export {ThemePropertyMixin};
-
 declare function ThemePropertyMixin<T extends new (...args: any[]) => {}>(base: T): T & ThemePropertyMixinConstructor;
 
 interface ThemePropertyMixinConstructor {
-  new(...args: any[]): ThemePropertyMixin;
+  new (...args: any[]): ThemePropertyMixin;
 }
 
-export {ThemePropertyMixinConstructor};
-
 interface ThemePropertyMixin {
-
   /**
@@ -42,4 +23,5 @@ * Helper property with theme attribute value facilitating propagation
    */
-  readonly theme: string|null|undefined;
-  attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
+  readonly theme: string | null | undefined;
 }
+
+export { ThemePropertyMixin, ThemePropertyMixinConstructor };

vaadin-theme-property-mixin.js

 /**
  * @polymerMixin
  */
-export const ThemePropertyMixin = superClass => class VaadinThemePropertyMixin extends superClass {
-  static get properties() {
-    return {
-      /**
-       * Helper property with theme attribute value facilitating propagation
-       * in shadow DOM.
-       *
-       * Enables the component implementation to propagate the `theme`
-       * attribute value to the subcomponents in Shadow DOM by binding
-       * the subcomponent’s "theme" attribute to the `theme` property of
-       * the host.
-       *
-       * **NOTE:** Extending the mixin only provides the property for binding,
-       * and does not make the propagation alone.
-       *
-       * See [Theme Attribute and Subcomponents](https://github.com/vaadin/vaadin-themable-mixin/wiki/5.-Theme-Attribute-and-Subcomponents).
-       * page for more information.
-       *
-       * @protected
-       */
-      theme: {
-        type: String,
-        readOnly: true
-      }
-    };
-  }
+export const ThemePropertyMixin = (superClass) =>
+  class VaadinThemePropertyMixin extends superClass {
+    static get properties() {
+      return {
+        /**
+         * Helper property with theme attribute value facilitating propagation
+         * in shadow DOM.
+         *
+         * Enables the component implementation to propagate the `theme`
+         * attribute value to the subcomponents in Shadow DOM by binding
+         * the subcomponent’s "theme" attribute to the `theme` property of
+         * the host.
+         *
+         * **NOTE:** Extending the mixin only provides the property for binding,
+         * and does not make the propagation alone.
+         *
+         * See [Theme Attribute and Subcomponents](https://github.com/vaadin/vaadin-themable-mixin/wiki/5.-Theme-Attribute-and-Subcomponents).
+         * page for more information.
+         *
+         * @protected
+         */
+        theme: {
+          type: String,
+          readOnly: true
+        }
+      };
+    }
 
-  /** @protected */
-  attributeChangedCallback(name, oldValue, newValue) {
-    super.attributeChangedCallback(name, oldValue, newValue);
+    /** @protected */
+    attributeChangedCallback(name, oldValue, newValue) {
+      super.attributeChangedCallback(name, oldValue, newValue);
 
-    if (name === 'theme') {
-      this._setTheme(newValue);
+      if (name === 'theme') {
+        this._setTheme(newValue);
+      }
     }
-  }
-};
+  };

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

Worsened metrics

Total package byte prevSize

41653

decreased by-3.32%

Lines of code

212

decreased by-13.11%

Number of low quality alerts

1

increased byInfinity%

No dependency changes