@pap-it/templates-box - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

dist/src/component.d.ts

 import { Radius } from "@pap-it/system-utils";
-import { BaseSystem, RenderType } from "@pap-it/system-base";
+import { Base, RenderType } from "@pap-it/system-base";
 import { Elevation } from "./types";
-export declare class BoxTemplate extends BaseSystem {
+export declare class Box extends Base {
     static styles: string[];
@@ -13,4 +13,4 @@ radius: Radius;
     interface HTMLElementTagNameMap {
-        "pap-box-template": BoxTemplate;
+        "pap-box-template": Box;
     }
 }

dist/src/component.js

@@ -5,6 +5,6 @@ import { __decorate } from "tslib";
 // templates
-import { BaseSystem } from "@pap-it/system-base";
+import { Base } from "@pap-it/system-base";
 // local 
 import { style } from "./style";
-export class BoxTemplate extends BaseSystem {
+export class Box extends Base {
     constructor() {
@@ -22,12 +22,11 @@ super(...arguments);
 }
-BoxTemplate.styles = [style];
+Box.styles = [style];
 __decorate([
     property({ rerender: false })
-], BoxTemplate.prototype, "radius", void 0);
+], Box.prototype, "radius", void 0);
 __decorate([
     property({ rerender: false })
-], BoxTemplate.prototype, "elevation", void 0);
+], Box.prototype, "elevation", void 0);
 __decorate([
     property({ rerender: false, attribute: 'elevation-direction' })
-], BoxTemplate.prototype, "elevationdirection", void 0);
-//# sourceMappingURL=component.js.map
+], Box.prototype, "elevationdirection", void 0);

dist/src/index.js

 export * from './component';
 export * from './types';
-//# sourceMappingURL=index.js.map

dist/src/register.js

@@ -1,2 +0,2 @@
-import { BoxTemplate } from './component.js';
+import { Box } from './component.js';
 // Register the element with the browser
@@ -8,4 +8,3 @@ const cElements = customElements !== null && customElements !== void 0 ? customElements : window === null || window === void 0 ? void 0 : window.customElements;
 if (!cElements.get('pap-box-template')) {
-    cElements.define('pap-box-template', BoxTemplate);
+    cElements.define('pap-box-template', Box);
 }
-//# sourceMappingURL=register.js.map

dist/src/style.d.ts

