p-elements-core 1.2.31 → 1.2.32-rc-10

package/docs/src/documentation/reactive-properties.md

@@ -1,54 +1,54 @@
----
-title: "ReactiveProperties"
-layout: "base.njk"
-description: "Reactive properties"
-permalink: "/documentation/reactive-properties.html"
-eleventyNavigation:
-  key: ReactiveProperties
-  title: Reactive properties
-  order: 4
----
-
-# Reactive properties
-
-P-Elements receive input and store their state as JavaScript class fields or properties. Reactive properties are properties that can trigger the reactive update cycle when changed, re-rendering the component, and optionally be read or written to attributes.
-
-```typescript
-@CustomElementConfig({ tagName: 'my-greeting' })
-class MyGreeting extends CustomElement {
-
-  static readonly style = `...`;
-
-  @Property({ type: 'string', reflect: true, attribute: 'name' })
-  name = 'World';
-
-  render() : VNode {
-    return <h1>Hello, ${this.name}!</h1>;
-  }
-}
-```
-
-## Typescript config
-
-To use experimental decorators you must enable the `experimentalDecorators` compiler option.
-
-You should also ensure that the `useDefineForClassFields` setting is false. This is needed to avoid issues with class fields when declaring properties.
-
-<!-- todo in next version p-elements support standard decorator syntax -->
-
-```json
-// tsconfig.json
-{
-  "compilerOptions": {
-    "experimentalDecorators": true,
-    "useDefineForClassFields": false,
-  }
-}
-```
-
-## Decorators
-
-For more info:
-
-- [@Property](./decorators/property.html)
+---
+title: "ReactiveProperties"
+layout: "base.njk"
+description: "Reactive properties"
+permalink: "/documentation/reactive-properties.html"
+eleventyNavigation:
+  key: ReactiveProperties
+  title: Reactive properties
+  order: 4
+---
+
+# Reactive properties
+
+P-Elements receive input and store their state as JavaScript class fields or properties. Reactive properties are properties that can trigger the reactive update cycle when changed, re-rendering the component, and optionally be read or written to attributes.
+
+```typescript
+@CustomElementConfig({ tagName: 'my-greeting' })
+class MyGreeting extends CustomElement {
+
+  static readonly style = `...`;
+
+  @Property({ type: 'string', reflect: true, attribute: 'name' })
+  name = 'World';
+
+  render() : VNode {
+    return <h1>Hello, ${this.name}!</h1>;
+  }
+}
+```
+
+## Typescript config
+
+To use experimental decorators you must enable the `experimentalDecorators` compiler option.
+
+You should also ensure that the `useDefineForClassFields` setting is false. This is needed to avoid issues with class fields when declaring properties.
+
+<!-- todo in next version p-elements support standard decorator syntax -->
+
+```json
+// tsconfig.json
+{
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+  }
+}
+```
+
+## Decorators
+
+For more info:
+
+- [@Property](./decorators/property.html)
 - [@PropertyRenderOnSet](./decorators/property-render-on-set.html)

package/docs/src/index.d.ts

@@ -1,25 +1,25 @@
-/// <reference types="p-elements-core" />
-/// <reference types="@types/animejs" />
-/// <reference types="@types/underscore" />
-
-declare namespace JSX {
-    interface IntrinsicElements {
-      [tagName: string]: VNodeProperties;
-    }
-    type Element = VNode;
-  }
-
-declare const _: _.UnderscoreStatic;
-
-declare const anime: (params: anime.AnimeParams) => anime.AnimeInstance;
-
-declare const Maquette: {
-  h: H;
-  createProjector: (projectorOptions?: ProjectorOptions) => Projector;
-};
-
-declare let notifyContainer: NotifyContainerElement;
-
-declare module "*.css";
-declare module "*.html";
-declare module "*.svg";
+/// <reference types="p-elements-core" />
+/// <reference types="@types/animejs" />
+/// <reference types="@types/underscore" />
+
+declare namespace JSX {
+    interface IntrinsicElements {
+      [tagName: string]: VNodeProperties;
+    }
+    type Element = VNode;
+  }
+
+declare const _: _.UnderscoreStatic;
+
+declare const anime: (params: anime.AnimeParams) => anime.AnimeInstance;
+
+declare const Maquette: {
+  h: H;
+  createProjector: (projectorOptions?: ProjectorOptions) => Projector;
+};
+
+declare let notifyContainer: NotifyContainerElement;
+
+declare module "*.css";
+declare module "*.html";
+declare module "*.svg";

package/docs/src/index.md

@@ -1,3 +1,3 @@
-<script>
-  document.location.href="./documentation/index.html";
-</script>
+<script>
+  document.location.href="./documentation/index.html";
+</script>

