npm - @scalable.software/pin - Versions diffs - 0.2.0 → 0.2.1 - Mend

@scalable.software/pin 0.2.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/LICENSE +144 -144
package/README.md +365 -365
package/dist/index.d.ts +3 -0
package/dist/index.js +2 -0
package/dist/{Pin.d.ts → pin.d.ts} +8 -13
package/dist/{Pin.js → pin.js} +16 -23
package/dist/{Pin.meta.d.ts → pin.meta.d.ts} +8 -13
package/dist/{Pin.meta.js → pin.meta.js} +2 -2
package/{src/Pin.style.css → dist/pin.style.css} +126 -122
package/dist/{Pin.template.html → pin.template.html} +26 -12
package/package.json +55 -56
package/report/{Pin.report.json → pin.report.json} +668 -644
package/src/index.ts +14 -0
package/src/{Pin.meta.ts → pin.meta.ts} +108 -114
package/{dist/Pin.style.css → src/pin.style.css} +126 -122
package/src/{Pin.template.html → pin.template.html} +26 -12
package/src/{Pin.ts → pin.ts} +318 -329
package/dist/Index.d.ts +0 -4
package/dist/Index.js +0 -2
package/src/Index.ts +0 -25

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export { type Configuration } from "@scalable.software/component";
+export { Tag, Attributes, State, Visible, Status, Operation, Event, Gesture, } from "./pin.meta.js";
+export { Pin } from "./pin.js";

package/dist/index.js ADDED Viewed

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

package/dist/{Pin.d.ts → pin.d.ts} RENAMED Viewed

@@ -2,8 +2,8 @@
  * @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";
