@tekus/design-system 5.26.0 → 5.27.0

package/assets/tokens/tk-foundations.json

@@ -101,6 +101,52 @@
           "type": "color"
         }
       },
+      "accent": {
+        "50": {
+          "value": "#edfcf9",
+          "type": "color"
+        },
+        "100": {
+          "value": "#d4f7f0",
+          "type": "color"
+        },
+        "200": {
+          "value": "#acecdf",
+          "type": "color"
+        },
+        "300": {
+          "value": "#8ee1d0",
+          "type": "color"
+        },
+        "400": {
+          "value": "#7dd8c6",
+          "type": "color"
+        },
+        "500": {
+          "value": "#6ad0bc",
+          "type": "color"
+        },
+        "600": {
+          "value": "#3bc4a9",
+          "type": "color"
+        },
+        "700": {
+          "value": "#2b9c85",
+          "type": "color"
+        },
+        "800": {
+          "value": "#1d7261",
+          "type": "color"
+        },
+        "900": {
+          "value": "#114a3f",
+          "type": "color"
+        },
+        "950": {
+          "value": "#0a2e27",
+          "type": "color"
+        }
+      },
       "red": {
         "50": {
           "value": "#feede8",
@@ -335,126 +381,193 @@
     "background": {
       "default": {
         "value": "{tk-color.base.surface.0}",
-        "type": "color"
+        "type": "color",
+        "$dark": "{tk-color.base.surface.950}"
       },
       "soft": {
         "value": "{tk-color.base.surface.100}",
-        "type": "color"
+        "type": "color",
+        "$dark": "{tk-color.base.surface.800}"
       },
       "medium": {
         "value": "{tk-color.base.surface.300}",
-        "type": "color"
+        "type": "color",
+        "$dark": "{tk-color.base.surface.700}"
       },
       "inverse": {
         "value": "{tk-color.base.surface.950}",
+        "type": "color",
+        "$dark": "{tk-color.base.surface.0}"
+      },
+      "strong": {
+        "value": "{tk-color.base.surface.500}",
         "type": "color"
+      },
+      "bold": {
+        "value": "{tk-color.base.surface.700}",
+        "type": "color",
+        "$dark": "{tk-color.base.surface.300}"
       }
     },
     "text": {
       "default": {
         "value": "{tk-color.base.surface.950}",
-        "type": "color"
+        "type": "color",
+        "$dark": "{tk-color.base.surface.0}"
       },
       "muted": {
         "value": "{tk-color.base.surface.500}",
-        "type": "color"
-      },
-      "inverted": {
-        "value": "#ffffff",
-        "type": "color"
-      },
-      "inverse": {
-        "value": "{tk-color.base.surface.0}",
-        "type": "color"
+        "type": "color",
+        "$dark": "{tk-color.base.surface.400}"
       },
       "subtle": {
         "value": "{tk-color.base.surface.600}",
-        "type": "color"
+        "type": "color",
+        "$dark": "{tk-color.base.surface.500}"
       },
       "surface": {
         "value": "{tk-color.base.surface.400}",
-        "type": "color"
+        "type": "color",
+        "$dark": "{tk-color.base.surface.500}"
+      },
+      "inverse": {
+        "value": "{tk-color.base.surface.0}",
+        "type": "color",
+        "$dark": "{tk-color.base.surface.950}"
+      },
+      "inverted": {
+        "value": "{tk-color.base.surface.0}",
+        "type": "color",
+        "$dark": "{tk-color.base.surface.950}"
       }
     },
     "transparent": {
       "value": "#ffffff00",
-      "type": "color"
+      "type": "color",
+      "$dark": "#00000000"
     },
-    "accent": {
+    "primary": {
       "default": {
         "value": "{tk-color.base.primary.500}",
-        "type": "color"
+        "type": "color",
+        "$dark": "{tk-color.base.primary.400}"
       },
       "muted": {
         "value": "{tk-color.base.primary.100}",
-        "type": "color"
+        "type": "color",
+        "$dark": "{tk-color.base.primary.900}"
       },
       "strong": {
         "value": "{tk-color.base.primary.700}",
-        "type": "color"
+        "type": "color",
+        "$dark": "{tk-color.base.primary.200}"
+      }
+    },
+    "accent": {
+      "default": {
+        "value": "{tk-color.base.accent.500}",
+        "type": "color",
+        "$dark": "{tk-color.base.accent.400}"
+      },
+      "muted": {
+        "value": "{tk-color.base.accent.100}",
+        "type": "color",
+        "$dark": "{tk-color.base.accent.900}"
+      },
+      "strong": {
+        "value": "{tk-color.base.accent.700}",
+        "type": "color",
+        "$dark": "{tk-color.base.accent.200}"
       }
     },
     "feedback": {
       "danger": {
         "default": {
           "value": "{tk-color.base.red.500}",
-          "type": "color"
+          "type": "color",
+          "$dark": "{tk-color.base.red.400}"
         },
         "muted": {
           "value": "{tk-color.base.red.100}",
-          "type": "color"
+          "type": "color",
+          "$dark": "{tk-color.base.red.950}"
         },
         "strong": {
           "value": "{tk-color.base.red.700}",
-          "type": "color"
+          "type": "color",
+          "$dark": "{tk-color.base.red.200}"
         }
       },
       "warn": {
         "default": {
           "value": "{tk-color.base.yellow.500}",
-          "type": "color"
+          "type": "color",
+          "$dark": "{tk-color.base.yellow.400}"
         },
         "muted": {
           "value": "{tk-color.base.yellow.100}",
-          "type": "color"
+          "type": "color",
+          "$dark": "{tk-color.base.yellow.950}"
         },
         "strong": {
           "value": "{tk-color.base.yellow.700}",
-          "type": "color"
+          "type": "color",
+          "$dark": "{tk-color.base.yellow.200}"
         }
       },
       "success": {
         "default": {
           "value": "{tk-color.base.green.500}",
-          "type": "color"
+          "type": "color",
+          "$dark": "{tk-color.base.green.400}"
         },
         "muted": {
           "value": "{tk-color.base.green.100}",
-          "type": "color"
+          "type": "color",
+          "$dark": "{tk-color.base.green.950}"
         },
         "strong": {
           "value": "{tk-color.base.green.700}",
-          "type": "color"
+          "type": "color",
+          "$dark": "{tk-color.base.green.200}"
         }
       },
       "info": {
         "default": {
           "value": "{tk-color.base.sky.500}",
-          "type": "color"
+          "type": "color",
+          "$dark": "{tk-color.base.sky.400}"
         },
         "muted": {
           "value": "{tk-color.base.sky.100}",
-          "type": "color"
+          "type": "color",
+          "$dark": "{tk-color.base.sky.950}"
         },
         "strong": {
           "value": "{tk-color.base.sky.700}",
-          "type": "color"
+          "type": "color",
+          "$dark": "{tk-color.base.sky.200}"
         }
       }
     },
     "border": {
       "default": {
         "value": "{tk-color.base.surface.400}",
+        "type": "color",
+        "$dark": "{tk-color.base.surface.700}"
+      },
+      "subtle": {
+        "value": "{tk-color.base.surface.200}",
+        "type": "color",
+        "$dark": "{tk-color.base.surface.800}"
+      },
+      "strong": {
+        "value": "{tk-color.base.surface.600}",
+        "type": "color",
+        "$dark": "{tk-color.base.surface.500}"
+      },
+      "focus": {
+        "value": "{tk-color.primary.default}",
         "type": "color"
       }
     }
@@ -513,20 +626,12 @@
         "value": 96,
         "type": "number"
       },
-      "700": {
-        "value": 32,
-        "type": "number"
-      },
       "800": {
         "value": 128,
         "type": "number"
-      },
-      "900": {
-        "value": 48,
-        "type": "number"
       }
     },
-    "paddingX": {
+    "padding": {
       "none": {
         "value": "{tk-spacing.base.0}",
         "type": "number"
@@ -552,7 +657,7 @@
         "type": "number"
       }
     },
-    "paddingY": {
+    "gap": {
       "none": {
         "value": "{tk-spacing.base.0}",
         "type": "number"
@@ -569,28 +674,6 @@
         "value": "{tk-spacing.base.100}",
         "type": "number"
       },
-      "l": {
-        "value": "{tk-spacing.base.125}",
-        "type": "number"
-      },
-      "xl": {
-        "value": "{tk-spacing.base.150}",
-        "type": "number"
-      }
-    },
-    "gap": {
-      "none": {
-        "value": "{tk-spacing.base.0}",
-        "type": "number"
-      },
-      "s": {
-        "value": "{tk-spacing.base.25}",
-        "type": "number"
-      },
-      "m": {
-        "value": "{tk-spacing.base.100}",
-        "type": "number"
-      },
       "l": {
         "value": "{tk-spacing.base.150}",
         "type": "number"
@@ -660,30 +743,30 @@
         }
       },
       "paragraph": {
-        "m": {
-          "value": "{tk-font.size.base.100}",
-          "type": "number"
-        },
         "s": {
           "value": "{tk-font.size.base.88}",
           "type": "number"
         },
+        "m": {
+          "value": "{tk-font.size.base.100}",
+          "type": "number"
+        },
         "l": {
           "value": "{tk-font.size.base.113}",
           "type": "number"
         }
       },
       "headers": {
-        "l": {
-          "value": "{tk-font.size.base.200}",
+        "s": {
+          "value": "{tk-font.size.base.113}",
           "type": "number"
         },
         "m": {
           "value": "{tk-font.size.base.150}",
           "type": "number"
         },
-        "s": {
-          "value": "{tk-font.size.base.113}",
+        "l": {
+          "value": "{tk-font.size.base.200}",
           "type": "number"
         },
         "xl": {
@@ -692,13 +775,13 @@
         }
       },
       "legal": {
-        "m": {
-          "value": "{tk-font.size.base.75}",
-          "type": "number"
-        },
         "s": {
           "value": "{tk-font.size.base.63}",
           "type": "number"
+        },
+        "m": {
+          "value": "{tk-font.size.base.75}",
+          "type": "number"
         }
       }
     }
@@ -756,18 +839,22 @@
     }
   },
   "tk-borderRadius": {
-    "m": {
-      "value": 16,
-      "type": "number"
-    },
     "null": {
       "value": 0,
       "type": "number"
     },
+    "xs": {
+      "value": 4,
+      "type": "number"
+    },
     "s": {
       "value": 8,
       "type": "number"
     },
+    "m": {
+      "value": 16,
+      "type": "number"
+    },
     "l": {
       "value": 24,
       "type": "number"

package/fesm2022/tekus-design-system-components-badge.mjs

@@ -11,13 +11,14 @@ import { BadgeModule } from 'primeng/badge';
  *
  * This component supports:
  * - `value`: The text content to be displayed in the badge
- * - `severity`: The color scheme of the badge. Options: `'primary' | 'secondary' | 'contrast'`
+ * - `severity`: The color scheme of the badge. Options: `'primary' | 'secondary' | 'contrast' | 'danger'`
  * - Automatically maps severity values to PrimeNG's badge styles
  *
  * @usage
  * ### Basic Usage
  * ```html
  * <tk-badge value="5" severity="primary"></tk-badge>
+ *  ```
  * */
 class BadgeComponent {
     constructor() {
@@ -37,6 +38,7 @@ class BadgeComponent {
                 secondary: 'secondary',
                 primary: 'success',
                 contrast: 'contrast',
+                danger: 'danger',
             };
             return severityMap[this.severity()];
         }, ...(ngDevMode ? [{ debugName: "primeSeverity" }] : /* istanbul ignore next */ []));

package/fesm2022/tekus-design-system-components-badge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-badge.mjs","sources":["../../../projects/design-system/components/badge/src/badge.component.ts","../../../projects/design-system/components/badge/src/badge.component.html","../../../projects/design-system/components/badge/tekus-design-system-components-badge.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { BadgeModule } from 'primeng/badge';\n\nexport type BadgeSeverity = 'secondary' | 'primary' | 'contrast';\n/**\n * @component BadgeComponent\n * @description\n * A component used to display numerical or textual badges.\n * It wraps PrimeNG's `p-badge` component with custom styling and behavior.\n *\n * This component supports:\n * - `value`: The text content to be displayed in the badge\n * - `severity`: The color scheme of the badge. Options: `'primary' | 'secondary' | 'contrast'`\n * - Automatically maps severity values to PrimeNG's badge styles\n *\n * @usage\n * ### Basic Usage\n * ```html\n * <tk-badge value=\"5\" severity=\"primary\"></tk-badge>\n * */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  selector: 'tk-badge',\n  imports: [BadgeModule],\n  templateUrl: './badge.component.html',\n  styleUrl: './badge.component.scss',\n})\nexport class BadgeComponent {\n  /** The text content to be displayed in the badge. */\n  value = input.required<string>();\n\n  /**\n   * The severity level of the badge, which determines its color and styling.\n   * @default 'primary'\n   */\n  severity = input<BadgeSeverity>('primary');\n\n  /**\n   * Computed property that maps the custom `BadgeSeverity` to the underlying PrimeNG `severity`.\n   * Returns `undefined` for 'primary' as it uses the default style, and maps others accordingly.\n   */\n  primeSeverity = computed((): 'success' | 'secondary' | 'contrast' => {\n    const severityMap: Record<\n      BadgeSeverity,\n      'success' | 'secondary' | 'contrast'\n    > = {\n      secondary: 'secondary',\n      primary: 'success',\n      contrast: 'contrast',\n    };\n    return severityMap[this.severity()];\n  });\n}\n","<p-badge [value]=\"value()\" [severity]=\"primeSeverity()\" />\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;AAIA;;;;;;;;;;;;;;;AAeK;MAQQ,cAAc,CAAA;AAP3B,IAAA,WAAA,GAAA;;AASE,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,2EAAU;AAEhC;;;AAGG;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAgB,SAAS,+EAAC;AAE1C;;;AAGG;AACH,QAAA,IAAA,CAAA,aAAa,GAAG,QAAQ,CAAC,MAA2C;AAClE,YAAA,MAAM,WAAW,GAGb;AACF,gBAAA,SAAS,EAAE,WAAW;AACtB,gBAAA,OAAO,EAAE,SAAS;AAClB,gBAAA,QAAQ,EAAE,UAAU;aACrB;AACD,YAAA,OAAO,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;AACrC,QAAA,CAAC,oFAAC;AACH,IAAA;8GAzBY,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAd,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC3B3B,kEACA,EAAA,MAAA,EAAA,CAAA,0lBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDsBY,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,WAAA,EAAA,MAAA,EAAA,UAAA,EAAA,OAAA,EAAA,eAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAIV,cAAc,EAAA,UAAA,EAAA,CAAA;kBAP1B,SAAS;AACS,YAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,UAAU,EAAA,OAAA,EACX,CAAC,WAAW,CAAC,EAAA,QAAA,EAAA,kEAAA,EAAA,MAAA,EAAA,CAAA,0lBAAA,CAAA,EAAA;;;AEvBxB;;AAEG;;;;"}
+{"version":3,"file":"tekus-design-system-components-badge.mjs","sources":["../../../projects/design-system/components/badge/src/badge.component.ts","../../../projects/design-system/components/badge/src/badge.component.html","../../../projects/design-system/components/badge/tekus-design-system-components-badge.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { BadgeModule } from 'primeng/badge';\n\nexport type BadgeSeverity = 'secondary' | 'primary' | 'contrast' | 'danger';\n/**\n * @component BadgeComponent\n * @description\n * A component used to display numerical or textual badges.\n * It wraps PrimeNG's `p-badge` component with custom styling and behavior.\n *\n * This component supports:\n * - `value`: The text content to be displayed in the badge\n * - `severity`: The color scheme of the badge. Options: `'primary' | 'secondary' | 'contrast' | 'danger'`\n * - Automatically maps severity values to PrimeNG's badge styles\n *\n * @usage\n * ### Basic Usage\n * ```html\n * <tk-badge value=\"5\" severity=\"primary\"></tk-badge>\n *  ```\n * */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  selector: 'tk-badge',\n  imports: [BadgeModule],\n  templateUrl: './badge.component.html',\n  styleUrl: './badge.component.scss',\n})\nexport class BadgeComponent {\n  /** The text content to be displayed in the badge. */\n  value = input.required<string>();\n\n  /**\n   * The severity level of the badge, which determines its color and styling.\n   * @default 'primary'\n   */\n  severity = input<BadgeSeverity>('primary');\n\n  /**\n   * Computed property that maps the custom `BadgeSeverity` to the underlying PrimeNG `severity`.\n   * Returns `undefined` for 'primary' as it uses the default style, and maps others accordingly.\n   */\n  primeSeverity = computed((): 'success' | 'secondary' | 'contrast' | 'danger' => {\n    const severityMap: Record<\n      BadgeSeverity,\n      'success' | 'secondary' | 'contrast' | 'danger'\n    > = {\n      secondary: 'secondary',\n      primary: 'success',\n      contrast: 'contrast',\n      danger: 'danger',\n    };\n    return severityMap[this.severity()];\n  });\n}\n","<p-badge [value]=\"value()\" [severity]=\"primeSeverity()\" />\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;AAIA;;;;;;;;;;;;;;;;AAgBK;MAQQ,cAAc,CAAA;AAP3B,IAAA,WAAA,GAAA;;AASE,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,2EAAU;AAEhC;;;AAGG;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAgB,SAAS,+EAAC;AAE1C;;;AAGG;AACH,QAAA,IAAA,CAAA,aAAa,GAAG,QAAQ,CAAC,MAAsD;AAC7E,YAAA,MAAM,WAAW,GAGb;AACF,gBAAA,SAAS,EAAE,WAAW;AACtB,gBAAA,OAAO,EAAE,SAAS;AAClB,gBAAA,QAAQ,EAAE,UAAU;AACpB,gBAAA,MAAM,EAAE,QAAQ;aACjB;AACD,YAAA,OAAO,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;AACrC,QAAA,CAAC,oFAAC;AACH,IAAA;8GA1BY,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAd,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC5B3B,kEACA,EAAA,MAAA,EAAA,CAAA,0lBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDuBY,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,WAAA,EAAA,MAAA,EAAA,UAAA,EAAA,OAAA,EAAA,eAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAIV,cAAc,EAAA,UAAA,EAAA,CAAA;kBAP1B,SAAS;AACS,YAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,UAAU,EAAA,OAAA,EACX,CAAC,WAAW,CAAC,EAAA,QAAA,EAAA,kEAAA,EAAA,MAAA,EAAA,CAAA,0lBAAA,CAAA,EAAA;;;AExBxB;;AAEG;;;;"}

package/fesm2022/tekus-design-system-components-button.mjs

@@ -142,11 +142,11 @@ class ButtonComponent {
             this.clicked.emit('mouse');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: ButtonComponent, isStandalone: true, selector: "tk-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<p-button\n  class=\"tk-button\"\n  [label]=\"label()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [severity]=\"link() ? undefined : severity()\"\n  [variant]=\"variant()\"\n  [link]=\"link()\"\n  [size]=\"size()\"\n  [pTooltip]=\"tooltipText()\"\n  tooltipPosition=\"top\"\n  (click)=\"onButtonClick()\"\n  (keydown.enter)=\"onButtonClick()\"\n  (keydown.space)=\"onButtonClick()\">\n\n  @if (icon()) {\n   <tk-icon [icon]=\"icon()!\"></tk-icon>\n  }\n</p-button>\n", styles: [":host{display:inline-flex;vertical-align:middle}:host ::ng-deep .p-button{min-width:var(--tk-size-base-250, 2.5rem)}:host ::ng-deep .p-button.p-button-sm{min-width:var(--tk-spacing-paddingX-xl, 1.5rem);height:var(--tk-spacing-paddingY-xl, 1.5rem);padding:0;display:flex;align-items:center;justify-content:center;line-height:1}:host ::ng-deep .p-button.p-button-sm.p-button-icon-only{width:var(--tk-spacing-paddingX-xl, 1.5rem)}:host ::ng-deep .p-button.p-button-sm ::ng-deep tk-icon{display:flex;align-items:center;justify-content:center}:host ::ng-deep .p-button.p-button-sm ::ng-deep tk-icon svg{width:1rem;height:1rem}:host ::ng-deep .p-button.p-button-primary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{color:var(--tk-color-base-surface-0, #ffffff)!important}:host ::ng-deep .p-button.p-button-link .p-button-label{color:var(--tk-color-base-primary-500, #16006f)!important}:host ::ng-deep .p-button.p-button-link:hover .p-button-label{color:var(--tk-color-base-primary-400, #45338c)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label{color:var(--tk-color-base-surface-900, #191A1B)!important}:host ::ng-deep .p-button.p-button-secondary.p-button-outlined .p-button-label{color:var(--tk-color-base-surface-500, #8a8a8b)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{font-weight:var(--tk-font-weight-400, 400)}:host ::ng-deep .p-button-label{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: ButtonComponent, isStandalone: true, selector: "tk-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<p-button\n  class=\"tk-button\"\n  [label]=\"label()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [severity]=\"link() ? undefined : severity()\"\n  [variant]=\"variant()\"\n  [link]=\"link()\"\n  [size]=\"size()\"\n  [pTooltip]=\"tooltipText()\"\n  tooltipPosition=\"top\"\n  (click)=\"onButtonClick()\"\n  (keydown.enter)=\"onButtonClick()\"\n  (keydown.space)=\"onButtonClick()\">\n\n  @if (icon()) {\n   <tk-icon [icon]=\"icon()!\"></tk-icon>\n  }\n</p-button>\n", styles: [":host{display:inline-flex;vertical-align:middle}:host ::ng-deep .p-button{min-width:var(--tk-size-base-250, 2.5rem)}:host ::ng-deep .p-button.p-button-sm{min-width:var(--tk-spacing-padding-xl, 1.5rem);height:var(--tk-spacing-padding-xl, 1.5rem);padding:0;display:flex;align-items:center;justify-content:center;line-height:1}:host ::ng-deep .p-button.p-button-sm.p-button-icon-only{width:var(--tk-spacing-padding-xl, 1.5rem)}:host ::ng-deep .p-button.p-button-sm ::ng-deep tk-icon{display:flex;align-items:center;justify-content:center}:host ::ng-deep .p-button.p-button-sm ::ng-deep tk-icon svg{width:1rem;height:1rem}:host ::ng-deep .p-button.p-button-primary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{color:var(--tk-color-base-surface-0, #ffffff)!important}:host ::ng-deep .p-button.p-button-link .p-button-label{color:var(--tk-color-base-primary-500, #16006f)!important}:host ::ng-deep .p-button.p-button-link:hover .p-button-label{color:var(--tk-color-base-primary-400, #45338c)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label{color:var(--tk-color-base-surface-900, #191A1B)!important}:host ::ng-deep .p-button.p-button-secondary.p-button-outlined .p-button-label{color:var(--tk-color-base-surface-500, #8a8a8b)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{font-weight:var(--tk-font-weight-400, 400)}:host ::ng-deep .p-button-label{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-button', imports: [ButtonModule, IconComponent, Tooltip], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-button\n  class=\"tk-button\"\n  [label]=\"label()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [severity]=\"link() ? undefined : severity()\"\n  [variant]=\"variant()\"\n  [link]=\"link()\"\n  [size]=\"size()\"\n  [pTooltip]=\"tooltipText()\"\n  tooltipPosition=\"top\"\n  (click)=\"onButtonClick()\"\n  (keydown.enter)=\"onButtonClick()\"\n  (keydown.space)=\"onButtonClick()\">\n\n  @if (icon()) {\n   <tk-icon [icon]=\"icon()!\"></tk-icon>\n  }\n</p-button>\n", styles: [":host{display:inline-flex;vertical-align:middle}:host ::ng-deep .p-button{min-width:var(--tk-size-base-250, 2.5rem)}:host ::ng-deep .p-button.p-button-sm{min-width:var(--tk-spacing-paddingX-xl, 1.5rem);height:var(--tk-spacing-paddingY-xl, 1.5rem);padding:0;display:flex;align-items:center;justify-content:center;line-height:1}:host ::ng-deep .p-button.p-button-sm.p-button-icon-only{width:var(--tk-spacing-paddingX-xl, 1.5rem)}:host ::ng-deep .p-button.p-button-sm ::ng-deep tk-icon{display:flex;align-items:center;justify-content:center}:host ::ng-deep .p-button.p-button-sm ::ng-deep tk-icon svg{width:1rem;height:1rem}:host ::ng-deep .p-button.p-button-primary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{color:var(--tk-color-base-surface-0, #ffffff)!important}:host ::ng-deep .p-button.p-button-link .p-button-label{color:var(--tk-color-base-primary-500, #16006f)!important}:host ::ng-deep .p-button.p-button-link:hover .p-button-label{color:var(--tk-color-base-primary-400, #45338c)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label{color:var(--tk-color-base-surface-900, #191A1B)!important}:host ::ng-deep .p-button.p-button-secondary.p-button-outlined .p-button-label{color:var(--tk-color-base-surface-500, #8a8a8b)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{font-weight:var(--tk-font-weight-400, 400)}:host ::ng-deep .p-button-label{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+            args: [{ selector: 'tk-button', imports: [ButtonModule, IconComponent, Tooltip], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-button\n  class=\"tk-button\"\n  [label]=\"label()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [severity]=\"link() ? undefined : severity()\"\n  [variant]=\"variant()\"\n  [link]=\"link()\"\n  [size]=\"size()\"\n  [pTooltip]=\"tooltipText()\"\n  tooltipPosition=\"top\"\n  (click)=\"onButtonClick()\"\n  (keydown.enter)=\"onButtonClick()\"\n  (keydown.space)=\"onButtonClick()\">\n\n  @if (icon()) {\n   <tk-icon [icon]=\"icon()!\"></tk-icon>\n  }\n</p-button>\n", styles: [":host{display:inline-flex;vertical-align:middle}:host ::ng-deep .p-button{min-width:var(--tk-size-base-250, 2.5rem)}:host ::ng-deep .p-button.p-button-sm{min-width:var(--tk-spacing-padding-xl, 1.5rem);height:var(--tk-spacing-padding-xl, 1.5rem);padding:0;display:flex;align-items:center;justify-content:center;line-height:1}:host ::ng-deep .p-button.p-button-sm.p-button-icon-only{width:var(--tk-spacing-padding-xl, 1.5rem)}:host ::ng-deep .p-button.p-button-sm ::ng-deep tk-icon{display:flex;align-items:center;justify-content:center}:host ::ng-deep .p-button.p-button-sm ::ng-deep tk-icon svg{width:1rem;height:1rem}:host ::ng-deep .p-button.p-button-primary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{color:var(--tk-color-base-surface-0, #ffffff)!important}:host ::ng-deep .p-button.p-button-link .p-button-label{color:var(--tk-color-base-primary-500, #16006f)!important}:host ::ng-deep .p-button.p-button-link:hover .p-button-label{color:var(--tk-color-base-primary-400, #45338c)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label{color:var(--tk-color-base-surface-900, #191A1B)!important}:host ::ng-deep .p-button.p-button-secondary.p-button-outlined .p-button-label{color:var(--tk-color-base-surface-500, #8a8a8b)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{font-weight:var(--tk-font-weight-400, 400)}:host ::ng-deep .p-button-label{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], tooltipText: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipText", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 /**

package/fesm2022/tekus-design-system-components-button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-button.mjs","sources":["../../../projects/design-system/components/button/src/button.component.ts","../../../projects/design-system/components/button/src/button.component.html","../../../projects/design-system/components/button/tekus-design-system-components-button.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';\nimport { ButtonModule } from 'primeng/button';\nimport { IconComponent } from '@tekus/design-system/components/icon';\nimport { Tooltip } from 'primeng/tooltip';\n\n\nexport type ButtonSeverity = 'primary' | 'secondary' | 'danger';\nexport type Variant = 'text' | 'outlined';\n/**\n * @component ButtonComponent\n * @description\n * Atomic button component that provides a reusable and customizable button element\n * across the application.\n * It uses PrimeNG's `ButtonModule` under the hood and allows setting different visual\n * variants (severity), button types, and disabled states.\n *\n * This component ensures consistent design and behavior in all button interactions.\n * It is accessible via both mouse clicks and keyboard actions (Enter/Space).\n *\n * @usage\n * ```html\n * <tk-button\n * label=\"Save\"\n * [severity]=\"'primary'\"\n * [type]=\"'submit'\"\n * (clicked)=\"handleSave()\">\n * </tk-button>\n *\n * <tk-button\n * label=\"Cancel\"\n * [severity]=\"'secondary'\"\n * [disabled]=\"true\">\n * </tk-button>\n * ```\n */\n@Component({\n  selector: 'tk-button',\n  imports: [ButtonModule, IconComponent, Tooltip],\n  templateUrl: './button.component.html',\n  styleUrl: './button.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ButtonComponent {\n  /**\n   * @property {string} label\n   * @description\n   * Text displayed inside the button.\n   *\n   * @default `undefined`\n   */\n  label = input<string>();\n\n  /**\n   * @property {boolean} disabled\n   * @description\n   * Disables the button, preventing user interaction and applying a visual style\n   * that indicates the inactive state.\n   *\n   * @default `false`\n   */\n  disabled = input<boolean>(false);\n\n  /**\n   * @property {'button' | 'submit'} type\n   * @description\n   * Defines the button's HTML type attribute.\n   * - `'button'`: Standard clickable button (default).\n   * - `'submit'`: Used to submit forms.\n   *\n   * @default `'button'`\n   */\n  type = input<'button' | 'submit'>('button');\n\n  /**\n   * @property {ButtonSeverity} severity\n   * @description\n   * Defines the visual importance or style of the button.\n   * - `'primary'`:  Default, neutral action.\n   * - `'secondary'`: Secondary option.\n   * - `'danger'`: Destructive or warning actions.\n   *\n   * @default `'primary'`\n   */\n  severity = input<ButtonSeverity>('primary');\n\n  /**\n   * @property {'text' | 'outlined'} variant\n   * @description\n   * Defines the variant of the button.\n   * - `'text'`: Text-only button.\n   * - `'outlined'`: Outlined button.\n   *\n   * @default `undefined`\n   */\n  variant = input<Variant>();\n\n  /**\n   * @property {boolean} link\n   * @description\n   * When true, the button will be styled as a link (text only with underline).\n   *\n   * @default false\n   */\n  link = input<boolean>(false);\n\n  /**\n   * @property {string} icon\n   * @description\n   * - If `label` is provided, the icon is displayed to the left.\n   * - If `label` is empty, the button is rendered as an icon-only button.\n   *\n   * @default `undefined`\n   */\n  icon = input<string>();\n\n  /**\n   * @event clicked\n   * @description\n   * Emits when the button is activated via click or keyboard (Enter/Space),\n   * unless the button is disabled.\n   *\n   * @example\n   * ```html\n   * <tk-button label=\"Click me\" (clicked)=\"handleClick()\"></tk-button>\n   * ```\n   */\n  clicked = output<'mouse' | 'keyboard'>();\n\n  /**\n   * @property {string} tooltipText\n   * @description\n   * Tooltip text to be displayed when the user hovers over the button.\n   *\n   * @default `undefined`\n   */\n  tooltipText = input<string>();\n\n  /**\n   * @property {'small' | 'large' | undefined} size\n   * @description\n   * Defines the size of the button.\n   * - `'small'`: Small button.\n   * - `'large'`: Large button.\n   * - `undefined`: Default size.\n   *\n   * @default `undefined`\n   */\n  size = input<'small' | 'large' | undefined>();\n\n  /**\n   * @method onButtonClick\n   * @description\n   * Handles the native click event. Emits the `clicked` event if the button\n   * is not disabled.\n   */\n  onButtonClick(): void {\n    if (!this.disabled()) this.clicked.emit('mouse');\n  }\n}\n","<p-button\n  class=\"tk-button\"\n  [label]=\"label()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [severity]=\"link() ? undefined : severity()\"\n  [variant]=\"variant()\"\n  [link]=\"link()\"\n  [size]=\"size()\"\n  [pTooltip]=\"tooltipText()\"\n  tooltipPosition=\"top\"\n  (click)=\"onButtonClick()\"\n  (keydown.enter)=\"onButtonClick()\"\n  (keydown.space)=\"onButtonClick()\">\n\n  @if (icon()) {\n   <tk-icon [icon]=\"icon()!\"></tk-icon>\n  }\n</p-button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"tekus-design-system-components-button.mjs","sources":["../../../projects/design-system/components/button/src/button.component.ts","../../../projects/design-system/components/button/src/button.component.html","../../../projects/design-system/components/button/tekus-design-system-components-button.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';\nimport { ButtonModule } from 'primeng/button';\nimport { IconComponent } from '@tekus/design-system/components/icon';\nimport { Tooltip } from 'primeng/tooltip';\n\n\nexport type ButtonSeverity = 'primary' | 'secondary' | 'danger';\nexport type Variant = 'text' | 'outlined';\n/**\n * @component ButtonComponent\n * @description\n * Atomic button component that provides a reusable and customizable button element\n * across the application.\n * It uses PrimeNG's `ButtonModule` under the hood and allows setting different visual\n * variants (severity), button types, and disabled states.\n *\n * This component ensures consistent design and behavior in all button interactions.\n * It is accessible via both mouse clicks and keyboard actions (Enter/Space).\n *\n * @usage\n * ```html\n * <tk-button\n * label=\"Save\"\n * [severity]=\"'primary'\"\n * [type]=\"'submit'\"\n * (clicked)=\"handleSave()\">\n * </tk-button>\n *\n * <tk-button\n * label=\"Cancel\"\n * [severity]=\"'secondary'\"\n * [disabled]=\"true\">\n * </tk-button>\n * ```\n */\n@Component({\n  selector: 'tk-button',\n  imports: [ButtonModule, IconComponent, Tooltip],\n  templateUrl: './button.component.html',\n  styleUrl: './button.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ButtonComponent {\n  /**\n   * @property {string} label\n   * @description\n   * Text displayed inside the button.\n   *\n   * @default `undefined`\n   */\n  label = input<string>();\n\n  /**\n   * @property {boolean} disabled\n   * @description\n   * Disables the button, preventing user interaction and applying a visual style\n   * that indicates the inactive state.\n   *\n   * @default `false`\n   */\n  disabled = input<boolean>(false);\n\n  /**\n   * @property {'button' | 'submit'} type\n   * @description\n   * Defines the button's HTML type attribute.\n   * - `'button'`: Standard clickable button (default).\n   * - `'submit'`: Used to submit forms.\n   *\n   * @default `'button'`\n   */\n  type = input<'button' | 'submit'>('button');\n\n  /**\n   * @property {ButtonSeverity} severity\n   * @description\n   * Defines the visual importance or style of the button.\n   * - `'primary'`:  Default, neutral action.\n   * - `'secondary'`: Secondary option.\n   * - `'danger'`: Destructive or warning actions.\n   *\n   * @default `'primary'`\n   */\n  severity = input<ButtonSeverity>('primary');\n\n  /**\n   * @property {'text' | 'outlined'} variant\n   * @description\n   * Defines the variant of the button.\n   * - `'text'`: Text-only button.\n   * - `'outlined'`: Outlined button.\n   *\n   * @default `undefined`\n   */\n  variant = input<Variant>();\n\n  /**\n   * @property {boolean} link\n   * @description\n   * When true, the button will be styled as a link (text only with underline).\n   *\n   * @default false\n   */\n  link = input<boolean>(false);\n\n  /**\n   * @property {string} icon\n   * @description\n   * - If `label` is provided, the icon is displayed to the left.\n   * - If `label` is empty, the button is rendered as an icon-only button.\n   *\n   * @default `undefined`\n   */\n  icon = input<string>();\n\n  /**\n   * @event clicked\n   * @description\n   * Emits when the button is activated via click or keyboard (Enter/Space),\n   * unless the button is disabled.\n   *\n   * @example\n   * ```html\n   * <tk-button label=\"Click me\" (clicked)=\"handleClick()\"></tk-button>\n   * ```\n   */\n  clicked = output<'mouse' | 'keyboard'>();\n\n  /**\n   * @property {string} tooltipText\n   * @description\n   * Tooltip text to be displayed when the user hovers over the button.\n   *\n   * @default `undefined`\n   */\n  tooltipText = input<string>();\n\n  /**\n   * @property {'small' | 'large' | undefined} size\n   * @description\n   * Defines the size of the button.\n   * - `'small'`: Small button.\n   * - `'large'`: Large button.\n   * - `undefined`: Default size.\n   *\n   * @default `undefined`\n   */\n  size = input<'small' | 'large' | undefined>();\n\n  /**\n   * @method onButtonClick\n   * @description\n   * Handles the native click event. Emits the `clicked` event if the button\n   * is not disabled.\n   */\n  onButtonClick(): void {\n    if (!this.disabled()) this.clicked.emit('mouse');\n  }\n}\n","<p-button\n  class=\"tk-button\"\n  [label]=\"label()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [severity]=\"link() ? undefined : severity()\"\n  [variant]=\"variant()\"\n  [link]=\"link()\"\n  [size]=\"size()\"\n  [pTooltip]=\"tooltipText()\"\n  tooltipPosition=\"top\"\n  (click)=\"onButtonClick()\"\n  (keydown.enter)=\"onButtonClick()\"\n  (keydown.space)=\"onButtonClick()\">\n\n  @if (icon()) {\n   <tk-icon [icon]=\"icon()!\"></tk-icon>\n  }\n</p-button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;AAQA;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BG;MAQU,eAAe,CAAA;AAP5B,IAAA,WAAA,GAAA;AAQE;;;;;;AAMG;QACH,IAAA,CAAA,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;AAEvB;;;;;;;AAOG;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;AAEhC;;;;;;;;AAQG;AACH,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAsB,QAAQ,2EAAC;AAE3C;;;;;;;;;AASG;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAiB,SAAS,+EAAC;AAE3C;;;;;;;;AAQG;QACH,IAAA,CAAA,OAAO,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,SAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAW;AAE1B;;;;;;AAMG;AACH,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAU,KAAK,2EAAC;AAE5B;;;;;;;AAOG;QACH,IAAA,CAAA,IAAI,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;AAEtB;;;;;;;;;;AAUG;QACH,IAAA,CAAA,OAAO,GAAG,MAAM,EAAwB;AAExC;;;;;;AAMG;QACH,IAAA,CAAA,WAAW,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,aAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;AAE7B;;;;;;;;;AASG;QACH,IAAA,CAAA,IAAI,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAiC;AAW9C,IAAA;AATC;;;;;AAKG;IACH,aAAa,GAAA;AACX,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAAE,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;IAClD;8GAnHW,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAf,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,wsCC1C5B,8dAmBA,EAAA,MAAA,EAAA,CAAA,qiDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDkBY,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,MAAA,EAAA,OAAA,EAAA,UAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,OAAA,EAAA,UAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,SAAA,EAAA,OAAA,EAAA,YAAA,EAAA,YAAA,EAAA,eAAA,EAAA,WAAA,EAAA,WAAA,EAAA,SAAA,EAAA,MAAA,EAAA,OAAA,EAAA,SAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,OAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,EAAA,SAAA,EAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,aAAa,gHAAE,OAAO,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,iBAAA,EAAA,cAAA,EAAA,eAAA,EAAA,mBAAA,EAAA,eAAA,EAAA,QAAA,EAAA,WAAA,EAAA,WAAA,EAAA,MAAA,EAAA,aAAA,EAAA,cAAA,EAAA,UAAA,EAAA,YAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,WAAA,EAAA,YAAA,EAAA,kBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAKnC,eAAe,EAAA,UAAA,EAAA,CAAA;kBAP3B,SAAS;+BACE,WAAW,EAAA,OAAA,EACZ,CAAC,YAAY,EAAE,aAAa,EAAE,OAAO,CAAC,EAAA,eAAA,EAG9B,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,8dAAA,EAAA,MAAA,EAAA,CAAA,qiDAAA,CAAA,EAAA;;;AExCjD;;AAEG;;;;"}