analog-clock-components 0.2.66 → 0.2.68

package/dist/analog-clock/analog-clock.esm.js

@@ -1 +1 @@
-import{p as e,b as o}from"./p-DmB9wucR.js";export{s as setNonce}from"./p-DmB9wucR.js";import{g as m}from"./p-DQuL1Twl.js";(()=>{const o=import.meta.url,m={};return""!==o&&(m.resourcesUrl=new URL(".",o).href),e(m)})().then((async e=>(await m(),o([["p-b6de1b20",[[257,"analog-clock",{size:[2],timeZone:[2,"time-zone"],time:[32]}]]]],e))));
+import{p as e,b as o}from"./p-6zWiImGa.js";export{s as setNonce}from"./p-6zWiImGa.js";import{g as a}from"./p-DQuL1Twl.js";(()=>{const o=import.meta.url,a={};return""!==o&&(a.resourcesUrl=new URL(".",o).href),e(a)})().then((async e=>(await a(),o([["p-d3086dee",[[257,"analog-clock",{size:[2],timeZone:[2,"time-zone"],time:[32]}]]]],e))));

package/dist/analog-clock/{p-b6de1b20.entry.js → p-d3086dee.entry.js}

@@ -1 +1 @@
-import{r as e,h as t}from"./p-DmB9wucR.js";const c=class{constructor(t){e(this,t),this.size=void 0,this.timeZone=0,this.time=Date.now()}componentDidLoad(){this.timer=window.setInterval((()=>{this.time=Date.now()}),250)}disconnectedCallback(){clearInterval(this.timer)}get hour(){return new Date(this.time).getHours()}get minute(){return new Date(this.time).getMinutes()}get second(){return new Date(this.time).getSeconds()}hourToDegrees(){const e=this.hour+this.timeZone;return Math.floor(this.minute/2)+30*e}minuteToDegrees(){return Math.floor(this.second/10)+6*this.minute}secondToDegrees(){return 6*this.second}render(){return t("svg",{key:"39e3465d3bf04035966b00bb15186d1f712163cd",class:"clock",viewBox:"0 0 200 200",width:this.size,height:this.size},t("circle",{key:"e4c4288aa0efc9cf98027eef1f5bd7c550c23a18",id:"circle",cx:"100",cy:"100",r:"95","stroke-width":"10",fill:"transparent"}),t("line",{key:"296fb8ac19749103439f2ce1878db5ccfb214c20",id:"hour",transform:`rotate(${this.hourToDegrees()}, 100, 100)`,x1:"100",y1:"100",x2:"100",y2:"60","stroke-width":"10","stroke-linecap":"round"}),t("line",{key:"acbe2c6ebdf05ff46e06144839dec43c45e8b40d",id:"minute",transform:`rotate(${this.minuteToDegrees()}, 100, 100)`,x1:"100",y1:"100",x2:"100",y2:"30","stroke-width":"8","stroke-linecap":"round"}),t("line",{key:"f275abf7169379b2f61c9cdd185068f5e2373d4a",id:"second",transform:`rotate(${this.secondToDegrees()}, 100, 100)`,x1:"100",y1:"100",x2:"100",y2:"20","stroke-width":"2","stroke-linecap":"round"}))}};c.style=".clock #circle{stroke:var(--clock-circle-color, black)}.clock #hour{stroke:var(--clock-hour-color, black)}.clock #minute{stroke:var(--clock-minute-color, black)}.clock #second{stroke:var(--clock-second-color, black)}";export{c as analog_clock}
+import{r as e,h as t}from"./p-6zWiImGa.js";const c=class{constructor(t){e(this,t),this.size=void 0,this.timeZone=0,this.time=Date.now()}componentDidLoad(){this.timer=window.setInterval((()=>{this.time=Date.now()}),250)}disconnectedCallback(){clearInterval(this.timer)}get hour(){return new Date(this.time).getHours()}get minute(){return new Date(this.time).getMinutes()}get second(){return new Date(this.time).getSeconds()}hourToDegrees(){const e=this.hour+this.timeZone;return Math.floor(this.minute/2)+30*e}minuteToDegrees(){return Math.floor(this.second/10)+6*this.minute}secondToDegrees(){return 6*this.second}render(){return t("svg",{key:"39e3465d3bf04035966b00bb15186d1f712163cd",class:"clock",viewBox:"0 0 200 200",width:this.size,height:this.size},t("circle",{key:"e4c4288aa0efc9cf98027eef1f5bd7c550c23a18",id:"circle",cx:"100",cy:"100",r:"95","stroke-width":"10",fill:"transparent"}),t("line",{key:"296fb8ac19749103439f2ce1878db5ccfb214c20",id:"hour",transform:`rotate(${this.hourToDegrees()}, 100, 100)`,x1:"100",y1:"100",x2:"100",y2:"60","stroke-width":"10","stroke-linecap":"round"}),t("line",{key:"acbe2c6ebdf05ff46e06144839dec43c45e8b40d",id:"minute",transform:`rotate(${this.minuteToDegrees()}, 100, 100)`,x1:"100",y1:"100",x2:"100",y2:"30","stroke-width":"8","stroke-linecap":"round"}),t("line",{key:"f275abf7169379b2f61c9cdd185068f5e2373d4a",id:"second",transform:`rotate(${this.secondToDegrees()}, 100, 100)`,x1:"100",y1:"100",x2:"100",y2:"20","stroke-width":"2","stroke-linecap":"round"}))}};c.style=".clock #circle{stroke:var(--clock-circle-color, black)}.clock #hour{stroke:var(--clock-hour-color, black)}.clock #minute{stroke:var(--clock-minute-color, black)}.clock #second{stroke:var(--clock-second-color, black)}";export{c as analog_clock}