@@ -1,1 +0,1 @@
-export declare const style = ":host([radius=\"none\"]) {\n  border-radius: var(--box-radius-none, var(--radius-none, 0px)); }\n\n:host([radius=\"small\"]) {\n  border-radius: var(--box-radius-small, var(--radius-small, var(--radius-small, 4px))); }\n\n:host([radius=\"medium\"]) {\n  border-radius: var(--box-radius-medium, var(--radius-medium, var(--radius-medium, 8px))); }\n\n:host([radius=\"large\"]) {\n  border-radius: var(--box-radius-large, var(--radius-large, var(--radius-large, 16px))); }\n\n:host([radius=\"circular\"]) {\n  border-radius: var(--box-radius-circular, var(--radius-circular, var(--radius-max, 1000px))); }\n\n:host([elevation=\"small\"]) {\n  box-shadow: var(--box-shadow-small, var(--shadow-s, 0 2px 4px var(--pap-color-shadow, color-mix(in oklab, var(--pap-color-neutral-600, #6E7087), transparent 80%)))); }\n\n:host([elevation=\"medium\"]) {\n  box-shadow: var(--box-shadow-medium, var(--shadow-m, 0 4px 6px var(--pap-color-shadow, color-mix(in oklab, var(--pap-color-neutral-600, #6E7087), transparent 80%)))); }\n\n:host([elevation=\"large\"]) {\n  box-shadow: var(--box-shadow-large, var(--shadow-l, 0 8px 12px var(--pap-color-shadow, color-mix(in oklab, var(--pap-color-neutral-600, #6E7087), transparent 80%)))); }\n\n:host([elevation=\"x-large\"]) {\n  box-shadow: var(--box-shadow-x-large, var(--shadow-xl, 0 16px 20px var(--pap-color-shadow, color-mix(in oklab, var(--pap-color-neutral-600, #6E7087), transparent 80%)))); }\n\n:host([elevation-direction=\"horizontal\"][elevation=\"small\"]) {\n  box-shadow: var(--box-shadow-small, var(--shadow-horizontal-s, 2px 0 4px var(--pap-color-shadow, color-mix(in oklab, var(--pap-color-neutral-600, #6E7087), transparent 80%)))); }\n\n:host([elevation-direction=\"horizontal\"][elevation=\"medium\"]) {\n  box-shadow: var(--box-shadow-medium, var(--shadow-horizontal-m, 4px 0 6px var(--pap-color-shadow, color-mix(in oklab, var(--pap-color-neutral-600, #6E7087), transparent 80%)))); }\n\n:host([elevation-direction=\"horizontal\"][elevation=\"large\"]) {\n  box-shadow: var(--box-shadow-large, var(--shadow-horizontal-l, 8px 0 12px var(--pap-color-shadow, color-mix(in oklab, var(--pap-color-neutral-600, #6E7087), transparent 80%)))); }\n\n:host([elevation-direction=\"horizontal\"][elevation=\"x-large\"]) {\n  box-shadow: var(--box-shadow-x-large, var(--shadow-horizontal-xl, 16px 0 20px var(--pap-color-shadow, color-mix(in oklab, var(--pap-color-neutral-600, #6E7087), transparent 80%)))); }";
+export declare const style = ":host([radius=none]){border-radius:var(--box-radius-none, var(--radius-none, 0px))}:host([radius=small]){border-radius:var(--box-radius-small, var(--radius-small, var(--radius-small, 4px)))}:host([radius=medium]){border-radius:var(--box-radius-medium, var(--radius-medium, var(--radius-medium, 8px)))}:host([radius=large]){border-radius:var(--box-radius-large, var(--radius-large, var(--radius-large, 16px)))}:host([radius=circular]){border-radius:var(--box-radius-circular, var(--radius-circular, var(--radius-max, 1000px)))}:host([elevation=small]){box-shadow:var(--box-shadow-small, var(--shadow-s, 0 2px 4px var(--pap-color-shadow, color-mix(in oklab, var(--pap-color-neutral-600, #6E7087), transparent 80%))))}:host([elevation=medium]){box-shadow:var(--box-shadow-medium, var(--shadow-m, 0 4px 6px var(--pap-color-shadow, color-mix(in oklab, var(--pap-color-neutral-600, #6E7087), transparent 80%))))}:host([elevation=large]){box-shadow:var(--box-shadow-large, var(--shadow-l, 0 8px 12px var(--pap-color-shadow, color-mix(in oklab, var(--pap-color-neutral-600, #6E7087), transparent 80%))))}:host([elevation=x-large]){box-shadow:var(--box-shadow-x-large, var(--shadow-xl, 0 16px 20px var(--pap-color-shadow, color-mix(in oklab, var(--pap-color-neutral-600, #6E7087), transparent 80%))))}:host([elevation-direction=horizontal][elevation=small]){box-shadow:var(--box-shadow-small, var(--shadow-horizontal-s, 2px 0 4px var(--pap-color-shadow, color-mix(in oklab, var(--pap-color-neutral-600, #6E7087), transparent 80%))))}:host([elevation-direction=horizontal][elevation=medium]){box-shadow:var(--box-shadow-medium, var(--shadow-horizontal-m, 4px 0 6px var(--pap-color-shadow, color-mix(in oklab, var(--pap-color-neutral-600, #6E7087), transparent 80%))))}:host([elevation-direction=horizontal][elevation=large]){box-shadow:var(--box-shadow-large, var(--shadow-horizontal-l, 8px 0 12px var(--pap-color-shadow, color-mix(in oklab, var(--pap-color-neutral-600, #6E7087), transparent 80%))))}:host([elevation-direction=horizontal][elevation=x-large]){box-shadow:var(--box-shadow-x-large, var(--shadow-horizontal-xl, 16px 0 20px var(--pap-color-shadow, color-mix(in oklab, var(--pap-color-neutral-600, #6E7087), transparent 80%))))}";

dist/src/style.js