+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
@@ -26,14 +26,9 @@ export declare class Pin extends Component {
      * @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
+     * @category Utility
      */
     static Template: Template;
     /**
@@ -93,14 +88,14 @@ export declare class Pin extends Component {
      * Get and Sets the visibility of the pin button
      * @category State
      */
-    get visible(): Visibility;
-    set visible(visible: Visibility);
+    get visible(): Visible;
+    set visible(visible: Visible);
     /**
      * Get and Sets the status of the pin button
      * @category State
      */
-    get status(): Statuses;
-    set status(status: Statuses);
+    get status(): Status;
+    set status(status: Status);
     /**
      * Triggered on any event
      * @event
@@ -176,7 +171,7 @@ export declare class Pin extends Component {
      * @category Configuration
      * @hidden
      */
-    protected _cacheElements: () => HTMLDivElement;
+    protected _cache: () => HTMLDivElement;
     /**
      * Called by the connectedCallback prototypical method
      * @category Configuration

package/dist/{Pin.js → pin.js} RENAMED Viewed

@@ -2,7 +2,7 @@
  * @module Component
  */
 import { Component, Template } from "@scalable.software/component";
-import { Tag, Attribute, Visible, Status, Event, Gesture } from "./Pin.meta.js";
+import { Tag, Attributes, Visible, Status, Event, Gesture, } from "./pin.meta.js";
 /**
  * Configuration required for components with custom layout and style
  * @category Configuration
@@ -13,7 +13,7 @@ export const configuration = {
         id: Tag,
     },
     css: {
-        name: "Pin.style.css",
+        name: "pin.style.css",
     },
 };
 /**
@@ -35,17 +35,11 @@ export class Pin extends Component {
      * @category Configuration
      */
     static get Attributes() {
-        return Attribute;
+        return Attributes;
     }
-    /**
-     * 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
+     * @category Utility
      */
     static Template = new Template(import.meta.url);
     /**
@@ -106,16 +100,16 @@ export class Pin extends Component {
      * @category State
      */
     get visible() {
-        return this.hasAttribute(Attribute.VISIBLE)
-            ? this.getAttribute(Attribute.VISIBLE)
+        return this.hasAttribute(Attributes.VISIBLE)
+            ? this.getAttribute(Attributes.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.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 &&
@@ -127,14 +121,14 @@ export class Pin extends Component {
      * @category State
      */
     get status() {
-        return this.hasAttribute(Attribute.STATUS)
-            ? this.getAttribute(Attribute.STATUS)
+        return this.hasAttribute(Attributes.STATUS)
+            ? this.getAttribute(Attributes.STATUS)
             : this._status;
     }
     set status(status) {
         if (this._status !== status) {
             this._status = status;
-            this.setAttribute(Attribute.STATUS, status);
+            this.setAttribute(Attributes.STATUS, status);
             status == Status.PINNED &&
                 this._dispatchEvent(Event.ON_PIN, { detail: { status } });
             status == Status.UNPINNED &&
@@ -147,8 +141,7 @@ export class Pin extends Component {
      * @category Events
      */
     set on(handler) {
-        Object
-            .values(Event)
+        Object.values(Event)
             .filter((event) => event !== Event.ON)
             .forEach((event) => {
             this._on && this.removeEventListener(event, this._on);
@@ -228,8 +221,8 @@ export class Pin extends Component {
      * @hidden
      */
     _attributeHandlers = {
-        [Attribute.VISIBLE]: (value) => (this.visible = value),
-        [Attribute.STATUS]: (value) => (this.status = value),
+        [Attributes.VISIBLE]: (value) => (this.visible = value),
+        [Attributes.STATUS]: (value) => (this.status = value),
     };
     /**
      * Initialize component attributes with default values
@@ -242,7 +235,7 @@ export class Pin extends Component {
      * @category Configuration
      * @hidden
      */
-    _cacheElements = () => this._cacheIcon();
+    _cache = () => this._cacheIcon();
     /**
      * Called by the connectedCallback prototypical method
      * @category Configuration
@@ -260,7 +253,7 @@ export class Pin extends Component {
      * @category State
      * @hidden
      */
-    _initializeState = () => this.setAttribute(Attribute.STATUS, this._status);
+    _initializeState = () => this.setAttribute(Attributes.STATUS, this._status);
     /**
      * Cache icon element reference to improve performance
      * @category State

package/dist/{Pin.meta.d.ts → pin.meta.d.ts} RENAMED Viewed

@@ -7,7 +7,7 @@ export declare const Tag: "pin-button";
  * @category Metadata: State
  * @enum
  */
-export declare const Attribute: {
+export declare const Attributes: {
     readonly VISIBLE: "visible";
     readonly STATUS: "status";
 };
@@ -15,7 +15,7 @@ export declare const Attribute: {
  * HTML Attributes available to set
  * @category Metadata: State
  */
-export type Attributes = typeof Attribute;
+export type Attributes = typeof Attributes;
 /**
  * HTML Attributes available to set
  * @category Metadata: State
@@ -29,7 +29,7 @@ export declare const State: {
  * HTML Attributes available to set
  * @category Metadata: State
  */
-export type States = (typeof State)[keyof typeof State];
+export type State = (typeof State)[keyof typeof State];
 /**
  * Visible state used to show or hide the component
  * @category Metadata: State
@@ -43,7 +43,7 @@ export declare const Visible: {
  * Visible state used to show or hide the component
  * @category Metadata: State
  */
-export type Visibility = (typeof Visible)[keyof typeof Visible];
+export type Visible = (typeof Visible)[keyof typeof Visible];
 /**
  * @category Metadata: State
  * @enum
@@ -55,7 +55,7 @@ export declare const Status: {
 /**
  * @category Metadata: State
  */
-export type Statuses = (typeof Status)[keyof typeof Status];
+export type Status = (typeof Status)[keyof typeof Status];
 /**
  * @category Metadata: Operations
  * @enum
@@ -70,7 +70,7 @@ export declare const Operation: {
 /**
  * @category Metadata: Operations
  */
-export type Operations = (typeof Operation)[keyof typeof Operation];
+export type Operation = (typeof Operation)[keyof typeof Operation];
 /**
  * @category Metadata: Events
  * @enum
@@ -85,7 +85,7 @@ export declare const Event: {
 /**
  * @category Metadata: Events
  */
-export type Events = (typeof Event)[keyof typeof Event];
+export type Event = (typeof Event)[keyof typeof Event];
 /**
  * @category Metadata: Gesture
  * @enum
@@ -96,9 +96,4 @@ export declare const Gesture: {
 /**
  * @category Metadata: Gesture
  */
-export type Gestures = (typeof Gesture)[keyof typeof Gesture];
-/**
- * Event handler signature
- * @hidden
- */
-export type Handler = (...args: any[]) => void;
+export type Gesture = (typeof Gesture)[keyof typeof Gesture];

package/dist/{Pin.meta.js → pin.meta.js} RENAMED Viewed

@@ -7,7 +7,7 @@ export const Tag = "pin-button";
  * @category Metadata: State
  * @enum
  */
-export const Attribute = {
+export const Attributes = {
     VISIBLE: "visible",
     STATUS: "status",
 };
@@ -17,7 +17,7 @@ export const Attribute = {
  * @enum
  */
 export const State = {
-    ...Attribute,
+    ...Attributes,
 };
 /**
  * Visible state used to show or hide the component

package/{src/Pin.style.css → dist/pin.style.css} RENAMED Viewed

@@ -1,122 +1,126 @@
-/* =======================
-  Host Element Styles
-======================= */
-:host {
-  /* Light mode color variables */
-  --button-background-color: #ffffff;
-  --button-hover-background-color: #f3f3f3;
-  --button-active-background-color: #e1e1e1;
-  --button-border-color: #d1d1d1;
-  --button-border-hover-color: #a1a1a1;
-  --svg-fill-color: #5a5a5a;
-  --svg-hover-fill-color: #404040;
-  /* Shadow and radius */
-  --button-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
-  --button-radius: 8px;
-  /* Sizes and margins */
-  --icon-size: 40px;
-  --icon-margin: 4px;
-  --svg-size: 24px;
-  --svg-margin: 8px;
-  display: inline-block;
-}
-/* Dark Mode Variables */
-@media (prefers-color-scheme: dark) {
-  :host {
-    /* Dark mode color variables */
-    --button-background-color: #1e1e1e;
-    --button-hover-background-color: #2a2a2a;
-    --button-active-background-color: #333333;
-    --button-border-color: #3c3c3c;
-    --button-border-hover-color: #4a4a4a;
-    --svg-fill-color: #cfcfcf;
-    --svg-hover-fill-color: #ffffff;
-    --button-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
-  }
-}
-/* =======================
-  Icon Styles
-======================= */
-.icon {
-  position: relative;
-  margin: var(--icon-margin);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--icon-size);
-  height: var(--icon-size);
-  background-color: var(--button-background-color);
-  border: 1px solid var(--button-border-color);
-  border-radius: var(--button-radius);
-  box-shadow: var(--button-shadow);
-  cursor: pointer;
-  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-}
-/* Active state styles for the icon (when clicked or tapped) */
-.icon:active {
-  background-color: var(--button-active-background-color);
-  border-color: var(--button-border-hover-color);
-  box-shadow: none;
-}
-/* =======================
-  Icon Hover Styles
-======================= */
-@media (hover: hover) {
-  .icon:hover {
-    background-color: var(--button-hover-background-color);
-    border-color: var(--button-border-hover-color);
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
-  }
-}
-/* =======================
-  SVG Icon Styles
-======================= */
-svg {
-  margin: var(--svg-margin);
-  width: var(--svg-size);
-  height: var(--svg-size);
-  fill: var(--svg-fill-color);
-  transition: fill 0.2s, opacity 0.2s;
-}
-/* Hover effect for the SVG icons */
-@media (hover: hover) {
-  .icon:hover svg {
-    fill: var(--svg-hover-fill-color);
-  }
-}
-/* =======================
-  State Visibility
-======================= */
-.pinned {
-  display: none;
-}
-.unpinned {
-  display: inline-block;
-}
-:host([visible="no"]) {
-  display: none;
-}
-/* =======================
-  State: Pinned
-======================= */
-:host([status="pinned"]) .icon {
-  background-color: var(--button-active-background-color);
-  border-color: var(--button-border-hover-color);
-}
-:host([status="pinned"]) .pinned {
-  display: inline-block;
-}
-:host([status="pinned"]) .unpinned {
-  display: none;
-}
-/* =======================
-  State: Unpinned
-======================= */
-:host([status="unpinned"]) .pinned {
-  display: none;
-}
-:host([status="unpinned"]) .unpinned {
-  display: inline-block;
-}
+/* =======================
+  Host Element Styles
+======================= */
+:host {
+  /* Light mode color variables */
+  --button-background-color: #ffffff;
+  --button-hover-background-color: #f3f3f3;
+  --button-active-background-color: #e1e1e1;
+  --button-border-color: #d1d1d1;
+  --button-border-hover-color: #a1a1a1;
+  --button-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.15);
+  --svg-fill-color: #5a5a5a;
+  --svg-hover-fill-color: #404040;
+  /* Shadow and radius */
+  --button-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  --button-radius: 8px;
+  /* Sizes and margins */
+  --icon-size: 40px;
+  --icon-margin: 4px;
+  --svg-size: 24px;
+  --svg-margin: 8px;
+  display: inline-block;
+}
+/* Dark Mode Variables */
+@media (prefers-color-scheme: dark) {
+  :host {
+    /* Dark mode color variables */
+    --button-background-color: #1e1e1e;
+    --button-hover-background-color: #2a2a2a;
+    --button-active-background-color: #333333;
+    --button-border-color: #3c3c3c;
+    --button-border-hover-color: #4a4a4a;
+    --button-shadow: 0 1px 3px rgba(255, 255, 255, 0.12),
+      0 3px 8px rgba(0, 0, 0, 0.6);
+    --button-shadow-hover: 0 2px 6px rgba(255, 255, 255, 0.16),
+      0 6px 12px rgba(0, 0, 0, 0.6);
+    --svg-fill-color: #cfcfcf;
+    --svg-hover-fill-color: #ffffff;
+  }
+}
+/* =======================
+  Icon Styles
+======================= */
+.icon {
+  position: relative;
+  margin: var(--icon-margin);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  background-color: var(--button-background-color);
+  border: 1px solid var(--button-border-color);
+  border-radius: var(--button-radius);
+  box-shadow: var(--button-shadow);
+  cursor: pointer;
+  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+/* Active state styles for the icon (when clicked or tapped) */
+.icon:active {
+  background-color: var(--button-active-background-color);
+  border-color: var(--button-border-hover-color);
+  box-shadow: none;
+}
+/* =======================
+  Icon Hover Styles
+======================= */
+@media (hover: hover) {
+  .icon:hover {
+    background-color: var(--button-hover-background-color);
+    border-color: var(--button-border-hover-color);
+    box-shadow: var(--button-shadow-hover);
+  }
+}
+/* =======================
+  SVG Icon Styles
+======================= */
+svg {
+  margin: var(--svg-margin);
+  width: var(--svg-size);
+  height: var(--svg-size);
+  fill: var(--svg-fill-color);
+  transition: fill 0.2s, opacity 0.2s;
+}
+/* Hover effect for the SVG icons */
+@media (hover: hover) {
+  .icon:hover svg {
+    fill: var(--svg-hover-fill-color);
+  }
+}
+/* =======================
+  State Visibility
+======================= */
+.pinned {
+  display: none;
+}
+.unpinned {
+  display: inline-block;
+}
+:host([visible="no"]) {
+  display: none;
+}
+/* =======================
+  State: Pinned
+======================= */
+:host([status="pinned"]) .icon {
+  background-color: var(--button-active-background-color);
+  border-color: var(--button-border-hover-color);
+}
+:host([status="pinned"]) .pinned {
+  display: inline-block;
+}
+:host([status="pinned"]) .unpinned {
+  display: none;
+}
+/* =======================
+  State: Unpinned
+======================= */
+:host([status="unpinned"]) .pinned {
+  display: none;
+}
+:host([status="unpinned"]) .unpinned {
+  display: inline-block;
+}

package/dist/{Pin.template.html → pin.template.html} RENAMED Viewed

@@ -1,12 +1,26 @@
-<template id="pin-button">
-  <div class="icon">
-    <svg class="pinned" height="24px" width="24px" viewBox="0 0 20 20" fill="#212121">
-      <path
-        d="M2.85355 2.14645C2.65829 1.95118 2.34171 1.95118 2.14645 2.14645C1.95118 2.34171 1.95118 2.65829 2.14645 2.85355L6.896 7.60309L4.01834 8.75415C3.35177 9.02078 3.17498 9.88209 3.68262 10.3897L6.29289 13L3 16.2929V17H3.70711L7 13.7071L9.61027 16.3174C10.1179 16.825 10.9792 16.6482 11.2459 15.9817L12.3969 13.104L17.1464 17.8536C17.3417 18.0488 17.6583 18.0488 17.8536 17.8536C18.0488 17.6583 18.0488 17.3417 17.8536 17.1464L2.85355 2.14645ZM11.6276 12.3347L10.3174 15.6103L4.38973 9.68263L7.66531 8.3724L11.6276 12.3347ZM12.9565 10.7127C12.9294 10.7263 12.9026 10.7403 12.8761 10.7548L13.6202 11.4989L16.8622 9.87793C18.0832 9.26743 18.3473 7.64015 17.382 6.67486L13.3251 2.61804C12.3599 1.65275 10.7326 1.91683 10.1221 3.13783L8.5011 6.37977L9.24523 7.1239C9.25971 7.09739 9.27373 7.07059 9.28728 7.04349L11.0165 3.58504C11.3218 2.97454 12.1354 2.8425 12.618 3.32514L16.6749 7.38197C17.1575 7.86461 17.0255 8.67826 16.415 8.98351L12.9565 10.7127Z" />
-    </svg>
-    <svg class="unpinned" height="24px" width="24px" viewBox="0 0 20 20" fill="#212121">
-      <path
-        d="M10.1221 3.13782C10.7326 1.91683 12.3599 1.65275 13.3251 2.61804L17.382 6.67486C18.3472 7.64015 18.0832 9.26743 16.8622 9.87793L13.4037 11.6072C13.0751 11.7715 12.8183 12.0506 12.6818 12.3917L11.2459 15.9817C10.9792 16.6482 10.1179 16.825 9.61027 16.3174L7 13.7071L3.70711 17H3V16.2929L6.29289 13L3.68262 10.3897C3.17498 9.88209 3.35177 9.02078 4.01834 8.75415L7.60829 7.31817C7.94939 7.18173 8.22855 6.92486 8.39285 6.59628L10.1221 3.13782ZM12.618 3.32514C12.1354 2.8425 11.3217 2.97454 11.0165 3.58504L9.28727 7.04349C9.01345 7.59113 8.54818 8.01925 7.97968 8.24665L4.38973 9.68263L10.3174 15.6103L11.7534 12.0203C11.9808 11.4518 12.4089 10.9866 12.9565 10.7127L16.415 8.9835C17.0255 8.67826 17.1575 7.86461 16.6749 7.38197L12.618 3.32514Z" />
-    </svg>
-  </div>
-</template>
+<template id="pin-button">
+  <div class="icon">
+    <svg
+      class="pinned"
+      height="24px"
+      width="24px"
+      viewBox="0 0 20 20"
+      fill="#212121"
+    >
+      <path
+        d="M2.85355 2.14645C2.65829 1.95118 2.34171 1.95118 2.14645 2.14645C1.95118 2.34171 1.95118 2.65829 2.14645 2.85355L6.896 7.60309L4.01834 8.75415C3.35177 9.02078 3.17498 9.88209 3.68262 10.3897L6.29289 13L3 16.2929V17H3.70711L7 13.7071L9.61027 16.3174C10.1179 16.825 10.9792 16.6482 11.2459 15.9817L12.3969 13.104L17.1464 17.8536C17.3417 18.0488 17.6583 18.0488 17.8536 17.8536C18.0488 17.6583 18.0488 17.3417 17.8536 17.1464L2.85355 2.14645ZM11.6276 12.3347L10.3174 15.6103L4.38973 9.68263L7.66531 8.3724L11.6276 12.3347ZM12.9565 10.7127C12.9294 10.7263 12.9026 10.7403 12.8761 10.7548L13.6202 11.4989L16.8622 9.87793C18.0832 9.26743 18.3473 7.64015 17.382 6.67486L13.3251 2.61804C12.3599 1.65275 10.7326 1.91683 10.1221 3.13783L8.5011 6.37977L9.24523 7.1239C9.25971 7.09739 9.27373 7.07059 9.28728 7.04349L11.0165 3.58504C11.3218 2.97454 12.1354 2.8425 12.618 3.32514L16.6749 7.38197C17.1575 7.86461 17.0255 8.67826 16.415 8.98351L12.9565 10.7127Z"
+      />
+    </svg>
+    <svg
+      class="unpinned"
+      height="24px"
+      width="24px"
+      viewBox="0 0 20 20"
+      fill="#212121"
+    >
+      <path
+        d="M10.1221 3.13782C10.7326 1.91683 12.3599 1.65275 13.3251 2.61804L17.382 6.67486C18.3472 7.64015 18.0832 9.26743 16.8622 9.87793L13.4037 11.6072C13.0751 11.7715 12.8183 12.0506 12.6818 12.3917L11.2459 15.9817C10.9792 16.6482 10.1179 16.825 9.61027 16.3174L7 13.7071L3.70711 17H3V16.2929L6.29289 13L3.68262 10.3897C3.17498 9.88209 3.35177 9.02078 4.01834 8.75415L7.60829 7.31817C7.94939 7.18173 8.22855 6.92486 8.39285 6.59628L10.1221 3.13782ZM12.618 3.32514C12.1354 2.8425 11.3217 2.97454 11.0165 3.58504L9.28727 7.04349C9.01345 7.59113 8.54818 8.01925 7.97968 8.24665L4.38973 9.68263L10.3174 15.6103L11.7534 12.0203C11.9808 11.4518 12.4089 10.9866 12.9565 10.7127L16.415 8.9835C17.0255 8.67826 17.1575 7.86461 16.6749 7.38197L12.618 3.32514Z"
+      />
+    </svg>
+  </div>
+</template>