@scalable.software/pin 0.2.0

package/dist/Pin.style.css

@@ -0,0 +1,122 @@
+/* =======================
+  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;
+}

package/dist/Pin.template.html

@@ -0,0 +1,12 @@
+<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>

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@scalable.software/pin",
+  "version": "0.2.0",
+  "description": "The Pin component is a button that can be visible or hidden, pinned or unpinned.",
+  "keywords": [
+    "web component",
+    "button"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/Index.js"
+    }
+  },
+  "types": "dist/Index.d.ts",
+  "module": "dist/Index.js",
+  "scripts": {
+    "clean.test": "node ./tasks/clean.test.mjs",
+    "pretest": "npm run clean.test && tsc --project tsconfig.test.json",
+    "test": "karma start",
+    "posttest": "npm run clean.test",
+    "prebuild": "node ./tasks/clean.build.mjs",
+    "build": "tsc --project tsconfig.build.json",
+    "postbuild": "node ./tasks/copy.build.mjs",
+    "preserve": "npm run build",
+    "serve": "web-dev-server --open /demo/index.html",
+    "document": "npx typedoc --tsconfig tsconfig.test.json",
+    "prepublish": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/scalable-software/pin.git"
+  },
+  "author": "Scalable.Software",
+  "license": "CC-BY-NC-SA-4.0",
+  "bugs": {
+    "url": "https://github.com/scalable-software/pin/issues"
+  },
+  "homepage": "https://github.com/scalable-software/pin#readme",
+  "devDependencies": {
+    "@types/jasmine": "^5.1.4",
+    "@web/dev-server": "^0.4.6",
+    "jasmine": "^5.1.0",
+    "karma": "^6.4.3",
+    "karma-chrome-launcher": "^3.2.0",
+    "karma-coverage-istanbul-instrumenter": "^1.0.4",
+    "karma-coverage-istanbul-reporter": "^3.0.3",
+    "karma-jasmine": "^5.1.0",
+    "karma-spec-reporter": "^0.0.36",
+    "typedoc": "^0.25.13",
+    "typedoc-plugin-merge-modules": "^5.1.0",
+    "typescript": "^5.4.5"
+  },
+  "dependencies": {
+    "@scalable.software/component": "^0.0.4"
+  }
+}