@nectary/components 5.32.0 → 5.34.0

package/floating-panel-button/index.js

@@ -0,0 +1,43 @@
+import { isAttrEqual, updateAttribute, getAttribute } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import "../button/index.js";
+const templateHTML = '<style>:host{display:flex;flex-shrink:0;height:100%;min-height:40px;color:var(--sinch-comp-floating-panel-color-text,var(--sinch-sys-color-primary-foreground))}sinch-button{height:100%;padding:0;white-space:nowrap;--sinch-button-shape-radius-base:0;--sinch-comp-button-color-subtle-secondary-default-border-initial:var(--sinch-sys-color-basic-transparent);--sinch-comp-button-color-subtle-secondary-disabled-border-initial:var(--sinch-sys-color-basic-transparent);--sinch-comp-button-spacing-padding-m:16px;--sinch-comp-button-color-subtle-secondary-default-text-initial:var(--sinch-comp-floating-panel-color-button-text-initial, var(--sinch-sys-color-primary-foreground));--sinch-comp-button-color-subtle-secondary-default-background-initial:var(--sinch-comp-floating-panel-color-button-background-initial, transparent);--sinch-comp-button-color-subtle-secondary-default-background-hover:var(--sinch-comp-floating-panel-color-button-background-hover);--sinch-comp-button-color-subtle-secondary-default-background-active:var(--sinch-comp-floating-panel-color-button-background-active);--sinch-comp-button-shadow-subtle-hover:none;--sinch-comp-button-shadow-subtle-active:none}sinch-button:focus-visible{--sinch-comp-button-color-subtle-secondary-default-background-initial:var(--sinch-comp-floating-panel-color-button-background-hover);--sinch-comp-button-shadow-subtle-focus:none}</style><sinch-button id="button" type="subtle-secondary"></sinch-button>';
+const template = document.createElement("template");
+template.innerHTML = templateHTML;
+class FloatingPanelButton extends NectaryElement {
+  #$button;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$button = shadowRoot.querySelector("#button");
+  }
+  static get observedAttributes() {
+    return ["text", "aria-label"];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (isAttrEqual(oldVal, newVal)) {
+      return;
+    }
+    if (name === "text") {
+      this.#$button.setAttribute("text", newVal ?? "");
+    }
+    if (name === "aria-label") {
+      if (newVal !== null) {
+        this.#$button.setAttribute("aria-label", newVal);
+      } else {
+        this.#$button.removeAttribute("aria-label");
+      }
+    }
+  }
+  set text(value) {
+    updateAttribute(this, "text", value);
+  }
+  get text() {
+    return getAttribute(this, "text");
+  }
+}
+defineCustomElement("sinch-floating-panel-button", FloatingPanelButton);
+export {
+  FloatingPanelButton
+};

package/floating-panel-button/types.d.ts

@@ -0,0 +1,35 @@
+import type { NectaryComponentReact, NectaryComponentReactByType, NectaryComponentVanilla, NectaryComponentVanillaByType } from '../types';
+export type TSinchFloatingPanelButtonProps = {
+    /** The button label text */
+    text?: string;
+    'aria-label'?: string;
+};
+export type TSinchFloatingPanelButtonEvents = Record<string, never>;
+export type TSinchFloatingPanelButtonStyle = Record<string, never>;
+export type TSinchFloatingPanelButton = {
+    props: TSinchFloatingPanelButtonProps;
+    events: TSinchFloatingPanelButtonEvents;
+    style: TSinchFloatingPanelButtonStyle;
+};
+export type TSinchFloatingPanelButtonElement = NectaryComponentVanillaByType<TSinchFloatingPanelButton>;
+export type TSinchFloatingPanelButtonReact = NectaryComponentReactByType<TSinchFloatingPanelButton>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-floating-panel-button': TSinchFloatingPanelButton;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-floating-panel-button': NectaryComponentVanilla<'sinch-floating-panel-button'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-floating-panel-button': NectaryComponentReact<'sinch-floating-panel-button'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-floating-panel-button': NectaryComponentReact<'sinch-floating-panel-button'>;
+        }
+    }
+}

package/floating-panel-button/types.js

@@ -0,0 +1 @@
+

package/floating-panel-icon-button/index.d.ts

@@ -0,0 +1,12 @@
+import { NectaryElement } from '../utils';
+import '../button';
+import '../icon';
+export * from './types';
+export declare class FloatingPanelIconButton extends NectaryElement {
+    #private;
+    constructor();
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set icon(value: string | null);
+    get icon(): string | null;
+}

package/floating-panel-icon-button/index.js

