@nectary/components 4.11.2 → 4.12.0

package/icon/types.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchIcons } from './generated-icon-type';
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export { TSinchIcons };
 export type TSinchIconProps = ({
     /** Icon font version */
@@ -29,3 +29,23 @@ export type TSinchIcon = {
 };
 export type TSinchIconElement = NectaryComponentVanillaByType<TSinchIcon>;
 export type TSinchIconReact = NectaryComponentReactByType<TSinchIcon>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-icon': TSinchIcon;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon': NectaryComponentVanilla<'sinch-icon'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon': NectaryComponentReact<'sinch-icon'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-icon': NectaryComponentReact<'sinch-icon'>;
+        }
+    }
+}

package/icon/types.js

@@ -1 +1 @@
-export {};
+

package/inline-alert/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/inline-alert/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-inline-alert");

package/inline-alert/index.d.ts

@@ -3,8 +3,8 @@ import '../rich-text';
 import '../text';
 import '../title';
 import { NectaryElement } from '../utils';
-import type { TSinchInlineAlertType, TSinchInlineAlert } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { TSinchInlineAlertType } from './types';
+export * from './types';
 export declare class InlineAlert extends NectaryElement {
     #private;
     constructor();
@@ -19,23 +19,3 @@ export declare class InlineAlert extends NectaryElement {
     get caption(): string;
     set caption(value: string);
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-inline-alert': TSinchInlineAlert;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-inline-alert': NectaryComponentVanilla<'sinch-inline-alert'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-inline-alert': NectaryComponentReact<'sinch-inline-alert'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-inline-alert': NectaryComponentReact<'sinch-inline-alert'>;
-        }
-    }
-}

package/inline-alert/index.js

