@skf-design-system/ui-components 1.0.0-alpha.27 → 1.0.0-alpha.29

package/dist/index.d.ts

@@ -11,10 +11,15 @@ export { default as SkfInput } from './components/input/input.js';
 export { default as SkfLink } from './components/link/link.js';
 export { default as SkfLoader } from './components/loader/loader.js';
 export { default as SkfLogo } from './components/logo/logo.js';
+export { default as SkfProgress } from './components/progress/progress.js';
 export { default as SkfRadio } from './components/radio/radio.js';
 export { default as SkfOptionGroup } from './components/select-option-group/select-option-group.js';
 export { default as SkfOption } from './components/select-option/select-option.js';
 export { default as SkfSelect } from './components/select/select.js';
 export { default as SkfSwitch } from './components/switch/switch.js';
+export { default as SkfTabGoup } from './components/tab-group/tab-group.js';
+export { default as SkfTabPanel } from './components/tab-panel/tab-panel.js';
+export { default as SkfTab } from './components/tab/tab.js';
 export { default as SkfTag } from './components/tag/tag.js';
 export { default as SkfTextArea } from './components/textarea/textarea.js';
+export { default as SkfToast } from './components/toast/toast.js';

package/dist/index.js

@@ -11,54 +11,69 @@ import "./components/input/input.js";
 import "./components/link/link.js";
 import "./components/loader/loader.js";
 import "./components/logo/logo.js";
+import "./components/progress/progress.js";
 import "./components/radio/radio.js";
 import "./components/select-option-group/select-option-group.js";
 import "./components/select-option/select-option.js";
 import "./components/select/select.js";
 import "./components/switch/switch.js";
+import "./components/tab-group/tab-group.js";
+import "./components/tab-panel/tab-panel.js";
+import "./components/tab/tab.js";
 import "./components/tag/tag.js";
 import "./components/textarea/textarea.js";
-import { SkfAccordion as I } from "./components/accordion/accordion.component.js";
-import { SkfAlert as h } from "./components/alert/alert.component.js";
-import { SkfButton as T } from "./components/button/button.component.js";
-import { SkfCard as v } from "./components/card/card.component.js";
-import { SkfCheckbox as B } from "./components/checkbox/checkbox.component.js";
-import { SkfCollapse as H } from "./components/collapse/collapse.component.js";
-import { SkfDivider as j } from "./components/divider/divider.component.js";
-import { SkfHeading as y } from "./components/heading/heading.component.js";
-import { SkfIcon as E } from "./components/icon/icon.component.js";
-import { SkfInput as J } from "./components/input/input.component.js";
-import { SkfLink as M } from "./components/link/link.component.js";
-import { SkfLoader as P } from "./components/loader/loader.component.js";
-import { SkfLogo as U } from "./components/logo/logo.component.js";
-import { SkfRadio as W } from "./components/radio/radio.component.js";
-import { SkfSelectOptionGroup as Y } from "./components/select-option-group/select-option-group.component.js";
-import { SkfSelectOption as _ } from "./components/select-option/select-option.component.js";
-import { SkfSelect as oo } from "./components/select/select.component.js";
-import { SkfSwitch as to } from "./components/switch/switch.component.js";
-import { SkfTag as fo } from "./components/tag/tag.component.js";
-import { SkfTextArea as eo } from "./components/textarea/textarea.component.js";
-import { SkfAccordionItem as So } from "./components/accordion/accordion-item.js";
+import "./components/toast/toast.js";
+import { SkfAccordion as h } from "./components/accordion/accordion.component.js";
+import { SkfAlert as v } from "./components/alert/alert.component.js";
+import { SkfButton as B } from "./components/button/button.component.js";
+import { SkfCard as H } from "./components/card/card.component.js";
+import { SkfCheckbox as j } from "./components/checkbox/checkbox.component.js";
+import { SkfCollapse as y } from "./components/collapse/collapse.component.js";
+import { SkfDivider as E } from "./components/divider/divider.component.js";
+import { SkfHeading as J } from "./components/heading/heading.component.js";
+import { SkfIcon as M } from "./components/icon/icon.component.js";
+import { SkfInput as Q } from "./components/input/input.component.js";
+import { SkfLink as V } from "./components/link/link.component.js";
+import { SkfLoader as X } from "./components/loader/loader.component.js";
+import { SkfLogo as Z } from "./components/logo/logo.component.js";
+import { SkfProgress as $ } from "./components/progress/progress.component.js";
+import { SkfRadio as ro } from "./components/radio/radio.component.js";
+import { SkfSelectOptionGroup as po } from "./components/select-option-group/select-option-group.component.js";
+import { SkfSelectOption as mo } from "./components/select-option/select-option.component.js";
+import { SkfSelect as io } from "./components/select/select.component.js";
+import { SkfSwitch as ko } from "./components/switch/switch.component.js";
+import { SkfTabGroup as ao } from "./components/tab-group/tab-group.component.js";
+import { SkfTabPanel as co } from "./components/tab-panel/tab-panel.component.js";
+import { SkfTab as so } from "./components/tab/tab.component.js";
+import { SkfTag as uo } from "./components/tag/tag.component.js";
+import { SkfTextArea as go } from "./components/textarea/textarea.component.js";
+import { SkfToast as Go } from "./components/toast/toast.component.js";
+import { SkfAccordionItem as Co } from "./components/accordion/accordion-item.js";
 export {
-  I as SkfAccordion,
-  So as SkfAccordionItem,
-  h as SkfAlert,
-  T as SkfButton,
-  v as SkfCard,
-  B as SkfCheckbox,
-  H as SkfCollapse,
-  j as SkfDivider,
-  y as SkfHeading,
-  E as SkfIcon,
-  J as SkfInput,
-  M as SkfLink,
-  P as SkfLoader,
-  U as SkfLogo,
-  _ as SkfOption,
-  Y as SkfOptionGroup,
-  W as SkfRadio,
-  oo as SkfSelect,
-  to as SkfSwitch,
-  fo as SkfTag,
-  eo as SkfTextArea
+  h as SkfAccordion,
+  Co as SkfAccordionItem,
+  v as SkfAlert,
+  B as SkfButton,
+  H as SkfCard,
+  j as SkfCheckbox,
+  y as SkfCollapse,
+  E as SkfDivider,
+  J as SkfHeading,
+  M as SkfIcon,
+  Q as SkfInput,
+  V as SkfLink,
+  X as SkfLoader,
+  Z as SkfLogo,
+  mo as SkfOption,
+  po as SkfOptionGroup,
+  $ as SkfProgress,
+  ro as SkfRadio,
+  io as SkfSelect,
+  ko as SkfSwitch,
+  so as SkfTab,
+  ao as SkfTabGoup,
+  co as SkfTabPanel,
+  uo as SkfTag,
+  go as SkfTextArea,
+  Go as SkfToast
 };