package/dist/cjs/analog-clock.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BpOZr18C.js');
+var index = require('./index-C6H0Qpg2.js');
 
-const analogClockCss = ".clock #circle{stroke:var(--clock-circle-color, black)}.clock #hour{stroke:var(--clock-hour-color, black)}.clock #minute{stroke:var(--clock-minute-color, black)}.clock #second{stroke:var(--clock-second-color, black)}";
+const analogClockCss = () => `.clock #circle{stroke:var(--clock-circle-color, black)}.clock #hour{stroke:var(--clock-hour-color, black)}.clock #minute{stroke:var(--clock-minute-color, black)}.clock #second{stroke:var(--clock-second-color, black)}`;
 
 const AnalogClock = class {
     constructor(hostRef) {
@@ -42,6 +42,6 @@ const AnalogClock = class {
         return (index.h("svg", { key: '39e3465d3bf04035966b00bb15186d1f712163cd', class: "clock", viewBox: "0 0 200 200", width: this.size, height: this.size }, index.h("circle", { key: 'e4c4288aa0efc9cf98027eef1f5bd7c550c23a18', id: "circle", cx: "100", cy: "100", r: "95", "stroke-width": "10", fill: "transparent" }), index.h("line", { key: '296fb8ac19749103439f2ce1878db5ccfb214c20', id: "hour", transform: `rotate(${this.hourToDegrees()}, 100, 100)`, x1: "100", y1: "100", x2: "100", y2: "60", "stroke-width": "10", "stroke-linecap": "round" }), index.h("line", { key: 'acbe2c6ebdf05ff46e06144839dec43c45e8b40d', id: "minute", transform: `rotate(${this.minuteToDegrees()}, 100, 100)`, x1: "100", y1: "100", x2: "100", y2: "30", "stroke-width": "8", "stroke-linecap": "round" }), index.h("line", { key: 'f275abf7169379b2f61c9cdd185068f5e2373d4a', id: "second", transform: `rotate(${this.secondToDegrees()}, 100, 100)`, x1: "100", y1: "100", x2: "100", y2: "20", "stroke-width": "2", "stroke-linecap": "round" })));
     }
 };
-AnalogClock.style = analogClockCss;
+AnalogClock.style = analogClockCss();
 
 exports.analog_clock = AnalogClock;

package/dist/cjs/analog-clock.cjs.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-BpOZr18C.js');
+var index = require('./index-C6H0Qpg2.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*
- Stencil Client Patch Browser v4.38.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.39.0 | MIT Licensed | https://stenciljs.com
  */
 
 var patchBrowser = () => {

package/dist/cjs/{index-BpOZr18C.js → index-C6H0Qpg2.js}

@@ -4,7 +4,7 @@ const NAMESPACE = 'analog-clock';
 const BUILD = /* analog-clock */ { hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: false, state: true, updatable: true};
 
 /*
- Stencil Client Platform v4.38.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.39.0 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -380,6 +380,9 @@ var attachStyles = (hostRef) => {
 };
 var getScopeId = (cmp, mode) => "sc-" + (cmp.$tagName$);
 var h = (nodeName, vnodeData, ...children) => {
+  if (typeof nodeName === "string") {
+    nodeName = transformTag(nodeName);
+  }
   let child = null;
   let key = null;
   let simple = false;
@@ -1285,7 +1288,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       {
         cmpMeta.$members$ = compactMeta[2];
       }
-      const tagName = cmpMeta.$tagName$;
+      const tagName = transformTag(cmpMeta.$tagName$);
       const HostElement = class extends HTMLElement {
         // StencilLazyHost
         constructor(self) {
@@ -1386,6 +1389,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
 
 // src/runtime/nonce.ts
 var setNonce = (nonce) => plt.$nonce$ = nonce;
+function transformTag(tag) {
+  return tag;
+}
 
 exports.bootstrapLazy = bootstrapLazy;
 exports.h = h;

package/dist/cjs/loader.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BpOZr18C.js');
+var index = require('./index-C6H0Qpg2.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 const defineCustomElements = async (win, options) => {

package/dist/collection/collection-manifest.json

@@ -4,8 +4,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.38.3",
-    "typescriptVersion": "5.9.3"
+    "version": "4.39.0",
+    "typescriptVersion": "5.8.3"
   },
   "collections": [],
   "bundles": []

package/dist/components/analog-clock.js

@@ -1,6 +1,6 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h, transformTag } from '@stencil/core/internal/client';
 
-const analogClockCss = ".clock #circle{stroke:var(--clock-circle-color, black)}.clock #hour{stroke:var(--clock-hour-color, black)}.clock #minute{stroke:var(--clock-minute-color, black)}.clock #second{stroke:var(--clock-second-color, black)}";
+const analogClockCss = () => `.clock #circle{stroke:var(--clock-circle-color, black)}.clock #hour{stroke:var(--clock-hour-color, black)}.clock #minute{stroke:var(--clock-minute-color, black)}.clock #second{stroke:var(--clock-second-color, black)}`;
 
 const AnalogClock$1 = /*@__PURE__*/ proxyCustomElement(class AnalogClock extends HTMLElement {
     constructor(registerHost) {
@@ -43,7 +43,7 @@ const AnalogClock$1 = /*@__PURE__*/ proxyCustomElement(class AnalogClock extends
     render() {
         return (h("svg", { key: '39e3465d3bf04035966b00bb15186d1f712163cd', class: "clock", viewBox: "0 0 200 200", width: this.size, height: this.size }, h("circle", { key: 'e4c4288aa0efc9cf98027eef1f5bd7c550c23a18', id: "circle", cx: "100", cy: "100", r: "95", "stroke-width": "10", fill: "transparent" }), h("line", { key: '296fb8ac19749103439f2ce1878db5ccfb214c20', id: "hour", transform: `rotate(${this.hourToDegrees()}, 100, 100)`, x1: "100", y1: "100", x2: "100", y2: "60", "stroke-width": "10", "stroke-linecap": "round" }), h("line", { key: 'acbe2c6ebdf05ff46e06144839dec43c45e8b40d', id: "minute", transform: `rotate(${this.minuteToDegrees()}, 100, 100)`, x1: "100", y1: "100", x2: "100", y2: "30", "stroke-width": "8", "stroke-linecap": "round" }), h("line", { key: 'f275abf7169379b2f61c9cdd185068f5e2373d4a', id: "second", transform: `rotate(${this.secondToDegrees()}, 100, 100)`, x1: "100", y1: "100", x2: "100", y2: "20", "stroke-width": "2", "stroke-linecap": "round" })));
     }
-    static get style() { return analogClockCss; }
+    static get style() { return analogClockCss(); }
 }, [257, "analog-clock", {
         "size": [2],
         "timeZone": [2, "time-zone"],
@@ -56,8 +56,8 @@ function defineCustomElement$1() {
     const components = ["analog-clock"];
     components.forEach(tagName => { switch (tagName) {
         case "analog-clock":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, AnalogClock$1);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), AnalogClock$1);
             }
             break;
     } });

package/dist/esm/analog-clock.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-DmB9wucR.js';
+import { r as registerInstance, h } from './index-6zWiImGa.js';
 
-const analogClockCss = ".clock #circle{stroke:var(--clock-circle-color, black)}.clock #hour{stroke:var(--clock-hour-color, black)}.clock #minute{stroke:var(--clock-minute-color, black)}.clock #second{stroke:var(--clock-second-color, black)}";
+const analogClockCss = () => `.clock #circle{stroke:var(--clock-circle-color, black)}.clock #hour{stroke:var(--clock-hour-color, black)}.clock #minute{stroke:var(--clock-minute-color, black)}.clock #second{stroke:var(--clock-second-color, black)}`;
 
 const AnalogClock = class {
     constructor(hostRef) {
@@ -40,6 +40,6 @@ const AnalogClock = class {
         return (h("svg", { key: '39e3465d3bf04035966b00bb15186d1f712163cd', class: "clock", viewBox: "0 0 200 200", width: this.size, height: this.size }, h("circle", { key: 'e4c4288aa0efc9cf98027eef1f5bd7c550c23a18', id: "circle", cx: "100", cy: "100", r: "95", "stroke-width": "10", fill: "transparent" }), h("line", { key: '296fb8ac19749103439f2ce1878db5ccfb214c20', id: "hour", transform: `rotate(${this.hourToDegrees()}, 100, 100)`, x1: "100", y1: "100", x2: "100", y2: "60", "stroke-width": "10", "stroke-linecap": "round" }), h("line", { key: 'acbe2c6ebdf05ff46e06144839dec43c45e8b40d', id: "minute", transform: `rotate(${this.minuteToDegrees()}, 100, 100)`, x1: "100", y1: "100", x2: "100", y2: "30", "stroke-width": "8", "stroke-linecap": "round" }), h("line", { key: 'f275abf7169379b2f61c9cdd185068f5e2373d4a', id: "second", transform: `rotate(${this.secondToDegrees()}, 100, 100)`, x1: "100", y1: "100", x2: "100", y2: "20", "stroke-width": "2", "stroke-linecap": "round" })));
     }
 };
-AnalogClock.style = analogClockCss;
+AnalogClock.style = analogClockCss();
 
 export { AnalogClock as analog_clock };

package/dist/esm/analog-clock.js

@@ -1,9 +1,9 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-DmB9wucR.js';
-export { s as setNonce } from './index-DmB9wucR.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-6zWiImGa.js';
+export { s as setNonce } from './index-6zWiImGa.js';
 import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 
 /*
- Stencil Client Patch Browser v4.38.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.39.0 | MIT Licensed | https://stenciljs.com
  */
 
 var patchBrowser = () => {

package/dist/esm/{index-DmB9wucR.js → index-6zWiImGa.js}

@@ -2,7 +2,7 @@ const NAMESPACE = 'analog-clock';
 const BUILD = /* analog-clock */ { hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: false, state: true, updatable: true};
 
 /*
- Stencil Client Platform v4.38.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.39.0 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -378,6 +378,9 @@ var attachStyles = (hostRef) => {
 };
 var getScopeId = (cmp, mode) => "sc-" + (cmp.$tagName$);
 var h = (nodeName, vnodeData, ...children) => {
+  if (typeof nodeName === "string") {
+    nodeName = transformTag(nodeName);
+  }
   let child = null;
   let key = null;
   let simple = false;
@@ -1283,7 +1286,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       {
         cmpMeta.$members$ = compactMeta[2];
       }
-      const tagName = cmpMeta.$tagName$;
+      const tagName = transformTag(cmpMeta.$tagName$);
       const HostElement = class extends HTMLElement {
         // StencilLazyHost
         constructor(self) {
@@ -1384,5 +1387,8 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
 
 // src/runtime/nonce.ts
 var setNonce = (nonce) => plt.$nonce$ = nonce;
+function transformTag(tag) {
+  return tag;
+}
 
 export { bootstrapLazy as b, h, promiseResolve as p, registerInstance as r, setNonce as s };

package/dist/esm/loader.js

@@ -1,5 +1,5 @@
-import { b as bootstrapLazy } from './index-DmB9wucR.js';
-export { s as setNonce } from './index-DmB9wucR.js';
+import { b as bootstrapLazy } from './index-6zWiImGa.js';
+export { s as setNonce } from './index-6zWiImGa.js';
 import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 
 const defineCustomElements = async (win, options) => {

package/dist/types/stencil-public-runtime.d.ts

@@ -125,6 +125,9 @@ export interface AttachInternalsDecorator {
 export interface ListenDecorator {
     (eventName: string, opts?: ListenOptions): CustomMethodDecorator<any>;
 }
+export interface ResolveVarFunction {
+    <T>(variable: T): string;
+}
 export interface ListenOptions {
     /**
      * Handlers can also be registered for an event other than the host itself.
@@ -208,6 +211,24 @@ export declare const AttachInternals: AttachInternalsDecorator;
  * https://stenciljs.com/docs/events#listen-decorator
  */
 export declare const Listen: ListenDecorator;
+/**
+ * The `resolveVar()` function is a compile-time utility that resolves const variables
+ * and object properties to their string literal values. This allows variables to be
+ * used in `@Listen` and `@Event` decorators instead of hardcoded strings.
+ *
+ * @example
+ * ```ts
+ * const MY_EVENT = 'myEvent';
+ * @Listen(resolveVar(MY_EVENT))
+ * ```
+ *
+ * @example
+ * ```ts
+ * const EVENTS = { MY_EVENT: 'myEvent' } as const;
+ * @Event({ eventName: resolveVar(EVENTS.MY_EVENT) })
+ * ```
+ */
+export declare const resolveVar: ResolveVarFunction;
 /**
  * The `@Method()` decorator is used to expose methods on the public API.
  * Class methods decorated with the @Method() decorator can be called directly
@@ -365,6 +386,27 @@ export declare function readTask(task: RafCallback): void;
  * Unhandled exception raised while rendering, during event handling, or lifecycles will trigger the custom event handler.
  */
 export declare const setErrorHandler: (handler: ErrorHandler) => void;
+export type TagTransformer = (tag: string) => string;
+/**
+ * Sets a tag transformer to be used when rendering your custom elements.
+ * ```ts
+ * setTagTransformer((tag) => {
+ *  if (tag.startsWith('my-')) return `new-${tag}`
+ *  return tag;
+ * });
+ * ```
+ * Will mean all your components that start with `my-` are defined instead with `new-my-` prefix.
+ *
+ * @param transformer the transformer function to use which must return a string.
+ */
+export declare function setTagTransformer(transformer: TagTransformer): void;
+/**
+ * Transforms a tag name using a transformer set via `setTagTransformer`
+ *
+ * @param tag - the tag to transform e.g. `my-tag`
+ * @returns the transformed tag e.g. `new-my-tag`
+ */
+export declare function transformTag(tag: string): string;
 /**
  * @deprecated - Use `MixedInCtor` instead:
  * ```ts
@@ -1747,6 +1789,7 @@ export interface CustomElementsDefineOptions {
     exclude?: string[];
     resourcesUrl?: string;
     syncQueue?: boolean;
+    /** @deprecated in-favour of `setTagTransformer` and `transformTag` */
     transformTagName?: (tagName: string) => string;
     jmp?: (c: Function) => any;
     raf?: (c: FrameRequestCallback) => number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "analog-clock-components",
-  "version": "0.2.66",
+  "version": "0.2.68",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -25,12 +25,12 @@
     "format": "prettier --write src"
   },
   "dependencies": {
-    "@stencil/core": "4.38.3"
+    "@stencil/core": "4.39.0"
   },
   "license": "MIT",
   "devDependencies": {
     "cspell": "9.4.0",
-    "eslint": "9.39.1",
+    "eslint": "9.39.2",
     "prettier": "3.7.4",
     "typescript": "5.9.3"
   },