@scalable.software/pin 0.2.0

package/dist/Pin.d.ts

@@ -0,0 +1,210 @@
+/**
+ * @module Component
+ */
+import { Component, Template } from "@scalable.software/component";
+import { type Configuration } from "@scalable.software/component";
+import { type Attributes, type Visibility, type Statuses, type Handler } from "./Pin.meta.js";
+/**
+ * Configuration required for components with custom layout and style
+ * @category Configuration
+ */
+export declare const configuration: Configuration;
+/**
+ * A pin button that can be:
+ * 1. pinned and unpinned
+ * 2. hidden and shown
+ * @category Components
+ */
+export declare class Pin extends Component {
+    /**
+     * The tag name of the component
+     * @category Configuration
+     */
+    static get Tag(): "pin-button";
+    /**
+     * Only attributes defined the Attributes object will be observed in DOM
+     * @category Configuration
+     */
+    static get Attributes(): Attributes;
+    /**
+     * Wait for the component to be defined before returning a collection of the component in the DOM
+     * @category Utilities
+     */
+    static get: () => Promise<Pin[]>;
+    /**
+     * Helper function to load the component template into DOM
+     * @category Utilities
+     */
+    static Template: Template;
+    /**
+     * Cache element references to improve performance
+     * @category State
+     * @hidden
+     */
+    protected elements: {
+        icon: HTMLDivElement | null;
+    };
+    /**
+     * Internal Visibility state of the component
+     * @category State
+     * @default Visible.YES
+     * @hidden
+     */
+    private _visible;
+    /**
+     * Internal Status state of the component
+     * @category State
+     * @default
+     * @hidden
+     */
+    private _status;
+    /**
+     * on triggered when any event is triggered
+     * @category Events
+     * @hidden
+     */
+    private _on;
+    /**
+     * onhide triggered when pin visibility changes to hidden
+     * @category Events
+     * @hidden
+     */
+    private _onhide;
+    /**
+     * onshow triggered when pin visibility changes to visible
+     * @category Events
+     * @hidden
+     */
+    private _onshow;
+    /**
+     * onpin triggered when pin status changes to pinned
+     * @category Events
+     * @hidden
+     */
+    private _onpin;
+    /**
+     * onunpin triggered when pin state changes to unpinned
+     * @category Events
+     * @hidden
+     */
+    private _onunpin;
+    constructor();
+    /**
+     * Get and Sets the visibility of the pin button
+     * @category State
+     */
+    get visible(): Visibility;
+    set visible(visible: Visibility);
+    /**
+     * Get and Sets the status of the pin button
+     * @category State
+     */
+    get status(): Statuses;
+    set status(status: Statuses);
+    /**
+     * Triggered on any event
+     * @event
+     * @category Events
+     */
+    set on(handler: Handler);
+    /**
+     * Triggered via `.hide()`
+     * @event
+     * @category Events
+     */
+    set onhide(handler: Handler);
+    /**
+     * Triggered via `.show()`
+     * @event
+     * @category Events
+     */
+    set onshow(handler: Handler);
+    /**
+     * Triggered via `.pin()`
+     * @event
+     * @category Events
+     */
+    set onpin(handler: Handler);
+    /**
+     * Triggered via `.unpin()`
+     * @event
+     * @category Events
+     */
+    set onunpin(handler: Handler);
+    /**
+     * Hide the pin button when it is visible
+     * @category Operations
+     */
+    hide: () => "no";
+    /**
+     * Show the pin button when it is hidden
+     * @category Operations
+     */
+    show: () => "yes";
+    /**
+     * Pin the pin button when it is unpinned
+     * @category Operations
+     */
+    pin: () => "pinned";
+    /**
+     * Unpin the pin button when it is pinned
+     * @category Operations
+     */
+    unpin: () => "unpinned";
+    /**
+     * Toggle the pin button between pinned and unpinned
+     * @category Operations
+     */
+    toggle: () => "pinned" | "unpinned";
+    /**
+     * List operations to perform for selected attributes being observed in the DOM.
+     * @category Configuration
+     * @hidden
+     */
+    protected _attributeHandlers: {
+        visible: (value: any) => any;
+        status: (value: any) => any;
+    };
+    /**
+     * Initialize component attributes with default values
+     * @category Configuration
+     * @hidden
+     */
+    protected _initialize: () => void;
+    /**
+     * Cache element references to improve performance
+     * @category Configuration
+     * @hidden
+     */
+    protected _cacheElements: () => HTMLDivElement;
+    /**
+     * Called by the connectedCallback prototypical method
+     * @category Configuration
+     * @hidden
+     */
+    protected _addEventListeners: () => void;
+    /**
+     * Called by the disconnectedCallback prototypical method
+     * @category Configuration
+     * @hidden
+     */
+    protected _removeEventListeners: () => void;
+    /**
+     * Initialize component state with default values
+     * @category State
+     * @hidden
+     */
+    private _initializeState;
+    /**
+     * Cache icon element reference to improve performance
+     * @category State
+     * @hidden
+     */
+    private _cacheIcon;
+    /**
+     * Handles the click event
+     * @category Gesture
+     * @hidden
+     */
+    private _handleClick;
+}

