@pacem/pacem-fx 1.0.0-bessel → 1.0.0-binet

package/dist/esm/fancy.js

@@ -1,5 +1,5 @@
 /*!
- * @pacem/pacem-fx v1.0.0-bessel (https://js.pacem.it)
+ * @pacem/pacem-fx v1.0.0-binet (https://js.pacem.it)
  * Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */
@@ -15,15 +15,18 @@ import { PacemFxElement } from './types';
 const FANCY_CSS = PCSS + "-fancy";
 const FANCIFY_CSS = PCSS + "-fancify";
 const DEFAULT_GAP = 20;
+/** Reveals the `target` element's text content word by word, wrapping each word in an animated `<span>`. */
 let PacemFxFancyElement = class PacemFxFancyElement extends PacemFxElement {
     constructor() {
         super(...arguments);
         this._progress = .0;
         this._started = false;
     }
+    /** @readonly Gets the current show progress, as a number between `0` and `1`. */
     get progress() {
         return this._progress;
     }
+    /** @readonly Gets whether the fancify animation has (fully) started. */
     get started() {
         return this._started;
     }
@@ -72,6 +75,7 @@ let PacemFxFancyElement = class PacemFxFancyElement extends PacemFxElement {
         }
         this._textNodes = a;
     }
+    /** Starts (or restarts) the fancify effect on the `target` element. */
     start() {
         if (!this.disabled) {
             this._reset();

package/dist/esm/gradient.js

@@ -1,5 +1,5 @@
 /*!
- * @pacem/pacem-fx v1.0.0-bessel (https://js.pacem.it)
+ * @pacem/pacem-fx v1.0.0-binet (https://js.pacem.it)
  * Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */
@@ -31,6 +31,7 @@ const SizeOrNumberConverter = {
 function pctFormatter(v) {
     return Math.round(v * 1000) / 10 + '%';
 }
+/** A single color stop within a `PacemFxGradientItemElement` (radial or linear gradient). */
 let PacemFxGradientStopElement = class PacemFxGradientStopElement extends Components.PacemItemElement {
     findContainer() {
         return CustomElementUtils.findAncestor(this, i => i instanceof PacemFxGradientItemElement);
@@ -55,6 +56,7 @@ PacemFxGradientStopElement = __decorate([
     CustomElement({ tagName: P + '-fx-gradient-stop' })
 ], PacemFxGradientStopElement);
 export { PacemFxGradientStopElement };
+/** Base class for gradient-shape elements (radial, linear, ...) hosting `PacemFxGradientStopElement` color stops and producing a CSS gradient string. */
 export class PacemFxGradientItemElement extends Components.PacemCrossItemsContainerElement {
     constructor() {
         super(...arguments);
@@ -88,6 +90,7 @@ export class PacemFxGradientItemElement extends Components.PacemCrossItemsContai
     _dispatchGradientChange() {
         this.dispatchEvent(new GradientChangeEvent());
     }
+    /** Builds the CSS color for a stop, applying the given opacity (if in the `0`-`1` range) on top of the base `color`. */
     buildColor(color, opacity) {
         if (opacity >= 0 && opacity <= 1) {
             const clr = Colors.parse(color);
@@ -96,6 +99,7 @@ export class PacemFxGradientItemElement extends Components.PacemCrossItemsContai
         return color;
     }
 }
+/** Radial `<gradient>` shape, hosting one or more `PacemFxGradientStopElement` color stops. */
 let PacemFxRadialGradientElement = class PacemFxRadialGradientElement extends PacemFxGradientItemElement {
     doesPropertyTriggerGradientChange(prop) {
         return ['shape', 'size', 'center', 'items', 'hide', 'disabled'].indexOf(prop) >= 0;
@@ -141,6 +145,7 @@ PacemFxRadialGradientElement = __decorate([
     CustomElement({ tagName: P + '-fx-gradient-radial' })
 ], PacemFxRadialGradientElement);
 export { PacemFxRadialGradientElement };
+/** Linear `<gradient>` shape, hosting one or more `PacemFxGradientStopElement` color stops. */
 let PacemFxLinearGradientElement = class PacemFxLinearGradientElement extends PacemFxGradientItemElement {
     doesPropertyTriggerGradientChange(prop) {
         return ['angle', 'items', 'hide', 'disabled'].indexOf(prop) >= 0;
@@ -169,6 +174,7 @@ PacemFxLinearGradientElement = __decorate([
     CustomElement({ tagName: P + '-fx-gradient-linear' })
 ], PacemFxLinearGradientElement);
 export { PacemFxLinearGradientElement };
+/** Applies a combined CSS gradient (built from its `PacemFxGradientItemElement` children) as the `target` element's background fill or text color. */
 let PacemFxGradientElement = class PacemFxGradientElement extends Components.PacemItemsContainerElement {
     constructor() {
         super(...arguments);

package/dist/esm/hero.js

@@ -1,5 +1,5 @@
 /*!
- * @pacem/pacem-fx v1.0.0-bessel (https://js.pacem.it)
+ * @pacem/pacem-fx v1.0.0-binet (https://js.pacem.it)
  * Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */
@@ -25,6 +25,7 @@ const rectOrElementConverter = {
         return PropertyConverters.Json.convert(attr);
     }
 };
+/** Animates the `target` element (position and size) between a `from` and a `to` state, "hero"-transition style. */
 let PacemFxHeroElement = class PacemFxHeroElement extends PacemFxElement {
     propertyChangedCallback(name, old, val, first) {
         super.propertyChangedCallback(name, old, val, first);
@@ -82,6 +83,7 @@ let PacemFxHeroElement = class PacemFxHeroElement extends PacemFxElement {
         }
         Utils.removeClass(tget, HERO_CSS);
     }
+    /** Reverts the `target` element back to its original (`from`) state and returns a promise resolved once the transition completes. */
     reset() {
         //
         if (Utils.isNull(this._originalState) || Utils.isNull(this._targetState)) {
@@ -93,6 +95,7 @@ let PacemFxHeroElement = class PacemFxHeroElement extends PacemFxElement {
             this.dispatchEvent(new Event(HERO_OUT));
         });
     }
+    /** Starts the hero transition to the `to` state and returns a promise resolved once it completes. */
     start() {
         if (!this.disabled && !Utils.isNull(this.target)) {
             let goal;

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

@@ -1,5 +1,5 @@
 /*!
- * @pacem/pacem-fx v1.0.0-bessel (https://js.pacem.it)
+ * @pacem/pacem-fx v1.0.0-binet (https://js.pacem.it)
  * Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */

package/dist/esm/index-components.js

@@ -1,5 +1,5 @@
 /*!
- * @pacem/pacem-fx v1.0.0-bessel (https://js.pacem.it)
+ * @pacem/pacem-fx v1.0.0-binet (https://js.pacem.it)
  * Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */

package/dist/esm/index-iife.js

@@ -1,5 +1,5 @@
 /*!
- * @pacem/pacem-fx v1.0.0-bessel (https://js.pacem.it)
+ * @pacem/pacem-fx v1.0.0-binet (https://js.pacem.it)
  * Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 /*!
- * @pacem/pacem-fx v1.0.0-bessel (https://js.pacem.it)
+ * @pacem/pacem-fx v1.0.0-binet (https://js.pacem.it)
  * Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */

package/dist/esm/list.js

@@ -1,5 +1,5 @@
 /*!
- * @pacem/pacem-fx v1.0.0-bessel (https://js.pacem.it)
+ * @pacem/pacem-fx v1.0.0-binet (https://js.pacem.it)
  * Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */
@@ -13,6 +13,7 @@ import { CustomElement, P, PCSS, Utils } from '@pacem/pacem-core';
 import { PacemFxElement } from './types';
 //namespace Pacem.Components.Fx {
 const CSS_CLASS = PCSS + '-fx-list';
+/** Watches the `target` element's children and dispatches `itemadded`/`itemremoved` events as they are mutated, styling the target as an fx list. */
 let PacemFxListElement = class PacemFxListElement extends PacemFxElement {
     constructor() {
         super(...arguments);

package/dist/esm/pulse.js

@@ -1,5 +1,5 @@
 /*!
- * @pacem/pacem-fx v1.0.0-bessel (https://js.pacem.it)
+ * @pacem/pacem-fx v1.0.0-binet (https://js.pacem.it)
  * Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */
@@ -46,6 +46,7 @@ function ensureCssAnimation(id, args, rx = '0', ry = rx) {
     }
     return css;
 }
+/** Overlays the `target` element with a pulsing (expanding, fading) outline, tracking its position and size. */
 let PacemFxPulseElement = class PacemFxPulseElement extends PacemFxElement {
     constructor() {
         super();

package/dist/esm/ripple.js

@@ -1,5 +1,5 @@
 /*!
- * @pacem/pacem-fx v1.0.0-bessel (https://js.pacem.it)
+ * @pacem/pacem-fx v1.0.0-binet (https://js.pacem.it)
  * Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */
@@ -14,6 +14,7 @@ import { Point } from '@pacem/pacem-foundation';
 import { PacemFxElement } from './types';
 //namespace Pacem.Components.Fx {
 const RIPPLE_CSS = "ripple";
+/** Produces a Material-style ripple wave, centered on the pointer, on the `target` element's `mousedown`/`touchstart`. */
 let PacemFxRippleElement = class PacemFxRippleElement extends PacemFxElement {
     constructor() {
         super(...arguments);

package/dist/esm/types.js

@@ -1,5 +1,5 @@
 /*!
- * @pacem/pacem-fx v1.0.0-bessel (https://js.pacem.it)
+ * @pacem/pacem-fx v1.0.0-binet (https://js.pacem.it)
  * Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */
@@ -10,6 +10,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Watch, PropertyConverters, PacemEventTarget } from '@pacem/pacem-core';
+/** Base class for `fx` (visual-effect) custom elements: provides the `target` element the effect operates on. */
 export class PacemFxElement extends PacemEventTarget {
 }
 __decorate([

package/package.json

@@ -4,6 +4,7 @@
     "dist/browser/*.*",
     "dist/bundle/*.*",
     "dist/esm/*.*",
+    "dist/docs/*.*",
     "typings/*.*",
     "README.md",
     "LICENSE",
@@ -24,7 +25,7 @@
       "types": "./typings/index.d.ts"
     }
   },
-  "version": "1.0.0-bessel",
+  "version": "1.0.0-binet",
   "author": {
     "name": "Pacem",
     "url": "https://pacem.it"

package/typings/index.d.ts

@@ -27,14 +27,18 @@ export declare namespace Fx {
     }
 }
 
+/** Contract implemented by every `fx` element: exposes the `target` element the visual effect is applied to. */
 declare interface PacemFx {
     target: HTMLElement;
 }
 
+/** Base class for `fx` (visual-effect) custom elements: provides the `target` element the effect operates on. */
 declare abstract class PacemFxElement extends PacemEventTarget implements PacemFx {
+    /** Gets or sets the element the visual effect is applied to. */
     target: HTMLElement;
 }
 
+/** Reveals the `target` element's text content word by word, wrapping each word in an animated `<span>`. */
 declare class PacemFxFancyElement extends PacemFxElement {
     private _textNodes;
     private _originalContent;
@@ -42,23 +46,32 @@ declare class PacemFxFancyElement extends PacemFxElement {
     private _handle1;
     private _progress;
     private _started;
+    /** @readonly Gets the current show progress, as a number between `0` and `1`. */
     get progress(): number;
+    /** @readonly Gets whether the fancify animation has (fully) started. */
     get started(): boolean;
+    /** Gets or sets whether the `target` element's text should be fancified; toggling it on starts the effect, off resets it. */
     fancify: boolean;
+    /** Gets or sets the delay, in milliseconds, before the first word is revealed. */
     delay: number;
+    /** Gets or sets the delay, in milliseconds, between the reveal of consecutive words. */
     gap: number;
     propertyChangedCallback(name: string, old: any, val: any, first?: boolean): void;
     viewActivatedCallback(): void;
     disconnectedCallback(): void;
     private _reset;
     private _parse;
+    /** Starts (or restarts) the fancify effect on the `target` element. */
     start(): void;
     private _startShow;
     private _fancify;
 }
 
+/** Applies a combined CSS gradient (built from its `PacemFxGradientItemElement` children) as the `target` element's background fill or text color. */
 declare class PacemFxGradientElement extends Components_2.PacemItemsContainerElement<PacemFxGradientItemElement> implements PacemFx {
+    /** Gets or sets the element the gradient is applied to. */
     target: HTMLElement;
+    /** Gets or sets whether the gradient is applied as a `'fill'` background (default) or as `'text'` color. */
     mode: 'fill' | 'text';
     validate(item: PacemFxGradientItemElement): boolean;
     register(item: PacemFxGradientItemElement): boolean;
@@ -70,6 +83,7 @@ declare class PacemFxGradientElement extends Components_2.PacemItemsContainerEle
     private _buildGradient;
 }
 
+/** Base class for gradient-shape elements (radial, linear, ...) hosting `PacemFxGradientStopElement` color stops and producing a CSS gradient string. */
 declare abstract class PacemFxGradientItemElement extends Components_2.PacemCrossItemsContainerElement<PacemFxGradientStopElement> {
     validate(item: PacemFxGradientStopElement): boolean;
     register(item: PacemFxGradientStopElement): boolean;
@@ -77,23 +91,35 @@ declare abstract class PacemFxGradientItemElement extends Components_2.PacemCros
     propertyChangedCallback(name: string, old: any, val: any, first?: boolean): void;
     private _dispatchGradientChangeHandler;
     private _dispatchGradientChange;
+    /** Gets whether a change of the given property must trigger a gradient rebuild. */
     protected abstract doesPropertyTriggerGradientChange(prop: string): boolean;
+    /** Builds the CSS color for a stop, applying the given opacity (if in the `0`-`1` range) on top of the base `color`. */
     protected buildColor(color: string, opacity?: number): string;
+    /** Builds the CSS `<gradient>` function (e.g. `radial-gradient(...)`) representing this element's current state. */
     abstract buildGradient(): string;
 }
 
+/** A single color stop within a `PacemFxGradientItemElement` (radial or linear gradient). */
 declare class PacemFxGradientStopElement extends Components_2.PacemItemElement {
+    /** Gets or sets the stop position, normalized between `0` and `1`. */
     offset: number;
+    /** Gets or sets the stop color (any valid CSS color). */
     color: string;
+    /** Gets or sets the stop opacity, between `0` and `1`. */
     opacity: number;
     findContainer(): any;
     propertyChangedCallback(name: string, old: any, val: any, first?: boolean): void;
 }
 
+/** Animates the `target` element (position and size) between a `from` and a `to` state, "hero"-transition style. */
 declare class PacemFxHeroElement extends PacemFxElement {
+    /** Gets or sets whether the hero transition is active; toggling it on starts the effect, off reverts it. */
     hero: boolean;
+    /** Gets or sets the target state (a `Rect`, or an `Element` whose bounds are used) the `target` element transitions to. */
     to: Rect | Element;
+    /** Gets or sets the starting state (a `Rect`, or an `Element` whose bounds are used); defaults to the `target` element's current bounds. */
     from: Rect | Element;
+    /** Gets or sets the transition duration, in milliseconds. */
     duration: number;
     propertyChangedCallback(name: string, old: any, val: any, first?: boolean): void;
     viewActivatedCallback(): void;
@@ -103,11 +129,14 @@ declare class PacemFxHeroElement extends PacemFxElement {
     private _originalStyle;
     private _computeFromState;
     private _resetTarget;
+    /** Reverts the `target` element back to its original (`from`) state and returns a promise resolved once the transition completes. */
     reset(): Promise<void>;
+    /** Starts the hero transition to the `to` state and returns a promise resolved once it completes. */
     start(): Promise<void>;
     private _animate;
 }
 
+/** Linear `<gradient>` shape, hosting one or more `PacemFxGradientStopElement` color stops. */
 declare class PacemFxLinearGradientElement extends PacemFxGradientItemElement {
     /** Angle in degrees. */
     angle: number;
@@ -115,6 +144,7 @@ declare class PacemFxLinearGradientElement extends PacemFxGradientItemElement {
     buildGradient(): string;
 }
 
+/** Watches the `target` element's children and dispatches `itemadded`/`itemremoved` events as they are mutated, styling the target as an fx list. */
 declare class PacemFxListElement extends PacemFxElement {
     private _observer;
     viewActivatedCallback(): void;
@@ -125,6 +155,7 @@ declare class PacemFxListElement extends PacemFxElement {
     private _setup;
 }
 
+/** Overlays the `target` element with a pulsing (expanding, fading) outline, tracking its position and size. */
 declare class PacemFxPulseElement extends PacemFxElement {
     #private;
     constructor();
@@ -140,6 +171,7 @@ declare class PacemFxPulseElement extends PacemFxElement {
     private _pulse;
 }
 
+/** Radial `<gradient>` shape, hosting one or more `PacemFxGradientStopElement` color stops. */
 declare class PacemFxRadialGradientElement extends PacemFxGradientItemElement {
     /** Either 'circle' or 'ellipse' (default). */
     shape: 'circle' | 'ellipse';
@@ -151,6 +183,7 @@ declare class PacemFxRadialGradientElement extends PacemFxGradientItemElement {
     buildGradient(): string;
 }
 
+/** Produces a Material-style ripple wave, centered on the pointer, on the `target` element's `mousedown`/`touchstart`. */
 declare class PacemFxRippleElement extends PacemFxElement {
     private _wave;
     propertyChangedCallback(name: string, old: any, val: any, first?: boolean): void;