@pacem/pacem-fx 1.0.0-abel

package/dist/esm/hero.js

@@ -0,0 +1,158 @@
+var __decorate = (this && this.__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;
+};
+import { CustomElement, Watch, PropertyConverters, P, PCSS, Utils } from '@pacem/pacem-core';
+import { PacemFxElement } from './types';
+//namespace Pacem.Components.Fx {
+const HERO_CSS = 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 PropertyConverters.Element.convert(attr);
+        return 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' && !Utils.isNull(old)) {
+            this._resetTarget(old);
+        }
+        // recompute back path (originalState)?
+        if (name === 'from' && this.hero && !Utils.isNull(val)) {
+            this._originalState = this._computeFromState();
+        }
+        // trigger
+        if (name === 'hero' || name === 'target' || name === 'goal') {
+            if (!Utils.isNull(this.target)) {
+                if (this.hero) {
+                    this.start();
+                }
+                else {
+                    this.reset();
+                }
+            }
+        }
+    }
+    viewActivatedCallback() {
+        super.viewActivatedCallback();
+        if (this.hero && !Utils.isNull(this.target))
+            this.start();
+    }
+    disconnectedCallback() {
+        if (!Utils.isNull(this.target))
+            this.reset();
+        super.disconnectedCallback();
+    }
+    _computeFromState() {
+        const tget = this.target, offset = Utils.offset(tget);
+        if (this.from instanceof Element) {
+            let from = 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];
+        }
+        Utils.removeClass(tget, HERO_CSS);
+    }
+    reset() {
+        //
+        if (Utils.isNull(this._originalState) || 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 && !Utils.isNull(this.target)) {
+            let goal;
+            if (this.to instanceof Element) {
+                let to = 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 = 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];
+            }
+            //
+            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 Utils.waitForAnimationEnd(tget, TRANSITION + 10);
+        // Utils.addAnimationEndCallback(tget, callback, TRANSITION + 10);
+    }
+};
+__decorate([
+    Watch({ converter: PropertyConverters.Boolean })
+], PacemFxHeroElement.prototype, "hero", void 0);
+__decorate([
+    Watch({ converter: rectOrElementConverter, emit: false })
+], PacemFxHeroElement.prototype, "to", void 0);
+__decorate([
+    Watch({ converter: rectOrElementConverter, emit: false })
+], PacemFxHeroElement.prototype, "from", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.Number, emit: false })
+], PacemFxHeroElement.prototype, "duration", void 0);
+PacemFxHeroElement = __decorate([
+    CustomElement({ tagName: P + '-fx-hero' })
+], PacemFxHeroElement);
+export { PacemFxHeroElement };

package/dist/esm/index-components-fx.js

@@ -0,0 +1,7 @@
+export * from './types';
+export * from './ripple';
+export * from './pulse';
+export * from './hero';
+export * from './list';
+export * from './gradient';
+export * from './fancy';

package/dist/esm/index-components.js

@@ -0,0 +1 @@
+export * as Fx from './index-components-fx';

package/dist/esm/index-iife.js

@@ -0,0 +1,3 @@
+import { DeepMerger } from '@pacem/pacem-foundation';
+import * as Output from './index';
+DeepMerger.merge(Output);

package/dist/esm/index.js

@@ -0,0 +1 @@
+export * as Components from './index-components';

package/dist/esm/list.js

@@ -0,0 +1,69 @@
+var __decorate = (this && this.__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;
+};
+import { CustomElement, P, PCSS, Utils } from '@pacem/pacem-core';
+import { PacemFxElement } from './types';
+//namespace Pacem.Components.Fx {
+const CSS_CLASS = 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 (!Utils.isNull(this.target)) {
+            this._setup();
+        }
+    }
+    disconnectedCallback() {
+        if (!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) {
+        Utils.removeClass(el, CSS_CLASS);
+        this._observer.disconnect();
+    }
+    _setup() {
+        const target = this.target;
+        Utils.addClass(target, CSS_CLASS);
+        const obs = this._observer = new MutationObserver(this._observed);
+        obs.observe(target, { childList: true });
+    }
+};
+PacemFxListElement = __decorate([
+    CustomElement({
+        tagName: P + '-fx-list'
+    })
+], PacemFxListElement);
+export { PacemFxListElement };

package/dist/esm/pulse.js

