isometric-angular 0.0.0-stage → 1.0.1

package/README.md

@@ -1,3 +1,5 @@
-# Temporary Holding Version
+# Isometric Angular (Angular version of [IsometricSass](https://github.com/MorganCaron/IsometricSass))
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Full rewrite of IsometricSass using TypeScript, Angular and CSS variables.
+
+For full documentation go here: https://isometric-angular-docs.vercel.app/

package/fesm2022/isometric-angular-core.mjs

@@ -0,0 +1,165 @@
+import { computed } from '@angular/core';
+
+function getCorrectValue(value, unit = "rem") {
+    if (!value) {
+        return `0${unit}`;
+    }
+    if (typeof value === "number") {
+        return `${value}${unit}`;
+    }
+    return value;
+}
+
+const BORDER_SIZE_VARIABLE = `--isometric-border-size`;
+const BORDER_STYLE_VARIABLE = `--isometric-border-style`;
+const BORDER_COLOR_VARIABLE = `--isometric-border-color`;
+function isometricBorder(border, suffix = "") {
+    return computed(() => {
+        const borderValue = border();
+        if (!borderValue) {
+            return undefined;
+        }
+        const suffixValue = typeof suffix === "string" ? suffix : suffix();
+        return {
+            [`${BORDER_SIZE_VARIABLE}${suffixValue}`]: getCorrectValue(borderValue.size, "px"),
+            [`${BORDER_STYLE_VARIABLE}${suffixValue}`]: borderValue.style ?? "solid",
+            [`${BORDER_COLOR_VARIABLE}${suffixValue}`]: borderValue.color ?? "#000",
+        };
+    });
+}
+
+const EDGE_DEPTH_VARIABLE = `--isometric-edge-depth`;
+const EDGE_COLOR_VARIABLE = `--isometric-edge-color`;
+function isometricEdge(edge) {
+    return computed(() => {
+        const edgeValue = edge();
+        if (!edgeValue) {
+            return undefined;
+        }
+        return {
+            [EDGE_DEPTH_VARIABLE]: getCorrectValue(edgeValue.depth, "px"),
+            [EDGE_COLOR_VARIABLE]: edgeValue.color ?? "#fff",
+        };
+    });
+}
+
+const TOP_VARIABLE = `--isometric-position-top`;
+const LEFT_VARIABLE = `--isometric-position-left`;
+const ELEVATION_VARIABLE = `--isometric-position-elevation`;
+function isometricPosition(position) {
+    return computed(() => {
+        const positionValue = position();
+        if (!positionValue) {
+            return undefined;
+        }
+        return {
+            [TOP_VARIABLE]: getCorrectValue(positionValue.top),
+            [LEFT_VARIABLE]: getCorrectValue(positionValue.left),
+            [ELEVATION_VARIABLE]: getCorrectValue(positionValue.elevation),
+        };
+    });
+}
+
+const ROTATION_FROM_VARIABLE = `--isometric-rotation-from`;
+const ROTATION_TO_VARIABLE = `--isometric-rotation-to`;
+const ROTATION_DELAY_VARIABLE = `--isometric-rotation-delay`;
+const ROTATION_DURATION_VARIABLE = `--isometric-rotation-duration`;
+function isometricRotation(rotation) {
+    return computed(() => {
+        const rotationValue = rotation();
+        if (!rotationValue) {
+            return undefined;
+        }
+        return {
+            [ROTATION_FROM_VARIABLE]: getCorrectValue(rotationValue.from, "deg"),
+            [ROTATION_TO_VARIABLE]: getCorrectValue(rotationValue.to, "deg"),
+            [ROTATION_DELAY_VARIABLE]: getCorrectValue(rotationValue.delay, "s"),
+            [ROTATION_DURATION_VARIABLE]: getCorrectValue(rotationValue.duration, "s"),
+        };
+    });
+}
+
+const SHADOW_DISTANCE_VARIABLE = `--isometric-shadow-distance`;
+const SHADOW_DISTANCE_WITH_UNIT_VARIABLE = `--isometric-shadow-distance-with-unit`;
+const SHADOW_SPACING_X_VARIABLE = `--isometric-shadow-spacing-x`;
+const SHADOW_SPACING_Y_VARIABLE = `--isometric-shadow-spacing-y`;
+function isometricShadow(shadow) {
+    return computed(() => {
+        const shadowValue = shadow();
+        if (!shadowValue) {
+            return undefined;
+        }
+        return {
+            [SHADOW_DISTANCE_VARIABLE]: parseFloat(shadowValue.distance?.toString() ?? "0").toString(),
+            [SHADOW_DISTANCE_WITH_UNIT_VARIABLE]: getCorrectValue(shadowValue.distance),
+            [SHADOW_SPACING_X_VARIABLE]: shadowValue.spacingX.toString(),
+            [SHADOW_SPACING_Y_VARIABLE]: shadowValue.spacingY.toString(),
+        };
+    });
+}
+
+const SHADOW_ANIMATION_FROM_VARIABLE = `--isometric-shadow-animation-from`;
+const SHADOW_ANIMATION_FROM_WITH_UNIT_VARIABLE = `--isometric-shadow-animation-from-with-unit`;
+const SHADOW_ANIMATION_TO_VARIABLE = `--isometric-shadow-animation-to`;
+const SHADOW_ANIMATION_TO_WITH_UNIT_VARIABLE = `--isometric-shadow-animation-to-with-unit`;
+const SHADOW_ANIMATION_DELAY_VARIABLE = `--isometric-shadow-animation-delay`;
+const SHADOW_ANIMATION_DURATION_VARIABLE = `--isometric-shadow-animation-duration`;
+const SHADOW_ANIMATION_OPTIONS_VARIABLE = `--isometric-shadow-animation-options`;
+function isometricShadowAnimation(shadowAnimation) {
+    const shadowPropertiesToUse = computed(() => {
+        const shadowAnimationValue = shadowAnimation();
+        return shadowAnimationValue
+            ? {
+                distance: shadowAnimationValue.from,
+                spacingX: shadowAnimationValue.spacingX,
+                spacingY: shadowAnimationValue.spacingY,
+            }
+            : undefined;
+    }, ...(ngDevMode ? [{ debugName: "shadowPropertiesToUse" }] : /* istanbul ignore next */ []));
+    const shadowStyles = isometricShadow(shadowPropertiesToUse);
+    return computed(() => {
+        const shadowAnimationValue = shadowAnimation();
+        const shadowStylesValue = shadowStyles();
+        if (!shadowStylesValue) {
+            return undefined;
+        }
+        return {
+            ...shadowStylesValue,
+            [SHADOW_ANIMATION_FROM_VARIABLE]: parseFloat(shadowAnimationValue?.from?.toString() ?? "0").toString(),
+            [SHADOW_ANIMATION_FROM_WITH_UNIT_VARIABLE]: getCorrectValue(shadowAnimationValue?.from),
+            [SHADOW_ANIMATION_TO_VARIABLE]: parseFloat(shadowAnimationValue?.to?.toString() ?? "0").toString(),
+            [SHADOW_ANIMATION_TO_WITH_UNIT_VARIABLE]: getCorrectValue(shadowAnimationValue?.to),
+            [SHADOW_ANIMATION_DELAY_VARIABLE]: getCorrectValue(shadowAnimationValue?.delay, "s"),
+            [SHADOW_ANIMATION_DURATION_VARIABLE]: getCorrectValue(shadowAnimationValue?.duration, "s"),
+            [SHADOW_ANIMATION_OPTIONS_VARIABLE]: shadowAnimationValue?.options ?? "normal",
+        };
+    });
+}
+
+function isometricSize(size, element) {
+    return computed(() => {
+        const widthVariable = `--isometric-${element}-width`;
+        const heightVariable = `--isometric-${element}-height`;
+        const sizeValue = size();
+        if (typeof sizeValue === "number" || typeof sizeValue === "string") {
+            return {
+                [widthVariable]: getCorrectValue(sizeValue),
+                [heightVariable]: getCorrectValue(sizeValue),
+            };
+        }
+        const { width, height } = sizeValue;
+        return {
+            [widthVariable]: getCorrectValue(width),
+            [heightVariable]: getCorrectValue(height),
+        };
+    });
+}
+
+// internal utils
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { getCorrectValue as ɵgetCorrectValue, isometricBorder as ɵisometricBorder, isometricEdge as ɵisometricEdge, isometricPosition as ɵisometricPosition, isometricRotation as ɵisometricRotation, isometricShadow as ɵisometricShadow, isometricShadowAnimation as ɵisometricShadowAnimation, isometricSize as ɵisometricSize };
+//# sourceMappingURL=isometric-angular-core.mjs.map

