ngx-liquid-glazz 0.1.0

package/README.md

@@ -0,0 +1,125 @@
+# ngx-liquid-glazz
+
+![hero](https://raw.githubusercontent.com/z4kettan/ios_liquid_glass/main/docs/hero.gif)
+
+**Real iOS-style "Liquid Glass" for Angular** — actual refraction via an SVG
+displacement filter (`feTurbulence` + `feGaussianBlur` + `feDisplacementMap`), layered
+with a frost/tint pass and specular edge highlights. Not another `backdrop-filter: blur()`
+glassmorphism wrapper — the backdrop actually bends.
+
+There was no Angular package for this effect (the space was React-only). This is a single
+standalone directive: works on cards, buttons, navbars — anything.
+
+## Install
+
+```bash
+npm install ngx-liquid-glazz
+```
+
+Import the base stylesheet once, globally (`angular.json` `styles` array, or a global `@import`):
+
+```css
+@import 'ngx-liquid-glazz/styles';
+```
+
+## Quickstart
+
+```ts
+import { Component } from '@angular/core';
+import { LiquidGlassDirective } from 'ngx-liquid-glazz';
+
+@Component({
+  selector: 'app-card',
+  standalone: true,
+  imports: [LiquidGlassDirective],
+  template: `
+    <div liquidGlass [displacementScale]="90" [blur]="4" class="card">
+      <h2>Frosted &amp; refracted</h2>
+      <p>Real glass, not just blur.</p>
+    </div>
+  `,
+  styles: `
+    .card {
+      padding: 2rem;
+      border-radius: 24px;
+    }
+  `,
+})
+export class CardComponent {}
+```
+
+That's it — no module, no providers required. The directive reacts to input changes live,
+so binding sliders or state to any input updates the glass in real time.
+
+## Inputs
+
+| Input                | Type      | Default                    | Description                                                  |
+| --------------------- | --------- | --------------------------- | ------------------------------------------------------------- |
+| `displacementScale`  | `number`  | `70`                       | Refraction strength — maps to the SVG `feDisplacementMap` `scale`. |
+| `blur`                | `number`  | `3`                         | Frost blur, in px.                                            |
+| `saturation`          | `number`  | `180`                       | Backdrop saturation, in percent.                               |
+| `brightness`          | `number`  | `1.08`                      | Backdrop brightness multiplier.                                |
+| `tint`                | `string`  | `'rgba(255,255,255,0.04)'` | Tint color layered over the refracted backdrop.                |
+| `radius`              | `string`  | `'24px'`                   | Corner radius.                                                 |
+| `specular`            | `boolean` | `true`                      | Toggles the specular edge-highlight inset shadows.              |
+
+## App-wide defaults
+
+Override the built-in defaults once for the whole app with `provideLiquidGlassConfig()`.
+Directive inputs still take precedence over whatever's configured here.
+
+```ts
+import { bootstrapApplication } from '@angular/platform-browser';
+import { provideLiquidGlassConfig } from 'ngx-liquid-glazz';
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideLiquidGlassConfig({
+      blur: 6,
+      tint: 'rgba(0,0,0,0.08)',
+    }),
+  ],
+});
+```
+
+Precedence: **directive input > `provideLiquidGlassConfig()` > built-in default.**
+
+## Browser support
+
+The refraction (`backdrop-filter: url(#svg-filter)`) is a Chromium-only feature today.
+
+| Browser         | Result                                              |
+| ---------------- | ---------------------------------------------------- |
+| Chrome / Edge    | Full effect — real refraction + frost + specular.    |
+| Safari / Firefox | Graceful fallback to `blur(14px) saturate(180%)` — still a premium frosted-glass look, never broken. |
+
+## Angular version support
+
+| ngx-liquid-glazz | Angular        |
+| ------------------ | -------------- |
+| `0.1.x`            | `17.1 – 22.x`  |
+
+- **Standalone-only** — no `NgModule`.
+- **Zoneless-ready** — the directive updates purely through `effect()` writing CSS custom
+  properties; it never depends on `Zone.js` change detection.
+- **`OnPush`-safe** — DOM updates aren't gated on change detection at all, so it's a natural
+  fit for Angular 22's `OnPush`-by-default and zoneless-by-default apps.
+
+## SSR
+
+Works out of the box with Angular SSR (`ng new --ssr`). All DOM work happens inside
+`afterNextRender()`, so the directive no-ops cleanly on the server and picks up on hydration.
+
+## How it works
+
+- A root-provided service injects a single SVG `<filter>` (per distinct `displacementScale`
+  value in use) into `document.body`, ref-counted across directive instances.
+- The directive applies `backdrop-filter: url(#the-filter) blur(...) saturate(...) brightness(...)`
+  to a `::before` layer, a tint to `::after`, and specular highlights via inset `box-shadow` —
+  all driven by CSS custom properties (`--lg-blur`, `--lg-tint`, etc.) so runtime input changes
+  update instantly with zero re-render cost.
+- It never restructures your host element's content — apply it to anything.
+
+## License
+
+MIT

package/esm2022/lib/liquid-glass-config.mjs

@@ -0,0 +1,10 @@
+export const DEFAULT_LIQUID_GLASS_CONFIG = {
+    displacementScale: 70,
+    blur: 3,
+    saturation: 180,
+    brightness: 1.08,
+    tint: 'rgba(255,255,255,0.04)',
+    radius: '24px',
+    specular: true,
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlxdWlkLWdsYXNzLWNvbmZpZy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1saXF1aWQtZ2xhc3Mvc3JjL2xpYi9saXF1aWQtZ2xhc3MtY29uZmlnLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNCQSxNQUFNLENBQUMsTUFBTSwyQkFBMkIsR0FBc0I7SUFDNUQsaUJBQWlCLEVBQUUsRUFBRTtJQUNyQixJQUFJLEVBQUUsQ0FBQztJQUNQLFVBQVUsRUFBRSxHQUFHO0lBQ2YsVUFBVSxFQUFFLElBQUk7SUFDaEIsSUFBSSxFQUFFLHdCQUF3QjtJQUM5QixNQUFNLEVBQUUsTUFBTTtJQUNkLFFBQVEsRUFBRSxJQUFJO0NBQ2YsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQXBwLXdpZGUgdHVuYWJsZXMgZm9yIHRoZSBMaXF1aWQgR2xhc3MgZWZmZWN0LlxuICogRXZlcnkgZmllbGQgaXMgb3B0aW9uYWwgc28gY2FsbGVycyBjYW4gb3ZlcnJpZGUganVzdCB0aGUgZGVmYXVsdHMgdGhleSBjYXJlIGFib3V0LlxuICogUHJlY2VkZW5jZSAoaGlnaGVzdCB0byBsb3dlc3QpOiBkaXJlY3RpdmUgaW5wdXQgPiBwcm92aWRlTGlxdWlkR2xhc3NDb25maWcoKSA+IGJ1aWx0LWluIGRlZmF1bHQuXG4gKi9cbmV4cG9ydCBpbnRlcmZhY2UgTGlxdWlkR2xhc3NDb25maWcge1xuICAvKiogUmVmcmFjdGlvbiBzdHJlbmd0aCwgbWFwcyB0byB0aGUgU1ZHIGBmZURpc3BsYWNlbWVudE1hcGAgYHNjYWxlYCBhdHRyaWJ1dGUuICovXG4gIGRpc3BsYWNlbWVudFNjYWxlOiBudW1iZXI7XG4gIC8qKiBGcm9zdCBibHVyIGluIHB4LCBtYXBzIHRvIGAtLWxnLWJsdXJgLiAqL1xuICBibHVyOiBudW1iZXI7XG4gIC8qKiBCYWNrZHJvcCBzYXR1cmF0aW9uIHBlcmNlbnQsIG1hcHMgdG8gYC0tbGctc2F0dXJhdGlvbmAuICovXG4gIHNhdHVyYXRpb246IG51bWJlcjtcbiAgLyoqIEJhY2tkcm9wIGJyaWdodG5lc3MgbXVsdGlwbGllciwgbWFwcyB0byBgLS1sZy1icmlnaHRuZXNzYC4gKi9cbiAgYnJpZ2h0bmVzczogbnVtYmVyO1xuICAvKiogVGludCBjb2xvciBsYXllcmVkIG92ZXIgdGhlIHJlZnJhY3RlZCBiYWNrZHJvcCwgbWFwcyB0byBgLS1sZy10aW50YC4gKi9cbiAgdGludDogc3RyaW5nO1xuICAvKiogQ29ybmVyIHJhZGl1cywgbWFwcyB0byBgLS1sZy1yYWRpdXNgLiAqL1xuICByYWRpdXM6IHN0cmluZztcbiAgLyoqIFdoZXRoZXIgdG8gcmVuZGVyIHRoZSBzcGVjdWxhciBlZGdlLWhpZ2hsaWdodCBpbnNldCBzaGFkb3dzLiAqL1xuICBzcGVjdWxhcjogYm9vbGVhbjtcbn1cblxuZXhwb3J0IGNvbnN0IERFRkFVTFRfTElRVUlEX0dMQVNTX0NPTkZJRzogTGlxdWlkR2xhc3NDb25maWcgPSB7XG4gIGRpc3BsYWNlbWVudFNjYWxlOiA3MCxcbiAgYmx1cjogMyxcbiAgc2F0dXJhdGlvbjogMTgwLFxuICBicmlnaHRuZXNzOiAxLjA4LFxuICB0aW50OiAncmdiYSgyNTUsMjU1LDI1NSwwLjA0KScsXG4gIHJhZGl1czogJzI0cHgnLFxuICBzcGVjdWxhcjogdHJ1ZSxcbn07XG4iXX0=

package/esm2022/lib/liquid-glass-config.token.mjs

@@ -0,0 +1,20 @@
+import { InjectionToken } from '@angular/core';
+/**
+ * Holds only the overrides passed to `provideLiquidGlassConfig()`, never the built-in defaults.
+ * Keeping it partial lets the directive distinguish "not provided" from "explicitly set to a
+ * falsy value" when computing precedence against its own inputs.
+ */
+export const LIQUID_GLASS_CONFIG = new InjectionToken('LIQUID_GLASS_CONFIG');
+/**
+ * Overrides the app-wide Liquid Glass defaults. Directive inputs still take precedence over
+ * whatever is configured here.
+ *
+ * @example
+ * bootstrapApplication(AppComponent, {
+ *   providers: [provideLiquidGlassConfig({ blur: 6, tint: 'rgba(0,0,0,0.08)' })],
+ * });
+ */
+export function provideLiquidGlassConfig(config) {
+    return { provide: LIQUID_GLASS_CONFIG, useValue: config };
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlxdWlkLWdsYXNzLWNvbmZpZy50b2tlbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1saXF1aWQtZ2xhc3Mvc3JjL2xpYi9saXF1aWQtZ2xhc3MtY29uZmlnLnRva2VuLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxjQUFjLEVBQVksTUFBTSxlQUFlLENBQUM7QUFHekQ7Ozs7R0FJRztBQUNILE1BQU0sQ0FBQyxNQUFNLG1CQUFtQixHQUFHLElBQUksY0FBYyxDQUNuRCxxQkFBcUIsQ0FDdEIsQ0FBQztBQUVGOzs7Ozs7OztHQVFHO0FBQ0gsTUFBTSxVQUFVLHdCQUF3QixDQUFDLE1BQWtDO0lBQ3pFLE9BQU8sRUFBRSxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsUUFBUSxFQUFFLE1BQU0sRUFBRSxDQUFDO0FBQzVELENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJbmplY3Rpb25Ub2tlbiwgUHJvdmlkZXIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IExpcXVpZEdsYXNzQ29uZmlnIH0gZnJvbSAnLi9saXF1aWQtZ2xhc3MtY29uZmlnJztcblxuLyoqXG4gKiBIb2xkcyBvbmx5IHRoZSBvdmVycmlkZXMgcGFzc2VkIHRvIGBwcm92aWRlTGlxdWlkR2xhc3NDb25maWcoKWAsIG5ldmVyIHRoZSBidWlsdC1pbiBkZWZhdWx0cy5cbiAqIEtlZXBpbmcgaXQgcGFydGlhbCBsZXRzIHRoZSBkaXJlY3RpdmUgZGlzdGluZ3Vpc2ggXCJub3QgcHJvdmlkZWRcIiBmcm9tIFwiZXhwbGljaXRseSBzZXQgdG8gYVxuICogZmFsc3kgdmFsdWVcIiB3aGVuIGNvbXB1dGluZyBwcmVjZWRlbmNlIGFnYWluc3QgaXRzIG93biBpbnB1dHMuXG4gKi9cbmV4cG9ydCBjb25zdCBMSVFVSURfR0xBU1NfQ09ORklHID0gbmV3IEluamVjdGlvblRva2VuPFBhcnRpYWw8TGlxdWlkR2xhc3NDb25maWc+PihcbiAgJ0xJUVVJRF9HTEFTU19DT05GSUcnLFxuKTtcblxuLyoqXG4gKiBPdmVycmlkZXMgdGhlIGFwcC13aWRlIExpcXVpZCBHbGFzcyBkZWZhdWx0cy4gRGlyZWN0aXZlIGlucHV0cyBzdGlsbCB0YWtlIHByZWNlZGVuY2Ugb3ZlclxuICogd2hhdGV2ZXIgaXMgY29uZmlndXJlZCBoZXJlLlxuICpcbiAqIEBleGFtcGxlXG4gKiBib290c3RyYXBBcHBsaWNhdGlvbihBcHBDb21wb25lbnQsIHtcbiAqICAgcHJvdmlkZXJzOiBbcHJvdmlkZUxpcXVpZEdsYXNzQ29uZmlnKHsgYmx1cjogNiwgdGludDogJ3JnYmEoMCwwLDAsMC4wOCknIH0pXSxcbiAqIH0pO1xuICovXG5leHBvcnQgZnVuY3Rpb24gcHJvdmlkZUxpcXVpZEdsYXNzQ29uZmlnKGNvbmZpZzogUGFydGlhbDxMaXF1aWRHbGFzc0NvbmZpZz4pOiBQcm92aWRlciB7XG4gIHJldHVybiB7IHByb3ZpZGU6IExJUVVJRF9HTEFTU19DT05GSUcsIHVzZVZhbHVlOiBjb25maWcgfTtcbn1cbiJdfQ==

package/esm2022/lib/liquid-glass-filter.service.mjs

@@ -0,0 +1,113 @@
+import { DOCUMENT } from '@angular/common';
+import { Injectable, inject } from '@angular/core';
+import * as i0 from "@angular/core";
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const HOST_ID = 'ngx-liquid-glass-filter-host';
+const FILTER_ID_PREFIX = 'ngx-liquid-glass-filter';
+/**
+ * Owns the SVG `<filter>` definitions that power the refraction effect and injects them into
+ * `document.body`.
+ *
+ * `scale` (feDisplacementMap's `scale` attribute) is the one filter parameter that can't be
+ * shared across all directive instances the way the rest of the CSS-custom-property-driven
+ * styling is, because SVG filter primitives don't accept CSS custom properties as attribute
+ * values. Instead of generating a new filter per instance (wasteful) or a single shared filter
+ * (loses per-instance tuning), this service ref-counts one `<filter>` element per distinct scale
+ * value: directives that share a scale share a filter; a filter is removed from the DOM once
+ * its last consumer is destroyed.
+ */
+export class LiquidGlassFilterService {
+    document = inject(DOCUMENT);
+    refCounts = new Map();
+    svgRoot = null;
+    /** Registers a consumer of the filter for `scale`, creating it if this is the first. Returns the element ID to reference via `url(#id)`. */
+    acquire(scale) {
+        const id = this.filterId(scale);
+        const count = this.refCounts.get(scale) ?? 0;
+        this.refCounts.set(scale, count + 1);
+        if (count === 0) {
+            this.injectFilter(id, scale);
+        }
+        return id;
+    }
+    /** Releases a consumer's hold on `scale`'s filter, removing it from the DOM once no consumers remain. */
+    release(scale) {
+        const count = this.refCounts.get(scale) ?? 0;
+        if (count <= 1) {
+            this.refCounts.delete(scale);
+            this.removeFilter(this.filterId(scale));
+            return;
+        }
+        this.refCounts.set(scale, count - 1);
+    }
+    filterId(scale) {
+        return `${FILTER_ID_PREFIX}-${scale}`;
+    }
+    injectFilter(id, scale) {
+        // Hydration / multiple-app-instance guard: another instance (or a prior SSR pass) may have
+        // already injected this exact filter into the DOM.
+        if (this.document.getElementById(id)) {
+            return;
+        }
+        const svg = this.getOrCreateSvgRoot();
+        const filter = this.document.createElementNS(SVG_NS, 'filter');
+        filter.setAttribute('id', id);
+        filter.setAttribute('x', '-20%');
+        filter.setAttribute('y', '-20%');
+        filter.setAttribute('width', '140%');
+        filter.setAttribute('height', '140%');
+        filter.setAttribute('color-interpolation-filters', 'sRGB');
+        const turbulence = this.document.createElementNS(SVG_NS, 'feTurbulence');
+        turbulence.setAttribute('type', 'fractalNoise');
+        turbulence.setAttribute('baseFrequency', '0.008 0.008');
+        turbulence.setAttribute('numOctaves', '2');
+        turbulence.setAttribute('seed', '92');
+        turbulence.setAttribute('result', 'noise');
+        const gaussianBlur = this.document.createElementNS(SVG_NS, 'feGaussianBlur');
+        gaussianBlur.setAttribute('in', 'noise');
+        gaussianBlur.setAttribute('stdDeviation', '2');
+        gaussianBlur.setAttribute('result', 'blurred');
+        const displacementMap = this.document.createElementNS(SVG_NS, 'feDisplacementMap');
+        displacementMap.setAttribute('in', 'SourceGraphic');
+        displacementMap.setAttribute('in2', 'blurred');
+        displacementMap.setAttribute('scale', String(scale));
+        displacementMap.setAttribute('xChannelSelector', 'R');
+        displacementMap.setAttribute('yChannelSelector', 'G');
+        filter.append(turbulence, gaussianBlur, displacementMap);
+        svg.querySelector('defs').appendChild(filter);
+    }
+    removeFilter(id) {
+        this.document.getElementById(id)?.remove();
+    }
+    getOrCreateSvgRoot() {
+        if (this.svgRoot?.isConnected) {
+            return this.svgRoot;
+        }
+        const existing = this.document.getElementById(HOST_ID);
+        if (existing instanceof SVGSVGElement) {
+            this.svgRoot = existing;
+            return existing;
+        }
+        const svg = this.document.createElementNS(SVG_NS, 'svg');
+        svg.setAttribute('id', HOST_ID);
+        svg.setAttribute('aria-hidden', 'true');
+        svg.setAttribute('focusable', 'false');
+        svg.style.position = 'absolute';
+        svg.style.width = '0';
+        svg.style.height = '0';
+        svg.style.overflow = 'hidden';
+        svg.style.pointerEvents = 'none';
+        const defs = this.document.createElementNS(SVG_NS, 'defs');
+        svg.appendChild(defs);
+        this.document.body.appendChild(svg);
+        this.svgRoot = svg;
+        return svg;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LiquidGlassFilterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LiquidGlassFilterService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LiquidGlassFilterService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlxdWlkLWdsYXNzLWZpbHRlci5zZXJ2aWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWxpcXVpZC1nbGFzcy9zcmMvbGliL2xpcXVpZC1nbGFzcy1maWx0ZXIuc2VydmljZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDM0MsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBRW5ELE1BQU0sTUFBTSxHQUFHLDRCQUE0QixDQUFDO0FBQzVDLE1BQU0sT0FBTyxHQUFHLDhCQUE4QixDQUFDO0FBQy9DLE1BQU0sZ0JBQWdCLEdBQUcseUJBQXlCLENBQUM7QUFFbkQ7Ozs7Ozs7Ozs7O0dBV0c7QUFFSCxNQUFNLE9BQU8sd0JBQXdCO0lBQ2xCLFFBQVEsR0FBRyxNQUFNLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDNUIsU0FBUyxHQUFHLElBQUksR0FBRyxFQUFrQixDQUFDO0lBQy9DLE9BQU8sR0FBeUIsSUFBSSxDQUFDO0lBRTdDLDRJQUE0STtJQUM1SSxPQUFPLENBQUMsS0FBYTtRQUNuQixNQUFNLEVBQUUsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ2hDLE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUM3QyxJQUFJLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxLQUFLLEVBQUUsS0FBSyxHQUFHLENBQUMsQ0FBQyxDQUFDO1FBRXJDLElBQUksS0FBSyxLQUFLLENBQUMsRUFBRSxDQUFDO1lBQ2hCLElBQUksQ0FBQyxZQUFZLENBQUMsRUFBRSxFQUFFLEtBQUssQ0FBQyxDQUFDO1FBQy9CLENBQUM7UUFFRCxPQUFPLEVBQUUsQ0FBQztJQUNaLENBQUM7SUFFRCx5R0FB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LENBQUMsS0FBSyxDQUFDLEtBQUssR0FBRyxHQUFHLENBQUM7UUFDdEIsR0FBRyxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsR0FBRyxDQUFDO1FBQ3ZCLEdBQUcsQ0FBQyxLQUFLLENBQUMsUUFBUSxHQUFHLFFBQVEsQ0FBQztRQUM5QixHQUFHLENBQUMsS0FBSyxDQUFDLGFBQWEsR0FBRyxNQUFNLENBQUM7UUFFakMsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxlQUFlLENBQUMsTUFBTSxFQUFFLE1BQU0sQ0FBQyxDQUFDO1FBQzNELEdBQUcsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLENBQUM7UUFFdEIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLEdBQUcsQ0FBQyxDQUFDO1FBQ3BDLElBQUksQ0FBQyxPQUFPLEdBQUcsR0FBRyxDQUFDO1FBQ25CLE9BQU8sR0FBRyxDQUFDO0lBQ2IsQ0FBQzt3R0F4R1Usd0JBQXdCOzRHQUF4Qix3QkFBd0IsY0FEWCxNQUFNOzs0RkFDbkIsd0JBQXdCO2tCQURwQyxVQUFVO21CQUFDLEVBQUUsVUFBVSxFQUFFLE1BQU0sRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERPQ1VNRU5UIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IEluamVjdGFibGUsIGluamVjdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5jb25zdCBTVkdfTlMgPSAnaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnO1xuY29uc3QgSE9TVF9JRCA9ICduZ3gtbGlxdWlkLWdsYXNzLWZpbHRlci1ob3N0JztcbmNvbnN0IEZJTFRFUl9JRF9QUkVGSVggPSAnbmd4LWxpcXVpZC1nbGFzcy1maWx0ZXInO1xuXG4vKipcbiAqIE93bnMgdGhlIFNWRyBgPGZpbHRlcj5gIGRlZmluaXRpb25zIHRoYXQgcG93ZXIgdGhlIHJlZnJhY3Rpb24gZWZmZWN0IGFuZCBpbmplY3RzIHRoZW0gaW50b1xuICogYGRvY3VtZW50LmJvZHlgLlxuICpcbiAqIGBzY2FsZWAgKGZlRGlzcGxhY2VtZW50TWFwJ3MgYHNjYWxlYCBhdHRyaWJ1dGUpIGlzIHRoZSBvbmUgZmlsdGVyIHBhcmFtZXRlciB0aGF0IGNhbid0IGJlXG4gKiBzaGFyZWQgYWNyb3NzIGFsbCBkaXJlY3RpdmUgaW5zdGFuY2VzIHRoZSB3YXkgdGhlIHJlc3Qgb2YgdGhlIENTUy1jdXN0b20tcHJvcGVydHktZHJpdmVuXG4gKiBzdHlsaW5nIGlzLCBiZWNhdXNlIFNWRyBmaWx0ZXIgcHJpbWl0aXZlcyBkb24ndCBhY2NlcHQgQ1NTIGN1c3RvbSBwcm9wZXJ0aWVzIGFzIGF0dHJpYnV0ZVxuICogdmFsdWVzLiBJbnN0ZWFkIG9mIGdlbmVyYXRpbmcgYSBuZXcgZmlsdGVyIHBlciBpbnN0YW5jZSAod2FzdGVmdWwpIG9yIGEgc2luZ2xlIHNoYXJlZCBmaWx0ZXJcbiAqIChsb3NlcyBwZXItaW5zdGFuY2UgdHVuaW5nKSwgdGhpcyBzZXJ2aWNlIHJlZi1jb3VudHMgb25lIGA8ZmlsdGVyPmAgZWxlbWVudCBwZXIgZGlzdGluY3Qgc2NhbGVcbiAqIHZhbHVlOiBkaXJlY3RpdmVzIHRoYXQgc2hhcmUgYSBzY2FsZSBzaGFyZSBhIGZpbHRlcjsgYSBmaWx0ZXIgaXMgcmVtb3ZlZCBmcm9tIHRoZSBET00gb25jZVxuICogaXRzIGxhc3QgY29uc3VtZXIgaXMgZGVzdHJveWVkLlxuICovXG5ASW5qZWN0YWJsZSh7IHByb3ZpZGVkSW46ICdyb290JyB9KVxuZXhwb3J0IGNsYXNzIExpcXVpZEdsYXNzRmlsdGVyU2VydmljZSB7XG4gIHByaXZhdGUgcmVhZG9ubHkgZG9jdW1lbnQgPSBpbmplY3QoRE9DVU1FTlQpO1xuICBwcml2YXRlIHJlYWRvbmx5IHJlZkNvdW50cyA9IG5ldyBNYXA8bnVtYmVyLCBudW1iZXI+KCk7XG4gIHByaXZhdGUgc3ZnUm9vdDogU1ZHU1ZHRWxlbWVudCB8IG51bGwgPSBudWxsO1xuXG4gIC8qKiBSZWdpc3RlcnMgYSBjb25zdW1lciBvZiB0aGUgZmlsdGVyIGZvciBgc2NhbGVgLCBjcmVhdGluZyBpdCBpZiB0aGlzIGlzIHRoZSBmaXJzdC4gUmV0dXJucyB0aGUgZWxlbWVudCBJRCB0byByZWZlcmVuY2UgdmlhIGB1cmwoI2lkKWAuICovXG4gIGFjcXVpcmUoc2NhbGU6IG51bWJlcik6IHN0cmluZyB7XG4gICAgY29uc3QgaWQgPSB0aGlzLmZpbHRlcklkKHNjYWxlKTtcbiAgICBjb25zdCBjb3VudCA9IHRoaXMucmVmQ291bnRzLmdldChzY2FsZSkgPz8gMDtcbiAgICB0aGlzLnJlZkNvdW50cy5zZXQoc2NhbGUsIGNvdW50ICsgMSk7XG5cbiAgICBpZiAoY291bnQgPT09IDApIHtcbiAgICAgIHRoaXMuaW5qZWN0RmlsdGVyKGlkLCBzY2FsZSk7XG4gICAgfVxuXG4gICAgcmV0dXJuIGlkO1xuICB9XG5cbiAgLyoqIFJlbGVhc2VzIGEgY29uc3VtZXIncyBob2xkIG9uIGBzY2FsZWAncyBmaWx0ZXIsIHJlbW92aW5nIGl0IGZyb20gdGhlIERPTSBvbmNlIG5vIGNvbnN1bWVycyByZW1haW4uICovXG4gIHJlbGVhc2Uoc2NhbGU6IG51bWJlcik6IHZvaWQge1xuICAgIGNvbnN0IGNvdW50ID0gdGhpcy5yZWZDb3VudHMuZ2V0KHNjYWxlKSA/PyAwO1xuICAgIGlmIChjb3VudCA8PSAxKSB7XG4gICAgICB0aGlzLnJlZkNvdW50cy5kZWxldGUoc2NhbGUpO1xuICAgICAgdGhpcy5yZW1vdmVGaWx0ZXIodGhpcy5maWx0ZXJJZChzY2FsZSkpO1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICB0aGlzLnJlZkNvdW50cy5zZXQoc2NhbGUsIGNvdW50IC0gMSk7XG4gIH1cblxuICBwcml2YXRlIGZpbHRlcklkKHNjYWxlOiBudW1iZXIpOiBzdHJpbmcge1xuICAgIHJldHVybiBgJHtGSUxURVJfSURfUFJFRklYfS0ke3NjYWxlfWA7XG4gIH1cblxuICBwcml2YXRlIGluamVjdEZpbHRlcihpZDogc3RyaW5nLCBzY2FsZTogbnVtYmVyKTogdm9pZCB7XG4gICAgLy8gSHlkcmF0aW9uIC8gbXVsdGlwbGUtYXBwLWluc3RhbmNlIGd1YXJkOiBhbm90aGVyIGluc3RhbmNlIChvciBhIHByaW9yIFNTUiBwYXNzKSBtYXkgaGF2ZVxuICAgIC8vIGFscmVhZHkgaW5qZWN0ZWQgdGhpcyBleGFjdCBmaWx0ZXIgaW50byB0aGUgRE9NLlxuICAgIGlmICh0aGlzLmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKGlkKSkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIGNvbnN0IHN2ZyA9IHRoaXMuZ2V0T3JDcmVhdGVTdmdSb290KCk7XG5cbiAgICBjb25zdCBmaWx0ZXIgPSB0aGlzLmRvY3VtZW50LmNyZWF0ZUVsZW1lbnROUyhTVkdfTlMsICdmaWx0ZXInKTtcbiAgICBmaWx0ZXIuc2V0QXR0cmlidXRlKCdpZCcsIGlkKTtcbiAgICBmaWx0ZXIuc2V0QXR0cmlidXRlKCd4JywgJy0yMCUnKTtcbiAgICBmaWx0ZXIuc2V0QXR0cmlidXRlKCd5JywgJy0yMCUnKTtcbiAgICBmaWx0ZXIuc2V0QXR0cmlidXRlKCd3aWR0aCcsICcxNDAlJyk7XG4gICAgZmlsdGVyLnNldEF0dHJpYnV0ZSgnaGVpZ2h0JywgJzE0MCUnKTtcbiAgICBmaWx0ZXIuc2V0QXR0cmlidXRlKCdjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnMnLCAnc1JHQicpO1xuXG4gICAgY29uc3QgdHVyYnVsZW5jZSA9IHRoaXMuZG9jdW1lbnQuY3JlYXRlRWxlbWVudE5TKFNWR19OUywgJ2ZlVHVyYnVsZW5jZScpO1xuICAgIHR1cmJ1bGVuY2Uuc2V0QXR0cmlidXRlKCd0eXBlJywgJ2ZyYWN0YWxOb2lzZScpO1xuICAgIHR1cmJ1bGVuY2Uuc2V0QXR0cmlidXRlKCdiYXNlRnJlcXVlbmN5JywgJzAuMDA4IDAuMDA4Jyk7XG4gICAgdHVyYnVsZW5jZS5zZXRBdHRyaWJ1dGUoJ251bU9jdGF2ZXMnLCAnMicpO1xuICAgIHR1cmJ1bGVuY2Uuc2V0QXR0cmlidXRlKCdzZWVkJywgJzkyJyk7XG4gICAgdHVyYnVsZW5jZS5zZXRBdHRyaWJ1dGUoJ3Jlc3VsdCcsICdub2lzZScpO1xuXG4gICAgY29uc3QgZ2F1c3NpYW5CbHVyID0gdGhpcy5kb2N1bWVudC5jcmVhdGVFbGVtZW50TlMoU1ZHX05TLCAnZmVHYXVzc2lhbkJsdXInKTtcbiAgICBnYXVzc2lhbkJsdXIuc2V0QXR0cmlidXRlKCdpbicsICdub2lzZScpO1xuICAgIGdhdXNzaWFuQmx1ci5zZXRBdHRyaWJ1dGUoJ3N0ZERldmlhdGlvbicsICcyJyk7XG4gICAgZ2F1c3NpYW5CbHVyLnNldEF0dHJpYnV0ZSgncmVzdWx0JywgJ2JsdXJyZWQnKTtcblxuICAgIGNvbnN0IGRpc3BsYWNlbWVudE1hcCA9IHRoaXMuZG9jdW1lbnQuY3JlYXRlRWxlbWVudE5TKFNWR19OUywgJ2ZlRGlzcGxhY2VtZW50TWFwJyk7XG4gICAgZGlzcGxhY2VtZW50TWFwLnNldEF0dHJpYnV0ZSgnaW4nLCAnU291cmNlR3JhcGhpYycpO1xuICAgIGRpc3BsYWNlbWVudE1hcC5zZXRBdHRyaWJ1dGUoJ2luMicsICdibHVycmVkJyk7XG4gICAgZGlzcGxhY2VtZW50TWFwLnNldEF0dHJpYnV0ZSgnc2NhbGUnLCBTdHJpbmcoc2NhbGUpKTtcbiAgICBkaXNwbGFjZW1lbnRNYXAuc2V0QXR0cmlidXRlKCd4Q2hhbm5lbFNlbGVjdG9yJywgJ1InKTtcbiAgICBkaXNwbGFjZW1lbnRNYXAuc2V0QXR0cmlidXRlKCd5Q2hhbm5lbFNlbGVjdG9yJywgJ0cnKTtcblxuICAgIGZpbHRlci5hcHBlbmQodHVyYnVsZW5jZSwgZ2F1c3NpYW5CbHVyLCBkaXNwbGFjZW1lbnRNYXApO1xuICAgIHN2Zy5xdWVyeVNlbGVjdG9yKCdkZWZzJykhLmFwcGVuZENoaWxkKGZpbHRlcik7XG4gIH1cblxuICBwcml2YXRlIHJlbW92ZUZpbHRlcihpZDogc3RyaW5nKTogdm9pZCB7XG4gICAgdGhpcy5kb2N1bWVudC5nZXRFbGVtZW50QnlJZChpZCk/LnJlbW92ZSgpO1xuICB9XG5cbiAgcHJpdmF0ZSBnZXRPckNyZWF0ZVN2Z1Jvb3QoKTogU1ZHU1ZHRWxlbWVudCB7XG4gICAgaWYgKHRoaXMuc3ZnUm9vdD8uaXNDb25uZWN0ZWQpIHtcbiAgICAgIHJldHVybiB0aGlzLnN2Z1Jvb3Q7XG4gICAgfVxuXG4gICAgY29uc3QgZXhpc3RpbmcgPSB0aGlzLmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKEhPU1RfSUQpO1xuICAgIGlmIChleGlzdGluZyBpbnN0YW5jZW9mIFNWR1NWR0VsZW1lbnQpIHtcbiAgICAgIHRoaXMuc3ZnUm9vdCA9IGV4aXN0aW5nO1xuICAgICAgcmV0dXJuIGV4aXN0aW5nO1xuICAgIH1cblxuICAgIGNvbnN0IHN2ZyA9IHRoaXMuZG9jdW1lbnQuY3JlYXRlRWxlbWVudE5TKFNWR19OUywgJ3N2ZycpIGFzIFNWR1NWR0VsZW1lbnQ7XG4gICAgc3ZnLnNldEF0dHJpYnV0ZSgnaWQnLCBIT1NUX0lEKTtcbiAgICBzdmcuc2V0QXR0cmlidXRlKCdhcmlhLWhpZGRlbicsICd0cnVlJyk7XG4gICAgc3ZnLnNldEF0dHJpYnV0ZSgnZm9jdXNhYmxlJywgJ2ZhbHNlJyk7XG4gICAgc3ZnLnN0eWxlLnBvc2l0aW9uID0gJ2Fic29sdXRlJztcbiAgICBzdmcuc3R5bGUud2lkdGggPSAnMCc7XG4gICAgc3ZnLnN0eWxlLmhlaWdodCA9ICcwJztcbiAgICBzdmcuc3R5bGUub3ZlcmZsb3cgPSAnaGlkZGVuJztcbiAgICBzdmcuc3R5bGUucG9pbnRlckV2ZW50cyA9ICdub25lJztcblxuICAgIGNvbnN0IGRlZnMgPSB0aGlzLmRvY3VtZW50LmNyZWF0ZUVsZW1lbnROUyhTVkdfTlMsICdkZWZzJyk7XG4gICAgc3ZnLmFwcGVuZENoaWxkKGRlZnMpO1xuXG4gICAgdGhpcy5kb2N1bWVudC5ib2R5LmFwcGVuZENoaWxkKHN2Zyk7XG4gICAgdGhpcy5zdmdSb290ID0gc3ZnO1xuICAgIHJldHVybiBzdmc7XG4gIH1cbn1cbiJdfQ==

package/esm2022/lib/liquid-glass.directive.mjs

@@ -0,0 +1,110 @@
+import { Directive, ElementRef, Renderer2, RendererStyleFlags2, afterNextRender, computed, effect, inject, input, signal, } from '@angular/core';
+import { DEFAULT_LIQUID_GLASS_CONFIG } from './liquid-glass-config';
+import { LIQUID_GLASS_CONFIG } from './liquid-glass-config.token';
+import { LiquidGlassFilterService } from './liquid-glass-filter.service';
+import * as i0 from "@angular/core";
+/**
+ * Applies the iOS "Liquid Glass" effect to its host element: SVG-based refraction, a frost/tint
+ * pass, and specular edge highlights, all driven by CSS custom properties so runtime input
+ * changes update live with zero re-render cost. Pair with the shipped `styles/liquid-glass.css`
+ * stylesheet, which reads these custom properties on `::before`/`::after` pseudo-elements.
+ *
+ * Does not restructure host content — safe to apply to buttons, cards, navs, or any element.
+ */
+export class LiquidGlassDirective {
+    elementRef = inject((ElementRef));
+    renderer = inject(Renderer2);
+    filterService = inject(LiquidGlassFilterService);
+    providedConfig = inject(LIQUID_GLASS_CONFIG, { optional: true }) ?? {};
+    /** Flipped by afterNextRender(); gates DOM work so nothing runs before the first browser render (SSR safety) or during it. */
+    browserRendered = signal(false);
+    displacementScale = input();
+    blur = input();
+    saturation = input();
+    brightness = input();
+    tint = input();
+    radius = input();
+    specular = input();
+    resolvedConfig = computed(() => ({
+        displacementScale: this.displacementScale() ??
+            this.providedConfig.displacementScale ??
+            DEFAULT_LIQUID_GLASS_CONFIG.displacementScale,
+        blur: this.blur() ?? this.providedConfig.blur ?? DEFAULT_LIQUID_GLASS_CONFIG.blur,
+        saturation: this.saturation() ?? this.providedConfig.saturation ?? DEFAULT_LIQUID_GLASS_CONFIG.saturation,
+        brightness: this.brightness() ?? this.providedConfig.brightness ?? DEFAULT_LIQUID_GLASS_CONFIG.brightness,
+        tint: this.tint() ?? this.providedConfig.tint ?? DEFAULT_LIQUID_GLASS_CONFIG.tint,
+        radius: this.radius() ?? this.providedConfig.radius ?? DEFAULT_LIQUID_GLASS_CONFIG.radius,
+        specular: this.specular() ?? this.providedConfig.specular ?? DEFAULT_LIQUID_GLASS_CONFIG.specular,
+    }));
+    acquiredScale = null;
+    constructor() {
+        afterNextRender(() => {
+            this.ensurePositioned();
+            this.browserRendered.set(true);
+        });
+        effect(() => {
+            if (!this.browserRendered()) {
+                return;
+            }
+            const config = this.resolvedConfig();
+            this.syncFilter(config.displacementScale);
+            this.applyCssProperties(config);
+        });
+    }
+    ngOnDestroy() {
+        if (this.acquiredScale !== null) {
+            this.filterService.release(this.acquiredScale);
+            this.acquiredScale = null;
+        }
+    }
+    /** Sets `position: relative` only if the host is unpositioned, so it never clobbers an existing absolute/fixed/sticky layout. */
+    ensurePositioned() {
+        const host = this.elementRef.nativeElement;
+        const currentPosition = getComputedStyle(host).position;
+        if (currentPosition === 'static') {
+            this.renderer.setStyle(host, 'position', 'relative');
+        }
+        this.renderer.setStyle(host, 'isolation', 'isolate');
+    }
+    syncFilter(scale) {
+        if (this.acquiredScale === scale) {
+            return;
+        }
+        const previousScale = this.acquiredScale;
+        const filterId = this.filterService.acquire(scale);
+        this.acquiredScale = scale;
+        if (previousScale !== null) {
+            this.filterService.release(previousScale);
+        }
+        this.setCustomProperty('--lg-filter-url', `url(#${filterId})`);
+    }
+    applyCssProperties(config) {
+        this.setCustomProperty('--lg-blur', `${config.blur}px`);
+        this.setCustomProperty('--lg-saturation', `${config.saturation}%`);
+        this.setCustomProperty('--lg-brightness', `${config.brightness}`);
+        this.setCustomProperty('--lg-tint', config.tint);
+        this.setCustomProperty('--lg-radius', config.radius);
+        this.setCustomProperty('--lg-specular-display', config.specular ? '1' : '0');
+    }
+    /**
+     * Renderer2.setStyle() only calls the DOM's setProperty() (required for custom properties)
+     * when RendererStyleFlags2.DashCase is passed; without it, it falls back to bracket-property
+     * assignment (`el.style[name] = value`), which is a silent no-op for `--`-prefixed names.
+     */
+    setCustomProperty(name, value) {
+        this.renderer.setStyle(this.elementRef.nativeElement, name, value, RendererStyleFlags2.DashCase);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LiquidGlassDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.14", type: LiquidGlassDirective, isStandalone: true, selector: "[liquidGlass]", inputs: { displacementScale: { classPropertyName: "displacementScale", publicName: "displacementScale", isSignal: true, isRequired: false, transformFunction: null }, blur: { classPropertyName: "blur", publicName: "blur", isSignal: true, isRequired: false, transformFunction: null }, saturation: { classPropertyName: "saturation", publicName: "saturation", isSignal: true, isRequired: false, transformFunction: null }, brightness: { classPropertyName: "brightness", publicName: "brightness", isSignal: true, isRequired: false, transformFunction: null }, tint: { classPropertyName: "tint", publicName: "tint", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, specular: { classPropertyName: "specular", publicName: "specular", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "lg-glass" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LiquidGlassDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[liquidGlass]',
+                    standalone: true,
+                    host: {
+                        class: 'lg-glass',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlxdWlkLWdsYXNzLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1saXF1aWQtZ2xhc3Mvc3JjL2xpYi9saXF1aWQtZ2xhc3MuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsVUFBVSxFQUNWLFNBQVMsRUFDVCxtQkFBbUIsRUFDbkIsZUFBZSxFQUNmLFFBQVEsRUFDUixNQUFNLEVBQ04sTUFBTSxFQUNOLEtBQUssRUFFTCxNQUFNLEdBRVAsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLDJCQUEyQixFQUFxQixNQUFNLHVCQUF1QixDQUFDO0FBQ3ZGLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQ2xFLE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLCtCQUErQixDQUFDOztBQUV6RTs7Ozs7OztHQU9HO0FBUUgsTUFBTSxPQUFPLG9CQUFvQjtJQUNkLFVBQVUsR0FBRyxNQUFNLENBQUMsQ0FBQSxVQUF1QixDQUFBLENBQUMsQ0FBQztJQUM3QyxRQUFRLEdBQUcsTUFBTSxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQzdCLGFBQWEsR0FBRyxNQUFNLENBQUMsd0JBQXdCLENBQUMsQ0FBQztJQUNqRCxjQUFjLEdBQUcsTUFBTSxDQUFDLG1CQUFtQixFQUFFLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRSxDQUFDLElBQUksRUFBRSxDQUFDO0lBRXhGLDhIQUE4SDtJQUM3RyxlQUFlLEdBQUcsTUFBTSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBRXhDLGlCQUFpQixHQUFHLEtBQUssRUFBVSxDQUFDO0lBQ3BDLElBQUksR0FBRyxLQUFLLEVBQVUsQ0FBQztJQUN2QixVQUFVLEdBQUcsS0FBSyxFQUFVLENBQUM7SUFDN0IsVUFBVSxHQUFHLEtBQUssRUFBVSxDQUFDO0lBQzdCLElBQUksR0FBRyxLQUFLLEVBQVUsQ0FBQztJQUN2QixNQUFNLEdBQUcsS0FBSyxFQUFVLENBQUM7SUFDekIsUUFBUSxHQUFHLEtBQUssRUFBVyxDQUFDO0lBRXBCLGNBQWMsR0FBOEIsUUFBUSxDQUFDLEdBQUcsRUFBRSxDQUFDLENBQUM7UUFDM0UsaUJBQWlCLEVBQ2YsSUFBSSxDQUFDLGlCQUFpQixFQUFFO1lBQ3hCLElBQUksQ0FBQyxjQUFjLENBQUMsaUJBQWlCO1lBQ3JDLDJCQUEyQixDQUFDLGlCQUFpQjtRQUMvQyxJQUFJLEVBQUUsSUFBSSxDQUFDLElBQUksRUFBRSxJQUFJLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxJQUFJLDJCQUEyQixDQUFDLElBQUk7UUFDakYsVUFBVSxFQUNSLElBQUksQ0FBQyxVQUFVLEVBQUUsSUFBSSxJQUFJLENBQUMsY0FBYyxDQUFDLFVBQVUsSUFBSSwyQkFBMkIsQ0FBQyxVQUFVO1FBQy9GLFVBQVUsRUFDUixJQUFJLENBQUMsVUFBVSxFQUFFLElBQUksSUFBSSxDQUFDLGNBQWMsQ0FBQyxVQUFVLElBQUksMkJBQTJCLENBQUMsVUFBVTtRQUMvRixJQUFJLEVBQUUsSUFBSSxDQUFDLElBQUksRUFBRSxJQUFJLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxJQUFJLDJCQUEyQixDQUFDLElBQUk7UUFDakYsTUFBTSxFQUFFLElBQUksQ0FBQyxNQUFNLEVBQUUsSUFBSSxJQUFJLENBQUMsY0FBYyxDQUFDLE1BQU0sSUFBSSwyQkFBMkIsQ0FBQyxNQUFNO1FBQ3pGLFFBQVEsRUFBRSxJQUFJLENBQUMsUUFBUSxFQUFFLElBQUksSUFBSSxDQUFDLGNBQWMsQ0FBQyxRQUFRLElBQUksMkJBQTJCLENBQUMsUUFBUTtLQUNsRyxDQUFDLENBQUMsQ0FBQztJQUVJLGFBQWEsR0FBa0IsSUFBSSxDQUFDO0lBRTVDO1FBQ0UsZUFBZSxDQUFDLEdBQUcsRUFBRTtZQUNuQixJQUFJLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQztZQUN4QixJQUFJLENBQUMsZUFBZSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUNqQyxDQUFDLENBQUMsQ0FBQztRQUVILE1BQU0sQ0FBQyxHQUFHLEVBQUU7WUFDVixJQUFJLENBQUMsSUFBSSxDQUFDLGVBQWUsRUFBRSxFQUFFLENBQUM7Z0JBQzVCLE9BQU87WUFDVCxDQUFDO1lBQ0QsTUFBTSxNQUFNLEdBQUcsSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDO1lBQ3JDLElBQUksQ0FBQyxVQUFVLENBQUMsTUFBTSxDQUFDLGlCQUFpQixDQUFDLENBQUM7WUFDMUMsSUFBSSxDQUFDLGtCQUFrQixDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQ2xDLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLElBQUksQ0FBQyxhQUFhLEtBQUssSUFBSSxFQUFFLENBQUM7WUFDaEMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1lBQy9DLElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDO1FBQzVCLENBQUM7SUFDSCxDQUFDO0lBRUQsaUlBQWlJO0lBQ3pILGdCQUFnQjtRQUN0QixNQUFNLElBQUksR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQztRQUMzQyxNQUFNLGVBQWUsR0FBRyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsQ0FBQyxRQUFRLENBQUM7UUFDeEQsSUFBSSxlQUFlLEtBQUssUUFBUSxFQUFFLENBQUM7WUFDakMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxFQUFFLFVBQVUsRUFBRSxVQUFVLENBQUMsQ0FBQztRQUN2RCxDQUFDO1FBQ0QsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxFQUFFLFdBQVcsRUFBRSxTQUFTLENBQUMsQ0FBQztJQUN2RCxDQUFDO0lBRU8sVUFBVSxDQUFDLEtBQWE7UUFDOUIsSUFBSSxJQUFJLENBQUMsYUFBYSxLQUFLLEtBQUssRUFBRSxDQUFDO1lBQ2pDLE9BQU87UUFDVCxDQUFDO1FBRUQsTUFBTSxhQUFhLEdBQUcsSUFBSSxDQUFDLGFBQWEsQ0FBQztRQUN6QyxNQUFNLFFBQVEsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNuRCxJQUFJLENBQUMsYUFBYSxHQUFHLEtBQUssQ0FBQztRQUUzQixJQUFJLGFBQWEsS0FBSyxJQUFJLEVBQUUsQ0FBQztZQUMzQixJQUFJLENBQUMsYUFBYSxDQUFDLE9BQU8sQ0FBQyxhQUFhLENBQUMsQ0FBQztRQUM1QyxDQUFDO1FBRUQsSUFBSSxDQUFDLGlCQUFpQixDQUFDLGlCQUFpQixFQUFFLFFBQVEsUUFBUSxHQUFHLENBQUMsQ0FBQztJQUNqRSxDQUFDO0lBRU8sa0JBQWtCLENBQUMsTUFBeUI7UUFDbEQsSUFBSSxDQUFDLGlCQUFpQixDQUFDLFdBQVcsRUFBRSxHQUFHLE1BQU0sQ0FBQyxJQUFJLElBQUksQ0FBQyxDQUFDO1FBQ3hELElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxpQkFBaUIsRUFBRSxHQUFHLE1BQU0sQ0FBQyxVQUFVLEdBQUcsQ0FBQyxDQUFDO1FBQ25FLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxpQkFBaUIsRUFBRSxHQUFHLE1BQU0sQ0FBQyxVQUFVLEVBQUUsQ0FBQyxDQUFDO1FBQ2xFLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxXQUFXLEVBQUUsTUFBTSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ2pELElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxhQUFhLEVBQUUsTUFBTSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQ3JELElBQUksQ0FBQyxpQkFBaUIsQ0FBQyx1QkFBdUIsRUFBRSxNQUFNLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDO0lBQy9FLENBQUM7SUFFRDs7OztPQUlHO0lBQ0ssaUJBQWlCLENBQUMsSUFBWSxFQUFFLEtBQWE7UUFDbkQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQ3BCLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxFQUM3QixJQUFJLEVBQ0osS0FBSyxFQUNMLG1CQUFtQixDQUFDLFFBQVEsQ0FDN0IsQ0FBQztJQUNKLENBQUM7d0dBeEdVLG9CQUFvQjs0RkFBcEIsb0JBQW9COzs0RkFBcEIsb0JBQW9CO2tCQVBoQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxlQUFlO29CQUN6QixVQUFVLEVBQUUsSUFBSTtvQkFDaEIsSUFBSSxFQUFFO3dCQUNKLEtBQUssRUFBRSxVQUFVO3FCQUNsQjtpQkFDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIERpcmVjdGl2ZSxcbiAgRWxlbWVudFJlZixcbiAgUmVuZGVyZXIyLFxuICBSZW5kZXJlclN0eWxlRmxhZ3MyLFxuICBhZnRlck5leHRSZW5kZXIsXG4gIGNvbXB1dGVkLFxuICBlZmZlY3QsXG4gIGluamVjdCxcbiAgaW5wdXQsXG4gIE9uRGVzdHJveSxcbiAgc2lnbmFsLFxuICBTaWduYWwsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgREVGQVVMVF9MSVFVSURfR0xBU1NfQ09ORklHLCBMaXF1aWRHbGFzc0NvbmZpZyB9IGZyb20gJy4vbGlxdWlkLWdsYXNzLWNvbmZpZyc7XG5pbXBvcnQgeyBMSVFVSURfR0xBU1NfQ09ORklHIH0gZnJvbSAnLi9saXF1aWQtZ2xhc3MtY29uZmlnLnRva2VuJztcbmltcG9ydCB7IExpcXVpZEdsYXNzRmlsdGVyU2VydmljZSB9IGZyb20gJy4vbGlxdWlkLWdsYXNzLWZpbHRlci5zZXJ2aWNlJztcblxuLyoqXG4gKiBBcHBsaWVzIHRoZSBpT1MgXCJMaXF1aWQgR2xhc3NcIiBlZmZlY3QgdG8gaXRzIGhvc3QgZWxlbWVudDogU1ZHLWJhc2VkIHJlZnJhY3Rpb24sIGEgZnJvc3QvdGludFxuICogcGFzcywgYW5kIHNwZWN1bGFyIGVkZ2UgaGlnaGxpZ2h0cywgYWxsIGRyaXZlbiBieSBDU1MgY3VzdG9tIHByb3BlcnRpZXMgc28gcnVudGltZSBpbnB1dFxuICogY2hhbmdlcyB1cGRhdGUgbGl2ZSB3aXRoIHplcm8gcmUtcmVuZGVyIGNvc3QuIFBhaXIgd2l0aCB0aGUgc2hpcHBlZCBgc3R5bGVzL2xpcXVpZC1nbGFzcy5jc3NgXG4gKiBzdHlsZXNoZWV0LCB3aGljaCByZWFkcyB0aGVzZSBjdXN0b20gcHJvcGVydGllcyBvbiBgOjpiZWZvcmVgL2A6OmFmdGVyYCBwc2V1ZG8tZWxlbWVudHMuXG4gKlxuICogRG9lcyBub3QgcmVzdHJ1Y3R1cmUgaG9zdCBjb250ZW50IOKAlCBzYWZlIHRvIGFwcGx5IHRvIGJ1dHRvbnMsIGNhcmRzLCBuYXZzLCBvciBhbnkgZWxlbWVudC5cbiAqL1xuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW2xpcXVpZEdsYXNzXScsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGhvc3Q6IHtcbiAgICBjbGFzczogJ2xnLWdsYXNzJyxcbiAgfSxcbn0pXG5leHBvcnQgY2xhc3MgTGlxdWlkR2xhc3NEaXJlY3RpdmUgaW1wbGVtZW50cyBPbkRlc3Ryb3kge1xuICBwcml2YXRlIHJlYWRvbmx5IGVsZW1lbnRSZWYgPSBpbmplY3QoRWxlbWVudFJlZjxIVE1MRWxlbWVudD4pO1xuICBwcml2YXRlIHJlYWRvbmx5IHJlbmRlcmVyID0gaW5qZWN0KFJlbmRlcmVyMik7XG4gIHByaXZhdGUgcmVhZG9ubHkgZmlsdGVyU2VydmljZSA9IGluamVjdChMaXF1aWRHbGFzc0ZpbHRlclNlcnZpY2UpO1xuICBwcml2YXRlIHJlYWRvbmx5IHByb3ZpZGVkQ29uZmlnID0gaW5qZWN0KExJUVVJRF9HTEFTU19DT05GSUcsIHsgb3B0aW9uYWw6IHRydWUgfSkgPz8ge307XG5cbiAgLyoqIEZsaXBwZWQgYnkgYWZ0ZXJOZXh0UmVuZGVyKCk7IGdhdGVzIERPTSB3b3JrIHNvIG5vdGhpbmcgcnVucyBiZWZvcmUgdGhlIGZpcnN0IGJyb3dzZXIgcmVuZGVyIChTU1Igc2FmZXR5KSBvciBkdXJpbmcgaXQuICovXG4gIHByaXZhdGUgcmVhZG9ubHkgYnJvd3NlclJlbmRlcmVkID0gc2lnbmFsKGZhbHNlKTtcblxuICByZWFkb25seSBkaXNwbGFjZW1lbnRTY2FsZSA9IGlucHV0PG51bWJlcj4oKTtcbiAgcmVhZG9ubHkgYmx1ciA9IGlucHV0PG51bWJlcj4oKTtcbiAgcmVhZG9ubHkgc2F0dXJhdGlvbiA9IGlucHV0PG51bWJlcj4oKTtcbiAgcmVhZG9ubHkgYnJpZ2h0bmVzcyA9IGlucHV0PG51bWJlcj4oKTtcbiAgcmVhZG9ubHkgdGludCA9IGlucHV0PHN0cmluZz4oKTtcbiAgcmVhZG9ubHkgcmFkaXVzID0gaW5wdXQ8c3RyaW5nPigpO1xuICByZWFkb25seSBzcGVjdWxhciA9IGlucHV0PGJvb2xlYW4+KCk7XG5cbiAgcHJpdmF0ZSByZWFkb25seSByZXNvbHZlZENvbmZpZzogU2lnbmFsPExpcXVpZEdsYXNzQ29uZmlnPiA9IGNvbXB1dGVkKCgpID0+ICh7XG4gICAgZGlzcGxhY2VtZW50U2NhbGU6XG4gICAgICB0aGlzLmRpc3BsYWNlbWVudFNjYWxlKCkgPz9cbiAgICAgIHRoaXMucHJvdmlkZWRDb25maWcuZGlzcGxhY2VtZW50U2NhbGUgPz9cbiAgICAgIERFRkFVTFRfTElRVUlEX0dMQVNTX0NPTkZJRy5kaXNwbGFjZW1lbnRTY2FsZSxcbiAgICBibHVyOiB0aGlzLmJsdXIoKSA/PyB0aGlzLnByb3ZpZGVkQ29uZmlnLmJsdXIgPz8gREVGQVVMVF9MSVFVSURfR0xBU1NfQ09ORklHLmJsdXIsXG4gICAgc2F0dXJhdGlvbjpcbiAgICAgIHRoaXMuc2F0dXJhdGlvbigpID8/IHRoaXMucHJvdmlkZWRDb25maWcuc2F0dXJhdGlvbiA/PyBERUZBVUxUX0xJUVVJRF9HTEFTU19DT05GSUcuc2F0dXJhdGlvbixcbiAgICBicmlnaHRuZXNzOlxuICAgICAgdGhpcy5icmlnaHRuZXNzKCkgPz8gdGhpcy5wcm92aWRlZENvbmZpZy5icmlnaHRuZXNzID8/IERFRkFVTFRfTElRVUlEX0dMQVNTX0NPTkZJRy5icmlnaHRuZXNzLFxuICAgIHRpbnQ6IHRoaXMudGludCgpID8/IHRoaXMucHJvdmlkZWRDb25maWcudGludCA/PyBERUZBVUxUX0xJUVVJRF9HTEFTU19DT05GSUcudGludCxcbiAgICByYWRpdXM6IHRoaXMucmFkaXVzKCkgPz8gdGhpcy5wcm92aWRlZENvbmZpZy5yYWRpdXMgPz8gREVGQVVMVF9MSVFVSURfR0xBU1NfQ09ORklHLnJhZGl1cyxcbiAgICBzcGVjdWxhcjogdGhpcy5zcGVjdWxhcigpID8/IHRoaXMucHJvdmlkZWRDb25maWcuc3BlY3VsYXIgPz8gREVGQVVMVF9MSVFVSURfR0xBU1NfQ09ORklHLnNwZWN1bGFyLFxuICB9KSk7XG5cbiAgcHJpdmF0ZSBhY3F1aXJlZFNjYWxlOiBudW1iZXIgfCBudWxsID0gbnVsbDtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBhZnRlck5leHRSZW5kZXIoKCkgPT4ge1xuICAgICAgdGhpcy5lbnN1cmVQb3NpdGlvbmVkKCk7XG4gICAgICB0aGlzLmJyb3dzZXJSZW5kZXJlZC5zZXQodHJ1ZSk7XG4gICAgfSk7XG5cbiAgICBlZmZlY3QoKCkgPT4ge1xuICAgICAgaWYgKCF0aGlzLmJyb3dzZXJSZW5kZXJlZCgpKSB7XG4gICAgICAgIHJldHVybjtcbiAgICAgIH1cbiAgICAgIGNvbnN0IGNvbmZpZyA9IHRoaXMucmVzb2x2ZWRDb25maWcoKTtcbiAgICAgIHRoaXMuc3luY0ZpbHRlcihjb25maWcuZGlzcGxhY2VtZW50U2NhbGUpO1xuICAgICAgdGhpcy5hcHBseUNzc1Byb3BlcnRpZXMoY29uZmlnKTtcbiAgICB9KTtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIGlmICh0aGlzLmFjcXVpcmVkU2NhbGUgIT09IG51bGwpIHtcbiAgICAgIHRoaXMuZmlsdGVyU2VydmljZS5yZWxlYXNlKHRoaXMuYWNxdWlyZWRTY2FsZSk7XG4gICAgICB0aGlzLmFjcXVpcmVkU2NhbGUgPSBudWxsO1xuICAgIH1cbiAgfVxuXG4gIC8qKiBTZXRzIGBwb3NpdGlvbjogcmVsYXRpdmVgIG9ubHkgaWYgdGhlIGhvc3QgaXMgdW5wb3NpdGlvbmVkLCBzbyBpdCBuZXZlciBjbG9iYmVycyBhbiBleGlzdGluZyBhYnNvbHV0ZS9maXhlZC9zdGlja3kgbGF5b3V0LiAqL1xuICBwcml2YXRlIGVuc3VyZVBvc2l0aW9uZWQoKTogdm9pZCB7XG4gICAgY29uc3QgaG9zdCA9IHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50O1xuICAgIGNvbnN0IGN1cnJlbnRQb3NpdGlvbiA9IGdldENvbXB1dGVkU3R5bGUoaG9zdCkucG9zaXRpb247XG4gICAgaWYgKGN1cnJlbnRQb3NpdGlvbiA9PT0gJ3N0YXRpYycpIHtcbiAgICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUoaG9zdCwgJ3Bvc2l0aW9uJywgJ3JlbGF0aXZlJyk7XG4gICAgfVxuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUoaG9zdCwgJ2lzb2xhdGlvbicsICdpc29sYXRlJyk7XG4gIH1cblxuICBwcml2YXRlIHN5bmNGaWx0ZXIoc2NhbGU6IG51bWJlcik6IHZvaWQge1xuICAgIGlmICh0aGlzLmFjcXVpcmVkU2NhbGUgPT09IHNjYWxlKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgY29uc3QgcHJldmlvdXNTY2FsZSA9IHRoaXMuYWNxdWlyZWRTY2FsZTtcbiAgICBjb25zdCBmaWx0ZXJJZCA9IHRoaXMuZmlsdGVyU2VydmljZS5hY3F1aXJlKHNjYWxlKTtcbiAgICB0aGlzLmFjcXVpcmVkU2NhbGUgPSBzY2FsZTtcblxuICAgIGlmIChwcmV2aW91c1NjYWxlICE9PSBudWxsKSB7XG4gICAgICB0aGlzLmZpbHRlclNlcnZpY2UucmVsZWFzZShwcmV2aW91c1NjYWxlKTtcbiAgICB9XG5cbiAgICB0aGlzLnNldEN1c3RvbVByb3BlcnR5KCctLWxnLWZpbHRlci11cmwnLCBgdXJsKCMke2ZpbHRlcklkfSlgKTtcbiAgfVxuXG4gIHByaXZhdGUgYXBwbHlDc3NQcm9wZXJ0aWVzKGNvbmZpZzogTGlxdWlkR2xhc3NDb25maWcpOiB2b2lkIHtcbiAgICB0aGlzLnNldEN1c3RvbVByb3BlcnR5KCctLWxnLWJsdXInLCBgJHtjb25maWcuYmx1cn1weGApO1xuICAgIHRoaXMuc2V0Q3VzdG9tUHJvcGVydHkoJy0tbGctc2F0dXJhdGlvbicsIGAke2NvbmZpZy5zYXR1cmF0aW9ufSVgKTtcbiAgICB0aGlzLnNldEN1c3RvbVByb3BlcnR5KCctLWxnLWJyaWdodG5lc3MnLCBgJHtjb25maWcuYnJpZ2h0bmVzc31gKTtcbiAgICB0aGlzLnNldEN1c3RvbVByb3BlcnR5KCctLWxnLXRpbnQnLCBjb25maWcudGludCk7XG4gICAgdGhpcy5zZXRDdXN0b21Qcm9wZXJ0eSgnLS1sZy1yYWRpdXMnLCBjb25maWcucmFkaXVzKTtcbiAgICB0aGlzLnNldEN1c3RvbVByb3BlcnR5KCctLWxnLXNwZWN1bGFyLWRpc3BsYXknLCBjb25maWcuc3BlY3VsYXIgPyAnMScgOiAnMCcpO1xuICB9XG5cbiAgLyoqXG4gICAqIFJlbmRlcmVyMi5zZXRTdHlsZSgpIG9ubHkgY2FsbHMgdGhlIERPTSdzIHNldFByb3BlcnR5KCkgKHJlcXVpcmVkIGZvciBjdXN0b20gcHJvcGVydGllcylcbiAgICogd2hlbiBSZW5kZXJlclN0eWxlRmxhZ3MyLkRhc2hDYXNlIGlzIHBhc3NlZDsgd2l0aG91dCBpdCwgaXQgZmFsbHMgYmFjayB0byBicmFja2V0LXByb3BlcnR5XG4gICAqIGFzc2lnbm1lbnQgKGBlbC5zdHlsZVtuYW1lXSA9IHZhbHVlYCksIHdoaWNoIGlzIGEgc2lsZW50IG5vLW9wIGZvciBgLS1gLXByZWZpeGVkIG5hbWVzLlxuICAgKi9cbiAgcHJpdmF0ZSBzZXRDdXN0b21Qcm9wZXJ0eShuYW1lOiBzdHJpbmcsIHZhbHVlOiBzdHJpbmcpOiB2b2lkIHtcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKFxuICAgICAgdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQsXG4gICAgICBuYW1lLFxuICAgICAgdmFsdWUsXG4gICAgICBSZW5kZXJlclN0eWxlRmxhZ3MyLkRhc2hDYXNlLFxuICAgICk7XG4gIH1cbn1cbiJdfQ==

package/esm2022/ngx-liquid-glazz.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './public-api';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWxpcXVpZC1nbGF6ei5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL25neC1saXF1aWQtZ2xhc3Mvc3JjL25neC1saXF1aWQtZ2xhenoudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWMtYXBpJztcbiJdfQ==

package/esm2022/public-api.mjs

@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of ngx-liquid-glass
+ */
+export * from './lib/liquid-glass.directive';
+export * from './lib/liquid-glass-config';
+export * from './lib/liquid-glass-config.token';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL25neC1saXF1aWQtZ2xhc3Mvc3JjL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLDhCQUE4QixDQUFDO0FBQzdDLGNBQWMsMkJBQTJCLENBQUM7QUFDMUMsY0FBYyxpQ0FBaUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBQdWJsaWMgQVBJIFN1cmZhY2Ugb2Ygbmd4LWxpcXVpZC1nbGFzc1xuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vbGliL2xpcXVpZC1nbGFzcy5kaXJlY3RpdmUnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvbGlxdWlkLWdsYXNzLWNvbmZpZyc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9saXF1aWQtZ2xhc3MtY29uZmlnLnRva2VuJztcbiJdfQ==

package/fesm2022/ngx-liquid-glazz.mjs

@@ -0,0 +1,258 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injectable, ElementRef, Renderer2, signal, input, computed, afterNextRender, effect, RendererStyleFlags2, Directive } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+
+const DEFAULT_LIQUID_GLASS_CONFIG = {
+    displacementScale: 70,
+    blur: 3,
+    saturation: 180,
+    brightness: 1.08,
+    tint: 'rgba(255,255,255,0.04)',
+    radius: '24px',
+    specular: true,
+};
+
+/**
+ * Holds only the overrides passed to `provideLiquidGlassConfig()`, never the built-in defaults.
+ * Keeping it partial lets the directive distinguish "not provided" from "explicitly set to a
+ * falsy value" when computing precedence against its own inputs.
+ */
+const LIQUID_GLASS_CONFIG = new InjectionToken('LIQUID_GLASS_CONFIG');
+/**
+ * Overrides the app-wide Liquid Glass defaults. Directive inputs still take precedence over
+ * whatever is configured here.
+ *
+ * @example
+ * bootstrapApplication(AppComponent, {
+ *   providers: [provideLiquidGlassConfig({ blur: 6, tint: 'rgba(0,0,0,0.08)' })],
+ * });
+ */
+function provideLiquidGlassConfig(config) {
+    return { provide: LIQUID_GLASS_CONFIG, useValue: config };
+}
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const HOST_ID = 'ngx-liquid-glass-filter-host';
+const FILTER_ID_PREFIX = 'ngx-liquid-glass-filter';
+/**
+ * Owns the SVG `<filter>` definitions that power the refraction effect and injects them into
+ * `document.body`.
+ *
+ * `scale` (feDisplacementMap's `scale` attribute) is the one filter parameter that can't be
+ * shared across all directive instances the way the rest of the CSS-custom-property-driven
+ * styling is, because SVG filter primitives don't accept CSS custom properties as attribute
+ * values. Instead of generating a new filter per instance (wasteful) or a single shared filter
+ * (loses per-instance tuning), this service ref-counts one `<filter>` element per distinct scale
+ * value: directives that share a scale share a filter; a filter is removed from the DOM once
+ * its last consumer is destroyed.
+ */
+class LiquidGlassFilterService {
+    document = inject(DOCUMENT);
+    refCounts = new Map();
+    svgRoot = null;
+    /** Registers a consumer of the filter for `scale`, creating it if this is the first. Returns the element ID to reference via `url(#id)`. */
+    acquire(scale) {
+        const id = this.filterId(scale);
+        const count = this.refCounts.get(scale) ?? 0;
+        this.refCounts.set(scale, count + 1);
+        if (count === 0) {
+            this.injectFilter(id, scale);
+        }
+        return id;
+    }
+    /** Releases a consumer's hold on `scale`'s filter, removing it from the DOM once no consumers remain. */
+    release(scale) {
+        const count = this.refCounts.get(scale) ?? 0;
+        if (count <= 1) {
+            this.refCounts.delete(scale);
+            this.removeFilter(this.filterId(scale));
+            return;
+        }
+        this.refCounts.set(scale, count - 1);
+    }
+    filterId(scale) {
+        return `${FILTER_ID_PREFIX}-${scale}`;
+    }
+    injectFilter(id, scale) {
+        // Hydration / multiple-app-instance guard: another instance (or a prior SSR pass) may have
+        // already injected this exact filter into the DOM.
+        if (this.document.getElementById(id)) {
+            return;
+        }
+        const svg = this.getOrCreateSvgRoot();
+        const filter = this.document.createElementNS(SVG_NS, 'filter');
+        filter.setAttribute('id', id);
+        filter.setAttribute('x', '-20%');
+        filter.setAttribute('y', '-20%');
+        filter.setAttribute('width', '140%');
+        filter.setAttribute('height', '140%');
+        filter.setAttribute('color-interpolation-filters', 'sRGB');
+        const turbulence = this.document.createElementNS(SVG_NS, 'feTurbulence');
+        turbulence.setAttribute('type', 'fractalNoise');
+        turbulence.setAttribute('baseFrequency', '0.008 0.008');
+        turbulence.setAttribute('numOctaves', '2');
+        turbulence.setAttribute('seed', '92');
+        turbulence.setAttribute('result', 'noise');
+        const gaussianBlur = this.document.createElementNS(SVG_NS, 'feGaussianBlur');
+        gaussianBlur.setAttribute('in', 'noise');
+        gaussianBlur.setAttribute('stdDeviation', '2');
+        gaussianBlur.setAttribute('result', 'blurred');
+        const displacementMap = this.document.createElementNS(SVG_NS, 'feDisplacementMap');
+        displacementMap.setAttribute('in', 'SourceGraphic');
+        displacementMap.setAttribute('in2', 'blurred');
+        displacementMap.setAttribute('scale', String(scale));
+        displacementMap.setAttribute('xChannelSelector', 'R');
+        displacementMap.setAttribute('yChannelSelector', 'G');
+        filter.append(turbulence, gaussianBlur, displacementMap);
+        svg.querySelector('defs').appendChild(filter);
+    }
+    removeFilter(id) {
+        this.document.getElementById(id)?.remove();
+    }
+    getOrCreateSvgRoot() {
+        if (this.svgRoot?.isConnected) {
+            return this.svgRoot;
+        }
+        const existing = this.document.getElementById(HOST_ID);
+        if (existing instanceof SVGSVGElement) {
+            this.svgRoot = existing;
+            return existing;
+        }
+        const svg = this.document.createElementNS(SVG_NS, 'svg');
+        svg.setAttribute('id', HOST_ID);
+        svg.setAttribute('aria-hidden', 'true');
+        svg.setAttribute('focusable', 'false');
+        svg.style.position = 'absolute';
+        svg.style.width = '0';
+        svg.style.height = '0';
+        svg.style.overflow = 'hidden';
+        svg.style.pointerEvents = 'none';
+        const defs = this.document.createElementNS(SVG_NS, 'defs');
+        svg.appendChild(defs);
+        this.document.body.appendChild(svg);
+        this.svgRoot = svg;
+        return svg;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LiquidGlassFilterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LiquidGlassFilterService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LiquidGlassFilterService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Applies the iOS "Liquid Glass" effect to its host element: SVG-based refraction, a frost/tint
+ * pass, and specular edge highlights, all driven by CSS custom properties so runtime input
+ * changes update live with zero re-render cost. Pair with the shipped `styles/liquid-glass.css`
+ * stylesheet, which reads these custom properties on `::before`/`::after` pseudo-elements.
+ *
+ * Does not restructure host content — safe to apply to buttons, cards, navs, or any element.
+ */
+class LiquidGlassDirective {
+    elementRef = inject((ElementRef));
+    renderer = inject(Renderer2);
+    filterService = inject(LiquidGlassFilterService);
+    providedConfig = inject(LIQUID_GLASS_CONFIG, { optional: true }) ?? {};
+    /** Flipped by afterNextRender(); gates DOM work so nothing runs before the first browser render (SSR safety) or during it. */
+    browserRendered = signal(false);
+    displacementScale = input();
+    blur = input();
+    saturation = input();
+    brightness = input();
+    tint = input();
+    radius = input();
+    specular = input();
+    resolvedConfig = computed(() => ({
+        displacementScale: this.displacementScale() ??
+            this.providedConfig.displacementScale ??
+            DEFAULT_LIQUID_GLASS_CONFIG.displacementScale,
+        blur: this.blur() ?? this.providedConfig.blur ?? DEFAULT_LIQUID_GLASS_CONFIG.blur,
+        saturation: this.saturation() ?? this.providedConfig.saturation ?? DEFAULT_LIQUID_GLASS_CONFIG.saturation,
+        brightness: this.brightness() ?? this.providedConfig.brightness ?? DEFAULT_LIQUID_GLASS_CONFIG.brightness,
+        tint: this.tint() ?? this.providedConfig.tint ?? DEFAULT_LIQUID_GLASS_CONFIG.tint,
+        radius: this.radius() ?? this.providedConfig.radius ?? DEFAULT_LIQUID_GLASS_CONFIG.radius,
+        specular: this.specular() ?? this.providedConfig.specular ?? DEFAULT_LIQUID_GLASS_CONFIG.specular,
+    }));
+    acquiredScale = null;
+    constructor() {
+        afterNextRender(() => {
+            this.ensurePositioned();
+            this.browserRendered.set(true);
+        });
+        effect(() => {
+            if (!this.browserRendered()) {
+                return;
+            }
+            const config = this.resolvedConfig();
+            this.syncFilter(config.displacementScale);
+            this.applyCssProperties(config);
+        });
+    }
+    ngOnDestroy() {
+        if (this.acquiredScale !== null) {
+            this.filterService.release(this.acquiredScale);
+            this.acquiredScale = null;
+        }
+    }
+    /** Sets `position: relative` only if the host is unpositioned, so it never clobbers an existing absolute/fixed/sticky layout. */
+    ensurePositioned() {
+        const host = this.elementRef.nativeElement;
+        const currentPosition = getComputedStyle(host).position;
+        if (currentPosition === 'static') {
+            this.renderer.setStyle(host, 'position', 'relative');
+        }
+        this.renderer.setStyle(host, 'isolation', 'isolate');
+    }
+    syncFilter(scale) {
+        if (this.acquiredScale === scale) {
+            return;
+        }
+        const previousScale = this.acquiredScale;
+        const filterId = this.filterService.acquire(scale);
+        this.acquiredScale = scale;
+        if (previousScale !== null) {
+            this.filterService.release(previousScale);
+        }
+        this.setCustomProperty('--lg-filter-url', `url(#${filterId})`);
+    }
+    applyCssProperties(config) {
+        this.setCustomProperty('--lg-blur', `${config.blur}px`);
+        this.setCustomProperty('--lg-saturation', `${config.saturation}%`);
+        this.setCustomProperty('--lg-brightness', `${config.brightness}`);
+        this.setCustomProperty('--lg-tint', config.tint);
+        this.setCustomProperty('--lg-radius', config.radius);
+        this.setCustomProperty('--lg-specular-display', config.specular ? '1' : '0');
+    }
+    /**
+     * Renderer2.setStyle() only calls the DOM's setProperty() (required for custom properties)
+     * when RendererStyleFlags2.DashCase is passed; without it, it falls back to bracket-property
+     * assignment (`el.style[name] = value`), which is a silent no-op for `--`-prefixed names.
+     */
+    setCustomProperty(name, value) {
+        this.renderer.setStyle(this.elementRef.nativeElement, name, value, RendererStyleFlags2.DashCase);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LiquidGlassDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.14", type: LiquidGlassDirective, isStandalone: true, selector: "[liquidGlass]", inputs: { displacementScale: { classPropertyName: "displacementScale", publicName: "displacementScale", isSignal: true, isRequired: false, transformFunction: null }, blur: { classPropertyName: "blur", publicName: "blur", isSignal: true, isRequired: false, transformFunction: null }, saturation: { classPropertyName: "saturation", publicName: "saturation", isSignal: true, isRequired: false, transformFunction: null }, brightness: { classPropertyName: "brightness", publicName: "brightness", isSignal: true, isRequired: false, transformFunction: null }, tint: { classPropertyName: "tint", publicName: "tint", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, specular: { classPropertyName: "specular", publicName: "specular", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "lg-glass" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LiquidGlassDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[liquidGlass]',
+                    standalone: true,
+                    host: {
+                        class: 'lg-glass',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/*
+ * Public API Surface of ngx-liquid-glass
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_LIQUID_GLASS_CONFIG, LIQUID_GLASS_CONFIG, LiquidGlassDirective, provideLiquidGlassConfig };
+//# sourceMappingURL=ngx-liquid-glazz.mjs.map

package/fesm2022/ngx-liquid-glazz.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-liquid-glazz.mjs","sources":["../../../projects/ngx-liquid-glass/src/lib/liquid-glass-config.ts","../../../projects/ngx-liquid-glass/src/lib/liquid-glass-config.token.ts","../../../projects/ngx-liquid-glass/src/lib/liquid-glass-filter.service.ts","../../../projects/ngx-liquid-glass/src/lib/liquid-glass.directive.ts","../../../projects/ngx-liquid-glass/src/public-api.ts","../../../projects/ngx-liquid-glass/src/ngx-liquid-glazz.ts"],"sourcesContent":["/**\n * App-wide tunables for the Liquid Glass effect.\n * Every field is optional so callers can override just the defaults they care about.\n * Precedence (highest to lowest): directive input > provideLiquidGlassConfig() > built-in default.\n */\nexport interface LiquidGlassConfig {\n  /** Refraction strength, maps to the SVG `feDisplacementMap` `scale` attribute. */\n  displacementScale: number;\n  /** Frost blur in px, maps to `--lg-blur`. */\n  blur: number;\n  /** Backdrop saturation percent, maps to `--lg-saturation`. */\n  saturation: number;\n  /** Backdrop brightness multiplier, maps to `--lg-brightness`. */\n  brightness: number;\n  /** Tint color layered over the refracted backdrop, maps to `--lg-tint`. */\n  tint: string;\n  /** Corner radius, maps to `--lg-radius`. */\n  radius: string;\n  /** Whether to render the specular edge-highlight inset shadows. */\n  specular: boolean;\n}\n\nexport const DEFAULT_LIQUID_GLASS_CONFIG: LiquidGlassConfig = {\n  displacementScale: 70,\n  blur: 3,\n  saturation: 180,\n  brightness: 1.08,\n  tint: 'rgba(255,255,255,0.04)',\n  radius: '24px',\n  specular: true,\n};\n","import { InjectionToken, Provider } from '@angular/core';\nimport { LiquidGlassConfig } from './liquid-glass-config';\n\n/**\n * Holds only the overrides passed to `provideLiquidGlassConfig()`, never the built-in defaults.\n * Keeping it partial lets the directive distinguish \"not provided\" from \"explicitly set to a\n * falsy value\" when computing precedence against its own inputs.\n */\nexport const LIQUID_GLASS_CONFIG = new InjectionToken<Partial<LiquidGlassConfig>>(\n  'LIQUID_GLASS_CONFIG',\n);\n\n/**\n * Overrides the app-wide Liquid Glass defaults. Directive inputs still take precedence over\n * whatever is configured here.\n *\n * @example\n * bootstrapApplication(AppComponent, {\n *   providers: [provideLiquidGlassConfig({ blur: 6, tint: 'rgba(0,0,0,0.08)' })],\n * });\n */\nexport function provideLiquidGlassConfig(config: Partial<LiquidGlassConfig>): Provider {\n  return { provide: LIQUID_GLASS_CONFIG, useValue: config };\n}\n","import { DOCUMENT } from '@angular/common';\nimport { Injectable, inject } from '@angular/core';\n\nconst SVG_NS = 'http://www.w3.org/2000/svg';\nconst HOST_ID = 'ngx-liquid-glass-filter-host';\nconst FILTER_ID_PREFIX = 'ngx-liquid-glass-filter';\n\n/**\n * Owns the SVG `<filter>` definitions that power the refraction effect and injects them into\n * `document.body`.\n *\n * `scale` (feDisplacementMap's `scale` attribute) is the one filter parameter that can't be\n * shared across all directive instances the way the rest of the CSS-custom-property-driven\n * styling is, because SVG filter primitives don't accept CSS custom properties as attribute\n * values. Instead of generating a new filter per instance (wasteful) or a single shared filter\n * (loses per-instance tuning), this service ref-counts one `<filter>` element per distinct scale\n * value: directives that share a scale share a filter; a filter is removed from the DOM once\n * its last consumer is destroyed.\n */\n@Injectable({ providedIn: 'root' })\nexport class LiquidGlassFilterService {\n  private readonly document = inject(DOCUMENT);\n  private readonly refCounts = new Map<number, number>();\n  private svgRoot: SVGSVGElement | null = null;\n\n  /** Registers a consumer of the filter for `scale`, creating it if this is the first. Returns the element ID to reference via `url(#id)`. */\n  acquire(scale: number): string {\n    const id = this.filterId(scale);\n    const count = this.refCounts.get(scale) ?? 0;\n    this.refCounts.set(scale, count + 1);\n\n    if (count === 0) {\n      this.injectFilter(id, scale);\n    }\n\n    return id;\n  }\n\n  /** Releases a consumer's hold on `scale`'s filter, removing it from the DOM once no consumers remain. */\n  release(scale: number): void {\n    const count = this.refCounts.get(scale) ?? 0;\n    if (count <= 1) {\n      this.refCounts.delete(scale);\n      this.removeFilter(this.filterId(scale));\n      return;\n    }\n    this.refCounts.set(scale, count - 1);\n  }\n\n  private filterId(scale: number): string {\n    return `${FILTER_ID_PREFIX}-${scale}`;\n  }\n\n  private injectFilter(id: string, scale: number): void {\n    // Hydration / multiple-app-instance guard: another instance (or a prior SSR pass) may have\n    // already injected this exact filter into the DOM.\n    if (this.document.getElementById(id)) {\n      return;\n    }\n\n    const svg = this.getOrCreateSvgRoot();\n\n    const filter = this.document.createElementNS(SVG_NS, 'filter');\n    filter.setAttribute('id', id);\n    filter.setAttribute('x', '-20%');\n    filter.setAttribute('y', '-20%');\n    filter.setAttribute('width', '140%');\n    filter.setAttribute('height', '140%');\n    filter.setAttribute('color-interpolation-filters', 'sRGB');\n\n    const turbulence = this.document.createElementNS(SVG_NS, 'feTurbulence');\n    turbulence.setAttribute('type', 'fractalNoise');\n    turbulence.setAttribute('baseFrequency', '0.008 0.008');\n    turbulence.setAttribute('numOctaves', '2');\n    turbulence.setAttribute('seed', '92');\n    turbulence.setAttribute('result', 'noise');\n\n    const gaussianBlur = this.document.createElementNS(SVG_NS, 'feGaussianBlur');\n    gaussianBlur.setAttribute('in', 'noise');\n    gaussianBlur.setAttribute('stdDeviation', '2');\n    gaussianBlur.setAttribute('result', 'blurred');\n\n    const displacementMap = this.document.createElementNS(SVG_NS, 'feDisplacementMap');\n    displacementMap.setAttribute('in', 'SourceGraphic');\n    displacementMap.setAttribute('in2', 'blurred');\n    displacementMap.setAttribute('scale', String(scale));\n    displacementMap.setAttribute('xChannelSelector', 'R');\n    displacementMap.setAttribute('yChannelSelector', 'G');\n\n    filter.append(turbulence, gaussianBlur, displacementMap);\n    svg.querySelector('defs')!.appendChild(filter);\n  }\n\n  private removeFilter(id: string): void {\n    this.document.getElementById(id)?.remove();\n  }\n\n  private getOrCreateSvgRoot(): SVGSVGElement {\n    if (this.svgRoot?.isConnected) {\n      return this.svgRoot;\n    }\n\n    const existing = this.document.getElementById(HOST_ID);\n    if (existing instanceof SVGSVGElement) {\n      this.svgRoot = existing;\n      return existing;\n    }\n\n    const svg = this.document.createElementNS(SVG_NS, 'svg') as SVGSVGElement;\n    svg.setAttribute('id', HOST_ID);\n    svg.setAttribute('aria-hidden', 'true');\n    svg.setAttribute('focusable', 'false');\n    svg.style.position = 'absolute';\n    svg.style.width = '0';\n    svg.style.height = '0';\n    svg.style.overflow = 'hidden';\n    svg.style.pointerEvents = 'none';\n\n    const defs = this.document.createElementNS(SVG_NS, 'defs');\n    svg.appendChild(defs);\n\n    this.document.body.appendChild(svg);\n    this.svgRoot = svg;\n    return svg;\n  }\n}\n","import {\n  Directive,\n  ElementRef,\n  Renderer2,\n  RendererStyleFlags2,\n  afterNextRender,\n  computed,\n  effect,\n  inject,\n  input,\n  OnDestroy,\n  signal,\n  Signal,\n} from '@angular/core';\nimport { DEFAULT_LIQUID_GLASS_CONFIG, LiquidGlassConfig } from './liquid-glass-config';\nimport { LIQUID_GLASS_CONFIG } from './liquid-glass-config.token';\nimport { LiquidGlassFilterService } from './liquid-glass-filter.service';\n\n/**\n * Applies the iOS \"Liquid Glass\" effect to its host element: SVG-based refraction, a frost/tint\n * pass, and specular edge highlights, all driven by CSS custom properties so runtime input\n * changes update live with zero re-render cost. Pair with the shipped `styles/liquid-glass.css`\n * stylesheet, which reads these custom properties on `::before`/`::after` pseudo-elements.\n *\n * Does not restructure host content — safe to apply to buttons, cards, navs, or any element.\n */\n@Directive({\n  selector: '[liquidGlass]',\n  standalone: true,\n  host: {\n    class: 'lg-glass',\n  },\n})\nexport class LiquidGlassDirective implements OnDestroy {\n  private readonly elementRef = inject(ElementRef<HTMLElement>);\n  private readonly renderer = inject(Renderer2);\n  private readonly filterService = inject(LiquidGlassFilterService);\n  private readonly providedConfig = inject(LIQUID_GLASS_CONFIG, { optional: true }) ?? {};\n\n  /** Flipped by afterNextRender(); gates DOM work so nothing runs before the first browser render (SSR safety) or during it. */\n  private readonly browserRendered = signal(false);\n\n  readonly displacementScale = input<number>();\n  readonly blur = input<number>();\n  readonly saturation = input<number>();\n  readonly brightness = input<number>();\n  readonly tint = input<string>();\n  readonly radius = input<string>();\n  readonly specular = input<boolean>();\n\n  private readonly resolvedConfig: Signal<LiquidGlassConfig> = computed(() => ({\n    displacementScale:\n      this.displacementScale() ??\n      this.providedConfig.displacementScale ??\n      DEFAULT_LIQUID_GLASS_CONFIG.displacementScale,\n    blur: this.blur() ?? this.providedConfig.blur ?? DEFAULT_LIQUID_GLASS_CONFIG.blur,\n    saturation:\n      this.saturation() ?? this.providedConfig.saturation ?? DEFAULT_LIQUID_GLASS_CONFIG.saturation,\n    brightness:\n      this.brightness() ?? this.providedConfig.brightness ?? DEFAULT_LIQUID_GLASS_CONFIG.brightness,\n    tint: this.tint() ?? this.providedConfig.tint ?? DEFAULT_LIQUID_GLASS_CONFIG.tint,\n    radius: this.radius() ?? this.providedConfig.radius ?? DEFAULT_LIQUID_GLASS_CONFIG.radius,\n    specular: this.specular() ?? this.providedConfig.specular ?? DEFAULT_LIQUID_GLASS_CONFIG.specular,\n  }));\n\n  private acquiredScale: number | null = null;\n\n  constructor() {\n    afterNextRender(() => {\n      this.ensurePositioned();\n      this.browserRendered.set(true);\n    });\n\n    effect(() => {\n      if (!this.browserRendered()) {\n        return;\n      }\n      const config = this.resolvedConfig();\n      this.syncFilter(config.displacementScale);\n      this.applyCssProperties(config);\n    });\n  }\n\n  ngOnDestroy(): void {\n    if (this.acquiredScale !== null) {\n      this.filterService.release(this.acquiredScale);\n      this.acquiredScale = null;\n    }\n  }\n\n  /** Sets `position: relative` only if the host is unpositioned, so it never clobbers an existing absolute/fixed/sticky layout. */\n  private ensurePositioned(): void {\n    const host = this.elementRef.nativeElement;\n    const currentPosition = getComputedStyle(host).position;\n    if (currentPosition === 'static') {\n      this.renderer.setStyle(host, 'position', 'relative');\n    }\n    this.renderer.setStyle(host, 'isolation', 'isolate');\n  }\n\n  private syncFilter(scale: number): void {\n    if (this.acquiredScale === scale) {\n      return;\n    }\n\n    const previousScale = this.acquiredScale;\n    const filterId = this.filterService.acquire(scale);\n    this.acquiredScale = scale;\n\n    if (previousScale !== null) {\n      this.filterService.release(previousScale);\n    }\n\n    this.setCustomProperty('--lg-filter-url', `url(#${filterId})`);\n  }\n\n  private applyCssProperties(config: LiquidGlassConfig): void {\n    this.setCustomProperty('--lg-blur', `${config.blur}px`);\n    this.setCustomProperty('--lg-saturation', `${config.saturation}%`);\n    this.setCustomProperty('--lg-brightness', `${config.brightness}`);\n    this.setCustomProperty('--lg-tint', config.tint);\n    this.setCustomProperty('--lg-radius', config.radius);\n    this.setCustomProperty('--lg-specular-display', config.specular ? '1' : '0');\n  }\n\n  /**\n   * Renderer2.setStyle() only calls the DOM's setProperty() (required for custom properties)\n   * when RendererStyleFlags2.DashCase is passed; without it, it falls back to bracket-property\n   * assignment (`el.style[name] = value`), which is a silent no-op for `--`-prefixed names.\n   */\n  private setCustomProperty(name: string, value: string): void {\n    this.renderer.setStyle(\n      this.elementRef.nativeElement,\n      name,\n      value,\n      RendererStyleFlags2.DashCase,\n    );\n  }\n}\n","/*\n * Public API Surface of ngx-liquid-glass\n */\n\nexport * from './lib/liquid-glass.directive';\nexport * from './lib/liquid-glass-config';\nexport * from './lib/liquid-glass-config.token';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="ngx-liquid-glazz" />
+export * from './public-api';

package/lib/liquid-glass-config.d.ts

@@ -0,0 +1,22 @@
+/**
+ * App-wide tunables for the Liquid Glass effect.
+ * Every field is optional so callers can override just the defaults they care about.
+ * Precedence (highest to lowest): directive input > provideLiquidGlassConfig() > built-in default.
+ */
+export interface LiquidGlassConfig {
+    /** Refraction strength, maps to the SVG `feDisplacementMap` `scale` attribute. */
+    displacementScale: number;
+    /** Frost blur in px, maps to `--lg-blur`. */
+    blur: number;
+    /** Backdrop saturation percent, maps to `--lg-saturation`. */
+    saturation: number;
+    /** Backdrop brightness multiplier, maps to `--lg-brightness`. */
+    brightness: number;
+    /** Tint color layered over the refracted backdrop, maps to `--lg-tint`. */
+    tint: string;
+    /** Corner radius, maps to `--lg-radius`. */
+    radius: string;
+    /** Whether to render the specular edge-highlight inset shadows. */
+    specular: boolean;
+}
+export declare const DEFAULT_LIQUID_GLASS_CONFIG: LiquidGlassConfig;

package/lib/liquid-glass-config.token.d.ts

@@ -0,0 +1,18 @@
+import { InjectionToken, Provider } from '@angular/core';
+import { LiquidGlassConfig } from './liquid-glass-config';
+/**
+ * Holds only the overrides passed to `provideLiquidGlassConfig()`, never the built-in defaults.
+ * Keeping it partial lets the directive distinguish "not provided" from "explicitly set to a
+ * falsy value" when computing precedence against its own inputs.
+ */
+export declare const LIQUID_GLASS_CONFIG: InjectionToken<Partial<LiquidGlassConfig>>;
+/**
+ * Overrides the app-wide Liquid Glass defaults. Directive inputs still take precedence over
+ * whatever is configured here.
+ *
+ * @example
+ * bootstrapApplication(AppComponent, {
+ *   providers: [provideLiquidGlassConfig({ blur: 6, tint: 'rgba(0,0,0,0.08)' })],
+ * });
+ */
+export declare function provideLiquidGlassConfig(config: Partial<LiquidGlassConfig>): Provider;

package/lib/liquid-glass-filter.service.d.ts

@@ -0,0 +1,28 @@
+import * as i0 from "@angular/core";
+/**
+ * Owns the SVG `<filter>` definitions that power the refraction effect and injects them into
+ * `document.body`.
+ *
+ * `scale` (feDisplacementMap's `scale` attribute) is the one filter parameter that can't be
+ * shared across all directive instances the way the rest of the CSS-custom-property-driven
+ * styling is, because SVG filter primitives don't accept CSS custom properties as attribute
+ * values. Instead of generating a new filter per instance (wasteful) or a single shared filter
+ * (loses per-instance tuning), this service ref-counts one `<filter>` element per distinct scale
+ * value: directives that share a scale share a filter; a filter is removed from the DOM once
+ * its last consumer is destroyed.
+ */
+export declare class LiquidGlassFilterService {
+    private readonly document;
+    private readonly refCounts;
+    private svgRoot;
+    /** Registers a consumer of the filter for `scale`, creating it if this is the first. Returns the element ID to reference via `url(#id)`. */
+    acquire(scale: number): string;
+    /** Releases a consumer's hold on `scale`'s filter, removing it from the DOM once no consumers remain. */
+    release(scale: number): void;
+    private filterId;
+    private injectFilter;
+    private removeFilter;
+    private getOrCreateSvgRoot;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LiquidGlassFilterService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<LiquidGlassFilterService>;
+}

package/lib/liquid-glass.directive.d.ts

@@ -0,0 +1,41 @@
+import { OnDestroy } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Applies the iOS "Liquid Glass" effect to its host element: SVG-based refraction, a frost/tint
+ * pass, and specular edge highlights, all driven by CSS custom properties so runtime input
+ * changes update live with zero re-render cost. Pair with the shipped `styles/liquid-glass.css`
+ * stylesheet, which reads these custom properties on `::before`/`::after` pseudo-elements.
+ *
+ * Does not restructure host content — safe to apply to buttons, cards, navs, or any element.
+ */
+export declare class LiquidGlassDirective implements OnDestroy {
+    private readonly elementRef;
+    private readonly renderer;
+    private readonly filterService;
+    private readonly providedConfig;
+    /** Flipped by afterNextRender(); gates DOM work so nothing runs before the first browser render (SSR safety) or during it. */
+    private readonly browserRendered;
+    readonly displacementScale: import("@angular/core").InputSignal<number | undefined>;
+    readonly blur: import("@angular/core").InputSignal<number | undefined>;
+    readonly saturation: import("@angular/core").InputSignal<number | undefined>;
+    readonly brightness: import("@angular/core").InputSignal<number | undefined>;
+    readonly tint: import("@angular/core").InputSignal<string | undefined>;
+    readonly radius: import("@angular/core").InputSignal<string | undefined>;
+    readonly specular: import("@angular/core").InputSignal<boolean | undefined>;
+    private readonly resolvedConfig;
+    private acquiredScale;
+    constructor();
+    ngOnDestroy(): void;
+    /** Sets `position: relative` only if the host is unpositioned, so it never clobbers an existing absolute/fixed/sticky layout. */
+    private ensurePositioned;
+    private syncFilter;
+    private applyCssProperties;
+    /**
+     * Renderer2.setStyle() only calls the DOM's setProperty() (required for custom properties)
+     * when RendererStyleFlags2.DashCase is passed; without it, it falls back to bracket-property
+     * assignment (`el.style[name] = value`), which is a silent no-op for `--`-prefixed names.
+     */
+    private setCustomProperty;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LiquidGlassDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<LiquidGlassDirective, "[liquidGlass]", never, { "displacementScale": { "alias": "displacementScale"; "required": false; "isSignal": true; }; "blur": { "alias": "blur"; "required": false; "isSignal": true; }; "saturation": { "alias": "saturation"; "required": false; "isSignal": true; }; "brightness": { "alias": "brightness"; "required": false; "isSignal": true; }; "tint": { "alias": "tint"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "specular": { "alias": "specular"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "ngx-liquid-glazz",
+  "version": "0.1.0",
+  "description": "Real iOS-style Liquid Glass (refraction, not just blur) for any Angular element via an SVG displacement filter directive.",
+  "license": "MIT",
+  "keywords": [
+    "angular",
+    "liquid-glass",
+    "glassmorphism",
+    "backdrop-filter",
+    "ios",
+    "ui",
+    "directive",
+    "frosted-glass",
+    "refraction"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/z4kettan/ios_liquid_glass.git"
+  },
+  "homepage": "https://github.com/z4kettan/ios_liquid_glass#readme",
+  "bugs": {
+    "url": "https://github.com/z4kettan/ios_liquid_glass/issues"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=17.1.0 <23.0.0",
+    "@angular/core": ">=17.1.0 <23.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "exports": {
+    "./styles": {
+      "default": "./styles/liquid-glass.css"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/ngx-liquid-glazz.mjs",
+      "esm": "./esm2022/ngx-liquid-glazz.mjs",
+      "default": "./fesm2022/ngx-liquid-glazz.mjs"
+    }
+  },
+  "module": "fesm2022/ngx-liquid-glazz.mjs",
+  "typings": "index.d.ts"
+}

package/public-api.d.ts

@@ -0,0 +1,3 @@
+export * from './lib/liquid-glass.directive';
+export * from './lib/liquid-glass-config';
+export * from './lib/liquid-glass-config.token';

package/styles/liquid-glass.css

@@ -0,0 +1,78 @@
+/*
+ * ngx-liquid-glass — base stylesheet.
+ * Import once, globally: `@import 'ngx-liquid-glass/styles';` (or the equivalent for your
+ * bundler). The [liquidGlass] directive sets the --lg-* custom properties consumed below; it
+ * does not restructure host content, so the effect is built entirely from ::before/::after
+ * pseudo-elements plus one inset box-shadow set on the host itself.
+ */
+
+.lg-glass {
+  --lg-blur: 3px;
+  --lg-saturation: 180%;
+  --lg-brightness: 1.08;
+  --lg-tint: rgba(255, 255, 255, 0.04);
+  --lg-radius: 24px;
+  --lg-specular-display: 1;
+  --lg-filter-url: none;
+
+  border-radius: var(--lg-radius);
+  overflow: visible;
+  /* Neutralize UA form-control chrome (buttons in particular ship an opaque background and
+     border) so the glass layers, sitting behind the host in z-index, are actually visible. */
+  background: none;
+  border: none;
+}
+
+/* Layer 1: refraction. Chromium-only (backdrop-filter: url(#svg-filter) has no effect anywhere
+   else), so it is additive with the frost/tint layer below rather than a hard dependency. */
+.lg-glass::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -2;
+  border-radius: inherit;
+  backdrop-filter: var(--lg-filter-url) blur(var(--lg-blur)) saturate(var(--lg-saturation))
+    brightness(var(--lg-brightness));
+  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturation))
+    brightness(var(--lg-brightness));
+  pointer-events: none;
+}
+
+/* Layer 2: frost/tint pass, always present regardless of backdrop-filter(url()) support. */
+.lg-glass::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background: var(--lg-tint);
+  pointer-events: none;
+}
+
+/* Layer 3: specular edge highlights, toggled via --lg-specular-display (set by the `specular`
+   input) since a bare custom property can't be used as a CSS property value directly. */
+.lg-glass {
+  box-shadow:
+    inset 0 1px 1px rgba(255, 255, 255, calc(0.35 * var(--lg-specular-display))),
+    inset 0 -1px 1px rgba(255, 255, 255, calc(0.12 * var(--lg-specular-display))),
+    inset 1px 0 1px rgba(255, 255, 255, calc(0.08 * var(--lg-specular-display))),
+    inset -1px 0 1px rgba(255, 255, 255, calc(0.08 * var(--lg-specular-display)));
+  transition: box-shadow 0.2s ease-out;
+}
+
+/* Refraction (feDisplacementMap via backdrop-filter: url()) is Chromium-only today. Safari and
+   Firefox either ignore the url() filter function or reject the whole backdrop-filter
+   declaration; either way they fall through to a plain frosted-glass look rather than looking
+   broken. */
+@supports not (backdrop-filter: url('#x')) {
+  .lg-glass::before {
+    backdrop-filter: blur(14px) saturate(180%);
+    -webkit-backdrop-filter: blur(14px) saturate(180%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lg-glass {
+    transition: none;
+  }
+}