package/dist/internal/components/formBase.d.ts

@@ -22,6 +22,7 @@ export declare class FormBase extends SkfElement {
     protected customErrorDisplay: boolean;
     protected pristine: boolean;
     protected validateOnChange: boolean;
+    protected withFallback: (message?: string | null) => string;
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;

package/dist/internal/components/formBase.js

@@ -1,14 +1,14 @@
 import { LitElement as c } from "lit";
 import { property as d } from "lit/decorators.js";
 import { SkfElement as u } from "./skf-element.js";
-var p = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, h = (l, t, e, s) => {
+var p = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, h = (l, t, e, r) => {
   for (var i = _(t, e), n = l.length - 1, o; n >= 0; n--)
     (o = l[n]) && (i = o(t, e, i) || i);
   return i && p(t, e, i), i;
 };
 const a = class a extends u {
   constructor() {
-    super(), this._disabled = !1, this._pristine = !0, this.validationError = "", this.customErrorDisplay = !1, this.pristine = !0, this.validateOnChange = !0, this._dispatchResetEvent = () => {
+    super(), this._disabled = !1, this._pristine = !0, this.validationError = "", this.customErrorDisplay = !1, this.pristine = !0, this.validateOnChange = !0, this.withFallback = (t) => String(t).trim() || "A unspecified form validation error occured.", this._dispatchResetEvent = () => {
       this.dispatchEvent(new Event("reset", { bubbles: !0, composed: !0, cancelable: !1 }));
     }, this._internals = this.attachInternals(), this._required = !1;
   }
@@ -59,8 +59,8 @@ const a = class a extends u {
   get willValidate() {
     return this._internals.willValidate;
   }
-  setValidity(t, e, s) {
-    this._internals.setValidity(t, e, s);
+  setValidity(t, e, r) {
+    this._internals.setValidity(t, e, r);
   }
   setFormValue(t) {
     this._internals.setFormValue(t);
@@ -88,20 +88,20 @@ const a = class a extends u {
    * @returns
    */
   emitEvent(t, e = {}) {
-    const s = { bubbles: !0, composed: !0, cancelable: !0 };
+    const r = { bubbles: !0, composed: !0, cancelable: !0 };
     return t.startsWith("skf-") ? this.dispatchEvent(
-      new CustomEvent(t, { detail: null, ...s, ...e })
-    ) : this.dispatchEvent(new Event(t, { ...s, ...e }));
+      new CustomEvent(t, { detail: null, ...r, ...e })
+    ) : this.dispatchEvent(new Event(t, { ...r, ...e }));
   }
 };
 a.formAssociated = !0, a.shadowRootOptions = { ...c.shadowRootOptions, delegatesFocus: !0 };
-let r = a;
+let s = a;
 h([
   d({ type: Boolean })
-], r.prototype, "required");
+], s.prototype, "required");
 h([
   d({ type: Boolean, attribute: "native-validation" })
-], r.prototype, "nativeValidation");
+], s.prototype, "nativeValidation");
 export {
-  r as FormBase
+  s as FormBase
 };

package/dist/internal/helpers/watch.d.ts

@@ -0,0 +1,27 @@
+import type { LitElement } from 'lit';
+type UpdateHandler = (prev?: unknown, next?: unknown) => void;
+type NonUndefined<A> = A extends undefined ? never : A;
+type UpdateHandlerFunctionKeys<T extends object> = {
+    [K in keyof T]-?: NonUndefined<T[K]> extends UpdateHandler ? K : never;
+}[keyof T];
+interface WatchOptions {
+    /**
+     * If true, will only start watching after the initial update/render
+     */
+    waitUntilFirstUpdate?: boolean;
+    afterUpdate?: boolean;
+}
+/**
+ * Runs when observed properties change, e.g. @property or @state, but before the component updates. To wait for an
+ * update to complete after a change occurs, use `await this.updateComplete` in the handler. To start watching after the
+ * initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.
+ *
+ * Usage:
+ *
+ * @watch('propName')
+ * handlePropChange(oldValue, newValue) {
+ *   ...
+ * }
+ */
+export declare function watch(propertyName: string | string[], options?: WatchOptions): <ElemClass extends LitElement>(proto: ElemClass, decoratedFnName: UpdateHandlerFunctionKeys<ElemClass>) => void;
+export {};

package/dist/internal/helpers/watch.js

@@ -0,0 +1,28 @@
+function o(f, U) {
+  const e = {
+    waitUntilFirstUpdate: !1,
+    afterUpdate: !1,
+    ...U
+  };
+  return (l, c) => {
+    const { update: d } = l, h = Array.isArray(f) ? f : [f];
+    l.update = function(i) {
+      e.afterUpdate || h.forEach((n) => {
+        const t = n;
+        if (i.has(t)) {
+          const a = i.get(t), s = this[t];
+          a !== s && (!e.waitUntilFirstUpdate || this.hasUpdated) && this[c](a, s);
+        }
+      }), d.call(this, i), e.afterUpdate && h.forEach((n) => {
+        const t = n;
+        if (i.has(t)) {
+          const a = i.get(t), s = this[t];
+          a !== s && (!e.waitUntilFirstUpdate || this.hasUpdated) && this[c](a, s);
+        }
+      });
+    };
+  };
+}
+export {
+  o as watch
+};

package/dist/react/index.d.ts

@@ -11,10 +11,16 @@ export { default as SkfInput } from './skf-input/index.js';
 export { default as SkfLink } from './skf-link/index.js';
 export { default as SkfLoader } from './skf-loader/index.js';
 export { default as SkfLogo } from './skf-logo/index.js';
+export { default as SkfProgress } from './skf-progress/index.js';
 export { default as SkfRadio } from './skf-radio/index.js';
 export { default as SkfSelect } from './skf-select/index.js';
 export { default as SkfSelectOption } from './skf-select-option/index.js';
 export { default as SkfSelectOptionGroup } from './skf-select-option-group/index.js';
 export { default as SkfSwitch } from './skf-switch/index.js';
+export { default as SkfTab } from './skf-tab/index.js';
+export { default as SkfTabGroup } from './skf-tab-group/index.js';
+export { default as SkfTabPanel } from './skf-tab-panel/index.js';
 export { default as SkfTag } from './skf-tag/index.js';
 export { default as SkfTextArea } from './skf-textarea/index.js';
+export { default as SkfToast } from './skf-toast/index.js';
+export { default as SkfToastWrapper } from './skf-toast-wrapper/index.js';

package/dist/react/index.js

@@ -11,10 +11,16 @@ export { default as SkfInput } from './skf-input/index.js';
 export { default as SkfLink } from './skf-link/index.js';
 export { default as SkfLoader } from './skf-loader/index.js';
 export { default as SkfLogo } from './skf-logo/index.js';
+export { default as SkfProgress } from './skf-progress/index.js';
 export { default as SkfRadio } from './skf-radio/index.js';
 export { default as SkfSelect } from './skf-select/index.js';
 export { default as SkfSelectOption } from './skf-select-option/index.js';
 export { default as SkfSelectOptionGroup } from './skf-select-option-group/index.js';
 export { default as SkfSwitch } from './skf-switch/index.js';
+export { default as SkfTab } from './skf-tab/index.js';
+export { default as SkfTabGroup } from './skf-tab-group/index.js';
+export { default as SkfTabPanel } from './skf-tab-panel/index.js';
 export { default as SkfTag } from './skf-tag/index.js';
 export { default as SkfTextArea } from './skf-textarea/index.js';
+export { default as SkfToast } from './skf-toast/index.js';
+export { default as SkfToastWrapper } from './skf-toast-wrapper/index.js';

package/dist/react/skf-button/index.d.ts

@@ -1,3 +1,9 @@
 import Component from '../../components/button/button.js';
-declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+import { type SkfButton } from '../../components/button/button.js';
+import { type EventName } from '@lit/react';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onClick: EventName<Event & {
+        target: SkfButton;
+    }>;
+}>;
 export default reactWrapper;

package/dist/react/skf-button/index.js

@@ -1,13 +1,17 @@
 import * as React from 'react';
 import { createComponent } from '@lit/react';
 import Component from '../../components/button/button.js';
+import {} from '../../components/button/button.js';
+import {} from '@lit/react';
 const tagName = 'skf-button';
 Component.define('skf-button');
 const reactWrapper = createComponent({
     tagName,
     elementClass: Component,
     react: React,
-    events: {},
+    events: {
+        onClick: 'click',
+    },
     displayName: 'SkfButton',
 });
 export default reactWrapper;

package/dist/react/skf-progress/index.d.ts

@@ -0,0 +1,3 @@
+import Component from '../../components/progress/progress.js';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/skf-progress/index.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/progress/progress.js';
+const tagName = 'skf-progress';
+Component.define('skf-progress');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'SkfProgress',
+});
+export default reactWrapper;