@@ -1,39 +0,1 @@
-export const style = `:host([radius="none"]) {
-  border-radius: var(--box-radius-none, var(--radius-none, 0px)); }
-
-:host([radius="small"]) {
-  border-radius: var(--box-radius-small, var(--radius-small, var(--radius-small, 4px))); }
-
-:host([radius="medium"]) {
-  border-radius: var(--box-radius-medium, var(--radius-medium, var(--radius-medium, 8px))); }
-
-:host([radius="large"]) {
-  border-radius: var(--box-radius-large, var(--radius-large, var(--radius-large, 16px))); }
-
-:host([radius="circular"]) {
-  border-radius: var(--box-radius-circular, var(--radius-circular, var(--radius-max, 1000px))); }
-
-:host([elevation="small"]) {
-  box-shadow: var(--box-shadow-small, var(--shadow-s, 0 2px 4px var(--pap-color-shadow, color-mix(in oklab, var(--pap-color-neutral-600, #6E7087), transparent 80%)))); }
-
-:host([elevation="medium"]) {
-  box-shadow: var(--box-shadow-medium, var(--shadow-m, 0 4px 6px var(--pap-color-shadow, color-mix(in oklab, var(--pap-color-neutral-600, #6E7087), transparent 80%)))); }
-
-:host([elevation="large"]) {
-  box-shadow: var(--box-shadow-large, var(--shadow-l, 0 8px 12px var(--pap-color-shadow, color-mix(in oklab, var(--pap-color-neutral-600, #6E7087), transparent 80%)))); }
-
-:host([elevation="x-large"]) {
-  box-shadow: var(--box-shadow-x-large, var(--shadow-xl, 0 16px 20px var(--pap-color-shadow, color-mix(in oklab, var(--pap-color-neutral-600, #6E7087), transparent 80%)))); }
-
-:host([elevation-direction="horizontal"][elevation="small"]) {
-  box-shadow: var(--box-shadow-small, var(--shadow-horizontal-s, 2px 0 4px var(--pap-color-shadow, color-mix(in oklab, var(--pap-color-neutral-600, #6E7087), transparent 80%)))); }
-
-:host([elevation-direction="horizontal"][elevation="medium"]) {
-  box-shadow: var(--box-shadow-medium, var(--shadow-horizontal-m, 4px 0 6px var(--pap-color-shadow, color-mix(in oklab, var(--pap-color-neutral-600, #6E7087), transparent 80%)))); }
-
-:host([elevation-direction="horizontal"][elevation="large"]) {
-  box-shadow: var(--box-shadow-large, var(--shadow-horizontal-l, 8px 0 12px var(--pap-color-shadow, color-mix(in oklab, var(--pap-color-neutral-600, #6E7087), transparent 80%)))); }
-
-:host([elevation-direction="horizontal"][elevation="x-large"]) {
-  box-shadow: var(--box-shadow-x-large, var(--shadow-horizontal-xl, 16px 0 20px var(--pap-color-shadow, color-mix(in oklab, var(--pap-color-neutral-600, #6E7087), transparent 80%)))); }`;
-//# sourceMappingURL=style.js.map
+export const style = `:host([radius=none]){border-radius:var(--box-radius-none, var(--radius-none, 0px))}:host([radius=small]){border-radius:var(--box-radius-small, var(--radius-small, var(--radius-small, 4px)))}:host([radius=medium]){border-radius:var(--box-radius-medium, var(--radius-medium, var(--radius-medium, 8px)))}:host([radius=large]){border-radius:var(--box-radius-large, var(--radius-large, var(--radius-large, 16px)))}:host([radius=circular]){border-radius:var(--box-radius-circular, var(--radius-circular, var(--radius-max, 1000px)))}:host([elevation=small]){box-shadow:var(--box-shadow-small, var(--shadow-s, 0 2px 4px var(--pap-color-shadow, color-mix(in oklab, var(--pap-color-neutral-600, #6E7087), transparent 80%))))}:host([elevation=medium]){box-shadow:var(--box-shadow-medium, var(--shadow-m, 0 4px 6px var(--pap-color-shadow, color-mix(in oklab, var(--pap-color-neutral-600, #6E7087), transparent 80%))))}:host([elevation=large]){box-shadow:var(--box-shadow-large, var(--shadow-l, 0 8px 12px var(--pap-color-shadow, color-mix(in oklab, var(--pap-color-neutral-600, #6E7087), transparent 80%))))}:host([elevation=x-large]){box-shadow:var(--box-shadow-x-large, var(--shadow-xl, 0 16px 20px var(--pap-color-shadow, color-mix(in oklab, var(--pap-color-neutral-600, #6E7087), transparent 80%))))}:host([elevation-direction=horizontal][elevation=small]){box-shadow:var(--box-shadow-small, var(--shadow-horizontal-s, 2px 0 4px var(--pap-color-shadow, color-mix(in oklab, var(--pap-color-neutral-600, #6E7087), transparent 80%))))}:host([elevation-direction=horizontal][elevation=medium]){box-shadow:var(--box-shadow-medium, var(--shadow-horizontal-m, 4px 0 6px var(--pap-color-shadow, color-mix(in oklab, var(--pap-color-neutral-600, #6E7087), transparent 80%))))}:host([elevation-direction=horizontal][elevation=large]){box-shadow:var(--box-shadow-large, var(--shadow-horizontal-l, 8px 0 12px var(--pap-color-shadow, color-mix(in oklab, var(--pap-color-neutral-600, #6E7087), transparent 80%))))}:host([elevation-direction=horizontal][elevation=x-large]){box-shadow:var(--box-shadow-x-large, var(--shadow-horizontal-xl, 16px 0 20px var(--pap-color-shadow, color-mix(in oklab, var(--pap-color-neutral-600, #6E7087), transparent 80%))))}`;

