@scalable.software/pin 0.1.0

package/dist/pin.d.ts

@@ -0,0 +1,193 @@
+/**
+ * @module Component
+ */
+import { Component, Template } from "@scalable.software/component";
+import { type Configuration, type Handler } from "@scalable.software/component";
+import { Attributes, Visible, Status } 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;
+    /**
+     * Helper function to load the component template into DOM
+     * @category Utility
+     */
+    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(): Visible;
+    set visible(visible: Visible);
+    /**
+     * Get and Sets the status of the pin button
+     * @category State
+     */
+    get status(): Status;
+    set status(status: Status);
+    /**
+     * 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 _cache: () => void;
+    /**
+     * Called by the connectedCallback prototypical method
+     * @category Configuration
+     * @hidden
+     */
+    protected _addEventListeners: () => void;
+    /**
+     * Called by the disconnectedCallback prototypical method
+     * @category Configuration
+     * @hidden
+     */
+    protected _removeEventListeners: () => void;
+    /**
+     * Handles the click event
+     * @category Gesture
+     * @hidden
+     */
+    private _handleClick;
+}

package/dist/pin.js

@@ -0,0 +1,267 @@
+/**
+ * @module Component
+ */
+import { Component, Template } from "@scalable.software/component";
+import { Tag, Attributes, Visible, Status, Event, Gesture, } from "./pin.meta.js";
+import { Validate } from "./pin.validation.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 Attributes;
+    }
+    /**
+     * Helper function to load the component template into DOM
+     * @category Utility
+     */
+    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(Attributes.VISIBLE)
+            ? this.getAttribute(Attributes.VISIBLE)
+            : this._visible;
+    }
+    set visible(visible) {
+        visible = visible ?? Visible.YES;
+        visible = Validate.visible(visible);
+        if (this._visible === visible)
+            return;
+        this._visible = visible;
+        visible === Visible.YES && this.removeAttribute(Attributes.VISIBLE);
+        visible === Visible.NO && this.setAttribute(Attributes.VISIBLE, visible);
+        const event = { detail: { visible } };
+        visible === Visible.NO && this._dispatchEvent(Event.ON_HIDE, event);
+        visible === Visible.YES && this._dispatchEvent(Event.ON_SHOW, event);
+    }
+    /**
+     * Get and Sets the status of the pin button
+     * @category State
+     */
+    get status() {
+        return this.hasAttribute(Attributes.STATUS)
+            ? this.getAttribute(Attributes.STATUS)
+            : this._status;
+    }
+    set status(status) {
+        status = Validate.status(status);
+        if (this._status === status)
+            return;
+        this._status = status;
+        this.setAttribute(Attributes.STATUS, status);
+        const event = { detail: { status } };
+        status === Status.PINNED && this._dispatchEvent(Event.ON_PIN, event);
+        status === Status.UNPINNED && this._dispatchEvent(Event.ON_UNPIN, event);
+    }
+    /**
+     * 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;
+        Object.values(Event)
+            .filter((event) => event !== Event.ON)
+            .forEach((event) => {
+            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 = {
+        [Attributes.VISIBLE]: (value) => (this.visible = value),
+        [Attributes.STATUS]: (value) => (this.status = value),
+    };
+    /**
+     * Initialize component attributes with default values
+     * @category Configuration
+     * @hidden
+     */
+    _initialize = () => {
+        !this.hasAttribute(Attributes.STATUS) &&
+            this.setAttribute(Attributes.STATUS, this._status);
+    };
+    /**
+     * Cache element references to improve performance
+     * @category Configuration
+     * @hidden
+     */
+    _cache = () => {
+        this.elements.icon = this.root.querySelector(".icon");
+    };
+    /**
+     * 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);
+    /**
+     * Handles the click event
+     * @category Gesture
+     * @hidden
+     */
+    _handleClick = (event) => this.toggle();
+}

package/dist/pin.meta.d.ts

@@ -0,0 +1,99 @@
+/**
+ * @module Component
+ */
+export declare const Tag: "pin-button";
+/**
+ * HTML Attributes available to set
+ * @category Metadata: State
+ * @enum
+ */
+export declare const Attributes: {
+    readonly VISIBLE: "visible";
+    readonly STATUS: "status";
+};
+/**
+ * HTML Attributes available to set
+ * @category Metadata: State
+ */
+export type Attributes = typeof Attributes;
+/**
+ * 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 State = (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 Visible = (typeof Visible)[keyof typeof Visible];
+/**
+ * @category Metadata: State
+ * @enum
+ */
+export declare const Status: {
+    readonly PINNED: "pinned";
+    readonly UNPINNED: "unpinned";
+};
+/**
+ * @category Metadata: State
+ */
+export type Status = (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 Operation = (typeof Operation)[keyof typeof Operation];
+/**
+ * @category Metadata: Events
+ * @enum
+ */
+export declare const Event: {
+    readonly ON: "on";
+    readonly ON_HIDE: "onhide";
+    readonly ON_SHOW: "onshow";
+    readonly ON_PIN: "onpin";
+    readonly ON_UNPIN: "onunpin";
+};
+/**
+ * @category Metadata: Events
+ */
+export type Event = (typeof Event)[keyof typeof Event];
+/**
+ * @category Metadata: Gesture
+ * @enum
+ */
+export declare const Gesture: {
+    readonly CLICK: "click";
+};
+/**
+ * @category Metadata: Gesture
+ */
+export type Gesture = (typeof Gesture)[keyof typeof Gesture];

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 Attributes = {
+    VISIBLE: "visible",
+    STATUS: "status",
+};
+/**
+ * HTML Attributes available to set
+ * @category Metadata: State
+ * @enum
+ */
+export const State = {
+    ...Attributes,
+};
+/**
+ * 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: "on",
+    ON_HIDE: "onhide",
+    ON_SHOW: "onshow",
+    ON_PIN: "onpin",
+    ON_UNPIN: "onunpin",
+};
+/**
+ * @category Metadata: Gesture
+ * @enum
+ */
+export const Gesture = {
+    CLICK: "click",
+};