package/dist/react/skf-tab/index.d.ts

@@ -0,0 +1,12 @@
+import Component from '../../components/tab/tab.js';
+import { type SkfTab } from '../../components/tab/tab.js';
+import { type EventName } from '@lit/react';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onSkfTabSelect: EventName<Event & {
+        target: SkfTab;
+    }>;
+    onClick: EventName<Event & {
+        target: SkfTab;
+    }>;
+}>;
+export default reactWrapper;

package/dist/react/skf-tab/index.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/tab/tab.js';
+import {} from '../../components/tab/tab.js';
+import {} from '@lit/react';
+const tagName = 'skf-tab';
+Component.define('skf-tab');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {
+        onSkfTabSelect: 'skf-tab-select',
+        onClick: 'click',
+    },
+    displayName: 'SkfTab',
+});
+export default reactWrapper;

package/dist/react/skf-tab-group/index.d.ts

@@ -0,0 +1,3 @@
+import Component from '../../components/tab-group/tab-group.js';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/skf-tab-group/index.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/tab-group/tab-group.js';
+const tagName = 'skf-tab-group';
+Component.define('skf-tab-group');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'SkfTabGroup',
+});
+export default reactWrapper;

package/dist/react/skf-tab-panel/index.d.ts

@@ -0,0 +1,3 @@
+import Component from '../../components/tab-panel/tab-panel.js';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/skf-tab-panel/index.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/tab-panel/tab-panel.js';
+const tagName = 'skf-tab-panel';
+Component.define('skf-tab-panel');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'SkfTabPanel',
+});
+export default reactWrapper;

package/dist/react/skf-toast/index.d.ts

@@ -0,0 +1,3 @@
+import Component from '../../components/toast/toast.js';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/skf-toast/index.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/toast/toast.js';
+const tagName = 'skf-toast';
+Component.define('skf-toast');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'SkfToast',
+});
+export default reactWrapper;

package/dist/react/skf-toast-wrapper/index.d.ts

@@ -0,0 +1,3 @@
+import Component from '../../components/toast-wrapper/toast-wrapper.js';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/skf-toast-wrapper/index.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/toast-wrapper/toast-wrapper.js';
+const tagName = 'skf-toast-wrapper';
+Component.define('skf-toast-wrapper');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'SkfToastWrapper',
+});
+export default reactWrapper;