dist/src/types.js

 export {};
-//# sourceMappingURL=types.js.map

package.json

 {
   "name": "@pap-it/templates-box",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "scripts": {
@@ -8,4 +8,6 @@ "init": "sh .scripts/init.sh",
     "build": ".scripts/build.sh",
+    "react": "sh .scripts/helper/build-react.sh",
     "watch": ".scripts/watch.sh",
     "manual-publish": "sh .scripts/publish.sh",
+    "preversion": "sh .scripts/preversion.sh",
     "postversion": "sh .scripts/postversion.sh",
@@ -15,2 +17,3 @@ "combine": ".scripts/combine.sh && .scripts/start.sh combined",
     "isolate": "sh .scripts/isolate.sh",
+    "analyze": "sh .scripts/analyze.sh",
     "interactive": "sh .scripts/helper/build-interactive.sh",
@@ -23,7 +26,9 @@ "variations": "sh .scripts/helper/build-variations.sh",
     "asset/",
-    "dist/"
+    "dist/",
+    "react/"
   ],
   "exports": {
     ".": "./dist/src/index.js",
-    "./wc": "./dist/register.bundle.mjs"
+    "./wc": "./dist/register.bundle.mjs",
+    "./react": "./react/index.ts"
   },
@@ -42,11 +47,11 @@ "author": "Henry Pap",
   "dependencies": {
-    "@pap-it/system-base": "1.0.4",
-    "@pap-it/system-utils": "1.0.4"
+    "@pap-it/system-base": "1.0.5",
+    "@pap-it/system-utils": "1.0.5"
   },
   "devDependencies": {
     "eslint": "^8.53.0",
-    "@pap-it/system-doc": "1.0.4",
+    "@pap-it/system-doc": "1.0.5",
     "esbuild": "^0.17.18",
     "node-html-parser": "^6.1.5",
-    "node-sass": "^9.0.0",
+    "sass": "^1.70.0",
     "tslib": "^2.5.0",
@@ -53,0 +58,0 @@ "typescript": "^5.0.4"

README.md

@@ -1,6 +0,6 @@
-# BoxTemplate
+# Box
 
 Atomic Type: templates
 
-Version: 1.1.0
+Version: 1.0.5
 
@@ -7,0 +7,0 @@ ## Development

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

Worsened metrics

Total package byte prevSize

19265

decreased by-21.3%

Number of package files

14

decreased by-26.32%

Lines of code

80

decreased by-37.5%

Dependency changes

• + Added@pap-it/system-base@1.0.5(transitive)

• + Added@pap-it/system-utils@1.0.5(transitive)

• - Removed@pap-it/system-base@1.0.4(transitive)

• - Removed@pap-it/system-utils@1.0.4(transitive)

• Updated@pap-it/system-base@1.0.5

• Updated@pap-it/system-utils@1.0.5