package/dist/Pin.js

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

package/dist/Pin.meta.d.ts

@@ -0,0 +1,104 @@
+/**
+ * @module Component
+ */
+export declare const Tag: "pin-button";
+/**
+ * HTML Attributes available to set
+ * @category Metadata: State
+ * @enum
+ */
+export declare const Attribute: {
+    readonly VISIBLE: "visible";
+    readonly STATUS: "status";
+};
+/**
+ * HTML Attributes available to set
+ * @category Metadata: State
+ */
+export type Attributes = typeof Attribute;
+/**
+ * HTML Attributes available to set
+ * @category Metadata: State
+ * @enum
+ */
+export declare const State: {
+    readonly VISIBLE: "visible";
+    readonly STATUS: "status";
+};
+/**
+ * HTML Attributes available to set
+ * @category Metadata: State
+ */
+export type States = (typeof State)[keyof typeof State];
+/**
+ * Visible state used to show or hide the component
+ * @category Metadata: State
+ * @enum
+ */
+export declare const Visible: {
+    readonly YES: "yes";
+    readonly NO: "no";
+};
+/**
+ * Visible state used to show or hide the component
+ * @category Metadata: State
+ */
+export type Visibility = (typeof Visible)[keyof typeof Visible];
+/**
+ * @category Metadata: State
+ * @enum
+ */
+export declare const Status: {
+    readonly PINNED: "pinned";
+    readonly UNPINNED: "unpinned";
+};
+/**
+ * @category Metadata: State
+ */
+export type Statuses = (typeof Status)[keyof typeof Status];
+/**
+ * @category Metadata: Operations
+ * @enum
+ */
+export declare const Operation: {
+    readonly HIDE: "hide";
+    readonly SHOW: "show";
+    readonly PIN: "pin";
+    readonly UNPIN: "unpin";
+    readonly TOGGLE: "toggle";
+};
+/**
+ * @category Metadata: Operations
+ */
+export type Operations = (typeof Operation)[keyof typeof Operation];
+/**
+ * @category Metadata: Events
+ * @enum
+ */
+export declare const Event: {
+    readonly ON_HIDE: "onhide";
+    readonly ON_SHOW: "onshow";
+    readonly ON_PIN: "onpin";
+    readonly ON_UNPIN: "onunpin";
+    readonly ON: "on";
+};
+/**
+ * @category Metadata: Events
+ */
+export type Events = (typeof Event)[keyof typeof Event];
+/**
+ * @category Metadata: Gesture
+ * @enum
+ */
+export declare const Gesture: {
+    readonly CLICK: "click";
+};
+/**
+ * @category Metadata: Gesture
+ */
+export type Gestures = (typeof Gesture)[keyof typeof Gesture];
+/**
+ * Event handler signature
+ * @hidden
+ */
+export type Handler = (...args: any[]) => void;

package/dist/Pin.meta.js

@@ -0,0 +1,67 @@
+/**
+ * @module Component
+ */
+export const Tag = "pin-button";
+/**
+ * HTML Attributes available to set
+ * @category Metadata: State
+ * @enum
+ */
+export const Attribute = {
+    VISIBLE: "visible",
+    STATUS: "status",
+};
+/**
+ * HTML Attributes available to set
+ * @category Metadata: State
+ * @enum
+ */
+export const State = {
+    ...Attribute,
+};
+/**
+ * Visible state used to show or hide the component
+ * @category Metadata: State
+ * @enum
+ */
+export const Visible = {
+    YES: "yes",
+    NO: "no",
+};
+/**
+ * @category Metadata: State
+ * @enum
+ */
+export const Status = {
+    PINNED: "pinned",
+    UNPINNED: "unpinned",
+};
+/**
+ * @category Metadata: Operations
+ * @enum
+ */
+export const Operation = {
+    HIDE: "hide",
+    SHOW: "show",
+    PIN: "pin",
+    UNPIN: "unpin",
+    TOGGLE: "toggle",
+};
+/**
+ * @category Metadata: Events
+ * @enum
+ */
+export const Event = {
+    ON_HIDE: "onhide",
+    ON_SHOW: "onshow",
+    ON_PIN: "onpin",
+    ON_UNPIN: "onunpin",
+    ON: "on",
+};
+/**
+ * @category Metadata: Gesture
+ * @enum
+ */
+export const Gesture = {
+    CLICK: "click",
+};