@pacem/pacem 1.0.0-abel

package/dist/browser/pacem-fx.js

@@ -0,0 +1,870 @@
+/**
+ * @pacem/pacem v1.0.0-abel (https://js.pacem.it)
+ * Copyright 2026 Pacem (https://pacem.it)
+ * Licensed under Apache-2.0
+ */
+(function (pacemFoundation, pacemCore) {
+    'use strict';
+
+    var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    };
+    class PacemFxElement extends pacemCore.PacemEventTarget {
+    }
+    __decorate$6([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Element })
+    ], PacemFxElement.prototype, "target", void 0);
+
+    var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    };
+    //namespace Pacem.Components.Fx {
+    const RIPPLE_CSS = "ripple";
+    let PacemFxRippleElement = class PacemFxRippleElement extends PacemFxElement {
+        constructor() {
+            super(...arguments);
+            this._lock = false;
+            this._remove = false;
+            this._rippleHandler = (e) => {
+                if (this.disabled || (this.target instanceof pacemCore.PacemEventTarget && this.target.disabled)) {
+                    return;
+                }
+                if (e instanceof MouseEvent && e.button !== 0) {
+                    // only the 'main' (left) button click goes.
+                    return;
+                }
+                const rect = pacemCore.Utils.offset(this.target);
+                const style = getComputedStyle(this.target);
+                const css = this.style;
+                css.top = rect.top + 'px';
+                css.left = rect.left + 'px';
+                css.width = rect.width + 'px';
+                css.height = rect.height + 'px';
+                css.borderRadius = style.borderRadius;
+                const pointSrc = e.type === 'touchstart' ? e.touches[0] : e;
+                const point = { x: pointSrc.pageX, y: pointSrc.pageY };
+                const topLeft = { x: rect.left, y: rect.top }, topRight = { x: rect.left + rect.width, y: rect.top }, bottomLeft = { x: rect.left, y: rect.top + rect.height }, bottomRight = { x: topRight.x, y: bottomLeft.y };
+                const radius = Math.max(pacemFoundation.Point.distance(point, topLeft), pacemFoundation.Point.distance(point, topRight), pacemFoundation.Point.distance(point, bottomRight), pacemFoundation.Point.distance(point, bottomLeft));
+                const wave = this._wave;
+                wave.style.left = (point.x - rect.left - radius) + 'px';
+                wave.style.top = (point.y - rect.top - radius) + 'px';
+                wave.style.width = wave.style.height = (2 * radius) + 'px';
+                pacemCore.Utils.addAnimationEndCallback(wave, () => {
+                    this._lock = false;
+                    this._tryRemove();
+                });
+                this._lock = true;
+                pacemCore.Utils.addClass(wave, 'ripple-go');
+            };
+            this._unrippleHandler = (e) => {
+                this._remove = true;
+                this._tryRemove();
+            };
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            // target switch?
+            if (name === 'target') {
+                if (!pacemCore.Utils.isNull(old)) {
+                    this._reset(old);
+                }
+                if (!pacemCore.Utils.isNull(val)) {
+                    this._set(val);
+                }
+            }
+        }
+        viewActivatedCallback() {
+            super.viewActivatedCallback();
+            if (!pacemCore.Utils.isNull(this.target))
+                this._set();
+        }
+        disconnectedCallback() {
+            if (!pacemCore.Utils.isNull(this.target))
+                this._reset();
+            super.disconnectedCallback();
+        }
+        _tryRemove() {
+            if (!this._lock && this._remove) {
+                this._remove = false;
+                pacemCore.Utils.removeClass(this._wave, 'ripple-go');
+            }
+        }
+        _set(val = this.target) {
+            val.addEventListener('mousedown', this._rippleHandler, false);
+            val.addEventListener('touchstart', this._rippleHandler, false);
+            val.addEventListener('touchend', this._unrippleHandler, false);
+            val.addEventListener('mouseup', this._unrippleHandler, false);
+            val.addEventListener('mousemove', this._unrippleHandler, false);
+        }
+        _reset(old = this.target) {
+            old.removeEventListener('mousedown', this._rippleHandler, false);
+            old.removeEventListener('touchstart', this._rippleHandler, false);
+            old.removeEventListener('touchend', this._unrippleHandler, false);
+            old.removeEventListener('mouseup', this._unrippleHandler, false);
+            old.removeEventListener('mousemove', this._unrippleHandler, false);
+        }
+    };
+    __decorate$5([
+        pacemCore.ViewChild('.' + RIPPLE_CSS)
+    ], PacemFxRippleElement.prototype, "_wave", void 0);
+    PacemFxRippleElement = __decorate$5([
+        pacemCore.CustomElement({
+            tagName: pacemCore.P + '-fx-ripple', shadow: pacemCore.Defaults.USE_SHADOW_ROOT,
+            template: `<div class="${RIPPLE_CSS}"></div>`
+        })
+    ], PacemFxRippleElement);
+
+    var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    };
+    //namespace Pacem.Components.Fx {
+    const PULSE_CSS = "pulse";
+    const SVG_NS = 'http://www.w3.org/2000/svg';
+    function buildAnimationName(id) {
+        return `${pacemCore.PCSS}-fx-pulse-${id}`;
+    }
+    function ensureCssAnimation(id, args, rx = '0', ry = rx) {
+        const selector = 'style#' + id;
+        const existing = document.querySelector(selector);
+        if (pacemCore.Utils.isNull(existing)) {
+            const newStyle = document.createElement('style');
+            newStyle.id = id;
+            document.head.appendChild(newStyle);
+        }
+        const css = document.querySelector(selector);
+        const w = args.width, h = args.height, dim = Math.max(w, h), x = .5 * (dim - w), y = .5 * (dim - h);
+        css.sheet.insertRule(`@keyframes ${buildAnimationName(id)} {
+    0%{
+        opacity: .25; stroke-thickness: 0; rx: ${rx}; ry: ${ry}; x: ${x}px; y: ${y}px; width: ${args.width}px; height: ${args.height}px;
+    }
+    50%{
+        width: ${args.width}px; height: ${args.height}px; transform: scale(1); stroke-width: 10px; rx: ${rx}; ry: ${ry}; opacity: .333; x: ${x}px; y: ${y}px; width: ${w}px; height: ${h}px;
+    }
+    80%{
+        stroke-width: 10px;
+    }
+    100%{
+        opacity: 0; rx: 50%; ry: 50%; transform: scale(2); stroke-width: 0; width: ${dim}px; height: ${dim}px; x: 0; y: 0
+    }
+}`, 0);
+        for (let j = css.sheet.rules.length - 1; j > 0; j--) {
+            css.sheet.deleteRule(j);
+        }
+        return css;
+    }
+    let PacemFxPulseElement = class PacemFxPulseElement extends PacemFxElement {
+        constructor() {
+            super();
+            this._resizeHandler = (e) => {
+                this._pulse(e.detail);
+            };
+            this.#key = pacemCore.Utils.uniqueCode();
+        }
+        #key;
+        viewActivatedCallback() {
+            super.viewActivatedCallback();
+            this._pulse();
+        }
+        disconnectedCallback() {
+            if (!pacemCore.Utils.isNull(this._sheet)) {
+                this._sheet.remove();
+                this._sheet = null;
+            }
+            super.disconnectedCallback();
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (name === 'disabled' && !first) {
+                this._pulse();
+            }
+        }
+        _pulse(size = this._resize.currentSize) {
+            const inert = pacemCore.Utils.isNull(this.target) || pacemCore.Utils.isNull(size) || !(size.height > 0) || !(size.width > 0);
+            this._resize.disabled = this.disabled;
+            if (this.disabled || inert) {
+                pacemCore.Utils.addClass(this, 'pulse-off');
+                return;
+            }
+            pacemCore.Utils.removeClass(this, 'pulse-off');
+            const rect = size;
+            const style = getComputedStyle(this.target);
+            const css = this.style;
+            const dim = Math.max(rect.width, rect.height);
+            css.width = dim + 'px';
+            css.height = dim + 'px';
+            css.top = (rect.top + .5 * (rect.height - dim)) + 'px';
+            css.left = (rect.left + .5 * (rect.width - dim)) + 'px';
+            const rect1 = this._rect1, rect2 = this._rect2;
+            const css1 = rect1.style, css2 = rect2.style;
+            this._sheet = ensureCssAnimation(this.#key, size, style.borderTopLeftRadius);
+            const animationName = buildAnimationName(this.#key);
+            css1.animation = css2.animation = `${animationName} both cubic-bezier(0.37, 0, 0.63, 1) 1.25s infinite`;
+            css2.animationDelay = '.175s';
+        }
+    };
+    __decorate$4([
+        pacemCore.ViewChild(pacemCore.P + '-resize')
+    ], PacemFxPulseElement.prototype, "_resize", void 0);
+    __decorate$4([
+        pacemCore.ViewChild('svg')
+    ], PacemFxPulseElement.prototype, "_svg", void 0);
+    __decorate$4([
+        pacemCore.ViewChild('svg > rect[rect1]')
+    ], PacemFxPulseElement.prototype, "_rect1", void 0);
+    __decorate$4([
+        pacemCore.ViewChild('svg > rect[rect2]')
+    ], PacemFxPulseElement.prototype, "_rect2", void 0);
+    PacemFxPulseElement = __decorate$4([
+        pacemCore.CustomElement({
+            tagName: pacemCore.P + '-fx-pulse', shadow: pacemCore.Defaults.USE_SHADOW_ROOT,
+            template: `<${pacemCore.P}-resize target="{{ :host.target }}" watch-position="true" on-${pacemCore.Components.ResizeEventName}=":host._resizeHandler($event)"></${pacemCore.P}-resize>
+<svg class="${PULSE_CSS}" xmlns="${SVG_NS}">
+    <rect rect1 /><rect rect2 />
+</svg>`
+        })
+    ], PacemFxPulseElement);
+
+    var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    };
+    //namespace Pacem.Components.Fx {
+    const HERO_CSS = pacemCore.PCSS + "-hero";
+    const TRANSITION = 200;
+    const HEROING_IN = "entering";
+    const HEROING_OUT = "exiting";
+    const HERO_IN = "entered";
+    const HERO_OUT = "exited";
+    const rectOrElementConverter = {
+        convert: attr => {
+            if (attr.trim().startsWith('#'))
+                return pacemCore.PropertyConverters.Element.convert(attr);
+            return pacemCore.PropertyConverters.Json.convert(attr);
+        }
+    };
+    let PacemFxHeroElement = class PacemFxHeroElement extends PacemFxElement {
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            // target switch?
+            if (name === 'target' && !pacemCore.Utils.isNull(old)) {
+                this._resetTarget(old);
+            }
+            // recompute back path (originalState)?
+            if (name === 'from' && this.hero && !pacemCore.Utils.isNull(val)) {
+                this._originalState = this._computeFromState();
+            }
+            // trigger
+            if (name === 'hero' || name === 'target' || name === 'goal') {
+                if (!pacemCore.Utils.isNull(this.target)) {
+                    if (this.hero) {
+                        this.start();
+                    }
+                    else {
+                        this.reset();
+                    }
+                }
+            }
+        }
+        viewActivatedCallback() {
+            super.viewActivatedCallback();
+            if (this.hero && !pacemCore.Utils.isNull(this.target))
+                this.start();
+        }
+        disconnectedCallback() {
+            if (!pacemCore.Utils.isNull(this.target))
+                this.reset();
+            super.disconnectedCallback();
+        }
+        _computeFromState() {
+            const tget = this.target, offset = pacemCore.Utils.offset(tget);
+            if (this.from instanceof Element) {
+                let from = pacemCore.Utils.offset(this.from);
+                return { x: from.left, y: from.top, width: from.width, height: from.height };
+            }
+            else {
+                return { x: offset.left, y: offset.top, width: offset.width, height: offset.height };
+            }
+        }
+        _resetTarget(tget = this.target) {
+            // reset inline style options
+            const style = tget.style;
+            // reset position/size
+            style.top = style.left = style.height = style.width = '';
+            for (let j = 0; j < style.length; j++) {
+                let prop = style.item(j);
+                style[prop] = '';
+            }
+            for (let prop in this._originalStyle) {
+                style[prop] = this._originalStyle[prop];
+            }
+            pacemCore.Utils.removeClass(tget, HERO_CSS);
+        }
+        reset() {
+            //
+            if (pacemCore.Utils.isNull(this._originalState) || pacemCore.Utils.isNull(this._targetState)) {
+                return;
+            }
+            this.dispatchEvent(new Event(HEROING_OUT));
+            return this._animate(this._targetState, this._originalState).then(() => {
+                this._resetTarget();
+                this.dispatchEvent(new Event(HERO_OUT));
+            });
+        }
+        start() {
+            if (!this.disabled && !pacemCore.Utils.isNull(this.target)) {
+                let goal;
+                if (this.to instanceof Element) {
+                    let to = pacemCore.Utils.offset(this.to);
+                    goal = { x: to.left, y: to.top, width: to.width, height: to.height };
+                }
+                else {
+                    goal = this.to;
+                }
+                const tget = this.target, wSize = pacemCore.Utils.windowSize, state = goal || { x: 0, y: 0, width: wSize.width, height: wSize.height }, style = tget.style;
+                this._targetState = state;
+                let start = this._originalState = this._computeFromState();
+                // save inline style options
+                this._originalStyle = {};
+                for (let j = 0; j < style.length; j++) {
+                    let prop = style.item(j);
+                    this._originalStyle[prop] = style[prop];
+                }
+                //
+                pacemCore.Utils.addClass(tget, HERO_CSS);
+                this.dispatchEvent(new Event(HEROING_IN));
+                return this._animate(start, state).then(() => {
+                    this.dispatchEvent(new Event(HERO_IN));
+                });
+            }
+            // nothing to do
+            return Promise.resolve();
+        }
+        _animate(from, to) {
+            const tget = this.target, style = tget.style;
+            // transformations to make target state look like original state
+            // i.e. `target state` gets constrained to fit `original state`.
+            const scaleX = from.width / to.width, scaleY = from.height / to.height, translateX = (from.x - to.x) + 'px', translateY = (from.y - to.y) + 'px';
+            style.transformOrigin = '0 0';
+            style.transition = 'none';
+            // set final state
+            style.transform = `translate(${translateX}, ${translateY}) scale(${scaleX}, ${scaleY})`;
+            style.width = to.width + 'px';
+            style.height = to.height + 'px';
+            style.top = to.y + 'px';
+            style.left = to.x + 'px';
+            // hero-animate
+            requestAnimationFrame(() => {
+                let duration = this.duration || TRANSITION;
+                style.transition = `transform cubic-bezier(0.445, 0.05, 0.55, 0.95) ${duration}ms, opacity ${duration}ms`;
+                style.transform = `translate(0, 0) scale(1)`;
+            });
+            return pacemCore.Utils.waitForAnimationEnd(tget, TRANSITION + 10);
+            // Utils.addAnimationEndCallback(tget, callback, TRANSITION + 10);
+        }
+    };
+    __decorate$3([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Boolean })
+    ], PacemFxHeroElement.prototype, "hero", void 0);
+    __decorate$3([
+        pacemCore.Watch({ converter: rectOrElementConverter, emit: false })
+    ], PacemFxHeroElement.prototype, "to", void 0);
+    __decorate$3([
+        pacemCore.Watch({ converter: rectOrElementConverter, emit: false })
+    ], PacemFxHeroElement.prototype, "from", void 0);
+    __decorate$3([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Number, emit: false })
+    ], PacemFxHeroElement.prototype, "duration", void 0);
+    PacemFxHeroElement = __decorate$3([
+        pacemCore.CustomElement({ tagName: pacemCore.P + '-fx-hero' })
+    ], PacemFxHeroElement);
+
+    var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    };
+    //namespace Pacem.Components.Fx {
+    const CSS_CLASS = pacemCore.PCSS + '-fx-list';
+    let PacemFxListElement = class PacemFxListElement extends PacemFxElement {
+        constructor() {
+            super(...arguments);
+            this._observed = (items) => {
+                const children = Array.from(this.target.children);
+                for (let item of items) {
+                    item.removedNodes.forEach(n => {
+                        if (n instanceof Element) {
+                            this.dispatchEvent(new CustomEvent('itemremoved', { detail: n }));
+                        }
+                    });
+                    item.addedNodes.forEach((n, j) => {
+                        if (n instanceof Element) {
+                            this.dispatchEvent(new CustomEvent('itemadded', { detail: { item: n, index: children.indexOf(n) } }));
+                        }
+                    });
+                }
+            };
+        }
+        viewActivatedCallback() {
+            super.viewActivatedCallback();
+            if (!pacemCore.Utils.isNull(this.target)) {
+                this._setup();
+            }
+        }
+        disconnectedCallback() {
+            if (!pacemCore.Utils.isNull(this._observer)) {
+                this._observer.disconnect();
+            }
+            super.disconnectedCallback();
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (name === 'target') {
+                if (old) {
+                    this._reset(old);
+                }
+                else {
+                    this._setup();
+                }
+            }
+        }
+        _reset(el) {
+            pacemCore.Utils.removeClass(el, CSS_CLASS);
+            this._observer.disconnect();
+        }
+        _setup() {
+            const target = this.target;
+            pacemCore.Utils.addClass(target, CSS_CLASS);
+            const obs = this._observer = new MutationObserver(this._observed);
+            obs.observe(target, { childList: true });
+        }
+    };
+    PacemFxListElement = __decorate$2([
+        pacemCore.CustomElement({
+            tagName: pacemCore.P + '-fx-list'
+        })
+    ], PacemFxListElement);
+
+    var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    };
+    //namespace Pacem.Components.Fx {
+    const GradientChangeEventName = 'gradientchange';
+    class GradientChangeEvent extends Event {
+        constructor() {
+            super(GradientChangeEventName, { cancelable: false, bubbles: false });
+        }
+    }
+    const SizeOrNumberConverter = {
+        convert: (attr, el) => {
+            try {
+                return pacemFoundation.Size.parse(attr);
+            }
+            catch {
+                return pacemCore.PropertyConverters.Number.convert(attr, el);
+            }
+        }
+    };
+    function pctFormatter(v) {
+        return Math.round(v * 1000) / 10 + '%';
+    }
+    let PacemFxGradientStopElement = class PacemFxGradientStopElement extends pacemCore.Components.PacemItemElement {
+        findContainer() {
+            return pacemCore.CustomElementUtils.findAncestor(this, i => i instanceof PacemFxGradientItemElement);
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (!first && (name === 'offset' || name === 'color' || name === 'opacity' || name === 'disabled' || name === 'hide')) {
+                this.dispatchEvent(new GradientChangeEvent());
+            }
+        }
+    };
+    __decorate$1([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemFxGradientStopElement.prototype, "offset", void 0);
+    __decorate$1([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PacemFxGradientStopElement.prototype, "color", void 0);
+    __decorate$1([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemFxGradientStopElement.prototype, "opacity", void 0);
+    PacemFxGradientStopElement = __decorate$1([
+        pacemCore.CustomElement({ tagName: pacemCore.P + '-fx-gradient-stop' })
+    ], PacemFxGradientStopElement);
+    class PacemFxGradientItemElement extends pacemCore.Components.PacemCrossItemsContainerElement {
+        constructor() {
+            super(...arguments);
+            this._dispatchGradientChangeHandler = (e) => {
+                this._dispatchGradientChange();
+            };
+        }
+        validate(item) {
+            return item instanceof PacemFxGradientStopElement;
+        }
+        register(item) {
+            const registered = super.register(item);
+            if (registered) {
+                item.addEventListener(GradientChangeEventName, this._dispatchGradientChangeHandler, false);
+            }
+            return registered;
+        }
+        unregister(item) {
+            const unregistered = super.unregister(item);
+            if (unregistered) {
+                item.removeEventListener(GradientChangeEventName, this._dispatchGradientChangeHandler, false);
+            }
+            return unregistered;
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (!first && this.doesPropertyTriggerGradientChange(name)) {
+                this._dispatchGradientChange();
+            }
+        }
+        _dispatchGradientChange() {
+            this.dispatchEvent(new GradientChangeEvent());
+        }
+        buildColor(color, opacity) {
+            if (opacity >= 0 && opacity <= 1) {
+                const clr = pacemFoundation.Colors.parse(color);
+                return pacemFoundation.Colors.stringify(pacemCore.Utils.extend(clr, { a: opacity }));
+            }
+            return color;
+        }
+    }
+    let PacemFxRadialGradientElement = class PacemFxRadialGradientElement extends PacemFxGradientItemElement {
+        doesPropertyTriggerGradientChange(prop) {
+            return ['shape', 'size', 'center', 'items', 'hide', 'disabled'].indexOf(prop) >= 0;
+        }
+        buildGradient() {
+            const items = this.items;
+            if (pacemCore.Utils.isNullOrEmpty(items)) {
+                return '';
+            }
+            const shape = this.shape === 'circle' ? 'circle' : 'ellipse';
+            const center = this.center ?? { x: .5, y: .5 };
+            const size = this.size;
+            let dim = '';
+            if (!pacemCore.Utils.isNullOrEmpty(size)) {
+                if (typeof size === 'number') {
+                    dim = `${size}px`;
+                }
+                else {
+                    dim = `${pctFormatter(size.width / 2)} ${pctFormatter(size.height / 2)}`;
+                }
+            }
+            let stops = [];
+            for (let { offset, color, hide, disabled, opacity } of items) {
+                if (hide || disabled) {
+                    continue;
+                }
+                const clr = this.buildColor(color, opacity);
+                stops.push(`${clr} ${pctFormatter(offset)}`);
+            }
+            return `radial-gradient(${shape} ${dim} at ${pctFormatter(center.x)} ${pctFormatter(center.y)} in oklab, ${stops.join(', ')})`;
+        }
+    };
+    __decorate$1([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PacemFxRadialGradientElement.prototype, "shape", void 0);
+    __decorate$1([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Point })
+    ], PacemFxRadialGradientElement.prototype, "center", void 0);
+    __decorate$1([
+        pacemCore.Watch({ emit: false, converter: SizeOrNumberConverter })
+    ], PacemFxRadialGradientElement.prototype, "size", void 0);
+    PacemFxRadialGradientElement = __decorate$1([
+        pacemCore.CustomElement({ tagName: pacemCore.P + '-fx-gradient-radial' })
+    ], PacemFxRadialGradientElement);
+    let PacemFxLinearGradientElement = class PacemFxLinearGradientElement extends PacemFxGradientItemElement {
+        doesPropertyTriggerGradientChange(prop) {
+            return ['angle', 'items', 'hide', 'disabled'].indexOf(prop) >= 0;
+        }
+        buildGradient() {
+            const items = this.items;
+            if (pacemCore.Utils.isNullOrEmpty(items)) {
+                return '';
+            }
+            const angle = this.angle ?? 0;
+            let stops = [];
+            for (let { offset, color, hide, disabled, opacity } of items) {
+                if (hide || disabled) {
+                    continue;
+                }
+                const clr = this.buildColor(color, opacity);
+                stops.push(`${clr} ${pctFormatter(offset)}`);
+            }
+            return `linear-gradient(${angle}deg in oklab, ${stops.join(', ')})`;
+        }
+    };
+    __decorate$1([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemFxLinearGradientElement.prototype, "angle", void 0);
+    PacemFxLinearGradientElement = __decorate$1([
+        pacemCore.CustomElement({ tagName: pacemCore.P + '-fx-gradient-linear' })
+    ], PacemFxLinearGradientElement);
+    let PacemFxGradientElement = class PacemFxGradientElement extends pacemCore.Components.PacemItemsContainerElement {
+        constructor() {
+            super(...arguments);
+            this._gradientChangeHandler = (e) => {
+                this._buildGradient();
+            };
+        }
+        validate(item) {
+            return item instanceof PacemFxGradientItemElement;
+        }
+        register(item) {
+            const registered = super.register(item);
+            if (registered) {
+                item.addEventListener(GradientChangeEventName, this._gradientChangeHandler, false);
+            }
+            return registered;
+        }
+        unregister(item) {
+            const unregistered = super.unregister(item);
+            if (unregistered) {
+                item.removeEventListener(GradientChangeEventName, this._gradientChangeHandler, false);
+            }
+            return unregistered;
+        }
+        viewActivatedCallback() {
+            super.viewActivatedCallback();
+            this._buildGradient();
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (!first) {
+                switch (name) {
+                    case 'target':
+                        if (old) {
+                            this._removeGradient(old);
+                        }
+                    case 'mode':
+                    case 'disabled':
+                        this._buildGradient();
+                        break;
+                }
+            }
+        }
+        _removeGradient(tget) {
+            pacemCore.Utils.removeClass(tget, pacemCore.PCSS + '-fx-gradient-text');
+            pacemCore.Utils.removeClass(tget, pacemCore.PCSS + '-fx-gradient-fill');
+            tget.style.backgroundImage = '';
+        }
+        _buildGradient() {
+            const tget = this.target;
+            if (pacemCore.Utils.isNull(tget)) {
+                return;
+            }
+            let gradients = '';
+            const items = this.disabled ? [] : this.items ?? [];
+            for (let item of items) {
+                if (item.hide || item.disabled) {
+                    continue;
+                }
+                const gradient = item.buildGradient();
+                if (pacemCore.Utils.isNullOrEmpty(gradient)) {
+                    continue;
+                }
+                gradients += gradient;
+                if (!gradients.trim().endsWith(',')) {
+                    gradients += ',';
+                }
+            }
+            if (!pacemCore.Utils.isNullOrEmpty(gradients)) {
+                const t = pacemCore.PCSS + '-fx-gradient-text', f = pacemCore.PCSS + '-fx-gradient-fill';
+                const ist = this.mode === 'text';
+                pacemCore.Utils.removeClass(tget, ist ? f : t);
+                pacemCore.Utils.addClass(tget, ist ? t : f);
+                tget.style.backgroundImage = gradients.substring(0, gradients.length - 1);
+            }
+            else {
+                this._removeGradient(tget);
+            }
+        }
+    };
+    __decorate$1([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Element })
+    ], PacemFxGradientElement.prototype, "target", void 0);
+    __decorate$1([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.String })
+    ], PacemFxGradientElement.prototype, "mode", void 0);
+    __decorate$1([
+        pacemCore.Debounce(true)
+    ], PacemFxGradientElement.prototype, "_buildGradient", null);
+    PacemFxGradientElement = __decorate$1([
+        pacemCore.CustomElement({ tagName: pacemCore.P + '-fx-gradient' })
+    ], PacemFxGradientElement);
+
+    var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    };
+    //namespace Pacem.Components.Fx {
+    const FANCY_CSS = pacemCore.PCSS + "-fancy";
+    const FANCIFY_CSS = pacemCore.PCSS + "-fancify";
+    const DEFAULT_GAP = 20;
+    let PacemFxFancyElement = class PacemFxFancyElement extends PacemFxElement {
+        constructor() {
+            super(...arguments);
+            this._progress = .0;
+            this._started = false;
+        }
+        get progress() {
+            return this._progress;
+        }
+        get started() {
+            return this._started;
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (name === 'fancify' || name === 'target') {
+                if (!pacemCore.Utils.isNull(this.target)) {
+                    if (this.fancify) {
+                        this.start();
+                    }
+                    else {
+                        this._reset();
+                    }
+                }
+            }
+        }
+        viewActivatedCallback() {
+            super.viewActivatedCallback();
+            if (this.fancify && !pacemCore.Utils.isNull(this.target))
+                this.start();
+        }
+        disconnectedCallback() {
+            cancelAnimationFrame(this._handle);
+            clearTimeout(this._handle1);
+            if (!pacemCore.Utils.isNull(this.target))
+                this._reset();
+            super.disconnectedCallback();
+        }
+        _reset() {
+            pacemCore.Utils.removeClass(this.target, FANCY_CSS);
+            if (this._started) {
+                this.dispatchEvent(new pacemCore.PropertyChangeEvent({ propertyName: 'started', oldValue: this._started, currentValue: this._started = false }));
+            }
+            this.dispatchEvent(new pacemCore.PropertyChangeEvent({ propertyName: 'progress', oldValue: this._progress, currentValue: this._progress = 0 }));
+            if (pacemCore.Utils.isNull(this._originalContent))
+                this._originalContent = this.target.innerHTML;
+            else
+                this.target.innerHTML = this._originalContent;
+        }
+        _parse() {
+            let n, a = [], walker = document.createTreeWalker(this.target, NodeFilter.SHOW_TEXT);
+            while (n = walker.nextNode()) {
+                if (n.textContent) {
+                    a.push(n);
+                }
+            }
+            this._textNodes = a;
+        }
+        start() {
+            if (!this.disabled) {
+                this._reset();
+                this._parse();
+                this._startShow();
+                this._handle1 = setTimeout(() => {
+                    this.dispatchEvent(new pacemCore.PropertyChangeEvent({ propertyName: 'started', oldValue: this._started, currentValue: this._started = true }));
+                }, this.delay || 0);
+            }
+        }
+        _startShow(ndx = 0) {
+            pacemCore.Utils.addClass(this.target, FANCY_CSS);
+            const trunks = this._textNodes, length = trunks.length;
+            this._fancify(trunks[ndx]);
+            const old = this._progress;
+            ndx++;
+            const curr = this._progress = ndx / length;
+            this.dispatchEvent(new pacemCore.PropertyChangeEvent({ propertyName: 'progress', oldValue: old, currentValue: curr }));
+            if (ndx < length) {
+                this._handle = requestAnimationFrame(() => {
+                    this._startShow(ndx);
+                });
+            }
+        }
+        _fancify(node) {
+            const content = node.textContent;
+            if (pacemCore.Utils.isNullOrEmpty(content) || !/[^\s]/.test(content)) {
+                return;
+            }
+            const leftPad = /^\s/.test(content), rightPad = /\s$/.test(content);
+            node.textContent = '';
+            //
+            const words = content.trim().split(' '), gap = this.gap || DEFAULT_GAP, delay = this.delay || 0;
+            let j = 0;
+            for (let word of words) {
+                var span = document.createElement('span');
+                span.className = FANCIFY_CSS;
+                span.style.animationDelay = `${(delay + j * gap)}ms`;
+                if (leftPad || j > 0)
+                    node.parentElement.insertBefore(document.createTextNode(' '), node);
+                span.textContent = word;
+                node.parentElement.insertBefore(span, node);
+                j++;
+            }
+            //
+            if (rightPad)
+                node.parentElement.insertBefore(document.createTextNode(' '), node);
+        }
+    };
+    __decorate([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Boolean })
+    ], PacemFxFancyElement.prototype, "fancify", void 0);
+    __decorate([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Number })
+    ], PacemFxFancyElement.prototype, "delay", void 0);
+    __decorate([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Number })
+    ], PacemFxFancyElement.prototype, "gap", void 0);
+    PacemFxFancyElement = __decorate([
+        pacemCore.CustomElement({ tagName: pacemCore.P + '-fx-fancy' })
+    ], PacemFxFancyElement);
+
+    var indexComponentsFx = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        PacemFxElement: PacemFxElement,
+        get PacemFxFancyElement () { return PacemFxFancyElement; },
+        get PacemFxGradientElement () { return PacemFxGradientElement; },
+        PacemFxGradientItemElement: PacemFxGradientItemElement,
+        get PacemFxGradientStopElement () { return PacemFxGradientStopElement; },
+        get PacemFxHeroElement () { return PacemFxHeroElement; },
+        get PacemFxLinearGradientElement () { return PacemFxLinearGradientElement; },
+        get PacemFxListElement () { return PacemFxListElement; },
+        get PacemFxPulseElement () { return PacemFxPulseElement; },
+        get PacemFxRadialGradientElement () { return PacemFxRadialGradientElement; },
+        get PacemFxRippleElement () { return PacemFxRippleElement; }
+    });
+
+    var indexComponents = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        Fx: indexComponentsFx
+    });
+
+    var Output = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        Components: indexComponents
+    });
+
+    pacemFoundation.DeepMerger.merge(Output);
+
+})(Pacem, Pacem);
+//# sourceMappingURL=pacem-fx.js.map