package/fesm2022/isometric-angular-core.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"isometric-angular-core.mjs","sources":["../../../projects/isometric-angular/core/src/utils/get-correct-value.ts","../../../projects/isometric-angular/core/src/utils/isometric-border.ts","../../../projects/isometric-angular/core/src/utils/isometric-edge.ts","../../../projects/isometric-angular/core/src/utils/isometric-position.ts","../../../projects/isometric-angular/core/src/utils/isometric-rotation.ts","../../../projects/isometric-angular/core/src/utils/isometric-shadow.ts","../../../projects/isometric-angular/core/src/utils/isometric-shadow-animation.ts","../../../projects/isometric-angular/core/src/utils/isometric-size.ts","../../../projects/isometric-angular/core/src/public-api.ts","../../../projects/isometric-angular/core/src/isometric-angular-core.ts"],"sourcesContent":["export function getCorrectValue(\r\n  value: string | number | undefined,\r\n  unit = \"rem\",\r\n) {\r\n  if (!value) {\r\n    return `0${unit}`;\r\n  }\r\n\r\n  if (typeof value === \"number\") {\r\n    return `${value}${unit}`;\r\n  }\r\n\r\n  return value;\r\n}\r\n","import { computed, type Signal } from \"@angular/core\";\r\nimport { getCorrectValue } from \"./get-correct-value\";\r\nimport type { Border } from \"../types/border.types\";\r\nimport type { CSSVariables } from \"../types/common.types\";\r\n\r\nconst BORDER_SIZE_VARIABLE = `--isometric-border-size`;\r\nconst BORDER_STYLE_VARIABLE = `--isometric-border-style`;\r\nconst BORDER_COLOR_VARIABLE = `--isometric-border-color`;\r\n\r\nexport function isometricBorder(\r\n  border: Signal<Border | undefined>,\r\n  suffix: Signal<string> | string = \"\",\r\n): Signal<CSSVariables | undefined> {\r\n  return computed(() => {\r\n    const borderValue = border();\r\n\r\n    if (!borderValue) {\r\n      return undefined;\r\n    }\r\n\r\n    const suffixValue = typeof suffix === \"string\" ? suffix : suffix();\r\n\r\n    return {\r\n      [`${BORDER_SIZE_VARIABLE}${suffixValue}`]: getCorrectValue(\r\n        borderValue.size,\r\n        \"px\",\r\n      ),\r\n      [`${BORDER_STYLE_VARIABLE}${suffixValue}`]: borderValue.style ?? \"solid\",\r\n      [`${BORDER_COLOR_VARIABLE}${suffixValue}`]: borderValue.color ?? \"#000\",\r\n    };\r\n  });\r\n}\r\n","import { computed, type Signal } from \"@angular/core\";\r\nimport { getCorrectValue } from \"./get-correct-value\";\r\nimport type { Edge } from \"../types/edge.types\";\r\nimport type { CSSVariables } from \"../types/common.types\";\r\n\r\nconst EDGE_DEPTH_VARIABLE = `--isometric-edge-depth`;\r\nconst EDGE_COLOR_VARIABLE = `--isometric-edge-color`;\r\n\r\nexport function isometricEdge(\r\n  edge: Signal<Edge | undefined>,\r\n): Signal<CSSVariables | undefined> {\r\n  return computed(() => {\r\n    const edgeValue = edge();\r\n\r\n    if (!edgeValue) {\r\n      return undefined;\r\n    }\r\n\r\n    return {\r\n      [EDGE_DEPTH_VARIABLE]: getCorrectValue(edgeValue.depth, \"px\"),\r\n      [EDGE_COLOR_VARIABLE]: edgeValue.color ?? \"#fff\",\r\n    };\r\n  });\r\n}\r\n","import { computed, type Signal } from \"@angular/core\";\r\nimport { getCorrectValue } from \"./get-correct-value\";\r\nimport type { Position } from \"../types/position.types\";\r\nimport type { CSSVariables } from \"../types/common.types\";\r\n\r\nconst TOP_VARIABLE = `--isometric-position-top`;\r\nconst LEFT_VARIABLE = `--isometric-position-left`;\r\nconst ELEVATION_VARIABLE = `--isometric-position-elevation`;\r\n\r\nexport function isometricPosition(\r\n  position: Signal<Position | undefined>,\r\n): Signal<CSSVariables | undefined> {\r\n  return computed(() => {\r\n    const positionValue = position();\r\n\r\n    if (!positionValue) {\r\n      return undefined;\r\n    }\r\n\r\n    return {\r\n      [TOP_VARIABLE]: getCorrectValue(positionValue.top),\r\n      [LEFT_VARIABLE]: getCorrectValue(positionValue.left),\r\n      [ELEVATION_VARIABLE]: getCorrectValue(positionValue.elevation),\r\n    };\r\n  });\r\n}\r\n","import { computed, type Signal } from \"@angular/core\";\r\nimport { getCorrectValue } from \"./get-correct-value\";\r\nimport type { Rotation } from \"../types/rotation.types\";\r\nimport type { CSSVariables } from \"../types/common.types\";\r\n\r\nconst ROTATION_FROM_VARIABLE = `--isometric-rotation-from`;\r\nconst ROTATION_TO_VARIABLE = `--isometric-rotation-to`;\r\nconst ROTATION_DELAY_VARIABLE = `--isometric-rotation-delay`;\r\nconst ROTATION_DURATION_VARIABLE = `--isometric-rotation-duration`;\r\n\r\nexport function isometricRotation(\r\n  rotation: Signal<Rotation | undefined>,\r\n): Signal<CSSVariables | undefined> {\r\n  return computed(() => {\r\n    const rotationValue = rotation();\r\n\r\n    if (!rotationValue) {\r\n      return undefined;\r\n    }\r\n\r\n    return {\r\n      [ROTATION_FROM_VARIABLE]: getCorrectValue(rotationValue.from, \"deg\"),\r\n      [ROTATION_TO_VARIABLE]: getCorrectValue(rotationValue.to, \"deg\"),\r\n      [ROTATION_DELAY_VARIABLE]: getCorrectValue(rotationValue.delay, \"s\"),\r\n      [ROTATION_DURATION_VARIABLE]: getCorrectValue(\r\n        rotationValue.duration,\r\n        \"s\",\r\n      ),\r\n    };\r\n  });\r\n}\r\n","import { computed, type Signal } from \"@angular/core\";\r\nimport { getCorrectValue } from \"./get-correct-value\";\r\nimport type { Shadow } from \"../types/shadow.types\";\r\nimport type { CSSVariables } from \"../types/common.types\";\r\n\r\nconst SHADOW_DISTANCE_VARIABLE = `--isometric-shadow-distance`;\r\nconst SHADOW_DISTANCE_WITH_UNIT_VARIABLE = `--isometric-shadow-distance-with-unit`;\r\nconst SHADOW_SPACING_X_VARIABLE = `--isometric-shadow-spacing-x`;\r\nconst SHADOW_SPACING_Y_VARIABLE = `--isometric-shadow-spacing-y`;\r\n\r\nexport function isometricShadow(\r\n  shadow: Signal<Shadow | undefined>,\r\n): Signal<CSSVariables | undefined> {\r\n  return computed(() => {\r\n    const shadowValue = shadow();\r\n\r\n    if (!shadowValue) {\r\n      return undefined;\r\n    }\r\n\r\n    return {\r\n      [SHADOW_DISTANCE_VARIABLE]: parseFloat(\r\n        shadowValue.distance?.toString() ?? \"0\",\r\n      ).toString(),\r\n      [SHADOW_DISTANCE_WITH_UNIT_VARIABLE]: getCorrectValue(\r\n        shadowValue.distance,\r\n      ),\r\n      [SHADOW_SPACING_X_VARIABLE]: shadowValue.spacingX.toString(),\r\n      [SHADOW_SPACING_Y_VARIABLE]: shadowValue.spacingY.toString(),\r\n    };\r\n  });\r\n}\r\n","import { computed, type Signal } from \"@angular/core\";\r\nimport { getCorrectValue } from \"./get-correct-value\";\r\nimport { isometricShadow } from \"./isometric-shadow\";\r\nimport type { Shadow } from \"../types/shadow.types\";\r\nimport type { ShadowAnimation } from \"../types/shadow-animation.types\";\r\nimport type { CSSVariables } from \"../types/common.types\";\r\n\r\nconst SHADOW_ANIMATION_FROM_VARIABLE = `--isometric-shadow-animation-from`;\r\nconst SHADOW_ANIMATION_FROM_WITH_UNIT_VARIABLE = `--isometric-shadow-animation-from-with-unit`;\r\nconst SHADOW_ANIMATION_TO_VARIABLE = `--isometric-shadow-animation-to`;\r\nconst SHADOW_ANIMATION_TO_WITH_UNIT_VARIABLE = `--isometric-shadow-animation-to-with-unit`;\r\nconst SHADOW_ANIMATION_DELAY_VARIABLE = `--isometric-shadow-animation-delay`;\r\nconst SHADOW_ANIMATION_DURATION_VARIABLE = `--isometric-shadow-animation-duration`;\r\nconst SHADOW_ANIMATION_OPTIONS_VARIABLE = `--isometric-shadow-animation-options`;\r\n\r\nexport function isometricShadowAnimation(\r\n  shadowAnimation: Signal<ShadowAnimation | undefined>,\r\n): Signal<CSSVariables | undefined> {\r\n  const shadowPropertiesToUse: Signal<Shadow | undefined> = computed(() => {\r\n    const shadowAnimationValue = shadowAnimation();\r\n\r\n    return shadowAnimationValue\r\n      ? {\r\n          distance: shadowAnimationValue.from,\r\n          spacingX: shadowAnimationValue.spacingX,\r\n          spacingY: shadowAnimationValue.spacingY,\r\n        }\r\n      : undefined;\r\n  });\r\n\r\n  const shadowStyles = isometricShadow(shadowPropertiesToUse);\r\n\r\n  return computed(() => {\r\n    const shadowAnimationValue = shadowAnimation();\r\n    const shadowStylesValue = shadowStyles();\r\n\r\n    if (!shadowStylesValue) {\r\n      return undefined;\r\n    }\r\n\r\n    return {\r\n      ...shadowStylesValue,\r\n      [SHADOW_ANIMATION_FROM_VARIABLE]: parseFloat(\r\n        shadowAnimationValue?.from?.toString() ?? \"0\",\r\n      ).toString(),\r\n      [SHADOW_ANIMATION_FROM_WITH_UNIT_VARIABLE]: getCorrectValue(\r\n        shadowAnimationValue?.from,\r\n      ),\r\n      [SHADOW_ANIMATION_TO_VARIABLE]: parseFloat(\r\n        shadowAnimationValue?.to?.toString() ?? \"0\",\r\n      ).toString(),\r\n      [SHADOW_ANIMATION_TO_WITH_UNIT_VARIABLE]: getCorrectValue(\r\n        shadowAnimationValue?.to,\r\n      ),\r\n      [SHADOW_ANIMATION_DELAY_VARIABLE]: getCorrectValue(\r\n        shadowAnimationValue?.delay,\r\n        \"s\",\r\n      ),\r\n      [SHADOW_ANIMATION_DURATION_VARIABLE]: getCorrectValue(\r\n        shadowAnimationValue?.duration,\r\n        \"s\",\r\n      ),\r\n      [SHADOW_ANIMATION_OPTIONS_VARIABLE]:\r\n        shadowAnimationValue?.options ?? \"normal\",\r\n    };\r\n  });\r\n}\r\n","import { computed, type Signal } from \"@angular/core\";\r\nimport { getCorrectValue } from \"./get-correct-value\";\r\nimport type { IsometricElements } from \"../types/isometric-elements\";\r\nimport type { SizeProps } from \"../types/size.types\";\r\nimport type { CSSVariables } from \"../types/common.types\";\r\n\r\nexport function isometricSize(\r\n  size: Signal<SizeProps>,\r\n  element: IsometricElements,\r\n): Signal<CSSVariables> {\r\n  return computed(() => {\r\n    const widthVariable = `--isometric-${element}-width`;\r\n    const heightVariable = `--isometric-${element}-height`;\r\n\r\n    const sizeValue = size();\r\n\r\n    if (typeof sizeValue === \"number\" || typeof sizeValue === \"string\") {\r\n      return {\r\n        [widthVariable]: getCorrectValue(sizeValue),\r\n        [heightVariable]: getCorrectValue(sizeValue),\r\n      };\r\n    }\r\n\r\n    const { width, height } = sizeValue;\r\n\r\n    return {\r\n      [widthVariable]: getCorrectValue(width),\r\n      [heightVariable]: getCorrectValue(height),\r\n    };\r\n  });\r\n}\r\n","// internal utils\r\nexport { getCorrectValue as ɵgetCorrectValue } from \"./utils/get-correct-value\";\r\nexport { isometricBorder as ɵisometricBorder } from \"./utils/isometric-border\";\r\nexport { isometricEdge as ɵisometricEdge } from \"./utils/isometric-edge\";\r\nexport { isometricPosition as ɵisometricPosition } from \"./utils/isometric-position\";\r\nexport { isometricRotation as ɵisometricRotation } from \"./utils/isometric-rotation\";\r\nexport { isometricShadow as ɵisometricShadow } from \"./utils/isometric-shadow\";\r\nexport { isometricShadowAnimation as ɵisometricShadowAnimation } from \"./utils/isometric-shadow-animation\";\r\nexport { isometricSize as ɵisometricSize } from \"./utils/isometric-size\";\r\n\r\n// public types\r\nexport type { Border } from \"./types/border.types\";\r\nexport type { Edge } from \"./types/edge.types\";\r\nexport type { Position } from \"./types/position.types\";\r\nexport type { Rotation } from \"./types/rotation.types\";\r\nexport type { Shadow } from \"./types/shadow.types\";\r\nexport type { ShadowAnimation } from \"./types/shadow-animation.types\";\r\nexport type {\r\n  SizeAsObject,\r\n  SizeProps,\r\n  SizeMultiplier,\r\n} from \"./types/size.types\";\r\nexport type { ClassValue } from \"./types/common.types\";\r\n\r\n// internal types\r\nexport type { CSSVariables as ɵCSSVariables } from \"./types/common.types\";\r\nexport type { IsometricElements as ɵIsometricElements } from \"./types/isometric-elements\";\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/isometric-angular-isometric-cube.mjs

@@ -0,0 +1,73 @@
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, Directive } from '@angular/core';
+import { ɵisometricSize as _isometricSize, ɵisometricBorder as _isometricBorder, ɵisometricPosition as _isometricPosition, ɵisometricShadow as _isometricShadow, ɵisometricShadowAnimation as _isometricShadowAnimation, ɵisometricRotation as _isometricRotation, ɵgetCorrectValue as _getCorrectValue } from 'isometric-angular/core';
+
+class IsometricCube {
+    size = input.required(...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    depth = input.required(...(ngDevMode ? [{ debugName: "depth" }] : /* istanbul ignore next */ []));
+    border = input(...(ngDevMode ? [undefined, { debugName: "border" }] : /* istanbul ignore next */ []));
+    position = input(...(ngDevMode ? [undefined, { debugName: "position" }] : /* istanbul ignore next */ []));
+    shadow = input(...(ngDevMode ? [undefined, { debugName: "shadow" }] : /* istanbul ignore next */ []));
+    shadowAnimation = input(...(ngDevMode ? [undefined, { debugName: "shadowAnimation" }] : /* istanbul ignore next */ []));
+    rotation = input(...(ngDevMode ? [undefined, { debugName: "rotation" }] : /* istanbul ignore next */ []));
+    sizeVariables = _isometricSize(this.size, "cube");
+    borderVariables = _isometricBorder(this.border, "-cube");
+    positionVariables = _isometricPosition(this.position);
+    shadowVariables = _isometricShadow(this.shadow);
+    shadowAnimationVariables = _isometricShadowAnimation(this.shadowAnimation);
+    rotationVariables = _isometricRotation(this.rotation);
+    styles = computed(() => ({
+        ...this.sizeVariables(),
+        ...this.borderVariables(),
+        ...this.positionVariables(),
+        ...this.shadowVariables(),
+        ...this.shadowAnimationVariables(),
+        ...this.rotationVariables(),
+        "--isometric-cube-depth": _getCorrectValue(this.depth()),
+    }), ...(ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.26", ngImport: i0, type: IsometricCube, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.26", type: IsometricCube, isStandalone: true, selector: "[isometric-cube]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: true, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, shadowAnimation: { classPropertyName: "shadowAnimation", publicName: "shadowAnimation", isSignal: true, isRequired: false, transformFunction: null }, rotation: { classPropertyName: "rotation", publicName: "rotation", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.isometric-position": "!!positionVariables()", "class.isometric-shadow": "!!shadowVariables() || !!shadowAnimationVariables()", "class.isometric-shadow-animation": "!!shadowAnimationVariables()", "class.isometric-rotation": "!!rotationVariables()", "style": "styles()" }, classAttribute: "isometric-cube" }, ngImport: i0, template: ` <ng-content /> `, isInline: true, styles: [".isometric-cube{position:absolute;width:var(--isometric-cube-width, 0rem);height:var(--isometric-cube-height, 0rem);transform-origin:center}.isometric-cube>*{position:absolute;border-width:var(--isometric-border-size-cube, 0px);border-color:color-mix(in srgb,var(--isometric-border-color-cube, #fff),#000 20%);border-style:var(--isometric-border-style-cube, solid);box-sizing:border-box}.isometric-cube-top{width:var(--isometric-cube-width, 0rem);height:var(--isometric-cube-height, 0rem);transform:translateZ(var(--isometric-cube-depth, 0rem))}.isometric-cube-front-left{width:var(--isometric-cube-width, 0rem);height:var(--isometric-cube-depth, 0rem);transform:translateY(calc(var(--isometric-cube-height, 0rem) - (var(--isometric-cube-depth, 0rem) / 2))) translateZ(calc(var(--isometric-cube-depth, 0rem) / 2)) rotateX(-90deg)}.isometric-cube-front-right{width:var(--isometric-cube-height, 0rem);height:var(--isometric-cube-depth, 0rem);transform:translate(calc(var(--isometric-cube-width, 0rem) - (var(--isometric-cube-height, 0rem) / 2))) translateY(calc(var(--isometric-cube-height, 0rem) / 2 - (var(--isometric-cube-depth, 0rem) / 2))) translateZ(calc(var(--isometric-cube-depth, 0rem) / 2)) rotateX(-90deg) rotateY(90deg)}.isometric-cube-bottom{width:var(--isometric-cube-width, 0rem);height:var(--isometric-cube-height, 0rem);transform:initial}.isometric-cube-back-right{width:var(--isometric-cube-width, 0rem);height:var(--isometric-cube-depth, 0rem);transform:translateY(calc(-1 * var(--isometric-cube-depth, 0rem) / 2)) translateZ(calc(var(--isometric-cube-depth, 0rem) / 2)) rotateX(-90deg)}.isometric-cube-back-left{width:var(--isometric-cube-height, 0rem);height:var(--isometric-cube-depth, 0rem);transform:translate(calc(-1 * var(--isometric-cube-height, 0rem) / 2)) translateY(calc(var(--isometric-cube-height, 0rem) / 2 - (var(--isometric-cube-depth, 0rem) / 2))) translateZ(calc(var(--isometric-cube-depth, 0rem) / 2)) rotateX(-90deg) rotateY(90deg)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.26", ngImport: i0, type: IsometricCube, decorators: [{
+            type: Component,
+            args: [{ selector: "[isometric-cube]", host: {
+                        class: "isometric-cube",
+                        "[class.isometric-position]": "!!positionVariables()",
+                        "[class.isometric-shadow]": "!!shadowVariables() || !!shadowAnimationVariables()",
+                        "[class.isometric-shadow-animation]": "!!shadowAnimationVariables()",
+                        "[class.isometric-rotation]": "!!rotationVariables()",
+                        "[style]": "styles()",
+                    }, template: ` <ng-content /> `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".isometric-cube{position:absolute;width:var(--isometric-cube-width, 0rem);height:var(--isometric-cube-height, 0rem);transform-origin:center}.isometric-cube>*{position:absolute;border-width:var(--isometric-border-size-cube, 0px);border-color:color-mix(in srgb,var(--isometric-border-color-cube, #fff),#000 20%);border-style:var(--isometric-border-style-cube, solid);box-sizing:border-box}.isometric-cube-top{width:var(--isometric-cube-width, 0rem);height:var(--isometric-cube-height, 0rem);transform:translateZ(var(--isometric-cube-depth, 0rem))}.isometric-cube-front-left{width:var(--isometric-cube-width, 0rem);height:var(--isometric-cube-depth, 0rem);transform:translateY(calc(var(--isometric-cube-height, 0rem) - (var(--isometric-cube-depth, 0rem) / 2))) translateZ(calc(var(--isometric-cube-depth, 0rem) / 2)) rotateX(-90deg)}.isometric-cube-front-right{width:var(--isometric-cube-height, 0rem);height:var(--isometric-cube-depth, 0rem);transform:translate(calc(var(--isometric-cube-width, 0rem) - (var(--isometric-cube-height, 0rem) / 2))) translateY(calc(var(--isometric-cube-height, 0rem) / 2 - (var(--isometric-cube-depth, 0rem) / 2))) translateZ(calc(var(--isometric-cube-depth, 0rem) / 2)) rotateX(-90deg) rotateY(90deg)}.isometric-cube-bottom{width:var(--isometric-cube-width, 0rem);height:var(--isometric-cube-height, 0rem);transform:initial}.isometric-cube-back-right{width:var(--isometric-cube-width, 0rem);height:var(--isometric-cube-depth, 0rem);transform:translateY(calc(-1 * var(--isometric-cube-depth, 0rem) / 2)) translateZ(calc(var(--isometric-cube-depth, 0rem) / 2)) rotateX(-90deg)}.isometric-cube-back-left{width:var(--isometric-cube-height, 0rem);height:var(--isometric-cube-depth, 0rem);transform:translate(calc(-1 * var(--isometric-cube-height, 0rem) / 2)) translateY(calc(var(--isometric-cube-height, 0rem) / 2 - (var(--isometric-cube-depth, 0rem) / 2))) translateZ(calc(var(--isometric-cube-depth, 0rem) / 2)) rotateX(-90deg) rotateY(90deg)}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }], depth: [{ type: i0.Input, args: [{ isSignal: true, alias: "depth", required: true }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], shadowAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadowAnimation", required: false }] }], rotation: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotation", required: false }] }] } });
+
+const cubeSideClasses = {
+    top: "isometric-cube-top",
+    "front-left": "isometric-cube-front-left",
+    "front-right": "isometric-cube-front-right",
+    bottom: "isometric-cube-bottom",
+    "back-left": "isometric-cube-back-left",
+    "back-right": "isometric-cube-back-right",
+};
+
+class IsometricCubeSide {
+    side = input.required({ ...(ngDevMode ? { debugName: "side" } : /* istanbul ignore next */ {}), alias: "isometricCubeSide" });
+    sideClass = computed(() => cubeSideClasses[this.side()], ...(ngDevMode ? [{ debugName: "sideClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.26", ngImport: i0, type: IsometricCubeSide, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.26", type: IsometricCubeSide, isStandalone: true, selector: "[isometricCubeSide]", inputs: { side: { classPropertyName: "side", publicName: "isometricCubeSide", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "sideClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.26", ngImport: i0, type: IsometricCubeSide, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[isometricCubeSide]",
+                    host: {
+                        "[class]": "sideClass()",
+                    },
+                }]
+        }], propDecorators: { side: [{ type: i0.Input, args: [{ isSignal: true, alias: "isometricCubeSide", required: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { IsometricCube, IsometricCubeSide };
+//# sourceMappingURL=isometric-angular-isometric-cube.mjs.map

package/fesm2022/isometric-angular-isometric-cube.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"isometric-angular-isometric-cube.mjs","sources":["../../../projects/isometric-angular/isometric-cube/src/components/isometric-cube.ts","../../../projects/isometric-angular/isometric-cube/src/constants/cube-side-classes.ts","../../../projects/isometric-angular/isometric-cube/src/directives/isometric-cube-side.ts","../../../projects/isometric-angular/isometric-cube/src/isometric-angular-isometric-cube.ts"],"sourcesContent":["import {\r\n  Component,\r\n  ViewEncapsulation,\r\n  ChangeDetectionStrategy,\r\n  input,\r\n  computed,\r\n} from \"@angular/core\";\r\nimport {\r\n  ɵisometricSize as isometricSize,\r\n  ɵisometricBorder as isometricBorder,\r\n  ɵisometricPosition as isometricPosition,\r\n  ɵisometricShadow as isometricShadow,\r\n  ɵisometricShadowAnimation as isometricShadowAnimation,\r\n  ɵisometricRotation as isometricRotation,\r\n  ɵgetCorrectValue as getCorrectValue,\r\n  type SizeAsObject,\r\n  type Border,\r\n  type Position,\r\n  type Shadow,\r\n  type ShadowAnimation,\r\n  type Rotation,\r\n  type ɵCSSVariables as CSSVariables,\r\n} from \"isometric-angular/core\";\r\n\r\n@Component({\r\n  selector: \"[isometric-cube]\",\r\n  host: {\r\n    class: \"isometric-cube\",\r\n    \"[class.isometric-position]\": \"!!positionVariables()\",\r\n    \"[class.isometric-shadow]\":\r\n      \"!!shadowVariables() || !!shadowAnimationVariables()\",\r\n    \"[class.isometric-shadow-animation]\": \"!!shadowAnimationVariables()\",\r\n    \"[class.isometric-rotation]\": \"!!rotationVariables()\",\r\n    \"[style]\": \"styles()\",\r\n  },\r\n  template: ` <ng-content /> `,\r\n  styleUrl: \"../styles/isometric-cube.styles.css\",\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class IsometricCube {\r\n  readonly size = input.required<SizeAsObject>();\r\n  readonly depth = input.required<number | string>();\r\n  readonly border = input<Border>();\r\n  readonly position = input<Position>();\r\n  readonly shadow = input<Shadow>();\r\n  readonly shadowAnimation = input<ShadowAnimation>();\r\n  readonly rotation = input<Rotation>();\r\n\r\n  protected readonly sizeVariables = isometricSize(this.size, \"cube\");\r\n  protected readonly borderVariables = isometricBorder(this.border, \"-cube\");\r\n  protected readonly positionVariables = isometricPosition(this.position);\r\n  protected readonly shadowVariables = isometricShadow(this.shadow);\r\n  protected readonly shadowAnimationVariables = isometricShadowAnimation(\r\n    this.shadowAnimation,\r\n  );\r\n  protected readonly rotationVariables = isometricRotation(this.rotation);\r\n\r\n  protected readonly styles = computed<CSSVariables>(() => ({\r\n    ...this.sizeVariables(),\r\n    ...this.borderVariables(),\r\n    ...this.positionVariables(),\r\n    ...this.shadowVariables(),\r\n    ...this.shadowAnimationVariables(),\r\n    ...this.rotationVariables(),\r\n    \"--isometric-cube-depth\": getCorrectValue(this.depth()),\r\n  }));\r\n}\r\n","import type { CubeSides } from \"../types/cube-sides.types\";\r\n\r\nexport const cubeSideClasses: Record<CubeSides, string> = {\r\n  top: \"isometric-cube-top\",\r\n  \"front-left\": \"isometric-cube-front-left\",\r\n  \"front-right\": \"isometric-cube-front-right\",\r\n  bottom: \"isometric-cube-bottom\",\r\n  \"back-left\": \"isometric-cube-back-left\",\r\n  \"back-right\": \"isometric-cube-back-right\",\r\n};\r\n","import { computed, Directive, input } from \"@angular/core\";\r\nimport { cubeSideClasses } from \"../constants/cube-side-classes\";\r\nimport type { CubeSides } from \"../types/cube-sides.types\";\r\n\r\n@Directive({\r\n  selector: \"[isometricCubeSide]\",\r\n  host: {\r\n    \"[class]\": \"sideClass()\",\r\n  },\r\n})\r\nexport class IsometricCubeSide {\r\n  readonly side = input.required<CubeSides>({\r\n    alias: \"isometricCubeSide\",\r\n  });\r\n\r\n  protected readonly sideClass = computed(() => cubeSideClasses[this.side()]);\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["isometricSize","isometricBorder","isometricPosition","isometricShadow","isometricShadowAnimation","isometricRotation","getCorrectValue"],"mappings":"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"}

package/fesm2022/isometric-angular-isometric-grid.mjs

@@ -0,0 +1,52 @@
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { ɵisometricPosition as _isometricPosition, ɵisometricShadow as _isometricShadow, ɵisometricShadowAnimation as _isometricShadowAnimation, ɵisometricRotation as _isometricRotation, ɵgetCorrectValue as _getCorrectValue } from 'isometric-angular/core';
+
+class IsometricGrid {
+    size = input.required(...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    sizeMultiplier = input(...(ngDevMode ? [undefined, { debugName: "sizeMultiplier" }] : /* istanbul ignore next */ []));
+    color = input("#000", ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    lineweight = input(...(ngDevMode ? [undefined, { debugName: "lineweight" }] : /* istanbul ignore next */ []));
+    position = input(...(ngDevMode ? [undefined, { debugName: "position" }] : /* istanbul ignore next */ []));
+    shadow = input(...(ngDevMode ? [undefined, { debugName: "shadow" }] : /* istanbul ignore next */ []));
+    shadowAnimation = input(...(ngDevMode ? [undefined, { debugName: "shadowAnimation" }] : /* istanbul ignore next */ []));
+    rotation = input(...(ngDevMode ? [undefined, { debugName: "rotation" }] : /* istanbul ignore next */ []));
+    positionVariables = _isometricPosition(this.position);
+    shadowVariables = _isometricShadow(this.shadow);
+    shadowAnimationVariables = _isometricShadowAnimation(this.shadowAnimation);
+    rotationVariables = _isometricRotation(this.rotation);
+    styles = computed(() => {
+        const { width = 1, height = 1 } = this.sizeMultiplier() ?? {};
+        return {
+            ...this.positionVariables(),
+            ...this.shadowVariables(),
+            ...this.shadowAnimationVariables(),
+            ...this.rotationVariables(),
+            "--isometric-grid-size": _getCorrectValue(this.size()),
+            "--isometric-grid-lineweight": _getCorrectValue(this.lineweight(), "%"),
+            "--isometric-grid-color": this.color(),
+            "--isometric-grid-width": String(width),
+            "--isometric-grid-height": String(height),
+        };
+    }, ...(ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.26", ngImport: i0, type: IsometricGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.26", type: IsometricGrid, isStandalone: true, selector: "[isometric-grid]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, sizeMultiplier: { classPropertyName: "sizeMultiplier", publicName: "sizeMultiplier", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, lineweight: { classPropertyName: "lineweight", publicName: "lineweight", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, shadowAnimation: { classPropertyName: "shadowAnimation", publicName: "shadowAnimation", isSignal: true, isRequired: false, transformFunction: null }, rotation: { classPropertyName: "rotation", publicName: "rotation", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.isometric-position": "!!positionVariables()", "class.isometric-shadow": "!!shadowVariables() || !!shadowAnimationVariables()", "class.isometric-shadow-animation": "!!shadowAnimationVariables()", "class.isometric-rotation": "!!rotationVariables()", "style": "styles()" }, classAttribute: "isometric-grid" }, ngImport: i0, template: ` <ng-content /> `, isInline: true, styles: [".isometric-grid{position:absolute;background-image:linear-gradient(var(--isometric-grid-color, #000) var(--isometric-grid-lineweight, 1%),transparent var(--isometric-grid-lineweight, 1%),transparent calc(100% - var(--isometric-grid-lineweight, 1%)),var(--isometric-grid-color, #000) calc(100% - var(--isometric-grid-lineweight, 1%))),linear-gradient(90deg,var(--isometric-grid-color, #000) var(--isometric-grid-lineweight, 1%),transparent var(--isometric-grid-lineweight, 1%),transparent calc(100% - var(--isometric-grid-lineweight, 1%)),var(--isometric-grid-color, #000) calc(100% - var(--isometric-grid-lineweight, 1%)));background-size:var(--isometric-grid-size, 1rem) var(--isometric-grid-size, 1rem);width:calc(var(--isometric-grid-size, 1rem) * var(--isometric-grid-width, 1));height:calc(var(--isometric-grid-size, 1rem) * var(--isometric-grid-height, 1))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.26", ngImport: i0, type: IsometricGrid, decorators: [{
+            type: Component,
+            args: [{ selector: "[isometric-grid]", host: {
+                        class: "isometric-grid",
+                        "[class.isometric-position]": "!!positionVariables()",
+                        "[class.isometric-shadow]": "!!shadowVariables() || !!shadowAnimationVariables()",
+                        "[class.isometric-shadow-animation]": "!!shadowAnimationVariables()",
+                        "[class.isometric-rotation]": "!!rotationVariables()",
+                        "[style]": "styles()",
+                    }, template: ` <ng-content /> `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".isometric-grid{position:absolute;background-image:linear-gradient(var(--isometric-grid-color, #000) var(--isometric-grid-lineweight, 1%),transparent var(--isometric-grid-lineweight, 1%),transparent calc(100% - var(--isometric-grid-lineweight, 1%)),var(--isometric-grid-color, #000) calc(100% - var(--isometric-grid-lineweight, 1%))),linear-gradient(90deg,var(--isometric-grid-color, #000) var(--isometric-grid-lineweight, 1%),transparent var(--isometric-grid-lineweight, 1%),transparent calc(100% - var(--isometric-grid-lineweight, 1%)),var(--isometric-grid-color, #000) calc(100% - var(--isometric-grid-lineweight, 1%)));background-size:var(--isometric-grid-size, 1rem) var(--isometric-grid-size, 1rem);width:calc(var(--isometric-grid-size, 1rem) * var(--isometric-grid-width, 1));height:calc(var(--isometric-grid-size, 1rem) * var(--isometric-grid-height, 1))}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }], sizeMultiplier: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizeMultiplier", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], lineweight: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineweight", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], shadowAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadowAnimation", required: false }] }], rotation: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotation", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { IsometricGrid };
+//# sourceMappingURL=isometric-angular-isometric-grid.mjs.map

package/fesm2022/isometric-angular-isometric-grid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"isometric-angular-isometric-grid.mjs","sources":["../../../projects/isometric-angular/isometric-grid/src/components/isometric-grid.ts","../../../projects/isometric-angular/isometric-grid/src/isometric-angular-isometric-grid.ts"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  computed,\r\n  input,\r\n  ViewEncapsulation,\r\n} from \"@angular/core\";\r\nimport {\r\n  ɵisometricPosition as isometricPosition,\r\n  ɵisometricShadow as isometricShadow,\r\n  ɵisometricShadowAnimation as isometricShadowAnimation,\r\n  ɵisometricRotation as isometricRotation,\r\n  ɵgetCorrectValue as getCorrectValue,\r\n  type SizeMultiplier,\r\n  type Position,\r\n  type Shadow,\r\n  type ShadowAnimation,\r\n  type Rotation,\r\n  type ɵCSSVariables as CSSVariables,\r\n} from \"isometric-angular/core\";\r\n\r\n@Component({\r\n  selector: \"[isometric-grid]\",\r\n  host: {\r\n    class: \"isometric-grid\",\r\n    \"[class.isometric-position]\": \"!!positionVariables()\",\r\n    \"[class.isometric-shadow]\":\r\n      \"!!shadowVariables() || !!shadowAnimationVariables()\",\r\n    \"[class.isometric-shadow-animation]\": \"!!shadowAnimationVariables()\",\r\n    \"[class.isometric-rotation]\": \"!!rotationVariables()\",\r\n    \"[style]\": \"styles()\",\r\n  },\r\n  template: ` <ng-content /> `,\r\n  styleUrl: \"../styles/isometric-grid.styles.css\",\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class IsometricGrid {\r\n  readonly size = input.required<string | number>();\r\n  readonly sizeMultiplier = input<SizeMultiplier>();\r\n  readonly color = input(\"#000\");\r\n  readonly lineweight = input<string | number>();\r\n  readonly position = input<Position>();\r\n  readonly shadow = input<Shadow>();\r\n  readonly shadowAnimation = input<ShadowAnimation>();\r\n  readonly rotation = input<Rotation>();\r\n\r\n  protected readonly positionVariables = isometricPosition(this.position);\r\n  protected readonly shadowVariables = isometricShadow(this.shadow);\r\n  protected readonly shadowAnimationVariables = isometricShadowAnimation(\r\n    this.shadowAnimation,\r\n  );\r\n  protected readonly rotationVariables = isometricRotation(this.rotation);\r\n\r\n  protected readonly styles = computed<CSSVariables>(() => {\r\n    const { width = 1, height = 1 } = this.sizeMultiplier() ?? {};\r\n\r\n    return {\r\n      ...this.positionVariables(),\r\n      ...this.shadowVariables(),\r\n      ...this.shadowAnimationVariables(),\r\n      ...this.rotationVariables(),\r\n      \"--isometric-grid-size\": getCorrectValue(this.size()),\r\n      \"--isometric-grid-lineweight\": getCorrectValue(this.lineweight(), \"%\"),\r\n      \"--isometric-grid-color\": this.color(),\r\n      \"--isometric-grid-width\": String(width),\r\n      \"--isometric-grid-height\": String(height),\r\n    };\r\n  });\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["isometricPosition","isometricShadow","isometricShadowAnimation","isometricRotation","getCorrectValue"],"mappings":"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"}

package/fesm2022/isometric-angular-isometric-plane.mjs

@@ -0,0 +1,53 @@
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { ɵisometricSize as _isometricSize, ɵisometricPosition as _isometricPosition, ɵisometricBorder as _isometricBorder, ɵisometricEdge as _isometricEdge, ɵisometricShadow as _isometricShadow, ɵisometricShadowAnimation as _isometricShadowAnimation, ɵisometricRotation as _isometricRotation } from 'isometric-angular/core';
+
+class IsometricPlane {
+    size = input.required(...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    color = input("#000", ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    position = input(...(ngDevMode ? [undefined, { debugName: "position" }] : /* istanbul ignore next */ []));
+    border = input(...(ngDevMode ? [undefined, { debugName: "border" }] : /* istanbul ignore next */ []));
+    edge = input(...(ngDevMode ? [undefined, { debugName: "edge" }] : /* istanbul ignore next */ []));
+    shadow = input(...(ngDevMode ? [undefined, { debugName: "shadow" }] : /* istanbul ignore next */ []));
+    shadowAnimation = input(...(ngDevMode ? [undefined, { debugName: "shadowAnimation" }] : /* istanbul ignore next */ []));
+    rotation = input(...(ngDevMode ? [undefined, { debugName: "rotation" }] : /* istanbul ignore next */ []));
+    sizeVariables = _isometricSize(this.size, "plane");
+    positionVariables = _isometricPosition(this.position);
+    borderVariables = _isometricBorder(this.border);
+    edgeVariables = _isometricEdge(this.edge);
+    shadowVariables = _isometricShadow(this.shadow);
+    shadowAnimationVariables = _isometricShadowAnimation(this.shadowAnimation);
+    rotationVariables = _isometricRotation(this.rotation);
+    styles = computed(() => ({
+        ...this.sizeVariables(),
+        ...this.positionVariables(),
+        ...this.borderVariables(),
+        ...this.edgeVariables(),
+        ...this.shadowVariables(),
+        ...this.shadowAnimationVariables(),
+        ...this.rotationVariables(),
+        "--isometric-plane-color": this.color(),
+    }), ...(ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.26", ngImport: i0, type: IsometricPlane, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.26", type: IsometricPlane, isStandalone: true, selector: "[isometric-plane]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, edge: { classPropertyName: "edge", publicName: "edge", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, shadowAnimation: { classPropertyName: "shadowAnimation", publicName: "shadowAnimation", isSignal: true, isRequired: false, transformFunction: null }, rotation: { classPropertyName: "rotation", publicName: "rotation", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.isometric-position": "!!positionVariables()", "class.isometric-border": "!!borderVariables()", "class.isometric-edge": "!!edgeVariables()", "class.isometric-shadow": "!!shadowVariables() || !!shadowAnimationVariables()", "class.isometric-shadow-animation": "!!shadowAnimationVariables()", "class.isometric-rotation": "!!rotationVariables()", "style": "styles()" }, classAttribute: "isometric-plane" }, ngImport: i0, template: ` <ng-content /> `, isInline: true, styles: [".isometric-plane{position:absolute;width:var(--isometric-plane-width, 0rem);height:var(--isometric-plane-height, 0rem);background:var(--isometric-plane-color, #000000)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.26", ngImport: i0, type: IsometricPlane, decorators: [{
+            type: Component,
+            args: [{ selector: "[isometric-plane]", host: {
+                        class: "isometric-plane",
+                        "[class.isometric-position]": "!!positionVariables()",
+                        "[class.isometric-border]": "!!borderVariables()",
+                        "[class.isometric-edge]": "!!edgeVariables()",
+                        "[class.isometric-shadow]": "!!shadowVariables() || !!shadowAnimationVariables()",
+                        "[class.isometric-shadow-animation]": "!!shadowAnimationVariables()",
+                        "[class.isometric-rotation]": "!!rotationVariables()",
+                        "[style]": "styles()",
+                    }, template: ` <ng-content /> `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".isometric-plane{position:absolute;width:var(--isometric-plane-width, 0rem);height:var(--isometric-plane-height, 0rem);background:var(--isometric-plane-color, #000000)}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], edge: [{ type: i0.Input, args: [{ isSignal: true, alias: "edge", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], shadowAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadowAnimation", required: false }] }], rotation: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotation", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { IsometricPlane };
+//# sourceMappingURL=isometric-angular-isometric-plane.mjs.map

package/fesm2022/isometric-angular-isometric-plane.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"isometric-angular-isometric-plane.mjs","sources":["../../../projects/isometric-angular/isometric-plane/src/components/isometric-plane.ts","../../../projects/isometric-angular/isometric-plane/src/isometric-angular-isometric-plane.ts"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  computed,\r\n  input,\r\n  ViewEncapsulation,\r\n} from \"@angular/core\";\r\nimport {\r\n  ɵisometricSize as isometricSize,\r\n  ɵisometricEdge as isometricEdge,\r\n  ɵisometricBorder as isometricBorder,\r\n  ɵisometricPosition as isometricPosition,\r\n  ɵisometricShadow as isometricShadow,\r\n  ɵisometricShadowAnimation as isometricShadowAnimation,\r\n  ɵisometricRotation as isometricRotation,\r\n  type SizeAsObject,\r\n  type Border,\r\n  type Edge,\r\n  type Position,\r\n  type Shadow,\r\n  type ShadowAnimation,\r\n  type Rotation,\r\n  type ɵCSSVariables as CSSVariables,\r\n} from \"isometric-angular/core\";\r\n\r\n@Component({\r\n  selector: \"[isometric-plane]\",\r\n  host: {\r\n    class: \"isometric-plane\",\r\n    \"[class.isometric-position]\": \"!!positionVariables()\",\r\n    \"[class.isometric-border]\": \"!!borderVariables()\",\r\n    \"[class.isometric-edge]\": \"!!edgeVariables()\",\r\n    \"[class.isometric-shadow]\":\r\n      \"!!shadowVariables() || !!shadowAnimationVariables()\",\r\n    \"[class.isometric-shadow-animation]\": \"!!shadowAnimationVariables()\",\r\n    \"[class.isometric-rotation]\": \"!!rotationVariables()\",\r\n    \"[style]\": \"styles()\",\r\n  },\r\n  template: ` <ng-content /> `,\r\n  styleUrl: \"../styles/isometric-plane.styles.css\",\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class IsometricPlane {\r\n  readonly size = input.required<SizeAsObject>();\r\n  readonly color = input(\"#000\");\r\n  readonly position = input<Position>();\r\n  readonly border = input<Border>();\r\n  readonly edge = input<Edge>();\r\n  readonly shadow = input<Shadow>();\r\n  readonly shadowAnimation = input<ShadowAnimation>();\r\n  readonly rotation = input<Rotation>();\r\n\r\n  protected readonly sizeVariables = isometricSize(this.size, \"plane\");\r\n  protected readonly positionVariables = isometricPosition(this.position);\r\n  protected readonly borderVariables = isometricBorder(this.border);\r\n  protected readonly edgeVariables = isometricEdge(this.edge);\r\n  protected readonly shadowVariables = isometricShadow(this.shadow);\r\n  protected readonly shadowAnimationVariables = isometricShadowAnimation(\r\n    this.shadowAnimation,\r\n  );\r\n  protected readonly rotationVariables = isometricRotation(this.rotation);\r\n\r\n  protected readonly styles = computed<CSSVariables>(() => ({\r\n    ...this.sizeVariables(),\r\n    ...this.positionVariables(),\r\n    ...this.borderVariables(),\r\n    ...this.edgeVariables(),\r\n    ...this.shadowVariables(),\r\n    ...this.shadowAnimationVariables(),\r\n    ...this.rotationVariables(),\r\n    \"--isometric-plane-color\": this.color(),\r\n  }));\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["isometricSize","isometricPosition","isometricBorder","isometricEdge","isometricShadow","isometricShadowAnimation","isometricRotation"],"mappings":";;;;MA2Ca,cAAc,CAAA;AAChB,IAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,0EAAgB;AACrC,IAAA,KAAK,GAAG,KAAK,CAAC,MAAM,4EAAC;IACrB,QAAQ,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,UAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAY;IAC5B,MAAM,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,QAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;IACxB,IAAI,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAQ;IACpB,MAAM,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,QAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;IACxB,eAAe,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAmB;IAC1C,QAAQ,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,UAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAY;IAElB,aAAa,GAAGA,cAAa,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC;AACjD,IAAA,iBAAiB,GAAGC,kBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC;AACpD,IAAA,eAAe,GAAGC,gBAAe,CAAC,IAAI,CAAC,MAAM,CAAC;AAC9C,IAAA,aAAa,GAAGC,cAAa,CAAC,IAAI,CAAC,IAAI,CAAC;AACxC,IAAA,eAAe,GAAGC,gBAAe,CAAC,IAAI,CAAC,MAAM,CAAC;AAC9C,IAAA,wBAAwB,GAAGC,yBAAwB,CACpE,IAAI,CAAC,eAAe,CACrB;AACkB,IAAA,iBAAiB,GAAGC,kBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC;AAEpD,IAAA,MAAM,GAAG,QAAQ,CAAe,OAAO;QACxD,GAAG,IAAI,CAAC,aAAa,EAAE;QACvB,GAAG,IAAI,CAAC,iBAAiB,EAAE;QAC3B,GAAG,IAAI,CAAC,eAAe,EAAE;QACzB,GAAG,IAAI,CAAC,aAAa,EAAE;QACvB,GAAG,IAAI,CAAC,eAAe,EAAE;QACzB,GAAG,IAAI,CAAC,wBAAwB,EAAE;QAClC,GAAG,IAAI,CAAC,iBAAiB,EAAE;AAC3B,QAAA,yBAAyB,EAAE,IAAI,CAAC,KAAK,EAAE;AACxC,KAAA,CAAC,6EAAC;wGA7BQ,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAd,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,cAAc,u/CALf,CAAA,gBAAA,CAAkB,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,4KAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;4FAKjB,cAAc,EAAA,UAAA,EAAA,CAAA;kBAlB1B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,EAAA,IAAA,EACvB;AACJ,wBAAA,KAAK,EAAE,iBAAiB;AACxB,wBAAA,4BAA4B,EAAE,uBAAuB;AACrD,wBAAA,0BAA0B,EAAE,qBAAqB;AACjD,wBAAA,wBAAwB,EAAE,mBAAmB;AAC7C,wBAAA,0BAA0B,EACxB,qDAAqD;AACvD,wBAAA,oCAAoC,EAAE,8BAA8B;AACpE,wBAAA,4BAA4B,EAAE,uBAAuB;AACrD,wBAAA,SAAS,EAAE,UAAU;qBACtB,EAAA,QAAA,EACS,CAAA,gBAAA,CAAkB,iBAEb,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,4KAAA,CAAA,EAAA;;;ACzCjD;;AAEG;;"}

package/fesm2022/isometric-angular.mjs

@@ -0,0 +1,33 @@
+import * as i0 from '@angular/core';
+import { input, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+
+class Isometric {
+    isometricClass = input(...(ngDevMode ? [undefined, { debugName: "isometricClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.26", ngImport: i0, type: Isometric, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.26", type: Isometric, isStandalone: true, selector: "[isometric-root]", inputs: { isometricClass: { classPropertyName: "isometricClass", publicName: "isometricClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "isometric-container" }, ngImport: i0, template: `
+    <div class="isometric" [class]="isometricClass()">
+      <ng-content />
+    </div>
+  `, isInline: true, styles: [".isometric-border{border:var(--isometric-border-size, 0px) var(--isometric-border-style, solid) var(--isometric-border-color, #000000);box-sizing:border-box}.isometric-edge:before{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:color-mix(in srgb,var(--isometric-edge-color, #fff),#000 20%);box-shadow:0 0 color-mix(in srgb,var(--isometric-edge-color, #fff),#000 20%);transform:translateZ(calc(-1 * var(--isometric-edge-depth, 0px)))}.isometric-position{top:var(--isometric-position-top, 0rem);left:var(--isometric-position-left, 0rem);transform:translateZ(calc(var(--isometric-position-elevation, 0rem) * .5))}.isometric-rotation{transform-origin:center;transform:rotate(var(--isometric-rotate-from, 0deg));animation:isometric-rotation var(--isometric-rotation-duration, 1s) linear forwards infinite;animation-delay:var(--isometric-rotation-delay, 0s)}@keyframes isometric-rotation{0%{transform:rotate(var(--rotation-from, 0deg))}to{transform:rotate(var(--rotation-to, 360deg))}}.isometric-shadow:after{position:absolute;content:\"\";display:block;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:rgba(0,0,0,calc(.2 / (1 + var(--isometric-shadow-distance, 0) / 10)));border-color:rgba(0,0,0,calc(.2 / (1 + var(--isometric-shadow-distance, 0) / 10)));transform:translate(calc(var(--isometric-shadow-distance-with-unit, 1rem) * var(--isometric-shadow-spacing-x, 0))) translateY(calc(var(--isometric-shadow-distance-with-unit, 1rem) * var(--isometric-shadow-spacing-y, 0))) translateZ(calc(-1 * var(--isometric-shadow-distance-with-unit, 1rem)));box-shadow:0 0 calc(var(--isometric-shadow-distance-with-unit, 1rem) / 10) #0003;filter:blur(calc(var(--isometric-shadow-distance-with-unit, 1rem) / 10))}.isometric-shadow-animation:after{animation:isometric-shadow-animation var(--isometric-shadow-animation-duration, 1s) ease-in-out forwards var(--isometric-shadow-animation-options);animation-delay:var(--isometric-shadow-animation-delay, 0s)}@keyframes isometric-shadow-animation{0%{background:rgba(0,0,0,calc(.2 / (1 + var(--isometric-shadow-animation-from, 0) / 10)));border-color:rgba(0,0,0,calc(.2 / (1 + var(--isometric-shadow-animation-from, 0) / 10)));transform:translate(calc(var(--isometric-shadow-animation-from-with-unit, 0rem) * var(--isometric-shadow-spacing-x, 0))) translateY(calc(var(--isometric-shadow-animation-from-with-unit, 0rem) * var(--isometric-shadow-spacing-y, 0))) translateZ(calc(-1 * var(--isometric-shadow-animation-from-with-unit, 0rem)));box-shadow:0 0 calc(var(--isometric-shadow-animation-from-with-unit, 0rem) * 10) #0003;filter:blur(calc(var(--isometric-shadow-animation-from-with-unit, 0rem) / 10))}to{background:rgba(0,0,0,calc(.2 / (1 + var(--isometric-shadow-animation-to, 0) / 10)));border-color:rgba(0,0,0,calc(.2 / (1 + var(--isometric-shadow-animation-to, 0) / 10)));transform:translate(calc(var(--isometric-shadow-animation-to-with-unit, 0rem) * var(--isometric-shadow-spacing-x, 0))) translateY(calc(var(--isometric-shadow-animation-to-with-unit, 0rem) * var(--isometric-shadow-spacing-y, 0))) translateZ(calc(-1 * var(--isometric-shadow-animation-to-with-unit, 0rem)));box-shadow:0 0 calc(var(--isometric-shadow-animation-to-with-unit, 0rem) * 10) #0003;filter:blur(calc(var(--isometric-shadow-animation-to-with-unit, 0rem) / 10))}}\n", ".isometric-container,.isometric-container *,.isometric-container *:before,.isometric-container *:after{box-sizing:border-box}.isometric-container{overflow:hidden}.isometric{position:absolute;top:50%;left:50%;width:0;height:0;transform-style:preserve-3d;transform:rotateX(60deg) rotateY(0) rotate(45deg)}.isometric *{transform-style:preserve-3d}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.26", ngImport: i0, type: Isometric, decorators: [{
+            type: Component,
+            args: [{ selector: "[isometric-root]", host: {
+                        class: "isometric-container",
+                    }, template: `
+    <div class="isometric" [class]="isometricClass()">
+      <ng-content />
+    </div>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".isometric-border{border:var(--isometric-border-size, 0px) var(--isometric-border-style, solid) var(--isometric-border-color, #000000);box-sizing:border-box}.isometric-edge:before{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:color-mix(in srgb,var(--isometric-edge-color, #fff),#000 20%);box-shadow:0 0 color-mix(in srgb,var(--isometric-edge-color, #fff),#000 20%);transform:translateZ(calc(-1 * var(--isometric-edge-depth, 0px)))}.isometric-position{top:var(--isometric-position-top, 0rem);left:var(--isometric-position-left, 0rem);transform:translateZ(calc(var(--isometric-position-elevation, 0rem) * .5))}.isometric-rotation{transform-origin:center;transform:rotate(var(--isometric-rotate-from, 0deg));animation:isometric-rotation var(--isometric-rotation-duration, 1s) linear forwards infinite;animation-delay:var(--isometric-rotation-delay, 0s)}@keyframes isometric-rotation{0%{transform:rotate(var(--rotation-from, 0deg))}to{transform:rotate(var(--rotation-to, 360deg))}}.isometric-shadow:after{position:absolute;content:\"\";display:block;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:rgba(0,0,0,calc(.2 / (1 + var(--isometric-shadow-distance, 0) / 10)));border-color:rgba(0,0,0,calc(.2 / (1 + var(--isometric-shadow-distance, 0) / 10)));transform:translate(calc(var(--isometric-shadow-distance-with-unit, 1rem) * var(--isometric-shadow-spacing-x, 0))) translateY(calc(var(--isometric-shadow-distance-with-unit, 1rem) * var(--isometric-shadow-spacing-y, 0))) translateZ(calc(-1 * var(--isometric-shadow-distance-with-unit, 1rem)));box-shadow:0 0 calc(var(--isometric-shadow-distance-with-unit, 1rem) / 10) #0003;filter:blur(calc(var(--isometric-shadow-distance-with-unit, 1rem) / 10))}.isometric-shadow-animation:after{animation:isometric-shadow-animation var(--isometric-shadow-animation-duration, 1s) ease-in-out forwards var(--isometric-shadow-animation-options);animation-delay:var(--isometric-shadow-animation-delay, 0s)}@keyframes isometric-shadow-animation{0%{background:rgba(0,0,0,calc(.2 / (1 + var(--isometric-shadow-animation-from, 0) / 10)));border-color:rgba(0,0,0,calc(.2 / (1 + var(--isometric-shadow-animation-from, 0) / 10)));transform:translate(calc(var(--isometric-shadow-animation-from-with-unit, 0rem) * var(--isometric-shadow-spacing-x, 0))) translateY(calc(var(--isometric-shadow-animation-from-with-unit, 0rem) * var(--isometric-shadow-spacing-y, 0))) translateZ(calc(-1 * var(--isometric-shadow-animation-from-with-unit, 0rem)));box-shadow:0 0 calc(var(--isometric-shadow-animation-from-with-unit, 0rem) * 10) #0003;filter:blur(calc(var(--isometric-shadow-animation-from-with-unit, 0rem) / 10))}to{background:rgba(0,0,0,calc(.2 / (1 + var(--isometric-shadow-animation-to, 0) / 10)));border-color:rgba(0,0,0,calc(.2 / (1 + var(--isometric-shadow-animation-to, 0) / 10)));transform:translate(calc(var(--isometric-shadow-animation-to-with-unit, 0rem) * var(--isometric-shadow-spacing-x, 0))) translateY(calc(var(--isometric-shadow-animation-to-with-unit, 0rem) * var(--isometric-shadow-spacing-y, 0))) translateZ(calc(-1 * var(--isometric-shadow-animation-to-with-unit, 0rem)));box-shadow:0 0 calc(var(--isometric-shadow-animation-to-with-unit, 0rem) * 10) #0003;filter:blur(calc(var(--isometric-shadow-animation-to-with-unit, 0rem) / 10))}}\n", ".isometric-container,.isometric-container *,.isometric-container *:before,.isometric-container *:after{box-sizing:border-box}.isometric-container{overflow:hidden}.isometric{position:absolute;top:50%;left:50%;width:0;height:0;transform-style:preserve-3d;transform:rotateX(60deg) rotateY(0) rotate(45deg)}.isometric *{transform-style:preserve-3d}\n"] }]
+        }], propDecorators: { isometricClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "isometricClass", required: false }] }] } });
+
+/*
+ * Public API Surface of isometric-angular
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Isometric };
+//# sourceMappingURL=isometric-angular.mjs.map

package/fesm2022/isometric-angular.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"isometric-angular.mjs","sources":["../../../projects/isometric-angular/src/components/isometric.ts","../../../projects/isometric-angular/src/public-api.ts","../../../projects/isometric-angular/src/isometric-angular.ts"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  input,\r\n  ViewEncapsulation,\r\n} from \"@angular/core\";\r\nimport type { ClassValue } from \"isometric-angular/core\";\r\n\r\n@Component({\r\n  selector: \"[isometric-root]\",\r\n  host: {\r\n    class: \"isometric-container\",\r\n  },\r\n  template: `\r\n    <div class=\"isometric\" [class]=\"isometricClass()\">\r\n      <ng-content />\r\n    </div>\r\n  `,\r\n  styleUrls: [\"../styles/isometric.css\", \"../styles/isometric.styles.css\"],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class Isometric {\r\n  readonly isometricClass = input<ClassValue>();\r\n}\r\n","/*\n * Public API Surface of isometric-angular\n */\n\nexport { Isometric } from \"./components/isometric\";\nexport type {\n  Border,\n  Edge,\n  Position,\n  Rotation,\n  Shadow,\n  ShadowAnimation,\n  SizeAsObject,\n  SizeProps,\n  SizeMultiplier,\n  ClassValue,\n} from \"isometric-angular/core\";\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MAsBa,SAAS,CAAA;IACX,cAAc,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,gBAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAc;wGADlC,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAT,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,qBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EATV,CAAA;;;;AAIT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,qyGAAA,EAAA,4VAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;4FAKU,SAAS,EAAA,UAAA,EAAA,CAAA;kBAdrB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,EAAA,IAAA,EACtB;AACJ,wBAAA,KAAK,EAAE,qBAAqB;qBAC7B,EAAA,QAAA,EACS,CAAA;;;;AAIT,EAAA,CAAA,EAAA,aAAA,EAEc,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,qyGAAA,EAAA,4VAAA,CAAA,EAAA;;;ACpBjD;;AAEG;;ACFH;;AAEG;;"}

package/package.json

@@ -1,6 +1,55 @@
 {
   "name": "isometric-angular",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "author": "Matej Ruzic da Silva Pereira <matej.ruzic011@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/JaViLuMa/isometric-angular.git"
+  },
+  "version": "1.0.1",
+  "description": "Isometric styling library made in Angular with as much flexibility over customization as possible. Rewrite of https://morgancaron.github.io/IsometricSass/ .",
+  "homepage": "https://github.com/JaViLuMa/isometric-angular#readme",
+  "keywords": [
+    "isometric",
+    "angular",
+    "components",
+    "css",
+    "3d"
+  ],
+  "peerDependencies": {
+    "@angular/common": "^21.2.0",
+    "@angular/core": "^21.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0",
+    "csstype": "^3.0.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/isometric-angular.mjs",
+  "typings": "types/isometric-angular.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/isometric-angular.d.ts",
+      "default": "./fesm2022/isometric-angular.mjs"
+    },
+    "./core": {
+      "types": "./types/isometric-angular-core.d.ts",
+      "default": "./fesm2022/isometric-angular-core.mjs"
+    },
+    "./isometric-cube": {
+      "types": "./types/isometric-angular-isometric-cube.d.ts",
+      "default": "./fesm2022/isometric-angular-isometric-cube.mjs"
+    },
+    "./isometric-grid": {
+      "types": "./types/isometric-angular-isometric-grid.d.ts",
+      "default": "./fesm2022/isometric-angular-isometric-grid.mjs"
+    },
+    "./isometric-plane": {
+      "types": "./types/isometric-angular-isometric-plane.d.ts",
+      "default": "./fesm2022/isometric-angular-isometric-plane.mjs"
+    }
+  },
+  "type": "module"
 }

package/types/isometric-angular-core.d.ts

@@ -0,0 +1,77 @@
+import { Signal } from '@angular/core';
+import { Property } from 'csstype';
+
+declare function getCorrectValue(value: string | number | undefined, unit?: string): string;
+
+type Length = number | (string & {});
+interface Border {
+    size?: Property.BorderWidth<Length>;
+    style?: Property.BorderStyle;
+    color?: Property.BorderColor;
+}
+
+type ClassValue = string | string[] | Record<string, boolean> | null | undefined;
+type CSSVariables = Record<string, string>;
+
+declare function isometricBorder(border: Signal<Border | undefined>, suffix?: Signal<string> | string): Signal<CSSVariables | undefined>;
+
+interface Edge {
+    depth?: string | number;
+    color?: string;
+}
+
+declare function isometricEdge(edge: Signal<Edge | undefined>): Signal<CSSVariables | undefined>;
+
+interface Position {
+    top?: string | number;
+    left?: string | number;
+    elevation?: string | number;
+}
+
+declare function isometricPosition(position: Signal<Position | undefined>): Signal<CSSVariables | undefined>;
+
+interface Rotation {
+    from: string | number;
+    to: string | number;
+    delay?: number;
+    duration?: number;
+}
+
+declare function isometricRotation(rotation: Signal<Rotation | undefined>): Signal<CSSVariables | undefined>;
+
+interface Shadow {
+    distance: string | number;
+    spacingX: number;
+    spacingY: number;
+}
+
+declare function isometricShadow(shadow: Signal<Shadow | undefined>): Signal<CSSVariables | undefined>;
+
+interface ShadowAnimation {
+    from: string | number;
+    to: string | number;
+    spacingX: number;
+    spacingY: number;
+    delay?: number;
+    duration?: number;
+    options?: string;
+}
+
+declare function isometricShadowAnimation(shadowAnimation: Signal<ShadowAnimation | undefined>): Signal<CSSVariables | undefined>;
+
+type IsometricElements = "cube" | "plane" | "grid";
+
+interface SizeAsObject {
+    width: string | number;
+    height: string | number;
+}
+type SizeProps = SizeAsObject | string | number;
+interface SizeMultiplier {
+    width?: number;
+    height?: number;
+}
+
+declare function isometricSize(size: Signal<SizeProps>, element: IsometricElements): Signal<CSSVariables>;
+
+export { getCorrectValue as ɵgetCorrectValue, isometricBorder as ɵisometricBorder, isometricEdge as ɵisometricEdge, isometricPosition as ɵisometricPosition, isometricRotation as ɵisometricRotation, isometricShadow as ɵisometricShadow, isometricShadowAnimation as ɵisometricShadowAnimation, isometricSize as ɵisometricSize };
+export type { Border, ClassValue, Edge, Position, Rotation, Shadow, ShadowAnimation, SizeAsObject, SizeMultiplier, SizeProps, CSSVariables as ɵCSSVariables, IsometricElements as ɵIsometricElements };

package/types/isometric-angular-isometric-cube.d.ts

@@ -0,0 +1,33 @@
+import * as _angular_core from '@angular/core';
+import { SizeAsObject, Border, Position, Shadow, ShadowAnimation, Rotation, ɵCSSVariables as _CSSVariables } from 'isometric-angular/core';
+
+declare class IsometricCube {
+    readonly size: _angular_core.InputSignal<SizeAsObject>;
+    readonly depth: _angular_core.InputSignal<string | number>;
+    readonly border: _angular_core.InputSignal<Border | undefined>;
+    readonly position: _angular_core.InputSignal<Position | undefined>;
+    readonly shadow: _angular_core.InputSignal<Shadow | undefined>;
+    readonly shadowAnimation: _angular_core.InputSignal<ShadowAnimation | undefined>;
+    readonly rotation: _angular_core.InputSignal<Rotation | undefined>;
+    protected readonly sizeVariables: _angular_core.Signal<_CSSVariables>;
+    protected readonly borderVariables: _angular_core.Signal<_CSSVariables | undefined>;
+    protected readonly positionVariables: _angular_core.Signal<_CSSVariables | undefined>;
+    protected readonly shadowVariables: _angular_core.Signal<_CSSVariables | undefined>;
+    protected readonly shadowAnimationVariables: _angular_core.Signal<_CSSVariables | undefined>;
+    protected readonly rotationVariables: _angular_core.Signal<_CSSVariables | undefined>;
+    protected readonly styles: _angular_core.Signal<_CSSVariables>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<IsometricCube, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<IsometricCube, "[isometric-cube]", never, { "size": { "alias": "size"; "required": true; "isSignal": true; }; "depth": { "alias": "depth"; "required": true; "isSignal": true; }; "border": { "alias": "border"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "shadow": { "alias": "shadow"; "required": false; "isSignal": true; }; "shadowAnimation": { "alias": "shadowAnimation"; "required": false; "isSignal": true; }; "rotation": { "alias": "rotation"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+type CubeSides = "top" | "front-left" | "front-right" | "bottom" | "back-left" | "back-right";
+
+declare class IsometricCubeSide {
+    readonly side: _angular_core.InputSignal<CubeSides>;
+    protected readonly sideClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<IsometricCubeSide, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<IsometricCubeSide, "[isometricCubeSide]", never, { "side": { "alias": "isometricCubeSide"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { IsometricCube, IsometricCubeSide };
+export type { CubeSides };

package/types/isometric-angular-isometric-grid.d.ts

@@ -0,0 +1,22 @@
+import * as _angular_core from '@angular/core';
+import { SizeMultiplier, Position, Shadow, ShadowAnimation, Rotation, ɵCSSVariables as _CSSVariables } from 'isometric-angular/core';
+
+declare class IsometricGrid {
+    readonly size: _angular_core.InputSignal<string | number>;
+    readonly sizeMultiplier: _angular_core.InputSignal<SizeMultiplier | undefined>;
+    readonly color: _angular_core.InputSignal<string>;
+    readonly lineweight: _angular_core.InputSignal<string | number | undefined>;
+    readonly position: _angular_core.InputSignal<Position | undefined>;
+    readonly shadow: _angular_core.InputSignal<Shadow | undefined>;
+    readonly shadowAnimation: _angular_core.InputSignal<ShadowAnimation | undefined>;
+    readonly rotation: _angular_core.InputSignal<Rotation | undefined>;
+    protected readonly positionVariables: _angular_core.Signal<_CSSVariables | undefined>;
+    protected readonly shadowVariables: _angular_core.Signal<_CSSVariables | undefined>;
+    protected readonly shadowAnimationVariables: _angular_core.Signal<_CSSVariables | undefined>;
+    protected readonly rotationVariables: _angular_core.Signal<_CSSVariables | undefined>;
+    protected readonly styles: _angular_core.Signal<_CSSVariables>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<IsometricGrid, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<IsometricGrid, "[isometric-grid]", never, { "size": { "alias": "size"; "required": true; "isSignal": true; }; "sizeMultiplier": { "alias": "sizeMultiplier"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "lineweight": { "alias": "lineweight"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "shadow": { "alias": "shadow"; "required": false; "isSignal": true; }; "shadowAnimation": { "alias": "shadowAnimation"; "required": false; "isSignal": true; }; "rotation": { "alias": "rotation"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { IsometricGrid };

package/types/isometric-angular-isometric-plane.d.ts

@@ -0,0 +1,25 @@
+import * as _angular_core from '@angular/core';
+import { SizeAsObject, Position, Border, Edge, Shadow, ShadowAnimation, Rotation, ɵCSSVariables as _CSSVariables } from 'isometric-angular/core';
+
+declare class IsometricPlane {
+    readonly size: _angular_core.InputSignal<SizeAsObject>;
+    readonly color: _angular_core.InputSignal<string>;
+    readonly position: _angular_core.InputSignal<Position | undefined>;
+    readonly border: _angular_core.InputSignal<Border | undefined>;
+    readonly edge: _angular_core.InputSignal<Edge | undefined>;
+    readonly shadow: _angular_core.InputSignal<Shadow | undefined>;
+    readonly shadowAnimation: _angular_core.InputSignal<ShadowAnimation | undefined>;
+    readonly rotation: _angular_core.InputSignal<Rotation | undefined>;
+    protected readonly sizeVariables: _angular_core.Signal<_CSSVariables>;
+    protected readonly positionVariables: _angular_core.Signal<_CSSVariables | undefined>;
+    protected readonly borderVariables: _angular_core.Signal<_CSSVariables | undefined>;
+    protected readonly edgeVariables: _angular_core.Signal<_CSSVariables | undefined>;
+    protected readonly shadowVariables: _angular_core.Signal<_CSSVariables | undefined>;
+    protected readonly shadowAnimationVariables: _angular_core.Signal<_CSSVariables | undefined>;
+    protected readonly rotationVariables: _angular_core.Signal<_CSSVariables | undefined>;
+    protected readonly styles: _angular_core.Signal<_CSSVariables>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<IsometricPlane, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<IsometricPlane, "[isometric-plane]", never, { "size": { "alias": "size"; "required": true; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "border": { "alias": "border"; "required": false; "isSignal": true; }; "edge": { "alias": "edge"; "required": false; "isSignal": true; }; "shadow": { "alias": "shadow"; "required": false; "isSignal": true; }; "shadowAnimation": { "alias": "shadowAnimation"; "required": false; "isSignal": true; }; "rotation": { "alias": "rotation"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { IsometricPlane };

package/types/isometric-angular.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from '@angular/core';
+import { ClassValue } from 'isometric-angular/core';
+export { Border, ClassValue, Edge, Position, Rotation, Shadow, ShadowAnimation, SizeAsObject, SizeMultiplier, SizeProps } from 'isometric-angular/core';
+
+declare class Isometric {
+    readonly isometricClass: i0.InputSignal<ClassValue>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Isometric, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Isometric, "[isometric-root]", never, { "isometricClass": { "alias": "isometricClass"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { Isometric };