@@ -0,0 +1,115 @@
+var __decorate = (this && this.__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;
+};
+import { CustomElement, Defaults, P, PCSS, ViewChild, Utils, Components } from '@pacem/pacem-core';
+import { PacemFxElement } from './types';
+//namespace Pacem.Components.Fx {
+const PULSE_CSS = "pulse";
+const SVG_NS = 'http://www.w3.org/2000/svg';
+function buildAnimationName(id) {
+    return `${PCSS}-fx-pulse-${id}`;
+}
+function ensureCssAnimation(id, args, rx = '0', ry = rx) {
+    const selector = 'style#' + id;
+    const existing = document.querySelector(selector);
+    if (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 = Utils.uniqueCode();
+    }
+    #key;
+    viewActivatedCallback() {
+        super.viewActivatedCallback();
+        this._pulse();
+    }
+    disconnectedCallback() {
+        if (!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 = Utils.isNull(this.target) || Utils.isNull(size) || !(size.height > 0) || !(size.width > 0);
+        this._resize.disabled = this.disabled;
+        if (this.disabled || inert) {
+            Utils.addClass(this, 'pulse-off');
+            return;
+        }
+        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([
+    ViewChild(P + '-resize')
+], PacemFxPulseElement.prototype, "_resize", void 0);
+__decorate([
+    ViewChild('svg')
+], PacemFxPulseElement.prototype, "_svg", void 0);
+__decorate([
+    ViewChild('svg > rect[rect1]')
+], PacemFxPulseElement.prototype, "_rect1", void 0);
+__decorate([
+    ViewChild('svg > rect[rect2]')
+], PacemFxPulseElement.prototype, "_rect2", void 0);
+PacemFxPulseElement = __decorate([
+    CustomElement({
+        tagName: P + '-fx-pulse', shadow: Defaults.USE_SHADOW_ROOT,
+        template: `<${P}-resize target="{{ :host.target }}" watch-position="true" on-${Components.ResizeEventName}=":host._resizeHandler($event)"></${P}-resize>
+<svg class="${PULSE_CSS}" xmlns="${SVG_NS}">
+    <rect rect1 /><rect rect2 />
+</svg>`
+    })
+], PacemFxPulseElement);
+export { PacemFxPulseElement };

package/dist/esm/ripple.js

@@ -0,0 +1,105 @@
+var __decorate = (this && this.__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;
+};
+import { CustomElement, Defaults, P, ViewChild, Utils, PacemEventTarget } from '@pacem/pacem-core';
+import { Point } from '@pacem/pacem-foundation';
+import { PacemFxElement } from './types';
+//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 PacemEventTarget && this.target.disabled)) {
+                return;
+            }
+            if (e instanceof MouseEvent && e.button !== 0) {
+                // only the 'main' (left) button click goes.
+                return;
+            }
+            const rect = 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(Point.distance(point, topLeft), Point.distance(point, topRight), Point.distance(point, bottomRight), 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';
+            Utils.addAnimationEndCallback(wave, () => {
+                this._lock = false;
+                this._tryRemove();
+            });
+            this._lock = true;
+            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 (!Utils.isNull(old)) {
+                this._reset(old);
+            }
+            if (!Utils.isNull(val)) {
+                this._set(val);
+            }
+        }
+    }
+    viewActivatedCallback() {
+        super.viewActivatedCallback();
+        if (!Utils.isNull(this.target))
+            this._set();
+    }
+    disconnectedCallback() {
+        if (!Utils.isNull(this.target))
+            this._reset();
+        super.disconnectedCallback();
+    }
+    _tryRemove() {
+        if (!this._lock && this._remove) {
+            this._remove = false;
+            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([
+    ViewChild('.' + RIPPLE_CSS)
+], PacemFxRippleElement.prototype, "_wave", void 0);
+PacemFxRippleElement = __decorate([
+    CustomElement({
+        tagName: P + '-fx-ripple', shadow: Defaults.USE_SHADOW_ROOT,
+        template: `<div class="${RIPPLE_CSS}"></div>`
+    })
+], PacemFxRippleElement);
+export { PacemFxRippleElement };

package/dist/esm/types.js

@@ -0,0 +1,12 @@
+var __decorate = (this && this.__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;
+};
+import { Watch, PropertyConverters, PacemEventTarget } from '@pacem/pacem-core';
+export class PacemFxElement extends PacemEventTarget {
+}
+__decorate([
+    Watch({ converter: PropertyConverters.Element })
+], PacemFxElement.prototype, "target", void 0);

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@pacem/pacem-fx",
+  "files": [
+    "dist/browser/*.*",
+    "dist/bundle/*.*",
+    "dist/esm/*.*",
+    "typings/*.*",
+    "README.md",
+    "LICENSE",
+    "NOTICE",
+    "package.json"
+  ],
+  "type": "module",
+  "dependencies": {
+    "@pacem/pacem-foundation": "*",
+    "@pacem/pacem-core": "*"
+  },
+  "main": "./dist/esm/index.js",
+  "module": "./dist/esm/index.js",
+  "typings": "./typings/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "types": "./typings/index.d.ts"
+    }
+  },
+  "version": "1.0.0-abel",
+  "author": {
+    "name": "Pacem",
+    "url": "https://pacem.it"
+  },
+  "license": "Apache-2.0",
+  "homepage": "https://js.pacem.it",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pacem-it/pacem.git"
+  }
+}