@ax-design/elevation - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

build/main.js

@@ -1,2 +0,4 @@
-(function(a,b){"object"==typeof exports&&"undefined"!=typeof module?b(exports):"function"==typeof define&&define.amd?define(["exports"],b):(a=a||self,b(a.AxElevation={}))})(this,function(a){'use strict';class b extends HTMLElement{constructor(){super(),this.root=this.attachShadow({mode:"open"}),this.root.innerHTML=`
+(function(a,b){"object"==typeof exports&&"undefined"!=typeof module?b(exports):"function"==typeof define&&define.amd?define(["exports"],b):(a="undefined"==typeof globalThis?a||self:globalThis,b(a.AxElevation={}))})(this,function(a){'use strict';/// <reference path="./cssExtendedProps.d.ts" />
+/// <reference path="./cssTypedOM.d.ts" />
+class b extends HTMLElement{constructor(){super(),this.root=this.attachShadow({mode:"open"}),this.root.innerHTML=`
     <div>
@@ -6,3 +8,3 @@ <slot></slot>
     <style>
-      div { display: block; position: absolute; width: 100%; height: 100%; box-shadow: 0 calc(0.400 * var(--elevation-depth, 0) * 1px) calc(0.900 * var(--elevation-depth, 0) * 1px) 0 rgba(0, 0, 0, calc(0.13441 - 0.00063 * var(--elevation-depth, 0) + 0.00003 * var(--elevation-depth, 0) * var(--elevation-depth, 0))), 0 calc(0.075 * var(--elevation-depth, 0) * 1px) calc(0.225 * var(--elevation-depth, 0) * 1px) 0 rgba(0, 0, 0, calc(0.10997 - 0.00051 * var(--elevation-depth, 0) + 0.00003 * var(--elevation-depth, 0) * var(--elevation-depth, 0))); }
+      div { display: block; position: relative; width: 100%; height: 100%; box-shadow: 0 calc(0.400 * var(--elevation-depth, 0) * 1px) calc(0.900 * var(--elevation-depth, 0) * 1px) 0 rgba(0, 0, 0, calc(0.13441 - 0.00063 * var(--elevation-depth, 0) + 0.00003 * var(--elevation-depth, 0) * var(--elevation-depth, 0))), 0 calc(0.075 * var(--elevation-depth, 0) * 1px) calc(0.225 * var(--elevation-depth, 0) * 1px) 0 rgba(0, 0, 0, calc(0.10997 - 0.00051 * var(--elevation-depth, 0) + 0.00003 * var(--elevation-depth, 0) * var(--elevation-depth, 0))); }
       :host { display: inline-block; position: relative; }
@@ -9,0 +11,0 @@ :host([block]) { display: block; }

es/CustomElements.js

@@ -10,3 +10,3 @@ export class AxElevation extends HTMLElement {
     <style>
-      div { display: block; position: absolute; width: 100%; height: 100%; box-shadow: 0 calc(0.400 * var(--elevation-depth, 0) * 1px) calc(0.900 * var(--elevation-depth, 0) * 1px) 0 rgba(0, 0, 0, calc(0.13441 - 0.00063 * var(--elevation-depth, 0) + 0.00003 * var(--elevation-depth, 0) * var(--elevation-depth, 0))), 0 calc(0.075 * var(--elevation-depth, 0) * 1px) calc(0.225 * var(--elevation-depth, 0) * 1px) 0 rgba(0, 0, 0, calc(0.10997 - 0.00051 * var(--elevation-depth, 0) + 0.00003 * var(--elevation-depth, 0) * var(--elevation-depth, 0))); }
+      div { display: block; position: relative; width: 100%; height: 100%; box-shadow: 0 calc(0.400 * var(--elevation-depth, 0) * 1px) calc(0.900 * var(--elevation-depth, 0) * 1px) 0 rgba(0, 0, 0, calc(0.13441 - 0.00063 * var(--elevation-depth, 0) + 0.00003 * var(--elevation-depth, 0) * var(--elevation-depth, 0))), 0 calc(0.075 * var(--elevation-depth, 0) * 1px) calc(0.225 * var(--elevation-depth, 0) * 1px) 0 rgba(0, 0, 0, calc(0.10997 - 0.00051 * var(--elevation-depth, 0) + 0.00003 * var(--elevation-depth, 0) * var(--elevation-depth, 0))); }
       :host { display: inline-block; position: relative; }
@@ -13,0 +13,0 @@ :host([block]) { display: block; }

es/index.js

 import { AxElevation } from './CustomElements.js';
+/// <reference path="./cssExtendedProps.d.ts" />
+/// <reference path="./cssTypedOM.d.ts" />
 export function register() {
@@ -3,0 +5,0 @@ customElements.define(AxElevation.ElementName, AxElevation);

package.json

 {
     "name": "@ax-design/elevation",
-    "version": "0.0.1",
+    "version": "0.0.2",
     "description": "Web component that implement elevation texture of Axiom Design System.",
@@ -13,7 +13,7 @@ "main": "build/main.js",
         "npm-run-all": "^4.1.5",
-        "rimraf": "^2.6.3",
-        "rollup": "^1.11.3",
-        "rollup-plugin-babel-minify": "^8.0.0",
-        "rollup-plugin-typescript2": "^0.21.0",
-        "typescript": "^3.4.5"
+        "rimraf": "^3.0.2",
+        "rollup": "^2.62.0",
+        "rollup-plugin-babel-minify": "^10.0.0",
+        "rollup-plugin-typescript2": "^0.31.1",
+        "typescript": "^4.5.4"
     },
@@ -20,0 +20,0 @@ "scripts": {

README.md

@@ -6,3 +6,3 @@ <h1 align="center">
 <p align="center">
-  Web component that implements elevation texture of Axiom Design System.
+  Web component that implements Elevation shadow effect of Axiom Design System.
 </p>
@@ -9,0 +9,0 @@

rollup.config.js

@@ -0,0 +0,0 @@ import typescript from 'rollup-plugin-typescript2';

src/cssExtendedProps.d.ts

@@ -0,0 +0,0 @@

src/cssTypedOM.d.ts

 type RegisterPaintType = (name: string, paintCtor: any) => void;
 
 interface Window {
-  CSS: CSS;
   registerPaint: RegisterPaintType;
@@ -12,6 +11,6 @@ }
 
-interface CSS {
-  px(value: number): CSSUnitValue;
-  registerProperty(rule: CSSPropertyRule): void;
-  paintWorklet: PaintWorklet;
+declare namespace CSS {
+  function px(value: number): CSSUnitValue;
+  function registerProperty(rule: CSSPropertyRule): void;
+  var paintWorklet: PaintWorklet;
 }
@@ -18,0 +17,0 @@

src/CustomElements.ts

@@ -11,3 +11,3 @@ export class AxElevation extends HTMLElement {
     <style>
-      div { display: block; position: absolute; width: 100%; height: 100%; box-shadow: 0 calc(0.400 * var(--elevation-depth, 0) * 1px) calc(0.900 * var(--elevation-depth, 0) * 1px) 0 rgba(0, 0, 0, calc(0.13441 - 0.00063 * var(--elevation-depth, 0) + 0.00003 * var(--elevation-depth, 0) * var(--elevation-depth, 0))), 0 calc(0.075 * var(--elevation-depth, 0) * 1px) calc(0.225 * var(--elevation-depth, 0) * 1px) 0 rgba(0, 0, 0, calc(0.10997 - 0.00051 * var(--elevation-depth, 0) + 0.00003 * var(--elevation-depth, 0) * var(--elevation-depth, 0))); }
+      div { display: block; position: relative; width: 100%; height: 100%; box-shadow: 0 calc(0.400 * var(--elevation-depth, 0) * 1px) calc(0.900 * var(--elevation-depth, 0) * 1px) 0 rgba(0, 0, 0, calc(0.13441 - 0.00063 * var(--elevation-depth, 0) + 0.00003 * var(--elevation-depth, 0) * var(--elevation-depth, 0))), 0 calc(0.075 * var(--elevation-depth, 0) * 1px) calc(0.225 * var(--elevation-depth, 0) * 1px) 0 rgba(0, 0, 0, calc(0.10997 - 0.00051 * var(--elevation-depth, 0) + 0.00003 * var(--elevation-depth, 0) * var(--elevation-depth, 0))); }
       :host { display: inline-block; position: relative; }
@@ -14,0 +14,0 @@ :host([block]) { display: block; }

src/index.ts

 import { AxElevation } from './CustomElements.js';
+/// <reference path="./cssExtendedProps.d.ts" />
+/// <reference path="./cssTypedOM.d.ts" />
+
 export function register() {
@@ -15,2 +18,2 @@ customElements.define(AxElevation.ElementName, AxElevation);
     }
-}
+}

tsconfig.json

@@ -0,0 +0,0 @@ {

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

Lines of code

193

increased by3.21%

Worsened metrics

Total package byte prevSize

1012540

decreased by-6.37%

Number of package files

31

decreased by-3.12%

Number of medium supply chain risk alerts

2

increased by100%

No dependency changes