@@ -0,0 +1,50 @@
+import { isAttrEqual, updateAttribute, getAttribute } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import "../button/index.js";
+import "../icon/index.js";
+const templateHTML = '<style>:host{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;box-sizing:border-box;cursor:pointer}sinch-button{display:flex;align-items:center;justify-content:center;width:100%;height:100%;--sinch-button-shape-radius-base:0;--sinch-comp-button-color-subtle-secondary-default-border-initial:var(--sinch-sys-color-basic-transparent);--sinch-comp-button-color-subtle-secondary-disabled-border-initial:var(--sinch-sys-color-basic-transparent);--sinch-comp-button-color-subtle-secondary-default-background-initial:transparent;--sinch-comp-button-color-subtle-secondary-default-icon-initial:var(--sinch-comp-floating-panel-color-text, var(--sinch-sys-color-primary-foreground));--sinch-comp-button-color-subtle-secondary-default-text-initial:var(--sinch-comp-floating-panel-color-text, var(--sinch-sys-color-primary-foreground));--sinch-comp-button-color-subtle-secondary-default-background-hover:var(--sinch-comp-floating-panel-color-button-background-hover);--sinch-comp-button-color-subtle-secondary-default-background-active:var(--sinch-comp-floating-panel-color-button-background-active);--sinch-comp-button-shadow-subtle-hover:none;--sinch-comp-button-shadow-subtle-active:none}sinch-button:focus-visible{--sinch-comp-button-color-subtle-secondary-default-background-initial:var(--sinch-comp-floating-panel-color-button-background-hover);--sinch-comp-button-shadow-subtle-focus:none}:host(.edge-start:active) sinch-button,:host(.edge-start:focus) sinch-button,:host(.edge-start:hover) sinch-button{--sinch-button-shape-radius-top-left:var(--sinch-comp-floating-panel-shape-radius);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-floating-panel-shape-radius)}:host(.edge-end:active) sinch-button,:host(.edge-end:focus) sinch-button,:host(.edge-end:hover) sinch-button{--sinch-button-shape-radius-top-right:var(--sinch-comp-floating-panel-shape-radius);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-floating-panel-shape-radius)}sinch-icon{--sinch-global-color-icon:var(--sinch-comp-floating-panel-color-text, var(--sinch-sys-color-primary-foreground));--sinch-global-size-icon:var(--sinch-comp-floating-panel-size-button-icon)}</style><sinch-button id="button" type="subtle-secondary"><sinch-icon id="icon" icons-version="2" slot="icon"></sinch-icon></sinch-button>';
+const template = document.createElement("template");
+template.innerHTML = templateHTML;
+class FloatingPanelIconButton extends NectaryElement {
+  #$icon;
+  #$button;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$icon = shadowRoot.querySelector("#icon");
+    this.#$button = shadowRoot.querySelector("#button");
+  }
+  static get observedAttributes() {
+    return ["icon", "aria-label"];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (isAttrEqual(oldVal, newVal)) {
+      return;
+    }
+    if (name === "icon") {
+      if (newVal !== null) {
+        this.#$icon.setAttribute("name", newVal);
+      } else {
+        this.#$icon.removeAttribute("name");
+      }
+    }
+    if (name === "aria-label") {
+      if (newVal !== null) {
+        this.#$button.setAttribute("aria-label", newVal);
+      } else {
+        this.#$button.removeAttribute("aria-label");
+      }
+    }
+  }
+  set icon(value) {
+    updateAttribute(this, "icon", value);
+  }
+  get icon() {
+    return getAttribute(this, "icon");
+  }
+}
+defineCustomElement("sinch-floating-panel-icon-button", FloatingPanelIconButton);
+export {
+  FloatingPanelIconButton
+};

package/floating-panel-icon-button/types.d.ts

@@ -0,0 +1,35 @@
+import type { NectaryComponentReact, NectaryComponentReactByType, NectaryComponentVanilla, NectaryComponentVanillaByType } from '../types';
+export type TSinchFloatingPanelIconButtonProps = {
+    /** The icon name */
+    icon?: string;
+    'aria-label'?: string;
+};
+export type TSinchFloatingPanelIconButtonEvents = Record<string, never>;
+export type TSinchFloatingPanelIconButtonStyle = Record<string, never>;
+export type TSinchFloatingPanelIconButton = {
+    props: TSinchFloatingPanelIconButtonProps;
+    events: TSinchFloatingPanelIconButtonEvents;
+    style: TSinchFloatingPanelIconButtonStyle;
+};
+export type TSinchFloatingPanelIconButtonElement = NectaryComponentVanillaByType<TSinchFloatingPanelIconButton>;
+export type TSinchFloatingPanelIconButtonReact = NectaryComponentReactByType<TSinchFloatingPanelIconButton>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-floating-panel-icon-button': TSinchFloatingPanelIconButton;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-floating-panel-icon-button': NectaryComponentVanilla<'sinch-floating-panel-icon-button'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-floating-panel-icon-button': NectaryComponentReact<'sinch-floating-panel-icon-button'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-floating-panel-icon-button': NectaryComponentReact<'sinch-floating-panel-icon-button'>;
+        }
+    }
+}

package/floating-panel-icon-button/types.js

@@ -0,0 +1 @@
+