fix: Move control styles to presentational components

- Moved brightness control styles from container SASS to BrightnessControlsComponent
- Moved zoom control styles from container SASS to ZoomControlsComponent
- Fixed Angular view encapsulation issue preventing styles from applying
- Added @brianpooe/ngx-pinch-zoom path mapping to tsconfig.json
- Updated app component to import from @brianpooe/ngx-pinch-zoom

This fixes the issue where control icons were not visible due to Angular's
view encapsulation preventing parent component styles from applying to
child presentational components. Each component now contains its own styles.

projects/ngx-pinch-zoom/src/lib/components/presentational/brightness-controls/brightness-controls.component.ts

@@ -31,7 +31,49 @@ import { Component, input, output } from '@angular/core';
             ></div>
         </div>
     `,
-    styles: [],
+    styles: [`
+        .pz-brightness-controls {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+        }
+
+        .pz-brightness-button {
+            position: relative;
+            width: 48px;
+            height: 48px;
+            background-color: rgba(0, 0, 0, .8);
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: 24px;
+            border-radius: 4px;
+            opacity: 0.5;
+            cursor: pointer;
+            transition: opacity .1s;
+            user-select: none;
+        }
+
+        .pz-brightness-button:hover {
+            opacity: 0.7;
+        }
+
+        .pz-brightness-button-disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+        }
+
+        .pz-brightness-button-disabled:hover {
+            opacity: 0.3;
+        }
+
+        .pz-brightness-increase {
+            background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0yMCA4LjY5VjRoLTQuNjlMMTIgLjY5IDguNjkgNEg0djQuNjlMLjY5IDEyIDQgMTUuMzFWMjBoNC42OUwxMiAyMy4zMSAxNS4zMSAyMEgyMHYtNC42OUwyMy4zMSAxMiAyMCA4LjY5ek0xMiAxOGMtMy4zMSAwLTYtMi42OS02LTZzMi42OS02IDYtNiA2IDIuNjkgNiA2LTIuNjkgNi02IDZ6bTAtMTBjLTIuMjEgMC00IDEuNzktNCA0czEuNzkgNCA0IDQgNC0xLjc5IDQtNC0xLjc5LTQtNC00eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);
+        }
+
+        .pz-brightness-decrease {
+            background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0yMCA4LjY5VjRoLTQuNjlMMTIgLjY5IDguNjkgNEg0djQuNjlMLjY5IDEyIDQgMTUuMzFWMjBoNC42OUwxMiAyMy4zMSAxNS4zMSAyMEgyMHYtNC42OUwyMy4zMSAxMiAyMCA4LjY5ek0xMiAxOGMtMy4zMSAwLTYtMi42OS02LTZzMi42OS02IDYtNiA2IDIuNjkgNiA2LTIuNjkgNi02IDZ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
+        }
+    `],
 })
 export class BrightnessControlsComponent {
     // Inputs

projects/ngx-pinch-zoom/src/lib/components/presentational/zoom-controls/zoom-controls.component.ts

@@ -19,7 +19,31 @@ import { Component, input, output } from '@angular/core';
             tabindex="0"
         ></div>
     `,
-    styles: [],
+    styles: [`
+        .pz-zoom-button {
+            color: #fff;
+            background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgc3R5bGU9IiI+PHJlY3QgaWQ9ImJhY2tncm91bmRyZWN0IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4PSIwIiB5PSIwIiBmaWxsPSJub25lIiBzdHJva2U9Im5vbmUiLz48ZyBjbGFzcz0iY3VycmVudExheWVyIiBzdHlsZT0iIj48dGl0bGU+TGF5ZXIgMTwvdGl0bGU+PHBhdGggZD0iTTE1LjUgMTRoLS43OWwtLjI4LS4yN0MxNS40MSAxMi41OSAxNiAxMS4xMSAxNiA5LjUgMTYgNS45MSAxMy4wOSAzIDkuNSAzUzMgNS45MSAzIDkuNSA1LjkxIDE2IDkuNSAxNmMxLjYxIDAgMy4wOS0uNTkgNC4yMy0xLjU3bC4yNy4yOHYuNzlsNSA0Ljk5TDIwLjQ5IDE5bC00Ljk5LTV6bS02IDBDNy4wMSAxNCA1IDExLjk5IDUgOS41UzcuMDEgNSA5LjUgNSAxNCA3LjAxIDE0IDkuNSAxMS45OSAxNCA5LjUgMTR6IiBpZD0ic3ZnXzEiIGNsYXNzPSIiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMSIvPjxwYXRoIGQ9Ik0xMiAxMGgtMnYySDl2LTJIN1Y5aDJWN2gxdjJoMnYxeiIgaWQ9InN2Z18zIiBjbGFzcz0iIiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjEiLz48L2c+PC9zdmc+), url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHJlY3QgaWQ9ImJhY2tncm91bmRyZWN0IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4PSIwIiB5PSIwIiBmaWxsPSJub25lIiBzdHJva2U9Im5vbmUiLz48ZyBjbGFzcz0iY3VycmVudExheWVyIiBzdHlsZT0iIj48dGl0bGU+TGF5ZXIgMTwvdGl0bGU+PHBhdGggZD0iTTE1LjUgMTRoLS43OWwtLjI4LS4yN0MxNS40MSAxMi41OSAxNiAxMS4xMSAxNiA5LjUgMTYgNS45MSAxMy4wOSAzIDkuNSAzUzMgNS45MSAzIDkuNSA1LjkxIDE2IDkuNSAxNmMxLjYxIDAgMy4wOS0uNTkgNC4yMy0xLjU3bC4yNy4yOHYuNzlsNSA0Ljk5TDIwLjQ5IDE5bC00Ljk5LTV6bS02IDBDNy4wMSAxNCA1IDExLjk5IDUgOS41UzcuMDEgNSA5LjUgNSAxNCA3LjAxIDE0IDkuNSAxMS45OSAxNCA5LjUgMTR6TTcgOWg1djFIN3oiIGlkPSJzdmdfMiIgY2xhc3M9IiIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIxIi8+PC9nPjwvc3ZnPg==);
+            background-color: rgba(0, 0, 0, .8);
+            background-position: center, -1000px;
+            background-repeat: no-repeat, no-repeat;
+            background-size: 40px;
+            width: 56px;
+            height: 56px;
+            border-radius: 4px;
+            opacity: 0.5;
+            cursor: pointer;
+            transition: opacity .1s;
+            user-select: none;
+        }
+
+        .pz-zoom-button-out {
+            background-position: -1000px, center;
+        }
+
+        .pz-zoom-button:hover {
+            opacity: 0.7;
+        }
+    `],
 })
 export class ZoomControlsComponent {
     // Inputs

src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component, signal } from '@angular/core';
-import { PinchZoomComponent } from 'ngx-pinch-zoom';
+import { PinchZoomComponent } from '@brianpooe/ngx-pinch-zoom';
 
 /**
  * Example app demonstrating all ngx-pinch-zoom features.

tsconfig.json

@@ -14,7 +14,8 @@
         "strict": true,
         "strictNullChecks": true,
         "paths": {
-            "ngx-pinch-zoom": ["dist/ngx-pinch-zoom/ngx-pinch-zoom", "dist/ngx-pinch-zoom"]
+            "ngx-pinch-zoom": ["dist/ngx-pinch-zoom/ngx-pinch-zoom", "dist/ngx-pinch-zoom"],
+            "@brianpooe/ngx-pinch-zoom": ["dist/ngx-pinch-zoom/ngx-pinch-zoom", "dist/ngx-pinch-zoom"]
         },
         "target": "ES2022",
         "module": "ES2022",