@@ -1,13 +1,14 @@
-import '../icon';
-import '../rich-text';
-import '../text';
-import '../title';
-import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, setClass } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:16px;border-radius:var(--sinch-comp-inline-alert-shape-radius);box-sizing:border-box;width:100%}:host([type=success]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-success-default-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-info-default-background)}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}#icon-success{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-success-default-icon)}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-info-default-icon)}:host([type=error]) #icon-error,:host([type=info]) #icon-info,:host([type=success]) #icon-success,:host([type=warn]) #icon-warn{display:block}#body-wrapper{display:flex;flex-direction:column;align-items:flex-start;margin-left:8px;min-width:0;flex:1}#caption{align-self:stretch;--sinch-comp-title-font:var(--sinch-comp-inline-alert-font-title)}:host([type=success]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}#text{display:flex;flex-direction:column;gap:8px;margin-top:0;align-self:stretch;--sinch-comp-rich-text-font:var(--sinch-comp-inline-alert-font-body)}:host([type=success]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}:host([caption=""]) #text,:host([caption]) #text{margin-top:4px}#action{width:100%;display:flex;margin-top:16px;min-width:0;gap:16px}#action.empty{display:none}#close{margin-left:16px}#close.empty{display:none}</style><div id="wrapper"><sinch-icon icons-version="2" name="circle-info" id="icon-info"></sinch-icon><sinch-icon icons-version="2" name="circle-check" id="icon-success"></sinch-icon><sinch-icon icons-version="2" name="triangle-exclamation" id="icon-warn"></sinch-icon><sinch-icon icons-version="2" name="octagon-exclamation" id="icon-error"></sinch-icon><div id="body-wrapper"><sinch-title id="caption" level="3" type="s"></sinch-title><sinch-rich-text id="text"></sinch-rich-text><div id="action"><slot name="action"></slot></div></div><div id="close"><slot name="close"></slot></div></div>';
-import { typeValues } from './utils';
-const template = document.createElement('template');
+import "../icon/index.js";
+import "../rich-text/index.js";
+import "../text/index.js";
+import "../title/index.js";
+import { updateAttribute, getLiteralAttribute, updateLiteralAttribute, getAttribute, setClass } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import { typeValues } from "./utils.js";
+const templateHTML = '<style>\n  :host {\n    display: block;\n  }\n\n  #wrapper {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    padding: 16px;\n    border-radius: var(--sinch-comp-inline-alert-shape-radius);\n    box-sizing: border-box;\n    width: 100%;\n  }\n\n  :host([type="success"]) #wrapper {\n    background-color:\n      var(\n        --sinch-comp-inline-alert-color-success-default-background\n      );\n  }\n\n  :host([type="warn"]) #wrapper {\n    background-color:\n      var(\n        --sinch-comp-inline-alert-color-warning-default-background\n      );\n  }\n\n  :host([type="error"]) #wrapper {\n    background-color:\n      var(\n        --sinch-comp-inline-alert-color-error-default-background\n      );\n  }\n\n  :host([type="info"]) #wrapper {\n    background-color:\n      var(\n        --sinch-comp-inline-alert-color-info-default-background\n      );\n  }\n\n  #icon-success,\n  #icon-warn,\n  #icon-error,\n  #icon-info {\n    display: none;\n  }\n\n  #icon-success {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-inline-alert-color-success-default-icon\n      );\n  }\n\n  #icon-warn {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-inline-alert-color-warning-default-icon\n      );\n  }\n\n  #icon-error {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-inline-alert-color-error-default-icon\n      );\n  }\n\n  #icon-info {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-inline-alert-color-info-default-icon\n      );\n  }\n\n  :host([type="success"]) #icon-success,\n  :host([type="warn"]) #icon-warn,\n  :host([type="error"]) #icon-error,\n  :host([type="info"]) #icon-info {\n    display: block;\n  }\n\n  #body-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    margin-left: 8px;\n    min-width: 0;\n    flex: 1;\n  }\n\n  #caption {\n    align-self: stretch;\n\n    --sinch-comp-title-font: var(--sinch-comp-inline-alert-font-title);\n  }\n\n  :host([type="success"]) #caption {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-inline-alert-color-success-default-text\n      );\n  }\n\n  :host([type="warn"]) #caption {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-inline-alert-color-warning-default-text\n      );\n  }\n\n  :host([type="error"]) #caption {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-inline-alert-color-error-default-text\n      );\n  }\n\n  :host([type="info"]) #caption {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-inline-alert-color-info-default-text\n      );\n  }\n\n  #text {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    margin-top: 0;\n    align-self: stretch;\n\n    --sinch-comp-rich-text-font: var(--sinch-comp-inline-alert-font-body);\n  }\n\n  :host([type="success"]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-inline-alert-color-success-default-text\n      );\n  }\n\n  :host([type="warn"]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-inline-alert-color-warning-default-text\n      );\n  }\n\n  :host([type="error"]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-inline-alert-color-error-default-text\n      );\n  }\n\n  :host([type="info"]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-inline-alert-color-info-default-text\n      );\n  }\n\n  :host([caption]) #text,\n  :host([caption=""]) #text {\n    margin-top: 4px;\n  }\n\n  #action {\n    width: 100%;\n    display: flex;\n    margin-top: 16px;\n    min-width: 0;\n    gap: 16px;\n  }\n\n  #action.empty {\n    display: none;\n  }\n\n  #close {\n    margin-left: 16px;\n  }\n\n  #close.empty {\n    display: none;\n  }\n</style>\n\n<div id="wrapper">\n  <sinch-icon icons-version="2" name="circle-info" id="icon-info"></sinch-icon>\n  <sinch-icon icons-version="2" name="circle-check" id="icon-success"></sinch-icon>\n  <sinch-icon icons-version="2" name="triangle-exclamation"\n    id="icon-warn"\n  ></sinch-icon>\n  <sinch-icon icons-version="2" name="octagon-exclamation"\n    id="icon-error"\n  ></sinch-icon>\n  <div id="body-wrapper">\n    <sinch-title id="caption" level="3" type="s"></sinch-title>\n    <sinch-rich-text id="text"></sinch-rich-text>\n    <div id="action">\n      <slot name="action"></slot>\n    </div>\n  </div>\n  <div id="close">\n    <slot name="close"></slot>\n  </div>\n</div>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class InlineAlert extends NectaryElement {
+class InlineAlert extends NectaryElement {
   #$text;
   #$caption;
   #$closeWrapper;
@@ -18,67 +19,85 @@ export class InlineAlert extends NectaryElement {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$text = shadowRoot.querySelector('#text');
-    this.#$caption = shadowRoot.querySelector('#caption');
-    this.#$closeWrapper = shadowRoot.querySelector('#close');
+    this.#$text = shadowRoot.querySelector("#text");
+    this.#$caption = shadowRoot.querySelector("#caption");
+    this.#$closeWrapper = shadowRoot.querySelector("#close");
     this.#$closeSlot = shadowRoot.querySelector('slot[name="close"]');
-    this.#$actionWrapper = shadowRoot.querySelector('#action');
+    this.#$actionWrapper = shadowRoot.querySelector("#action");
     this.#$actionSlot = shadowRoot.querySelector('slot[name="action"]');
   }
   connectedCallback() {
     super.connectedCallback();
-    this.setAttribute('aria-atomic', 'true');
-    this.setAttribute('aria-live', 'polite');
-    this.#$closeSlot.addEventListener('slotchange', this.#onCloseSlotChange);
-    this.#$actionSlot.addEventListener('slotchange', this.#onActionSlotChange);
+    this.setAttribute("aria-atomic", "true");
+    this.setAttribute("aria-live", "polite");
+    this.#$closeSlot.addEventListener("slotchange", this.#onCloseSlotChange);
+    this.#$actionSlot.addEventListener(
+      "slotchange",
+      this.#onActionSlotChange
+    );
     this.#onCloseSlotChange();
     this.#onActionSlotChange();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.#$closeSlot.removeEventListener('slotchange', this.#onCloseSlotChange);
-    this.#$actionSlot.removeEventListener('slotchange', this.#onActionSlotChange);
+    this.#$closeSlot.removeEventListener(
+      "slotchange",
+      this.#onCloseSlotChange
+    );
+    this.#$actionSlot.removeEventListener(
+      "slotchange",
+      this.#onActionSlotChange
+    );
   }
   static get observedAttributes() {
-    return ['text', 'caption'];
+    return ["text", "caption"];
   }
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
-      case 'text':
-        {
-          updateAttribute(this.#$text, 'text', newVal);
-          break;
-        }
-      case 'caption':
-        {
-          updateAttribute(this.#$caption, 'text', newVal);
-          break;
-        }
+      case "text": {
+        updateAttribute(this.#$text, "text", newVal);
+        break;
+      }
+      case "caption": {
+        updateAttribute(this.#$caption, "text", newVal);
+        break;
+      }
     }
   }
   get type() {
-    return getLiteralAttribute(this, typeValues, 'type');
+    return getLiteralAttribute(this, typeValues, "type");
   }
   set type(value) {
-    updateLiteralAttribute(this, typeValues, 'type', value);
+    updateLiteralAttribute(this, typeValues, "type", value);
   }
   get text() {
-    return getAttribute(this, 'text', '');
+    return getAttribute(this, "text", "");
   }
   set text(value) {
-    updateAttribute(this, 'text', value);
+    updateAttribute(this, "text", value);
   }
   get caption() {
-    return getAttribute(this, 'caption', '');
+    return getAttribute(this, "caption", "");
   }
   set caption(value) {
-    updateAttribute(this, 'caption', value);
+    updateAttribute(this, "caption", value);
   }
   #onCloseSlotChange = () => {
-    setClass(this.#$closeWrapper, 'empty', this.#$closeSlot.assignedElements().length === 0);
+    setClass(
+      this.#$closeWrapper,
+      "empty",
+      this.#$closeSlot.assignedElements().length === 0
+    );
   };
   #onActionSlotChange = () => {
-    setClass(this.#$actionWrapper, 'empty', this.#$actionSlot.assignedElements().length === 0);
+    setClass(
+      this.#$actionWrapper,
+      "empty",
+      this.#$actionSlot.assignedElements().length === 0
+    );
   };
 }
-defineCustomElement('sinch-inline-alert', InlineAlert);
+defineCustomElement("sinch-inline-alert", InlineAlert);
+export {
+  InlineAlert
+};

package/inline-alert/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchInlineAlertType = 'info' | 'success' | 'warn' | 'error';
 export type TSinchInlineAlertProps = {
     type: TSinchInlineAlertType;
@@ -32,3 +32,23 @@ export type TSinchInlineAlert = {
 };
 export type TSinchInlineAlertElement = NectaryComponentVanillaByType<TSinchInlineAlert>;
 export type TSinchInlineAlertReact = NectaryComponentReactByType<TSinchInlineAlert>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-inline-alert': TSinchInlineAlert;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-inline-alert': NectaryComponentVanilla<'sinch-inline-alert'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-inline-alert': NectaryComponentReact<'sinch-inline-alert'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-inline-alert': NectaryComponentReact<'sinch-inline-alert'>;
+        }
+    }
+}

package/inline-alert/types.js

@@ -1 +1 @@
-export {};
+

package/inline-alert/utils.js

@@ -1 +1,4 @@
-export const typeValues = ['info', 'success', 'warn', 'error'];
+const typeValues = ["info", "success", "warn", "error"];
+export {
+  typeValues
+};

package/input/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/input/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-input");

package/input/index.d.ts

@@ -1,7 +1,7 @@
 import { NectaryElement } from '../utils';
-import type { TSinchInputType, TSinchInput } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { TSinchInputType } from './types';
 import type { TSinchSize } from '../utils/size';
+export * from './types';
 export declare class Input extends NectaryElement {
     #private;
     static formAssociated: boolean;
@@ -44,23 +44,3 @@ export declare class Input extends NectaryElement {
     focus(): void;
     blur(): void;
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-input': TSinchInput;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-input': NectaryComponentVanilla<'sinch-input'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-input': NectaryComponentReact<'sinch-input'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-input': NectaryComponentReact<'sinch-input'>;
-        }
-    }
-}