@scalable.software/pin 0.2.0 → 0.2.1

package/src/{Pin.ts → pin.ts}

@@ -1,329 +1,318 @@
-/**
- * @module Component
- */
-import { Component, Template } from "@scalable.software/component";
-import { type Configuration } from "@scalable.software/component";
-
-import { Tag, Attribute, Visible, Status, Event, Gesture } from "./Pin.meta.js";
-import {
-  type Attributes,
-  type Visibility,
-  type Statuses,
-  type Events,
-  type Handler,
-} from "./Pin.meta.js";
-
-
-
-/**
- * Configuration required for components with custom layout and style
- * @category Configuration
- */
-export const configuration: Configuration = {
-  url: import.meta.url,
-  template: {
-    id: Tag,
-  },
-  css: {
-    name: "Pin.style.css",
-  },
-} as const;
-
-/**
- * A pin button that can be:
- * 1. pinned and unpinned
- * 2. hidden and shown
- * @category Components
- */
-export class Pin extends Component {
-  /**
-   * The tag name of the component
-   * @category Configuration
-   */
-  public static get Tag() {
-    return Tag;
-  }
-
-  /**
-   * Only attributes defined the Attributes object will be observed in DOM
-   * @category Configuration
-   */
-  public static get Attributes(): Attributes {
-    return Attribute;
-  }
-
-  /**
-   * Wait for the component to be defined before returning a collection of the component in the DOM
-   * @category Utilities
-   */
-  public static get = async () =>
-    (await customElements.whenDefined(Pin.Tag)) &&
-    (Array.from(document.querySelectorAll(Pin.Tag)) as Pin[]);
-
-  /**
-   * Helper function to load the component template into DOM
-   * @category Utilities
-   */
-  public static Template = new Template(import.meta.url);
-
-  /**
-   * Cache element references to improve performance
-   * @category State
-   * @hidden
-   */
-  protected elements: { icon: HTMLDivElement | null } = { icon: null };
-
-  /**
-   * Internal Visibility state of the component
-   * @category State
-   * @default Visible.YES
-   * @hidden
-   */
-  private _visible: Visibility = Visible.YES;
-
-  /**
-   * Internal Status state of the component
-   * @category State
-   * @default
-   * @hidden
-   */
-  private _status: Statuses = Status.UNPINNED;
-
-  /**
-   * on triggered when any event is triggered
-   * @category Events
-   * @hidden
-   */
-  private _on: Handler = null;
-
-  /**
-   * onhide triggered when pin visibility changes to hidden
-   * @category Events
-   * @hidden
-   */
-  private _onhide: Handler = null;
-
-  /**
-   * onshow triggered when pin visibility changes to visible
-   * @category Events
-   * @hidden
-   */
-  private _onshow: Handler = null;
-
-  /**
-   * onpin triggered when pin status changes to pinned
-   * @category Events
-   * @hidden
-   */
-  private _onpin: Handler = null;
-
-  /**
-   * onunpin triggered when pin state changes to unpinned
-   * @category Events
-   * @hidden
-   */
-  private _onunpin: Handler = null;
-
-  constructor() {
-    super(configuration);
-  }
-
-  /**
-   * Get and Sets the visibility of the pin button
-   * @category State
-   */
-  public get visible(): Visibility {
-    return this.hasAttribute(Attribute.VISIBLE)
-      ? (this.getAttribute(Attribute.VISIBLE) as Visibility)
-      : this._visible;
-  }
-  public set visible(visible: Visibility) {
-    visible = visible || Visible.YES;
-    if (this._visible !== visible) {
-      this._visible = visible;
-      visible == Visible.YES && this.removeAttribute(Attribute.VISIBLE);
-      visible == Visible.NO && this.setAttribute(Attribute.VISIBLE, visible);
-
-      visible == Visible.NO &&
-        this._dispatchEvent(Event.ON_HIDE, { detail: { visible } });
-      visible == Visible.YES &&
-        this._dispatchEvent(Event.ON_SHOW, { detail: { visible } });
-    }
-  }
-
-  /**
-   * Get and Sets the status of the pin button
-   * @category State
-   */
-  public get status(): Statuses {
-    return this.hasAttribute(Attribute.STATUS)
-      ? (this.getAttribute(Attribute.STATUS) as Statuses)
-      : this._status;
-  }
-  public set status(status: Statuses) {
-    if (this._status !== status) {
-      this._status = status;
-      this.setAttribute(Attribute.STATUS, status);
-
-      status == Status.PINNED &&
-        this._dispatchEvent(Event.ON_PIN, { detail: { status } });
-      status == Status.UNPINNED &&
-        this._dispatchEvent(Event.ON_UNPIN, { detail: { status } });
-    }
-  }
-
-  /**
-   * Triggered on any event
-   * @event
-   * @category Events
-   */
-  public set on(handler: Handler) {
-    Object
-      .values(Event)
-      .filter((event): event is Events => event !== Event.ON)
-      .forEach((event: Events) => {
-        this._on && this.removeEventListener(event, this._on);
-        this._on = handler;
-        this._on && this.addEventListener(event, this._on);
-      });
-  }
-
-  /**
-   * Triggered via `.hide()`
-   * @event
-   * @category Events
-   */
-  public set onhide(handler: Handler) {
-    this._onhide && this.removeEventListener(Event.ON_HIDE, this._onhide);
-    this._onhide = handler;
-    this._onhide && this.addEventListener(Event.ON_HIDE, this._onhide);
-  }
-
-  /**
-   * Triggered via `.show()`
-   * @event
-   * @category Events
-   */
-  public set onshow(handler: Handler) {
-    this._onshow && this.removeEventListener(Event.ON_SHOW, this._onshow);
-    this._onshow = handler;
-    this._onshow && this.addEventListener(Event.ON_SHOW, this._onshow);
-  }
-
-  /**
-   * Triggered via `.pin()`
-   * @event
-   * @category Events
-   */
-  public set onpin(handler: Handler) {
-    this._onpin && this.removeEventListener(Event.ON_PIN, this._onpin);
-    this._onpin = handler;
-    this._onpin && this.addEventListener(Event.ON_PIN, this._onpin);
-  }
-
-  /**
-   * Triggered via `.unpin()`
-   * @event
-   * @category Events
-   */
-  public set onunpin(handler: Handler) {
-    this._onunpin && this.removeEventListener(Event.ON_UNPIN, this._onunpin);
-    this._onunpin = handler;
-    this._onunpin && this.addEventListener(Event.ON_UNPIN, this._onunpin);
-  }
-
-  /**
-   * Hide the pin button when it is visible
-   * @category Operations
-   */
-  public hide = () => (this.visible = Visible.NO);
-
-  /**
-   * Show the pin button when it is hidden
-   * @category Operations
-   */
-  public show = () => (this.visible = Visible.YES);
-
-  /**
-   * Pin the pin button when it is unpinned
-   * @category Operations
-   */
-  public pin = () => (this.status = Status.PINNED);
-
-  /**
-   * Unpin the pin button when it is pinned
-   * @category Operations
-   */
-  public unpin = () => (this.status = Status.UNPINNED);
-
-  /**
-   * Toggle the pin button between pinned and unpinned
-   * @category Operations
-   */
-  public toggle = () =>
-    (this.status =
-      this.status === Status.PINNED ? Status.UNPINNED : Status.PINNED);
-
-  /**
-   * List operations to perform for selected attributes being observed in the DOM.
-   * @category Configuration
-   * @hidden
-   */
-  protected _attributeHandlers = {
-    [Attribute.VISIBLE]: (value) => (this.visible = value),
-    [Attribute.STATUS]: (value) => (this.status = value),
-  };
-
-  /**
-   * Initialize component attributes with default values
-   * @category Configuration
-   * @hidden
-   */
-  protected _initialize = () => this._initializeState();
-
-  /**
-   * Cache element references to improve performance
-   * @category Configuration
-   * @hidden
-   */
-  protected _cacheElements = () => this._cacheIcon();
-
-  /**
-   * Called by the connectedCallback prototypical method
-   * @category Configuration
-   * @hidden
-   */
-  protected _addEventListeners = () =>
-    this.elements.icon.addEventListener(Gesture.CLICK, this._handleClick);
-
-  /**
-   * Called by the disconnectedCallback prototypical method
-   * @category Configuration
-   * @hidden
-   */
-  protected _removeEventListeners = () =>
-    this.elements.icon.removeEventListener(Gesture.CLICK, this._handleClick);
-
-  /**
-   * Initialize component state with default values
-   * @category State
-   * @hidden
-   */
-  private _initializeState = () =>
-    this.setAttribute(Attribute.STATUS, this._status);
-
-  /**
-   * Cache icon element reference to improve performance
-   * @category State
-   * @hidden
-   */
-  private _cacheIcon = () =>
-    (this.elements.icon = this.root.querySelector(".icon"));
-
-  /**
-   * Handles the click event
-   * @category Gesture
-   * @hidden
-   */
-  private _handleClick = (event: MouseEvent | TouchEvent) => this.toggle();
-}
+/**
+ * @module Component
+ */
+import { Component, Template } from "@scalable.software/component";
+import { type Configuration, type Handler } from "@scalable.software/component";
+
+import {
+  Tag,
+  Attributes,
+  Visible,
+  Status,
+  Event,
+  Gesture,
+} from "./pin.meta.js";
+
+/**
+ * Configuration required for components with custom layout and style
+ * @category Configuration
+ */
+export const configuration: Configuration = {
+  url: import.meta.url,
+  template: {
+    id: Tag,
+  },
+  css: {
+    name: "pin.style.css",
+  },
+} as const;
+
+/**
+ * A pin button that can be:
+ * 1. pinned and unpinned
+ * 2. hidden and shown
+ * @category Components
+ */
+export class Pin extends Component {
+  /**
+   * The tag name of the component
+   * @category Configuration
+   */
+  public static get Tag() {
+    return Tag;
+  }
+
+  /**
+   * Only attributes defined the Attributes object will be observed in DOM
+   * @category Configuration
+   */
+  public static get Attributes(): Attributes {
+    return Attributes;
+  }
+
+  /**
+   * Helper function to load the component template into DOM
+   * @category Utility
+   */
+  public static Template = new Template(import.meta.url);
+
+  /**
+   * Cache element references to improve performance
+   * @category State
+   * @hidden
+   */
+  protected elements: { icon: HTMLDivElement | null } = { icon: null };
+
+  /**
+   * Internal Visibility state of the component
+   * @category State
+   * @default Visible.YES
+   * @hidden
+   */
+  private _visible: Visible = Visible.YES;
+
+  /**
+   * Internal Status state of the component
+   * @category State
+   * @default
+   * @hidden
+   */
+  private _status: Status = Status.UNPINNED;
+
+  /**
+   * on triggered when any event is triggered
+   * @category Events
+   * @hidden
+   */
+  private _on: Handler = null;
+
+  /**
+   * onhide triggered when pin visibility changes to hidden
+   * @category Events
+   * @hidden
+   */
+  private _onhide: Handler = null;
+
+  /**
+   * onshow triggered when pin visibility changes to visible
+   * @category Events
+   * @hidden
+   */
+  private _onshow: Handler = null;
+
+  /**
+   * onpin triggered when pin status changes to pinned
+   * @category Events
+   * @hidden
+   */
+  private _onpin: Handler = null;
+
+  /**
+   * onunpin triggered when pin state changes to unpinned
+   * @category Events
+   * @hidden
+   */
+  private _onunpin: Handler = null;
+
+  constructor() {
+    super(configuration);
+  }
+
+  /**
+   * Get and Sets the visibility of the pin button
+   * @category State
+   */
+  public get visible(): Visible {
+    return this.hasAttribute(Attributes.VISIBLE)
+      ? (this.getAttribute(Attributes.VISIBLE) as Visible)
+      : this._visible;
+  }
+  public set visible(visible: Visible) {
+    visible = visible || Visible.YES;
+    if (this._visible !== visible) {
+      this._visible = visible;
+      visible == Visible.YES && this.removeAttribute(Attributes.VISIBLE);
+      visible == Visible.NO && this.setAttribute(Attributes.VISIBLE, visible);
+
+      visible == Visible.NO &&
+        this._dispatchEvent(Event.ON_HIDE, { detail: { visible } });
+      visible == Visible.YES &&
+        this._dispatchEvent(Event.ON_SHOW, { detail: { visible } });
+    }
+  }
+
+  /**
+   * Get and Sets the status of the pin button
+   * @category State
+   */
+  public get status(): Status {
+    return this.hasAttribute(Attributes.STATUS)
+      ? (this.getAttribute(Attributes.STATUS) as Status)
+      : this._status;
+  }
+  public set status(status: Status) {
+    if (this._status !== status) {
+      this._status = status;
+      this.setAttribute(Attributes.STATUS, status);
+
+      status == Status.PINNED &&
+        this._dispatchEvent(Event.ON_PIN, { detail: { status } });
+      status == Status.UNPINNED &&
+        this._dispatchEvent(Event.ON_UNPIN, { detail: { status } });
+    }
+  }
+
+  /**
+   * Triggered on any event
+   * @event
+   * @category Events
+   */
+  public set on(handler: Handler) {
+    Object.values(Event)
+      .filter((event): event is Event => event !== Event.ON)
+      .forEach((event: Event) => {
+        this._on && this.removeEventListener(event, this._on);
+        this._on = handler;
+        this._on && this.addEventListener(event, this._on);
+      });
+  }
+
+  /**
+   * Triggered via `.hide()`
+   * @event
+   * @category Events
+   */
+  public set onhide(handler: Handler) {
+    this._onhide && this.removeEventListener(Event.ON_HIDE, this._onhide);
+    this._onhide = handler;
+    this._onhide && this.addEventListener(Event.ON_HIDE, this._onhide);
+  }
+
+  /**
+   * Triggered via `.show()`
+   * @event
+   * @category Events
+   */
+  public set onshow(handler: Handler) {
+    this._onshow && this.removeEventListener(Event.ON_SHOW, this._onshow);
+    this._onshow = handler;
+    this._onshow && this.addEventListener(Event.ON_SHOW, this._onshow);
+  }
+
+  /**
+   * Triggered via `.pin()`
+   * @event
+   * @category Events
+   */
+  public set onpin(handler: Handler) {
+    this._onpin && this.removeEventListener(Event.ON_PIN, this._onpin);
+    this._onpin = handler;
+    this._onpin && this.addEventListener(Event.ON_PIN, this._onpin);
+  }
+
+  /**
+   * Triggered via `.unpin()`
+   * @event
+   * @category Events
+   */
+  public set onunpin(handler: Handler) {
+    this._onunpin && this.removeEventListener(Event.ON_UNPIN, this._onunpin);
+    this._onunpin = handler;
+    this._onunpin && this.addEventListener(Event.ON_UNPIN, this._onunpin);
+  }
+
+  /**
+   * Hide the pin button when it is visible
+   * @category Operations
+   */
+  public hide = () => (this.visible = Visible.NO);
+
+  /**
+   * Show the pin button when it is hidden
+   * @category Operations
+   */
+  public show = () => (this.visible = Visible.YES);
+
+  /**
+   * Pin the pin button when it is unpinned
+   * @category Operations
+   */
+  public pin = () => (this.status = Status.PINNED);
+
+  /**
+   * Unpin the pin button when it is pinned
+   * @category Operations
+   */
+  public unpin = () => (this.status = Status.UNPINNED);
+
+  /**
+   * Toggle the pin button between pinned and unpinned
+   * @category Operations
+   */
+  public toggle = () =>
+    (this.status =
+      this.status === Status.PINNED ? Status.UNPINNED : Status.PINNED);
+
+  /**
+   * List operations to perform for selected attributes being observed in the DOM.
+   * @category Configuration
+   * @hidden
+   */
+  protected _attributeHandlers = {
+    [Attributes.VISIBLE]: (value) => (this.visible = value),
+    [Attributes.STATUS]: (value) => (this.status = value),
+  };
+
+  /**
+   * Initialize component attributes with default values
+   * @category Configuration
+   * @hidden
+   */
+  protected _initialize = () => this._initializeState();
+
+  /**
+   * Cache element references to improve performance
+   * @category Configuration
+   * @hidden
+   */
+  protected _cache = () => this._cacheIcon();
+
+  /**
+   * Called by the connectedCallback prototypical method
+   * @category Configuration
+   * @hidden
+   */
+  protected _addEventListeners = () =>
+    this.elements.icon.addEventListener(Gesture.CLICK, this._handleClick);
+
+  /**
+   * Called by the disconnectedCallback prototypical method
+   * @category Configuration
+   * @hidden
+   */
+  protected _removeEventListeners = () =>
+    this.elements.icon.removeEventListener(Gesture.CLICK, this._handleClick);
+
+  /**
+   * Initialize component state with default values
+   * @category State
+   * @hidden
+   */
+  private _initializeState = () =>
+    this.setAttribute(Attributes.STATUS, this._status);
+
+  /**
+   * Cache icon element reference to improve performance
+   * @category State
+   * @hidden
+   */
+  private _cacheIcon = () =>
+    (this.elements.icon = this.root.querySelector(".icon"));
+
+  /**
+   * Handles the click event
+   * @category Gesture
+   * @hidden
+   */
+  private _handleClick = (event: MouseEvent | TouchEvent) => this.toggle();
+}

package/dist/Index.d.ts

@@ -1,4 +0,0 @@
-export { type Configuration } from "@scalable.software/component";
-export { Tag, Attribute, State, Visible, Status, Operation, Event, Gesture, } from "./Pin.meta.js";
-export { type Attributes, type States, type Visibility, type Statuses, type Operations, type Events, type Gestures, type Handler, } from "./Pin.meta.js";
-export { Pin } from "./Pin.js";

package/dist/Index.js

@@ -1,2 +0,0 @@
-export { Tag, Attribute, State, Visible, Status, Operation, Event, Gesture, } from "./Pin.meta.js";
-export { Pin } from "./Pin.js";