package/docs/src/scripts/components/app-mode-switch/app-mode-switch.css

@@ -1,78 +1,78 @@
-:host {
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  touch-action: manipulation;
-  -webkit-tap-highlight-color: transparent;
-  display: inline-block;
- 
-}
-
-:host > div{
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: .5rem;
-}
-
-
-.sun-and-moon > :is(.moon, .sun, .sun-beams) {
-  transform-origin: center center;
-}
-
-
-svg {
-  margin: auto;
-  stroke-linecap: round;
-}
-
-svg + div {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-:host([mode="light"]) .sun-and-moon > .sun {
-  transform: scale(1.75);
-}
-
-:host([mode="light"]) .sun-and-moon > .sun-beams {
-  opacity: 0;
-}
-
-:host([mode="light"]) .sun-and-moon > .moon > circle {
-  transform: translate(-7px);
-}
-
-/* Animations */
-
-:host([mode="dark"]) .sun-and-moon > .sun {
-  transition: transform 0.5s cubic-bezier(0.5, 1.25, 0.75, 1.25);
-}
-
-:host([mode="dark"]) .sun-and-moon > .sun-beams {
-  transition:
-    transform 0.5s cubic-bezier(0.5, 1.5, 0.75, 1.25),
-    opacity 0.5s cubic-bezier(0.25, 0, 0.3, 1);
-}
-
-:host([mode="darkt"]) .sun-and-moon .moon > circle {
-  transition: transform 0.25s cubic-bezier(0, 0, 0, 1);
-}
-
-:host([mode="light"]) .sun-and-moon > .sun {
-  transform: scale(1.75);
-  transition-timing-function: cubic-bezier(0.25, 0, 0.3, 1);
-  transition-duration: 0.25s;
-}
-
-:host([mode="light"]) .sun-and-moon > .sun-beams {
-  transform: rotate(-25deg);
-  transition-duration: 0.15s;
-}
-
-:host([mode="light"]) .sun-and-moon > .moon > circle {
-  transition-delay: 0.25s;
-  transition-duration: 0.5s;
-}
+:host {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  display: inline-block;
+ 
+}
+
+:host > div{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: .5rem;
+}
+
+
+.sun-and-moon > :is(.moon, .sun, .sun-beams) {
+  transform-origin: center center;
+}
+
+
+svg {
+  margin: auto;
+  stroke-linecap: round;
+}
+
+svg + div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:host([mode="light"]) .sun-and-moon > .sun {
+  transform: scale(1.75);
+}
+
+:host([mode="light"]) .sun-and-moon > .sun-beams {
+  opacity: 0;
+}
+
+:host([mode="light"]) .sun-and-moon > .moon > circle {
+  transform: translate(-7px);
+}
+
+/* Animations */
+
+:host([mode="dark"]) .sun-and-moon > .sun {
+  transition: transform 0.5s cubic-bezier(0.5, 1.25, 0.75, 1.25);
+}
+
+:host([mode="dark"]) .sun-and-moon > .sun-beams {
+  transition:
+    transform 0.5s cubic-bezier(0.5, 1.5, 0.75, 1.25),
+    opacity 0.5s cubic-bezier(0.25, 0, 0.3, 1);
+}
+
+:host([mode="darkt"]) .sun-and-moon .moon > circle {
+  transition: transform 0.25s cubic-bezier(0, 0, 0, 1);
+}
+
+:host([mode="light"]) .sun-and-moon > .sun {
+  transform: scale(1.75);
+  transition-timing-function: cubic-bezier(0.25, 0, 0.3, 1);
+  transition-duration: 0.25s;
+}
+
+:host([mode="light"]) .sun-and-moon > .sun-beams {
+  transform: rotate(-25deg);
+  transition-duration: 0.15s;
+}
+
+:host([mode="light"]) .sun-and-moon > .moon > circle {
+  transition-delay: 0.25s;
+  transition-duration: 0.5s;
+}

package/docs/src/scripts/components/app-mode-switch/app-mode-switch.tsx

@@ -1,166 +1,166 @@
-import css from "./app-mode-switch.css";
-
-export enum ThemeMode {
-  Light = "light",
-  Dark = "dark",
-}
-
-interface AppModeSwitchEventMap {
-  modeChange: CustomEvent<{ mode: ThemeMode }>;
-  click: MouseEvent;
-}
-
-@CustomElementConfig({
-  tagName: "app-mode-switch",
-})
-export class AppModeSwitchElement extends CustomElement {
-  static readonly style = css;
-
-  @Property({ type: "string", attribute: "mode", reflect: true })
-  mode: ThemeMode = ThemeMode.Light;
-
-  render(): VNode {
-    return (
-      <div>
-        <svg
-          class="sun-and-moon"
-          aria-hidden="true"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-        >
-          <mask class="moon" id="moon-mask">
-            <rect x="0" y="0" width="100%" height="100%" fill="white"></rect>
-            <circle cx="24" cy="10" r="6" fill="black"></circle>
-          </mask>
-          <circle
-            class="sun"
-            cx="12"
-            cy="12"
-            r="6"
-            mask="url(#moon-mask)"
-            fill="currentColor"
-          ></circle>
-          <g class="sun-beams" stroke="currentColor">
-            <line x1="12" y1="1" x2="12" y2="3"></line>
-            <line x1="12" y1="21" x2="12" y2="23"></line>
-            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
-            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
-            <line x1="1" y1="12" x2="3" y2="12"></line>
-            <line x1="21" y1="12" x2="23" y2="12"></line>
-            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
-            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
-          </g>
-        </svg>
-        <div>
-          <slot name={this.mode === ThemeMode.Dark ? ThemeMode.Light : ThemeMode.Dark }></slot>
-        </div>
-      </div>
-    );
-  }
-
-  addEventListener<T extends keyof AppModeSwitchEventMap>(
-    type: T,
-    listener: (this: AppModeSwitchElement, ev: AppModeSwitchEventMap[T]) => any,
-    options?: boolean | AddEventListenerOptions
-  ): void;
-
-  addEventListener(
-    type: string,
-    listener: (this: AppModeSwitchElement, ev: Event) => any,
-    options?: boolean | AddEventListenerOptions
-  ): void {
-    super.addEventListener(type, listener, options);
-  }
-
-  private onClick = () => {
-    this.mode =
-      this.mode === ThemeMode.Light ? ThemeMode.Dark : ThemeMode.Light;
-  };
-
-  updated(propertyName: string, oldValue: any, newValue: any): void {
-    if (propertyName === "mode") {
-      this.dispatchEvent(
-        new CustomEvent("modeChange", { detail: { mode: newValue } })
-      );
-    }
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    if (!this.hasAttribute("tabindex")) {
-      this.setAttribute("tabindex", "0");
-    }
-    this.setAttribute("role", "button");
-    this.addEventListener("click", this.onClick);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("click", this.onClick);
-  }
-}
-
-// init theme
-let currentTheme: ThemeMode;
-
-const darkSchemeMediaQueryList = window.matchMedia(
-  "(prefers-color-scheme: dark)"
-);
-
-function setTheme(theme: ThemeMode) {
-  if (currentTheme === theme) return;
-  currentTheme = theme;
-  document.documentElement.setAttribute("theme", theme);
-  if (systemTheme.startsWith(theme)) {
-    localStorage.removeItem("theme");
-  } else {
-    localStorage.setItem("theme", theme);
-  }
-}
-
-let systemTheme = darkSchemeMediaQueryList.matches
-  ? `${ThemeMode.Dark}-mode`
-  : `${ThemeMode.Light}-mode`;
-
-darkSchemeMediaQueryList.addEventListener("change", ({ matches }) => {
-  const modeSwitch =
-    document.querySelector<AppModeSwitchElement>("app-mode-switch");
-  if (matches) {
-    systemTheme = ThemeMode.Dark;
-    setTheme(ThemeMode.Dark);
-    if (modeSwitch){
-      modeSwitch.mode = ThemeMode.Dark;
-    }
-  } else {
-    systemTheme = ThemeMode.Light;
-    setTheme(ThemeMode.Light);
-    if (modeSwitch){
-      modeSwitch.mode = ThemeMode.Light;
-    }
-  }
-});
-
-const savedTheme = localStorage.getItem("theme") as ThemeMode;
-if (savedTheme) {
-  setTheme(savedTheme);
-} else {
-  setTheme(systemTheme.split("-")[0] as ThemeMode);
-}
-
-document.addEventListener("DOMContentLoaded", () => {
-  const modeSwitch =
-    document.querySelector<AppModeSwitchElement>("app-mode-switch");
-  if (!modeSwitch) return;
-  modeSwitch.mode = savedTheme
-    ? savedTheme
-    : (systemTheme.split("-")[0] as ThemeMode);
-  modeSwitch.addEventListener("modeChange", (e: CustomEventInit) => {
-    if (e.detail.mode === ThemeMode.Dark) {
-      setTheme(ThemeMode.Dark);
-    } else if (e.detail.mode === ThemeMode.Light) {
-      setTheme(ThemeMode.Light);
-    }
-  });
-});
-
+import css from "./app-mode-switch.css";
+
+export enum ThemeMode {
+  Light = "light",
+  Dark = "dark",
+}
+
+interface AppModeSwitchEventMap {
+  modeChange: CustomEvent<{ mode: ThemeMode }>;
+  click: MouseEvent;
+}
+
+@CustomElementConfig({
+  tagName: "app-mode-switch",
+})
+export class AppModeSwitchElement extends CustomElement {
+  static readonly style = css;
+
+  @Property({ type: "string", attribute: "mode", reflect: true })
+  mode: ThemeMode = ThemeMode.Light;
+
+  render(): VNode {
+    return (
+      <div>
+        <svg
+          class="sun-and-moon"
+          aria-hidden="true"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+        >
+          <mask class="moon" id="moon-mask">
+            <rect x="0" y="0" width="100%" height="100%" fill="white"></rect>
+            <circle cx="24" cy="10" r="6" fill="black"></circle>
+          </mask>
+          <circle
+            class="sun"
+            cx="12"
+            cy="12"
+            r="6"
+            mask="url(#moon-mask)"
+            fill="currentColor"
+          ></circle>
+          <g class="sun-beams" stroke="currentColor">
+            <line x1="12" y1="1" x2="12" y2="3"></line>
+            <line x1="12" y1="21" x2="12" y2="23"></line>
+            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+            <line x1="1" y1="12" x2="3" y2="12"></line>
+            <line x1="21" y1="12" x2="23" y2="12"></line>
+            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+          </g>
+        </svg>
+        <div>
+          <slot name={this.mode === ThemeMode.Dark ? ThemeMode.Light : ThemeMode.Dark }></slot>
+        </div>
+      </div>
+    );
+  }
+
+  addEventListener<T extends keyof AppModeSwitchEventMap>(
+    type: T,
+    listener: (this: AppModeSwitchElement, ev: AppModeSwitchEventMap[T]) => any,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+
+  addEventListener(
+    type: string,
+    listener: (this: AppModeSwitchElement, ev: Event) => any,
+    options?: boolean | AddEventListenerOptions
+  ): void {
+    super.addEventListener(type, listener, options);
+  }
+
+  private onClick = () => {
+    this.mode =
+      this.mode === ThemeMode.Light ? ThemeMode.Dark : ThemeMode.Light;
+  };
+
+  updated(propertyName: string, oldValue: any, newValue: any): void {
+    if (propertyName === "mode") {
+      this.dispatchEvent(
+        new CustomEvent("modeChange", { detail: { mode: newValue } })
+      );
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.hasAttribute("tabindex")) {
+      this.setAttribute("tabindex", "0");
+    }
+    this.setAttribute("role", "button");
+    this.addEventListener("click", this.onClick);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.onClick);
+  }
+}
+
+// init theme
+let currentTheme: ThemeMode;
+
+const darkSchemeMediaQueryList = window.matchMedia(
+  "(prefers-color-scheme: dark)"
+);
+
+function setTheme(theme: ThemeMode) {
+  if (currentTheme === theme) return;
+  currentTheme = theme;
+  document.documentElement.setAttribute("theme", theme);
+  if (systemTheme.startsWith(theme)) {
+    localStorage.removeItem("theme");
+  } else {
+    localStorage.setItem("theme", theme);
+  }
+}
+
+let systemTheme = darkSchemeMediaQueryList.matches
+  ? `${ThemeMode.Dark}-mode`
+  : `${ThemeMode.Light}-mode`;
+
+darkSchemeMediaQueryList.addEventListener("change", ({ matches }) => {
+  const modeSwitch =
+    document.querySelector<AppModeSwitchElement>("app-mode-switch");
+  if (matches) {
+    systemTheme = ThemeMode.Dark;
+    setTheme(ThemeMode.Dark);
+    if (modeSwitch){
+      modeSwitch.mode = ThemeMode.Dark;
+    }
+  } else {
+    systemTheme = ThemeMode.Light;
+    setTheme(ThemeMode.Light);
+    if (modeSwitch){
+      modeSwitch.mode = ThemeMode.Light;
+    }
+  }
+});
+
+const savedTheme = localStorage.getItem("theme") as ThemeMode;
+if (savedTheme) {
+  setTheme(savedTheme);
+} else {
+  setTheme(systemTheme.split("-")[0] as ThemeMode);
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  const modeSwitch =
+    document.querySelector<AppModeSwitchElement>("app-mode-switch");
+  if (!modeSwitch) return;
+  modeSwitch.mode = savedTheme
+    ? savedTheme
+    : (systemTheme.split("-")[0] as ThemeMode);
+  modeSwitch.addEventListener("modeChange", (e: CustomEventInit) => {
+    if (e.detail.mode === ThemeMode.Dark) {
+      setTheme(ThemeMode.Dark);
+    } else if (e.detail.mode === ThemeMode.Light) {
+      setTheme(ThemeMode.Light);
+    }
+  });
+});
+