@skf-design-system/ui-components 1.0.2-beta.10 → 1.0.2-beta.11

package/dist/components/link/link.component.d.ts

@@ -42,6 +42,7 @@ export declare class SkfLink extends SkfElement {
     target?: '_blank' | '_parent' | '_self' | '_top';
     connectedCallback(): void;
     _handleAsChange(): void;
+    _handleDisabledChange(): void;
     /** @internal */
     _handleStateChange(property: string, _prev: unknown, next: unknown): void;
     /** @internal */

package/dist/components/link/link.component.js

@@ -1,34 +1,34 @@
-var b = (e) => {
+var g = (e) => {
   throw TypeError(e);
 };
-var g = (e, i, t) => i.has(e) || b("Cannot " + t);
-var d = (e, i, t) => (g(e, i, "read from private field"), t ? t.call(e) : i.get(e)), f = (e, i, t) => i.has(e) ? b("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(e) : i.set(e, t), m = (e, i, t, s) => (g(e, i, "write to private field"), s ? s.call(e, t) : i.set(e, t), t);
+var _ = (e, i, t) => i.has(e) || g("Cannot " + t);
+var c = (e, i, t) => (_(e, i, "read from private field"), t ? t.call(e) : i.get(e)), f = (e, i, t) => i.has(e) ? g("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(e) : i.set(e, t), y = (e, i, t, h) => (_(e, i, "write to private field"), h ? h.call(e, t) : i.set(e, t), t);
 import "../icon/icon.js";
-import { SkfElement as C } from "../../internal/components/skf-element.js";
+import { SkfElement as w } from "../../internal/components/skf-element.js";
 import { stateMap as k } from "../../internal/helpers/stateMap.js";
-import { watch as v } from "../../internal/helpers/watch.js";
+import { watch as b } from "../../internal/helpers/watch.js";
 import { componentStyles as S } from "../../styles/component.styles.js";
-import { nothing as y } from "lit";
-import { property as n } from "lit/decorators.js";
-import { ifDefined as x } from "lit/directives/if-defined.js";
-import { html as _ } from "lit/static-html.js";
-import { styles as A } from "./link.styles.js";
-var D = Object.defineProperty, E = Object.getOwnPropertyDescriptor, r = (e, i, t, s) => {
-  for (var h = s > 1 ? void 0 : s ? E(i, t) : i, p = e.length - 1, c; p >= 0; p--)
-    (c = e[p]) && (h = (s ? c(i, t, h) : c(h)) || h);
-  return s && h && D(i, t, h), h;
+import { nothing as m } from "lit";
+import { property as s } from "lit/decorators.js";
+import { ifDefined as D } from "lit/directives/if-defined.js";
+import { html as v } from "lit/static-html.js";
+import { styles as x } from "./link.styles.js";
+var A = Object.defineProperty, E = Object.getOwnPropertyDescriptor, r = (e, i, t, h) => {
+  for (var n = h > 1 ? void 0 : h ? E(i, t) : i, p = e.length - 1, d; p >= 0; p--)
+    (d = e[p]) && (n = (h ? d(i, t, n) : d(n)) || n);
+  return h && n && A(i, t, n), n;
 };
-const w = {
+const C = {
   color: ["inverse", "primary"],
   stretch: "stretch"
 };
 var a, l;
-const u = class u extends C {
+const u = class u extends w {
   constructor() {
     super(...arguments);
     f(this, a);
     f(this, l);
-    m(this, a, this.attachInternals()), m(this, l, d(this, a).states), this.as = "link", this.color = "primary", this.disabled = !1, this.download = !1, this.iconRight = !1, this.stretch = !1, this._handleClick = () => {
+    y(this, a, this.attachInternals()), y(this, l, c(this, a).states), this.as = "link", this.color = "primary", this.disabled = !1, this.download = !1, this.iconRight = !1, this.stretch = !1, this._handleClick = () => {
       if (!(this.as === "button" && this.disabled) && (this.emit("skf-link-click", { detail: { href: this.href, route: this.route } }), this.as === "link" && !this.route && this.href?.trim()))
         if (this.target)
           window.open(this.href, this.target);
@@ -40,80 +40,86 @@ const u = class u extends C {
     };
   }
   connectedCallback() {
-    super.connectedCallback(), this.ariaDisabled = this.as === "button" && this.disabled ? "true" : null, this.role = this.as;
-    const t = this.hasAttribute("tabindex") ? Number(this.getAttribute("tabindex")) : 0;
-    this.ariaDisabled !== "true" && (this.tabIndex = t), this.addEventListener("keydown", (s) => {
-      (s.key === "Enter" || s.key === " ") && this._handleClick();
+    super.connectedCallback(), this.role = this.as, this.addEventListener("keydown", (t) => {
+      (t.key === "Enter" || t.key === " ") && this._handleClick();
     }), this.addEventListener("click", this._handleClick);
   }
   _handleAsChange() {
     this.as === "button" ? this.setAttribute("type", "button") : this.removeAttribute("type");
   }
-  _handleStateChange(t, s, h) {
-    k(d(this, l), w[t]).set(h);
+  _handleDisabledChange() {
+    this.ariaDisabled = this.as === "button" && this.disabled ? "true" : null;
+    const t = this.hasAttribute("tabindex") ? Number(this.getAttribute("tabindex")) : 0;
+    this.ariaDisabled !== "true" && (this.tabIndex = t);
+  }
+  _handleStateChange(t, h, n) {
+    k(c(this, l), C[t]).set(n);
   }
   /** @internal */
   _renderIcon() {
     const t = this.color === "inverse" ? "inverse" : "emphasized";
-    return _`
+    return v`
 			<skf-icon
 				color=${t}
-				data-color=${this.disabled ? "custom" : y}
-				name=${x(this.icon)}
+				data-color=${this.disabled ? "custom" : m}
+				name=${D(this.icon)}
 				size="sm"
 			></skf-icon>
 		`;
   }
   render() {
-    return _`
+    return v`
 			<div id="root" part="root">
-				${this.icon && !this.iconRight ? this._renderIcon() : y}
+				${this.icon && !this.iconRight ? this._renderIcon() : m}
 				<slot></slot>
-				${this.icon && this.iconRight ? this._renderIcon() : y}
+				${this.icon && this.iconRight ? this._renderIcon() : m}
 			</div>
 		`;
   }
 };
-a = new WeakMap(), l = new WeakMap(), u.styles = [S, A];
+a = new WeakMap(), l = new WeakMap(), u.styles = [S, x];
 let o = u;
 r([
-  n({ type: String })
+  s({ type: String })
 ], o.prototype, "as", 2);
 r([
-  n({ type: String })
+  s({ type: String })
 ], o.prototype, "color", 2);
 r([
-  n({ type: Boolean })
+  s({ type: Boolean })
 ], o.prototype, "disabled", 2);
 r([
-  n({ type: Boolean })
+  s({ type: Boolean })
 ], o.prototype, "download", 2);
 r([
-  n({ type: String })
+  s({ type: String })
 ], o.prototype, "href", 2);
 r([
-  n({ type: String })
+  s({ type: String })
 ], o.prototype, "icon", 2);
 r([
-  n({ type: Boolean, attribute: "icon-right" })
+  s({ type: Boolean, attribute: "icon-right" })
 ], o.prototype, "iconRight", 2);
 r([
-  n({ type: String })
+  s({ type: String })
 ], o.prototype, "rel", 2);
 r([
-  n({ type: String })
+  s({ type: String })
 ], o.prototype, "route", 2);
 r([
-  n({ type: Boolean })
+  s({ type: Boolean })
 ], o.prototype, "stretch", 2);
 r([
-  n({ type: String })
+  s({ type: String })
 ], o.prototype, "target", 2);
 r([
-  v("as")
+  b("as")
 ], o.prototype, "_handleAsChange", 1);
 r([
-  v(Object.keys(w))
+  b("disabled")
+], o.prototype, "_handleDisabledChange", 1);
+r([
+  b(Object.keys(C))
 ], o.prototype, "_handleStateChange", 1);
 export {
   o as SkfLink

package/dist/components/link/link.styles.js

@@ -41,10 +41,6 @@ const e = o`
 
 					cursor: not-allowed;
 				}
-
-				skf-icon {
-					color: inherit;
-				}
 			}
 
 			:host(:not([aria-disabled]):hover) #root {

package/dist/custom-elements.json

@@ -3381,6 +3381,13 @@
               "type": {
                 "text": "_handleAsChange() => void"
               }
+            },
+            {
+              "kind": "method",
+              "name": "_handleDisabledChange",
+              "type": {
+                "text": "_handleDisabledChange() => void"
+              }
             }
           ],
           "events": [
@@ -4550,6 +4557,17 @@
               "type": {
                 "text": "_handleAsChange() => void"
               }
+            },
+            {
+              "kind": "method",
+              "name": "_handleDisabledChange",
+              "inheritedFrom": {
+                "name": "SkfLink",
+                "module": "src/components/link/link.component.ts"
+              },
+              "type": {
+                "text": "_handleDisabledChange() => void"
+              }
             }
           ],
           "superclass": {

package/dist/types/jsx/custom-element-jsx.d.ts

@@ -1747,6 +1747,7 @@ export type SkfTooltipProps = {
  * Methods that can be called to access component functionality.
  * 
  * - `_handleAsChange() => void`: undefined
+ * - `_handleDisabledChange() => void`: undefined
   */
     "skf-link": Partial<SkfLinkProps & BaseProps<SkfLink> & BaseEvents>;
 
@@ -1901,6 +1902,7 @@ export type SkfTooltipProps = {
  * Methods that can be called to access component functionality.
  * 
  * - `_handleAsChange() => void`: undefined
+ * - `_handleDisabledChange() => void`: undefined
   */
     "skf-menu-item": Partial<SkfMenuItemProps & BaseProps<SkfMenuItem> & BaseEvents>;
 

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@skf-design-system/ui-components",
-  "version": "1.0.2-beta.8",
+  "version": "1.0.2-beta",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/package.json

@@ -35,7 +35,7 @@
   "sideEffects": true,
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "1.0.2-beta.10",
+  "version": "1.0.2-beta.11",
   "dependencies": {
     "@floating-ui/dom": "^1.7.1",
     "@js-temporal/polyfill": "^0.5.1",
@@ -44,6 +44,7 @@
     "lit": "^3.3.0"
   },
   "devDependencies": {
+    "@changesets/cli": "^2.29.5",
     "@chromatic-com/storybook": "^4.0.1",
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",