@skf-design-system/ui-components 1.0.0-beta.3 → 1.0.0-beta.5

package/dist/custom-elements.json

@@ -186,7 +186,8 @@
                 "text": "boolean | undefined"
               },
               "description": "If true, alert is being used as a toast (alertdialog) with an close button",
-              "attribute": "closeable"
+              "attribute": "closeable",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -214,7 +215,8 @@
                 "text": "\"error\" | \"info\" | \"warning\" | \"success\" | \"alert\""
               },
               "description": "If defined, gives the supplied appearance",
-              "attribute": "severity"
+              "attribute": "severity",
+              "reflects": true
             }
           ],
           "events": [
@@ -2619,15 +2621,13 @@
             },
             {
               "kind": "field",
-              "name": "getSelectedValues",
-              "description": "A readonly property that returns the selected value(s) in a array",
-              "readonly": true
+              "name": "selectedValues",
+              "description": "A readonly property that returns the selected value(s) in a array"
             },
             {
               "kind": "field",
-              "name": "getSelectedOptionsText",
-              "description": "A readonly property that returns the selected slot(s) text content in a array",
-              "readonly": true
+              "name": "selectedOptionsText",
+              "description": "A readonly property that returns the selected slot(s) text content in a array"
             },
             {
               "kind": "field",
@@ -2717,8 +2717,7 @@
             {
               "kind": "field",
               "name": "value",
-              "description": "Read only, returns the selected value. (if multiple: in a comma separated string)",
-              "readonly": true
+              "description": "Read only, returns the selected value. (if multiple: in a comma separated string)"
             },
             {
               "kind": "field",
@@ -2945,7 +2944,7 @@
               "kind": "field",
               "name": "iconColor",
               "type": {
-                "text": "IconColor | undefined"
+                "text": "SeverityFgColor | undefined"
               },
               "description": "If defined, sets provided color on the icon",
               "attribute": "icon-color",
@@ -3030,7 +3029,7 @@
             {
               "name": "icon-color",
               "type": {
-                "text": "IconColor | undefined"
+                "text": "SeverityFgColor | undefined"
               },
               "description": "If defined, sets provided color on the icon",
               "fieldName": "iconColor"
@@ -3866,6 +3865,445 @@
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/toast/toast.component.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A simple toast component that displays a message to the user. Use by appending a <skf-toast> tag to the DOM. Position in DOM is irrelevant.",
+          "name": "SkfToast",
+          "slots": [
+            {
+              "description": "The component's placeholder content",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "closeable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If provided, adds a close button to the toast and will not disapear until user actively dismisses it.",
+              "attribute": "closeable"
+            },
+            {
+              "kind": "field",
+              "name": "debug",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "debug"
+            },
+            {
+              "kind": "field",
+              "name": "severity",
+              "type": {
+                "text": "'info' | 'success' | 'warning' | 'error'"
+              },
+              "default": "'info'",
+              "description": "Severity of the toast.",
+              "attribute": "severity"
+            },
+            {
+              "kind": "field",
+              "name": "timer",
+              "type": {
+                "text": "number"
+              },
+              "default": "5",
+              "description": "Time in seconds before the toast disappears.",
+              "attribute": "timer"
+            },
+            {
+              "kind": "field",
+              "name": "topOffset",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "offsets where toasts emerge vertically",
+              "attribute": "topOffset"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "closeable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If provided, adds a close button to the toast and will not disapear until user actively dismisses it.",
+              "fieldName": "closeable"
+            },
+            {
+              "name": "debug",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "debug"
+            },
+            {
+              "name": "severity",
+              "type": {
+                "text": "'info' | 'success' | 'warning' | 'error'"
+              },
+              "default": "'info'",
+              "description": "Severity of the toast.",
+              "fieldName": "severity"
+            },
+            {
+              "name": "timer",
+              "type": {
+                "text": "number"
+              },
+              "default": "5",
+              "description": "Time in seconds before the toast disappears.",
+              "fieldName": "timer"
+            },
+            {
+              "name": "topOffset",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "offsets where toasts emerge vertically",
+              "fieldName": "topOffset"
+            }
+          ],
+          "superclass": {
+            "name": "SkfElement",
+            "package": "@internal/components/skf-element"
+          },
+          "tagName": "skf-toast",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SkfToast",
+          "declaration": {
+            "name": "SkfToast",
+            "module": "src/components/toast/toast.component.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/toast-item/toast-item.component.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SkfToastItem",
+          "members": [
+            {
+              "kind": "field",
+              "name": "_closeableInitialState",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "default": "!!this.closeable"
+            },
+            {
+              "kind": "field",
+              "name": "_parentAnimationDiv",
+              "type": {
+                "text": "HTMLDivElement | null"
+              },
+              "privacy": "protected",
+              "default": "this.parentElement"
+            },
+            {
+              "kind": "field",
+              "name": "_currentTimeoutId",
+              "type": {
+                "text": "ReturnType<typeof setTimeout> | null"
+              },
+              "privacy": "private",
+              "description": "If not cloaseable, timeout id for the toast",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_timeleft",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "description": "If not closseable, time left on the timer when the mouse enters the toast",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "_timeoutStarted",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "description": "If not closseable, time when the timeout started",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "originEl",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "timer",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "attribute": "timer",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "_animateIn"
+            },
+            {
+              "kind": "field",
+              "name": "_handleMouseEnter"
+            },
+            {
+              "kind": "field",
+              "name": "_handleMouseLeave"
+            },
+            {
+              "kind": "field",
+              "name": "_removeToast"
+            },
+            {
+              "kind": "field",
+              "name": "parentAnimationDiv",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "closeable",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "If true, alert is being used as a toast (alertdialog) with an close button",
+              "attribute": "closeable",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "SkfAlert",
+                "module": "src/components/alert/alert.component.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "buttonLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Close'",
+              "description": "Close button aria-label",
+              "attribute": "button-label",
+              "inheritedFrom": {
+                "name": "SkfAlert",
+                "module": "src/components/alert/alert.component.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "icon",
+              "type": {
+                "text": "SkfIcon['name'] | undefined"
+              },
+              "description": "If defined, displays leading icon",
+              "attribute": "icon",
+              "inheritedFrom": {
+                "name": "SkfAlert",
+                "module": "src/components/alert/alert.component.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "severity",
+              "type": {
+                "text": "\"error\" | \"info\" | \"warning\" | \"success\" | \"alert\""
+              },
+              "description": "If defined, gives the supplied appearance",
+              "attribute": "severity",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "SkfAlert",
+                "module": "src/components/alert/alert.component.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "timer",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "fieldName": "timer"
+            },
+            {
+              "name": "closeable",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "If true, alert is being used as a toast (alertdialog) with an close button",
+              "fieldName": "closeable",
+              "inheritedFrom": {
+                "name": "SkfAlert",
+                "module": "src/components/alert/alert.component.ts"
+              }
+            },
+            {
+              "name": "button-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Close'",
+              "description": "Close button aria-label",
+              "fieldName": "buttonLabel",
+              "inheritedFrom": {
+                "name": "SkfAlert",
+                "module": "src/components/alert/alert.component.ts"
+              }
+            },
+            {
+              "name": "icon",
+              "type": {
+                "text": "SkfIcon['name'] | undefined"
+              },
+              "description": "If defined, displays leading icon",
+              "fieldName": "icon",
+              "inheritedFrom": {
+                "name": "SkfAlert",
+                "module": "src/components/alert/alert.component.ts"
+              }
+            },
+            {
+              "name": "severity",
+              "type": {
+                "text": "\"error\" | \"info\" | \"warning\" | \"success\" | \"alert\""
+              },
+              "description": "If defined, gives the supplied appearance",
+              "fieldName": "severity",
+              "inheritedFrom": {
+                "name": "SkfAlert",
+                "module": "src/components/alert/alert.component.ts"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "SkfAlert",
+            "package": "@components/alert/alert.component.js"
+          },
+          "slots": [
+            {
+              "description": "Alert message. **Notice!** See design principles for approved content",
+              "name": "",
+              "inheritedFrom": {
+                "name": "SkfAlert",
+                "module": "src/components/alert/alert.component.ts"
+              }
+            },
+            {
+              "description": "Slot for the link",
+              "name": "link",
+              "inheritedFrom": {
+                "name": "SkfAlert",
+                "module": "src/components/alert/alert.component.ts"
+              }
+            }
+          ],
+          "events": [
+            {
+              "description": "Fires when the close button is clicked",
+              "name": "skf-alert-close",
+              "inheritedFrom": {
+                "name": "SkfAlert",
+                "module": "src/components/alert/alert.component.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SkfToastItem",
+          "declaration": {
+            "name": "SkfToastItem",
+            "module": "src/components/toast-item/toast-item.component.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/toast-wrapper/toast-wrapper.component.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `<skf-toast-wrapper>` is a component without UI that positions where the toast shows up on the screen. The toast-wrapper is used internally by the toast component.",
+          "name": "SkfToastWrapper",
+          "slots": [
+            {
+              "description": "The alert components that the toast creates will render here.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "debug",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "debug",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "debug",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "debug"
+            }
+          ],
+          "superclass": {
+            "name": "SkfElement",
+            "package": "@internal/components/skf-element"
+          },
+          "tagName": "skf-toast-wrapper",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SkfToastWrapper",
+          "declaration": {
+            "name": "SkfToastWrapper",
+            "module": "src/components/toast-wrapper/toast-wrapper.component.ts"
+          }
+        }
+      ]
     }
   ]
 }

package/dist/index.d.ts

@@ -18,3 +18,4 @@ export { default as SkfSelect } from './components/select/select.js';
 export { default as SkfSwitch } from './components/switch/switch.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

@@ -18,47 +18,50 @@ import "./components/select/select.js";
 import "./components/switch/switch.js";
 import "./components/tag/tag.js";
 import "./components/textarea/textarea.js";
-import { SkfAccordion as I } from "./components/accordion/accordion.component.js";
+import "./components/toast/toast.js";
+import { SkfAccordion as L } 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 { SkfButton as b } from "./components/button/button.component.js";
+import { SkfCard as w } from "./components/card/card.component.js";
+import { SkfCheckbox as D } from "./components/checkbox/checkbox.component.js";
+import { SkfCollapse as R } from "./components/collapse/collapse.component.js";
+import { SkfDivider as q } from "./components/divider/divider.component.js";
+import { SkfHeading as z } from "./components/heading/heading.component.js";
+import { SkfIcon as F } from "./components/icon/icon.component.js";
+import { SkfInput as K } from "./components/input/input.component.js";
+import { SkfLink as N } from "./components/link/link.component.js";
+import { SkfLoader as Q } from "./components/loader/loader.component.js";
+import { SkfLogo as V } from "./components/logo/logo.component.js";
+import { SkfRadio as X } from "./components/radio/radio.component.js";
+import { SkfSelectOptionGroup as Z } from "./components/select-option-group/select-option-group.component.js";
+import { SkfSelectOption as $ } from "./components/select-option/select-option.component.js";
+import { SkfSelect as ro } from "./components/select/select.component.js";
+import { SkfSwitch as po } from "./components/switch/switch.component.js";
+import { SkfTag as mo } from "./components/tag/tag.component.js";
+import { SkfTextArea as io } from "./components/textarea/textarea.component.js";
+import { SkfToast as ko } from "./components/toast/toast.component.js";
+import { SkfAccordionItem as no } from "./components/accordion/accordion-item.js";
 export {
-  I as SkfAccordion,
-  So as SkfAccordionItem,
+  L as SkfAccordion,
+  no 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
+  b as SkfButton,
+  w as SkfCard,
+  D as SkfCheckbox,
+  R as SkfCollapse,
+  q as SkfDivider,
+  z as SkfHeading,
+  F as SkfIcon,
+  K as SkfInput,
+  N as SkfLink,
+  Q as SkfLoader,
+  V as SkfLogo,
+  $ as SkfOption,
+  Z as SkfOptionGroup,
+  X as SkfRadio,
+  ro as SkfSelect,
+  po as SkfSwitch,
+  mo as SkfTag,
+  io as SkfTextArea,
+  ko as SkfToast
 };

package/dist/internal/components/hint/hint.component.js

@@ -4,26 +4,28 @@ import { ICON_SEVERITY as n } from "../../constants/iconSeverity.js";
 import v from "../../../styles/component.styles.js";
 import { html as f } from "lit";
 import { property as y } from "lit/decorators.js";
-import a from "./hint.styles.js";
-var c = Object.defineProperty, h = (s, i, m, d) => {
+import d from "./hint.styles.js";
+var a = Object.defineProperty, c = (s, i, m, h) => {
   for (var r = void 0, t = s.length - 1, p; t >= 0; t--)
     (p = s[t]) && (r = p(i, m, r) || r);
-  return r && c(i, m, r), r;
+  return r && a(i, m, r), r;
 };
 const o = class o extends l {
   render() {
     return f`
-			${this.severity && f`
-				<skf-icon color=${this.severity} name="${n[this.severity]}" size="xs">
-				</skf-icon>
-			`}
-			<slot></slot>
+			<div id="root">
+				${this.severity && f`
+					<skf-icon color=${this.severity} name="${n[this.severity]}" size="xs">
+					</skf-icon>
+				`}
+				<slot></slot>
+			</div>
 		`;
   }
 };
-o.styles = [v, a];
+o.styles = [v, d];
 let e = o;
-h([
+c([
   y()
 ], e.prototype, "severity");
 export {