@tekus/design-system 5.33.0 → 5.34.0

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

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-card.mjs","sources":["../../../projects/design-system/components/card/src/card.component.ts","../../../projects/design-system/components/card/src/card.component.html","../../../projects/design-system/components/card/tekus-design-system-components-card.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, model } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { RouterLink } from '@angular/router';\nimport { MenuModule } from 'primeng/menu';\nimport { MenuItem } from 'primeng/api';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { CheckboxComponent } from '@tekus/design-system/components/checkbox';\nimport { IconComponent } from '@tekus/design-system/components/icon';\nimport { ProgressBarComponent } from '@tekus/design-system/components/progress-bar';\nimport { StatusBarComponent } from '@tekus/design-system/components/status-bar';\nimport { TagComponent } from '@tekus/design-system/components/tag';\nimport { TkCardAction, TkCardInfoElement, TkCardLayout } from './card.types';\nimport { DropdownComponent } from '@tekus/design-system/components/dropdown';\nimport { ActionGroupComponent, TkAction } from '@tekus/design-system/components/action-group';\nimport { TimeAgoComponent } from '@tekus/design-system/components/time-ago';\n\n/**\n * @component CardComponent\n * @description\n * Flexible card component used to display grouped content with multiple layout options.\n * Supports vertical and horizontal orientations, optional images, headers with selection,\n * and dynamic action buttons (with overflow menu support).\n *\n * It utilizes Angular 21 Signals for efficient state management and reactivity.\n *\n * @usage\n * ```html\n * <tk-card\n *   title=\"My Document\"\n *   description=\"Upload in progress...\"\n *   layout=\"horizontal\"\n *   [actions]=\"myActions\"\n *   [infoElements]=\"[{ type: 'progress-bar', value: 75 }]\">\n * </tk-card>\n * ```\n */\n@Component({\n  selector: 'tk-card',\n  standalone: true,\n  imports: [\n    CommonModule,\n    RouterLink,\n    MenuModule,\n    ButtonComponent,\n    CheckboxComponent,\n    IconComponent,\n    ProgressBarComponent,\n    StatusBarComponent,\n    TagComponent,\n    DropdownComponent,\n    ActionGroupComponent,\n    TimeAgoComponent\n  ],\n  templateUrl: './card.component.html',\n  styleUrl: './card.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardComponent {\n  /** The primary title of the card. Required. */\n  title = input.required<string>();\n\n  /** Optional link (routerLink or URL) for the title. */\n  titleLink = input<string | unknown[] | null | undefined>(undefined);\n\n  /** Optional external link (href) for the title. */\n  titleHref = input<string | null | undefined>(undefined);\n\n  /** Optional icon to display next to the title. */\n  titleIcon = input<string>();\n\n  /** Optional secondary description. */\n  description = input<string>();\n\n  /** Optional image URL or source. */\n  image = input<string>();\n\n  /** Whether to show the image section. If true and no URL is provided, a placeholder is shown. */\n  showImage = input<boolean>(true);\n\n  /** Layout orientation: 'vertical' (default) or 'horizontal'. */\n  layout = input<TkCardLayout>('vertical');\n\n  /** Whether the card shows a checkbox for selection. */\n  selectable = input<boolean>(false);\n\n  /** Two-way signal for the selection state. */\n  selected = model<boolean>(false);\n\n  /** Optional ID or primary badge text displayed in the header. */\n  badgeText = input<string>();\n\n  /** Optional secondary metadata text (e.g. file size) displayed next to the badge. */\n  secondaryBadgeText = input<string>();\n\n  /** Optional date/time value for connection status. */\n  connectionStatusDate = input<Date | string | number | null | undefined>();\n\n  /** Optional connection status severity: 'success' | 'warn' | 'danger' | 'gray'. */\n  connectionStatusSeverity = input<'success' | 'warn' | 'danger' | 'gray'>('success');\n\n  /** List of actions associated with the card. */\n  actions = input<TkCardAction[]>([]);\n\n  /** Action group list to be used with tk-action-group */\n  actionGroup = input<TkAction[]>([]);\n\n  /** Maximum number of actions to show as buttons before dropping into menu (used with actionGroup) */\n  actionGroupMaxVisible = input<number>(2);\n\n  /** Disables all actions in the action group globally (e.g. for read-only or permission gates) */\n  actionGroupDisabled = input<boolean>(false);\n\n  /** Dynamic list of informational elements (tags, progress bars, etc.). */\n  infoElements = input<TkCardInfoElement[]>([]);\n\n  /**\n   * Computed logic for handling actions.\n   * If there are > 3 actions, they are all moved to an overflow menu.\n   * Otherwise, they are displayed as individual buttons.\n   */\n  hasOverflowActions = computed(() => this.actions().length > 1);\n\n  /** Actions to be displayed directly as buttons. */\n  visibleActions = computed(() => this.actions().length === 1 ? [this.actions()[0]] : []);\n\n  /** \n   * Actions to be displayed in the overflow menu.\n   * Maps TkCardAction to PrimeNG MenuItem format.\n   */\n  menuItems = computed<MenuItem[]>(() => {\n    if (this.actions().length <= 1) return [];\n    return this.actions().map(action => ({\n      label: action.label,\n      icon: action.icon,\n      disabled: action.disabled,\n      command: () => action.handler()\n    }));\n  });\n\n  /**\n   * Maps card severity to button severity.\n   */\n  getButtonSeverity(severity?: string): 'primary' | 'secondary' | 'danger' {\n    if (severity === 'danger') return 'danger';\n    if (severity === 'secondary') return 'secondary';\n    return 'primary';\n  }\n\n  /**\n   * Maps card severity to status bar severity.\n   */\n  getStatusBarSeverity(severity?: string): 'primary' | 'secondary' | 'success' | 'error' {\n    if (severity === 'danger') return 'error';\n    if (severity === 'success') return 'success';\n    if (severity === 'secondary') return 'secondary';\n    return 'primary';\n  }\n}\n","<div \n  class=\"tk-card\" \n  [class.tk-card-horizontal]=\"layout() === 'horizontal'\"\n  [class.tk-card-selectable]=\"selectable()\"\n  [class.tk-card-selected]=\"selectable() && selected()\"\n  [class.tk-card-no-image]=\"!showImage()\"\n  [attr.aria-pressed]=\"selectable() ? selected() : null\">\n  \n  <!-- Header: Selection, Metadata, and Actions -->\n  @if (selectable() || badgeText() || secondaryBadgeText() || connectionStatusDate() || actions().length > 0 || actionGroup().length > 0) {\n    <div class=\"tk-card-header\">\n      <div class=\"tk-card-header-left\">\n        @if (selectable()) {\n          <div \n            class=\"tk-card-selection\" \n            tabindex=\"-1\">\n            <tk-checkbox [binary]=\"true\" [(model)]=\"selected\"></tk-checkbox>\n          </div>\n        }\n        @if (badgeText() || secondaryBadgeText() || connectionStatusDate()) {\n          <div class=\"tk-card-metadata\">\n            @if (badgeText()) {\n              <tk-tag [value]=\"badgeText()!\"></tk-tag>\n            }\n            @if (connectionStatusDate()) {\n              <tk-time-ago [dateTime]=\"connectionStatusDate()!\" [severity]=\"connectionStatusSeverity()\"></tk-time-ago>\n            }\n            @if (secondaryBadgeText()) {\n              <span class=\"tk-card-metadata-secondary\">{{ secondaryBadgeText() }}</span>\n            }\n          </div>\n        }\n      </div>\n\n      <div \n        class=\"tk-card-actions\" \n        tabindex=\"-1\">\n        <!-- Single Action -->\n        @for (action of visibleActions(); track action.id) {\n          <tk-button \n            [icon]=\"action.icon\" \n            [severity]=\"getButtonSeverity(action.severity)\"\n            variant=\"text\"\n            [disabled]=\"action.disabled || false\"\n            [tooltipText]=\"action.label\"\n            size=\"small\"\n            (clicked)=\"action.handler()\">\n          </tk-button>\n        }\n\n        <!-- Multiple Actions Dropdown -->\n        @if (hasOverflowActions()) {\n          <tk-dropdown [model]=\"menuItems()\" size=\"small\"></tk-dropdown>\n        }\n\n        <!-- Action Group -->\n        @if (actionGroup().length > 0) {\n          <tk-action-group\n            [actions]=\"actionGroup()\"\n            [maxVisible]=\"actionGroupMaxVisible()\"\n            [disabled]=\"actionGroupDisabled()\"\n          ></tk-action-group>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Image Section -->\n  @if (showImage()) {\n    <div class=\"tk-card-image-container\">\n      @if (image()) {\n        <div \n          class=\"tk-card-image\" \n          [style.background-image]=\"'url(' + image() + ')'\">\n        </div>\n      } @else {\n        <div class=\"tk-card-image-placeholder\">\n          <tk-icon icon=\"image\" size=\"lg\"></tk-icon>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Content Section -->\n  <div class=\"tk-card-content\">\n    <div class=\"tk-card-body\">\n      <h3 class=\"tk-card-title\" [class.tk-card-title--link]=\"titleLink() || titleHref()\">\n        @if (titleLink()) {\n          <a [routerLink]=\"titleLink()!\" class=\"tk-card-title-link\">\n            @if (titleIcon()) {\n              <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n            }\n            {{ title() }}\n          </a>\n        } @else if (titleHref()) {\n          <a [href]=\"titleHref()!\" class=\"tk-card-title-link\">\n            @if (titleIcon()) {\n              <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n            }\n            {{ title() }}\n          </a>\n        } @else {\n          @if (titleIcon()) {\n            <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n          }\n          {{ title() }}\n        }\n      </h3>\n      @if (description()) {\n        <p class=\"tk-card-description\">{{ description() }}</p>\n      }\n    </div>\n\n    @if (infoElements().length > 0) {\n      <div class=\"tk-card-info-elements\">\n        @for (element of infoElements(); track $index) {\n          <div class=\"tk-card-info-item\">\n            @switch (element.type) {\n              @case ('progress-bar') {\n                <div class=\"tk-card-info-progress\">\n                  @if (element.label) {\n                    <span class=\"tk-card-info-progress-label\">{{ element.label }}</span>\n                  }\n                  <tk-progress-bar [value]=\"element.value || 0\" size=\"small\"></tk-progress-bar>\n                </div>\n              }\n              @case ('tag') {\n                <tk-tag [value]=\"element.label || ''\" [severity]=\"element.severity || 'secondary'\"></tk-tag>\n              }\n              @case ('chip') {\n                <!-- Using tag for chips as per design system style -->\n                <tk-tag [value]=\"element.label || ''\" [severity]=\"element.severity || 'secondary'\"></tk-tag>\n              }\n              @case ('status-bar') {\n                <tk-status-bar \n                  [label]=\"element.label || ''\" \n                  [barLabel]=\"element.barLabel || ''\"\n                  [severity]=\"getStatusBarSeverity(element.severity)\">\n                </tk-status-bar>\n              }\n              @case ('button') {\n                <tk-button \n                  [label]=\"element.label\" \n                  [icon]=\"element.icon\" \n                  [severity]=\"getButtonSeverity(element.severity)\"\n                  size=\"small\"\n                  (clicked)=\"element.handler ? element.handler() : null\">\n                </tk-button>\n              }\n              @case ('icon') {\n                <tk-icon [icon]=\"element.icon || ''\"></tk-icon>\n              }\n              @case ('string') {\n                <span class=\"tk-card-info-text\">{{ element.label }}</span>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\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-card.mjs","sources":["../../../projects/design-system/components/card/src/card.component.ts","../../../projects/design-system/components/card/src/card.component.html","../../../projects/design-system/components/card/tekus-design-system-components-card.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, model } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { RouterLink } from '@angular/router';\nimport { MenuModule } from 'primeng/menu';\nimport { MenuItem } from 'primeng/api';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { CheckboxComponent } from '@tekus/design-system/components/checkbox';\nimport { IconComponent } from '@tekus/design-system/components/icon';\nimport { ProgressBarComponent } from '@tekus/design-system/components/progress-bar';\nimport { StatusBarComponent } from '@tekus/design-system/components/status-bar';\nimport { TagComponent } from '@tekus/design-system/components/tag';\nimport { TkCardAction, TkCardInfoElement, TkCardLayout } from './card.types';\nimport { DropdownComponent } from '@tekus/design-system/components/dropdown';\nimport { ActionGroupComponent, TkAction } from '@tekus/design-system/components/action-group';\nimport { TimeAgoComponent } from '@tekus/design-system/components/time-ago';\n\n/**\n * @component CardComponent\n * @description\n * Flexible card component used to display grouped content with multiple layout options.\n * Supports vertical and horizontal orientations, optional images, headers with selection,\n * and dynamic action buttons (with overflow menu support).\n *\n * It utilizes Angular 21 Signals for efficient state management and reactivity.\n *\n * @usage\n * ```html\n * <tk-card\n *   title=\"My Document\"\n *   description=\"Upload in progress...\"\n *   layout=\"horizontal\"\n *   [actions]=\"myActions\"\n *   [infoElements]=\"[{ type: 'progress-bar', value: 75 }]\">\n * </tk-card>\n * ```\n */\n@Component({\n  selector: 'tk-card',\n  standalone: true,\n  imports: [\n    CommonModule,\n    RouterLink,\n    MenuModule,\n    ButtonComponent,\n    CheckboxComponent,\n    IconComponent,\n    ProgressBarComponent,\n    StatusBarComponent,\n    TagComponent,\n    DropdownComponent,\n    ActionGroupComponent,\n    TimeAgoComponent\n  ],\n  templateUrl: './card.component.html',\n  styleUrl: './card.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardComponent {\n  /** The primary title of the card. Required. */\n  title = input.required<string>();\n\n  /** Optional link (routerLink or URL) for the title. */\n  titleLink = input<string | unknown[] | null | undefined>(undefined);\n\n  /** Optional external link (href) for the title. */\n  titleHref = input<string | null | undefined>(undefined);\n\n  /** Optional icon to display next to the title. */\n  titleIcon = input<string>();\n\n  /** Optional secondary description. */\n  description = input<string>();\n\n  /** Optional image URL or source. */\n  image = input<string>();\n\n  /** Whether to show the image section. If true and no URL is provided, a placeholder is shown. */\n  showImage = input<boolean>(true);\n\n  /** Layout orientation: 'vertical' (default) or 'horizontal'. */\n  layout = input<TkCardLayout>('vertical');\n\n  /** Whether the card shows a checkbox for selection. */\n  selectable = input<boolean>(false);\n\n  /** Two-way signal for the selection state. */\n  selected = model<boolean>(false);\n\n  /** Optional ID or primary badge text displayed in the header. */\n  badgeText = input<string>();\n\n  /** Optional secondary metadata text (e.g. file size) displayed next to the badge. */\n  secondaryBadgeText = input<string>();\n\n  /** Optional date/time value for connection status. */\n  connectionStatusDate = input<Date | string | number | null | undefined>();\n\n  /** Optional connection status severity: 'success' | 'warn' | 'danger' | 'gray'. */\n  connectionStatusSeverity = input<'success' | 'warn' | 'danger' | 'gray'>('success');\n\n  /** List of actions associated with the card. */\n  actions = input<TkCardAction[]>([]);\n\n  /** Action group list to be used with tk-action-group */\n  actionGroup = input<TkAction[]>([]);\n\n  /** Maximum number of actions to show as buttons before dropping into menu (used with actionGroup) */\n  actionGroupMaxVisible = input<number>(2);\n\n  /** Disables all actions in the action group globally (e.g. for read-only or permission gates) */\n  actionGroupDisabled = input<boolean>(false);\n\n  /** Dynamic list of informational elements (tags, progress bars, etc.). */\n  infoElements = input<TkCardInfoElement[]>([]);\n\n  /**\n   * Computed logic for handling actions.\n   * If there are > 3 actions, they are all moved to an overflow menu.\n   * Otherwise, they are displayed as individual buttons.\n   */\n  hasOverflowActions = computed(() => this.actions().length > 1);\n\n  /** Actions to be displayed directly as buttons. */\n  visibleActions = computed(() => this.actions().length === 1 ? [this.actions()[0]] : []);\n\n  /** \n   * Actions to be displayed in the overflow menu.\n   * Maps TkCardAction to PrimeNG MenuItem format.\n   */\n  menuItems = computed<MenuItem[]>(() => {\n    if (this.actions().length <= 1) return [];\n    return this.actions().map(action => ({\n      label: action.label,\n      icon: action.icon,\n      disabled: action.disabled,\n      command: () => action.handler()\n    }));\n  });\n\n  /**\n   * Maps card severity to button severity.\n   */\n  getButtonSeverity(severity?: string): 'primary' | 'secondary' | 'danger' {\n    if (severity === 'danger') return 'danger';\n    if (severity === 'secondary') return 'secondary';\n    return 'primary';\n  }\n\n  /**\n   * Maps card severity to status bar severity.\n   */\n  getStatusBarSeverity(severity?: string): 'primary' | 'secondary' | 'success' | 'error' {\n    if (severity === 'danger') return 'error';\n    if (severity === 'success') return 'success';\n    if (severity === 'secondary') return 'secondary';\n    return 'primary';\n  }\n}\n","<div \n  class=\"tk-card\" \n  [class.tk-card-horizontal]=\"layout() === 'horizontal'\"\n  [class.tk-card-selectable]=\"selectable()\"\n  [class.tk-card-selected]=\"selectable() && selected()\"\n  [class.tk-card-no-image]=\"!showImage()\"\n  [attr.aria-pressed]=\"selectable() ? selected() : null\">\n  \n  <!-- Header: Selection, Metadata, and Actions -->\n  @if (selectable() || badgeText() || secondaryBadgeText() || connectionStatusDate() || actions().length > 0 || actionGroup().length > 0) {\n    <div class=\"tk-card-header\">\n      <div class=\"tk-card-header-left\">\n        @if (selectable()) {\n          <div \n            class=\"tk-card-selection\" \n            tabindex=\"-1\">\n            <tk-checkbox [binary]=\"true\" [(model)]=\"selected\"></tk-checkbox>\n          </div>\n        }\n        @if (badgeText() || secondaryBadgeText() || connectionStatusDate()) {\n          <div class=\"tk-card-metadata\">\n            @if (badgeText()) {\n              <tk-tag [value]=\"badgeText()!\"></tk-tag>\n            }\n            @if (connectionStatusDate()) {\n              <tk-time-ago [dateTime]=\"connectionStatusDate()!\" [severity]=\"connectionStatusSeverity()\"></tk-time-ago>\n            }\n            @if (secondaryBadgeText()) {\n              <span class=\"tk-card-metadata-secondary\">{{ secondaryBadgeText() }}</span>\n            }\n          </div>\n        }\n      </div>\n\n      <div \n        class=\"tk-card-actions\" \n        tabindex=\"-1\">\n        <!-- Single Action -->\n        @for (action of visibleActions(); track action.id) {\n          <tk-button \n            [icon]=\"action.icon\" \n            [severity]=\"getButtonSeverity(action.severity)\"\n            variant=\"text\"\n            [disabled]=\"action.disabled || false\"\n            [tooltipText]=\"action.label\"\n            size=\"small\"\n            (clicked)=\"action.handler()\">\n          </tk-button>\n        }\n\n        <!-- Multiple Actions Dropdown -->\n        @if (hasOverflowActions()) {\n          <tk-dropdown [model]=\"menuItems()\" size=\"small\"></tk-dropdown>\n        }\n\n        <!-- Action Group -->\n        @if (actionGroup().length > 0) {\n          <tk-action-group\n            [actions]=\"actionGroup()\"\n            [maxVisible]=\"actionGroupMaxVisible()\"\n            [disabled]=\"actionGroupDisabled()\"\n          ></tk-action-group>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Image Section -->\n  @if (showImage()) {\n    <div class=\"tk-card-image-container\">\n      @if (image()) {\n        <div \n          class=\"tk-card-image\" \n          [style.background-image]=\"'url(' + image() + ')'\">\n        </div>\n      } @else {\n        <div class=\"tk-card-image-placeholder\">\n          <tk-icon icon=\"image\" size=\"lg\"></tk-icon>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Content Section -->\n  <div class=\"tk-card-content\">\n    <div class=\"tk-card-body\">\n      <h3 class=\"tk-card-title\" [class.tk-card-title--link]=\"titleLink() || titleHref()\">\n        @if (titleLink()) {\n          <a [routerLink]=\"titleLink()!\" class=\"tk-card-title-link\">\n            @if (titleIcon()) {\n              <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n            }\n            {{ title() }}\n          </a>\n        } @else if (titleHref()) {\n          <a [href]=\"titleHref()!\" class=\"tk-card-title-link\">\n            @if (titleIcon()) {\n              <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n            }\n            {{ title() }}\n          </a>\n        } @else {\n          @if (titleIcon()) {\n            <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n          }\n          {{ title() }}\n        }\n      </h3>\n      @if (description()) {\n        <p class=\"tk-card-description\">{{ description() }}</p>\n      }\n    </div>\n\n    @if (infoElements().length > 0) {\n      <div class=\"tk-card-info-elements\">\n        @for (element of infoElements(); track $index) {\n          <div class=\"tk-card-info-item\">\n            @switch (element.type) {\n              @case ('progress-bar') {\n                <div class=\"tk-card-info-progress\">\n                  @if (element.label) {\n                    <span class=\"tk-card-info-progress-label\">{{ element.label }}</span>\n                  }\n                  <tk-progress-bar [value]=\"element.value || 0\" size=\"small\"></tk-progress-bar>\n                </div>\n              }\n              @case ('tag') {\n                <tk-tag [value]=\"element.label || ''\" [severity]=\"element.severity || 'secondary'\"></tk-tag>\n              }\n              @case ('chip') {\n                <!-- Using tag for chips as per design system style -->\n                <tk-tag [value]=\"element.label || ''\" [severity]=\"element.severity || 'secondary'\"></tk-tag>\n              }\n              @case ('status-bar') {\n                <tk-status-bar \n                  [label]=\"element.label || ''\" \n                  [barLabel]=\"element.barLabel || ''\"\n                  [severity]=\"getStatusBarSeverity(element.severity)\">\n                </tk-status-bar>\n              }\n              @case ('button') {\n                <tk-button \n                  [label]=\"element.label\" \n                  [icon]=\"element.icon\" \n                  [severity]=\"getButtonSeverity(element.severity)\"\n                  size=\"small\"\n                  (clicked)=\"element.handler ? element.handler() : null\">\n                </tk-button>\n              }\n              @case ('icon') {\n                <tk-icon [icon]=\"element.icon || ''\"></tk-icon>\n              }\n              @case ('string') {\n                <span class=\"tk-card-info-text\">{{ element.label }}</span>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAgBA;;;;;;;;;;;;;;;;;;;AAmBG;MAsBU,aAAa,CAAA;AArB1B,IAAA,WAAA,GAAA;;AAuBE,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,2EAAU;;AAGhC,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAwC,SAAS,gFAAC;;AAGnE,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAA4B,SAAS,gFAAC;;QAGvD,IAAA,CAAA,SAAS,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;;QAG3B,IAAA,CAAA,WAAW,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,aAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;;QAG7B,IAAA,CAAA,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;;AAGvB,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAU,IAAI,gFAAC;;AAGhC,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK,CAAe,UAAU,6EAAC;;AAGxC,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAU,KAAK,iFAAC;;AAGlC,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;;QAGhC,IAAA,CAAA,SAAS,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;;QAG3B,IAAA,CAAA,kBAAkB,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,oBAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;;QAGpC,IAAA,CAAA,oBAAoB,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,sBAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAA6C;;AAGzE,QAAA,IAAA,CAAA,wBAAwB,GAAG,KAAK,CAAyC,SAAS,+FAAC;;AAGnF,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAiB,EAAE,8EAAC;;AAGnC,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAa,EAAE,kFAAC;;AAGnC,QAAA,IAAA,CAAA,qBAAqB,GAAG,KAAK,CAAS,CAAC,4FAAC;;AAGxC,QAAA,IAAA,CAAA,mBAAmB,GAAG,KAAK,CAAU,KAAK,0FAAC;;AAG3C,QAAA,IAAA,CAAA,YAAY,GAAG,KAAK,CAAsB,EAAE,mFAAC;AAE7C;;;;AAIG;AACH,QAAA,IAAA,CAAA,kBAAkB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,GAAG,CAAC,yFAAC;;AAG9D,QAAA,IAAA,CAAA,cAAc,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,qFAAC;AAEvF;;;AAGG;AACH,QAAA,IAAA,CAAA,SAAS,GAAG,QAAQ,CAAa,MAAK;AACpC,YAAA,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,IAAI,CAAC;AAAE,gBAAA,OAAO,EAAE;YACzC,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,MAAM,KAAK;gBACnC,KAAK,EAAE,MAAM,CAAC,KAAK;gBACnB,IAAI,EAAE,MAAM,CAAC,IAAI;gBACjB,QAAQ,EAAE,MAAM,CAAC,QAAQ;AACzB,gBAAA,OAAO,EAAE,MAAM,MAAM,CAAC,OAAO;AAC9B,aAAA,CAAC,CAAC;AACL,QAAA,CAAC,gFAAC;AAoBH,IAAA;AAlBC;;AAEG;AACH,IAAA,iBAAiB,CAAC,QAAiB,EAAA;QACjC,IAAI,QAAQ,KAAK,QAAQ;AAAE,YAAA,OAAO,QAAQ;QAC1C,IAAI,QAAQ,KAAK,WAAW;AAAE,YAAA,OAAO,WAAW;AAChD,QAAA,OAAO,SAAS;IAClB;AAEA;;AAEG;AACH,IAAA,oBAAoB,CAAC,QAAiB,EAAA;QACpC,IAAI,QAAQ,KAAK,QAAQ;AAAE,YAAA,OAAO,OAAO;QACzC,IAAI,QAAQ,KAAK,SAAS;AAAE,YAAA,OAAO,SAAS;QAC5C,IAAI,QAAQ,KAAK,WAAW;AAAE,YAAA,OAAO,WAAW;AAChD,QAAA,OAAO,SAAS;IAClB;+GAnGW,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAb,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,SAAA,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,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,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,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAAA,EAAA,oBAAA,EAAA,UAAA,EAAA,oBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,oBAAA,EAAA,EAAA,iBAAA,EAAA,sBAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,wBAAA,EAAA,EAAA,iBAAA,EAAA,0BAAA,EAAA,UAAA,EAAA,0BAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,qBAAA,EAAA,EAAA,iBAAA,EAAA,uBAAA,EAAA,UAAA,EAAA,uBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,mBAAA,EAAA,EAAA,iBAAA,EAAA,qBAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECzD1B,mxLAkKA,EAAA,MAAA,EAAA,CAAA,2wIAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,ED1HI,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACZ,UAAU,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,MAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACV,UAAU,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACV,eAAe,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,MAAA,EAAA,MAAA,EAAA,cAAA,EAAA,aAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACf,iBAAiB,qPACjB,aAAa,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,WAAA,EAAA,OAAA,EAAA,MAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACb,oBAAoB,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,WAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACpB,kBAAkB,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,MAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAClB,YAAY,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,iBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACZ,iBAAiB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,cAAA,EAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,iBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACjB,oBAAoB,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,YAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACpB,gBAAgB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,UAAA,EAAA,aAAA,EAAA,eAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAMP,aAAa,EAAA,UAAA,EAAA,CAAA;kBArBzB,SAAS;+BACE,SAAS,EAAA,UAAA,EACP,IAAI,EAAA,OAAA,EACP;wBACP,YAAY;wBACZ,UAAU;wBACV,UAAU;wBACV,eAAe;wBACf,iBAAiB;wBACjB,aAAa;wBACb,oBAAoB;wBACpB,kBAAkB;wBAClB,YAAY;wBACZ,iBAAiB;wBACjB,oBAAoB;wBACpB;qBACD,EAAA,eAAA,EAGgB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,mxLAAA,EAAA,MAAA,EAAA,CAAA,2wIAAA,CAAA,EAAA;;;AEvDjD;;AAEG;;;;"}

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

@@ -156,10 +156,10 @@ class CheckboxComponent {
         this.onTouched();
         this.effectiveControl.markAsTouched();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: CheckboxComponent, isStandalone: true, selector: "tk-checkbox", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, binary: { classPropertyName: "binary", publicName: "binary", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange", indeterminate: "indeterminateChange", disabled: "disabledChange" }, ngImport: i0, template: "<div class=\"tk-checkbox-wrapper\">\n  <div class=\"tk-checkbox-group\" [class.tk-disabled]=\"disabled()\">\n    <p-checkbox\n      [inputId]=\"inputId()\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [binary]=\"binary()\"\n      [disabled]=\"disabled()\"\n      [indeterminate]=\"indeterminate()\"\n      [ngModel]=\"model()\"\n      (ngModelChange)=\"onModelChange($event)\"\n      [class.ng-invalid]=\"effectiveControl.invalid\"\n      [class.ng-dirty]=\"effectiveControl.dirty\"\n      [class.ng-touched]=\"effectiveControl.touched\">\n    </p-checkbox>\n    @if (label()) {\n      <label [for]=\"inputId()\" class=\"tk-checkbox-label\"> {{ label() }} </label>\n    }\n  </div>\n  @if (\n    effectiveControl.invalid &&\n    (effectiveControl.dirty || effectiveControl.touched) &&\n    errorMessage()\n  ) {\n    <div class=\"tk-input-bottom\">\n      <div class=\"tk-input-messages\">\n        <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n          errorMessage()\n        }}</p-message>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host ::ng-deep .tk-checkbox-wrapper{display:flex;flex-direction:column}:host ::ng-deep .tk-checkbox-wrapper label{font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-400, \"Regular\")}:host ::ng-deep .tk-checkbox-group{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .tk-checkbox-group.tk-disabled label{color:var(--tk-color-base-surface-600, #424243)}:host ::ng-deep .tk-checkbox-label{margin-top:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep p-message[severity=secondary] .p-inline-message-text,:host ::ng-deep p-message[severity=secondary] span{color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .tk-input-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:.25rem;min-height:1.25rem}:host ::ng-deep .tk-input-messages{flex:1;margin-right:1rem}:host ::ng-deep .p-checkbox.p-disabled .p-checkbox-icon{color:var(--tk-color-base-surface-300, #d2d2d2)!important}:host ::ng-deep p-checkbox.ng-invalid.ng-touched .p-checkbox-box,:host ::ng-deep p-checkbox.ng-invalid.ng-dirty .p-checkbox-box{border-color:var(--tk-color-base-red-700, #cf2604)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i3.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CheckboxComponent, isStandalone: true, selector: "tk-checkbox", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, binary: { classPropertyName: "binary", publicName: "binary", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange", indeterminate: "indeterminateChange", disabled: "disabledChange" }, ngImport: i0, template: "<div class=\"tk-checkbox-wrapper\">\n  <div class=\"tk-checkbox-group\" [class.tk-disabled]=\"disabled()\">\n    <p-checkbox\n      [inputId]=\"inputId()\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [binary]=\"binary()\"\n      [disabled]=\"disabled()\"\n      [indeterminate]=\"indeterminate()\"\n      [ngModel]=\"model()\"\n      (ngModelChange)=\"onModelChange($event)\"\n      [class.ng-invalid]=\"effectiveControl.invalid\"\n      [class.ng-dirty]=\"effectiveControl.dirty\"\n      [class.ng-touched]=\"effectiveControl.touched\">\n    </p-checkbox>\n    @if (label()) {\n      <label [for]=\"inputId()\" class=\"tk-checkbox-label\"> {{ label() }} </label>\n    }\n  </div>\n  @if (\n    effectiveControl.invalid &&\n    (effectiveControl.dirty || effectiveControl.touched) &&\n    errorMessage()\n  ) {\n    <div class=\"tk-input-bottom\">\n      <div class=\"tk-input-messages\">\n        <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n          errorMessage()\n        }}</p-message>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host ::ng-deep .tk-checkbox-wrapper{display:flex;flex-direction:column}:host ::ng-deep .tk-checkbox-wrapper label{font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-400, \"Regular\")}:host ::ng-deep .tk-checkbox-group{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .tk-checkbox-group.tk-disabled label{color:var(--tk-color-base-surface-600, #424243)}:host ::ng-deep .tk-checkbox-label{margin-top:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep p-message[severity=secondary] .p-inline-message-text,:host ::ng-deep p-message[severity=secondary] span{color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .tk-input-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:.25rem;min-height:1.25rem}:host ::ng-deep .tk-input-messages{flex:1;margin-right:1rem}:host ::ng-deep .p-checkbox.p-disabled .p-checkbox-icon{color:var(--tk-color-base-surface-300, #d2d2d2)!important}:host ::ng-deep p-checkbox.ng-invalid.ng-touched .p-checkbox-box,:host ::ng-deep p-checkbox.ng-invalid.ng-dirty .p-checkbox-box{border-color:var(--tk-color-base-red-700, #cf2604)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i3.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: CheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tk-checkbox', imports: [
                         ReactiveFormsModule,

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

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-checkbox.mjs","sources":["../../../projects/design-system/components/checkbox/src/checkbox.component.ts","../../../projects/design-system/components/checkbox/src/checkbox.component.html","../../../projects/design-system/components/checkbox/tekus-design-system-components-checkbox.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  input,\n  model,\n  OnInit,\n  inject,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n  ControlValueAccessor,\n  FormControl,\n  ReactiveFormsModule,\n  NgControl,\n  FormsModule,\n} from '@angular/forms';\nimport { CheckboxModule } from 'primeng/checkbox';\nimport { MessageModule } from 'primeng/message';\n\n@Component({\n  selector: 'tk-checkbox',\n  imports: [\n    ReactiveFormsModule,\n    FormsModule,\n    CheckboxModule,\n    MessageModule,\n  ],\n  templateUrl: './checkbox.component.html',\n  styleUrl: './checkbox.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CheckboxComponent\n  implements ControlValueAccessor, OnInit\n{\n  readonly ngControl = inject(NgControl, { self: true, optional: true });\n  private readonly destroyRef = inject(DestroyRef);\n\n  constructor() {\n    if (this.ngControl) {\n      this.ngControl.valueAccessor = this;\n    }\n  }\n\n  /** Properties and Signals */\n\n  /**\n   * @property {ModelSignal<any>} model\n   * @description\n   * The value of the checkbox model (checked state or array of values).\n   * Supports two-way binding via signals.\n   */\n  model = model<unknown>();\n\n  /**\n   * @property {InputSignal<any>} value\n   * @description\n   * The value of the checkbox itself (used when part of a group).\n   */\n  value = input<unknown>();\n\n  /**\n   * @property {InputSignal<string>} label\n   * @description\n   * Label displayed next to the checkbox.\n   */\n  label = input<string>('');\n\n  /**\n   * @property {InputSignal<string>} name\n   * @description\n   * Name attribute for the checkbox.\n   */\n  name = input<string>('');\n\n  /**\n   * @property {InputSignal<string>} inputId\n   * @description\n   * HTML id attribute for the checkbox input.\n   */\n  inputId = input<string>('');\n\n  /**\n   * @property {InputSignal<boolean>} binary\n   * @description\n   * Boolean property to indicate if the checkbox is a binary toggle.\n   * @default false\n   */\n  binary = input<boolean>(false);\n\n  /**\n   * @property {InputSignal<FormControl>} control\n   * @description\n   * External FormControl used to read/set the checkbox value.\n   * If not provided, an internal FormControl is created.\n   */\n  control = input<FormControl>(new FormControl());\n\n  /**\n   * @property {InputSignal<string>} errorMessage\n   * @description\n   * Message to display when the control is invalid and touched.\n   */\n  errorMessage = input<string>('');\n\n  /**\n   * @property {ModelSignal<boolean>} indeterminate\n   * @description\n   * Indeterminate state of the checkbox (reactive).\n   * Useful for parent checkboxes in lists with partial selection.\n   */\n  indeterminate = model<boolean>(false);\n\n  /**\n   * @property {boolean} disabled\n   * @description\n   * Whether the checkbox is disabled.\n   */\n  disabled = model<boolean>(false);\n\n  /** Component Methods */\n\n  get effectiveControl(): FormControl {\n    return (this.ngControl?.control as FormControl) || this.control();\n  }\n\n  onChange: (value: unknown) => void = () => {};\n  onTouched: () => void = () => {};\n\n  ngOnInit(): void {\n    const control = this.effectiveControl;\n\n    if (control.value !== undefined && control.value !== null) {\n      this.model.set(control.value);\n    }\n\n    if (this.control() === control && this.disabled()) {\n      control.disable({ emitEvent: false });\n    } else {\n      this.disabled.set(control.disabled);\n    }\n\n    control.statusChanges\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(() => {\n        this.disabled.set(control.disabled);\n      });\n\n    control.valueChanges\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(value => {\n        this.model.set(value);\n      });\n  }\n\n  /**\n   * Implementation of ControlValueAccessor: Writes a new value from the form.\n   */\n  writeValue(value: unknown): void {\n    this.model.set(value);\n  }\n\n  /**\n   * Implementation of ControlValueAccessor: Registers a callback for change events.\n   */\n  registerOnChange(fn: (value: unknown) => void): void {\n    this.onChange = fn;\n  }\n\n  /**\n   * Implementation of ControlValueAccessor: Registers a callback for touched events.\n   */\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  /**\n   * Implementation of ControlValueAccessor: Sets the disabled state.\n   */\n  setDisabledState?(isDisabled: boolean): void {\n    this.disabled.set(isDisabled);\n    if (isDisabled) {\n      this.control().disable({ emitEvent: false });\n    } else {\n      this.control().enable({ emitEvent: false });\n    }\n  }\n\n  /**\n   * Handle model change events from the template.\n   */\n  onModelChange(value: unknown): void {\n    this.model.set(value);\n    this.onChange(value);\n    this.effectiveControl.setValue(value, { emitEvent: false });\n    this.effectiveControl.markAsDirty();\n    this.onTouched();\n  }\n\n  /**\n   * Handle blur events to trigger onTouched.\n   */\n  onBlur(): void {\n    this.onTouched();\n    this.effectiveControl.markAsTouched();\n  }\n}\n","<div class=\"tk-checkbox-wrapper\">\n  <div class=\"tk-checkbox-group\" [class.tk-disabled]=\"disabled()\">\n    <p-checkbox\n      [inputId]=\"inputId()\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [binary]=\"binary()\"\n      [disabled]=\"disabled()\"\n      [indeterminate]=\"indeterminate()\"\n      [ngModel]=\"model()\"\n      (ngModelChange)=\"onModelChange($event)\"\n      [class.ng-invalid]=\"effectiveControl.invalid\"\n      [class.ng-dirty]=\"effectiveControl.dirty\"\n      [class.ng-touched]=\"effectiveControl.touched\">\n    </p-checkbox>\n    @if (label()) {\n      <label [for]=\"inputId()\" class=\"tk-checkbox-label\"> {{ label() }} </label>\n    }\n  </div>\n  @if (\n    effectiveControl.invalid &&\n    (effectiveControl.dirty || effectiveControl.touched) &&\n    errorMessage()\n  ) {\n    <div class=\"tk-input-bottom\">\n      <div class=\"tk-input-messages\">\n        <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n          errorMessage()\n        }}</p-message>\n      </div>\n    </div>\n  }\n</div>\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-checkbox.mjs","sources":["../../../projects/design-system/components/checkbox/src/checkbox.component.ts","../../../projects/design-system/components/checkbox/src/checkbox.component.html","../../../projects/design-system/components/checkbox/tekus-design-system-components-checkbox.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  input,\n  model,\n  OnInit,\n  inject,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n  ControlValueAccessor,\n  FormControl,\n  ReactiveFormsModule,\n  NgControl,\n  FormsModule,\n} from '@angular/forms';\nimport { CheckboxModule } from 'primeng/checkbox';\nimport { MessageModule } from 'primeng/message';\n\n@Component({\n  selector: 'tk-checkbox',\n  imports: [\n    ReactiveFormsModule,\n    FormsModule,\n    CheckboxModule,\n    MessageModule,\n  ],\n  templateUrl: './checkbox.component.html',\n  styleUrl: './checkbox.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CheckboxComponent\n  implements ControlValueAccessor, OnInit\n{\n  readonly ngControl = inject(NgControl, { self: true, optional: true });\n  private readonly destroyRef = inject(DestroyRef);\n\n  constructor() {\n    if (this.ngControl) {\n      this.ngControl.valueAccessor = this;\n    }\n  }\n\n  /** Properties and Signals */\n\n  /**\n   * @property {ModelSignal<any>} model\n   * @description\n   * The value of the checkbox model (checked state or array of values).\n   * Supports two-way binding via signals.\n   */\n  model = model<unknown>();\n\n  /**\n   * @property {InputSignal<any>} value\n   * @description\n   * The value of the checkbox itself (used when part of a group).\n   */\n  value = input<unknown>();\n\n  /**\n   * @property {InputSignal<string>} label\n   * @description\n   * Label displayed next to the checkbox.\n   */\n  label = input<string>('');\n\n  /**\n   * @property {InputSignal<string>} name\n   * @description\n   * Name attribute for the checkbox.\n   */\n  name = input<string>('');\n\n  /**\n   * @property {InputSignal<string>} inputId\n   * @description\n   * HTML id attribute for the checkbox input.\n   */\n  inputId = input<string>('');\n\n  /**\n   * @property {InputSignal<boolean>} binary\n   * @description\n   * Boolean property to indicate if the checkbox is a binary toggle.\n   * @default false\n   */\n  binary = input<boolean>(false);\n\n  /**\n   * @property {InputSignal<FormControl>} control\n   * @description\n   * External FormControl used to read/set the checkbox value.\n   * If not provided, an internal FormControl is created.\n   */\n  control = input<FormControl>(new FormControl());\n\n  /**\n   * @property {InputSignal<string>} errorMessage\n   * @description\n   * Message to display when the control is invalid and touched.\n   */\n  errorMessage = input<string>('');\n\n  /**\n   * @property {ModelSignal<boolean>} indeterminate\n   * @description\n   * Indeterminate state of the checkbox (reactive).\n   * Useful for parent checkboxes in lists with partial selection.\n   */\n  indeterminate = model<boolean>(false);\n\n  /**\n   * @property {boolean} disabled\n   * @description\n   * Whether the checkbox is disabled.\n   */\n  disabled = model<boolean>(false);\n\n  /** Component Methods */\n\n  get effectiveControl(): FormControl {\n    return (this.ngControl?.control as FormControl) || this.control();\n  }\n\n  onChange: (value: unknown) => void = () => {};\n  onTouched: () => void = () => {};\n\n  ngOnInit(): void {\n    const control = this.effectiveControl;\n\n    if (control.value !== undefined && control.value !== null) {\n      this.model.set(control.value);\n    }\n\n    if (this.control() === control && this.disabled()) {\n      control.disable({ emitEvent: false });\n    } else {\n      this.disabled.set(control.disabled);\n    }\n\n    control.statusChanges\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(() => {\n        this.disabled.set(control.disabled);\n      });\n\n    control.valueChanges\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(value => {\n        this.model.set(value);\n      });\n  }\n\n  /**\n   * Implementation of ControlValueAccessor: Writes a new value from the form.\n   */\n  writeValue(value: unknown): void {\n    this.model.set(value);\n  }\n\n  /**\n   * Implementation of ControlValueAccessor: Registers a callback for change events.\n   */\n  registerOnChange(fn: (value: unknown) => void): void {\n    this.onChange = fn;\n  }\n\n  /**\n   * Implementation of ControlValueAccessor: Registers a callback for touched events.\n   */\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  /**\n   * Implementation of ControlValueAccessor: Sets the disabled state.\n   */\n  setDisabledState?(isDisabled: boolean): void {\n    this.disabled.set(isDisabled);\n    if (isDisabled) {\n      this.control().disable({ emitEvent: false });\n    } else {\n      this.control().enable({ emitEvent: false });\n    }\n  }\n\n  /**\n   * Handle model change events from the template.\n   */\n  onModelChange(value: unknown): void {\n    this.model.set(value);\n    this.onChange(value);\n    this.effectiveControl.setValue(value, { emitEvent: false });\n    this.effectiveControl.markAsDirty();\n    this.onTouched();\n  }\n\n  /**\n   * Handle blur events to trigger onTouched.\n   */\n  onBlur(): void {\n    this.onTouched();\n    this.effectiveControl.markAsTouched();\n  }\n}\n","<div class=\"tk-checkbox-wrapper\">\n  <div class=\"tk-checkbox-group\" [class.tk-disabled]=\"disabled()\">\n    <p-checkbox\n      [inputId]=\"inputId()\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [binary]=\"binary()\"\n      [disabled]=\"disabled()\"\n      [indeterminate]=\"indeterminate()\"\n      [ngModel]=\"model()\"\n      (ngModelChange)=\"onModelChange($event)\"\n      [class.ng-invalid]=\"effectiveControl.invalid\"\n      [class.ng-dirty]=\"effectiveControl.dirty\"\n      [class.ng-touched]=\"effectiveControl.touched\">\n    </p-checkbox>\n    @if (label()) {\n      <label [for]=\"inputId()\" class=\"tk-checkbox-label\"> {{ label() }} </label>\n    }\n  </div>\n  @if (\n    effectiveControl.invalid &&\n    (effectiveControl.dirty || effectiveControl.touched) &&\n    errorMessage()\n  ) {\n    <div class=\"tk-input-bottom\">\n      <div class=\"tk-input-messages\">\n        <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n          errorMessage()\n        }}</p-message>\n      </div>\n    </div>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,51 @@
+import * as i0 from '@angular/core';
+import { input, output, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from 'primeng/chip';
+import { ChipModule } from 'primeng/chip';
+import { IconComponent } from '@tekus/design-system/components/icon';
+
+/**
+ * @component ChipComponent
+ * @description
+ * A component used to display compact elements like labels, filters, or attributes.
+ * It wraps PrimeNG's `p-chip` component with custom styling and behavior.
+ *
+ * This component supports:
+ * - `label`: The text to display.
+ * - `icon`: Optional icon before the text.
+ * - `image`: Optional avatar image.
+ * - `removable`: Displays a close button that triggers the `removed` output.
+ *
+ * @usage
+ * ### Basic Usage
+ * ```html
+ * <tk-chip label="Design"></tk-chip>
+ * ```
+ */
+class ChipComponent {
+    constructor() {
+        /** The text label to display on the chip. */
+        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+        /** Icon class to display before the label. */
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+        /** Whether the chip is removable. If true, displays a close icon. */
+        this.removable = input(true, ...(ngDevMode ? [{ debugName: "removable" }] : /* istanbul ignore next */ []));
+        /** Custom icon class for the close button. */
+        this.removeIcon = input(...(ngDevMode ? [undefined, { debugName: "removeIcon" }] : /* istanbul ignore next */ []));
+        /** Event emitted when the close/remove button is clicked. */
+        this.removed = output();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ChipComponent, isStandalone: true, selector: "tk-chip", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, removeIcon: { classPropertyName: "removeIcon", publicName: "removeIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, ngImport: i0, template: "<p-chip\n  [removable]=\"removable()\"\n  [removeIcon]=\"removeIcon()\"\n  styleClass=\"tk-chip\"\n  (onRemove)=\"removed.emit($event)\">\n  @if (icon()) {\n    <tk-icon [icon]=\"icon()!\" class=\"p-chip-icon\"></tk-icon>\n  }\n  @if (label()) {\n    <span class=\"p-chip-label\">{{ label() }}</span>\n  }\n  <ng-template #removeicon>\n    <tk-icon icon=\"circle-xmark\" styleIcon=\"solid\" class=\"tk-chip-remove-icon\"></tk-icon>\n  </ng-template>\n</p-chip>\n", styles: [":host ::ng-deep .p-chip.p-component.tk-chip{background:var(--tk-color-background-soft, #f2f1f1);border:none;border-radius:var(--tk-borderRadius-full, 62.4375rem);padding:var(--tk-spacing-padding-xs, .25rem) var(--tk-spacing-padding-s, .5rem);display:inline-flex;align-items:center;gap:var(--tk-spacing-gap-xs, .25rem);min-height:var(--tk-size-base-200, 2rem);box-sizing:border-box}:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-label{font-family:inherit;font-size:var(--tk-font-size-paragraph-m, 1rem);color:var(--tk-color-base-surface-700, #424243);font-weight:var(--tk-font-weight-400, 400);margin:0;padding:var(--tk-spacing-padding-none, 0) var(--tk-spacing-padding-xs, .25rem)}:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-icon{color:var(--tk-color-base-surface-700, #424243);font-size:var(--tk-font-size-paragraph-s, .875rem);margin-right:0}:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon{position:relative;background-color:transparent;color:var(--tk-color-base-surface-700, #424243);border-radius:var(--tk-borderRadius-full, 50%);width:var(--tk-font-size-base-113, 1.125rem);height:var(--tk-font-size-base-113, 1.125rem);font-size:var(--tk-font-size-base-113, 1.125rem);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .2s ease,transform .2s ease;margin:0;outline:none;box-shadow:none;border:none}:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon:before{content:\"\";position:absolute;width:var(--tk-spacing-base-50, .5rem);height:var(--tk-spacing-base-50, .5rem);background-color:#fff;border-radius:var(--tk-borderRadius-full, 50%);z-index:0}:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon tk-icon,:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon .tk-chip-remove-icon{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:var(--tk-font-size-base-113, 1.125rem);height:var(--tk-font-size-base-113, 1.125rem);font-size:var(--tk-font-size-base-113, 1.125rem);line-height:1}:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon tk-icon div,:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon tk-icon fa-icon,:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon tk-icon svg,:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon .tk-chip-remove-icon div,:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon .tk-chip-remove-icon fa-icon,:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon .tk-chip-remove-icon svg{display:flex;align-items:center;justify-content:center;width:var(--tk-font-size-base-113, 1.125rem);height:var(--tk-font-size-base-113, 1.125rem)}:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon:hover{color:var(--tk-color-base-surface-900, #222324);transform:scale(1.05)}:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon:focus,:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon:focus-visible,:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon:active{outline:none;box-shadow:none;border:none}\n"], dependencies: [{ kind: "ngmodule", type: ChipModule }, { kind: "component", type: i1.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ChipComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-chip', imports: [ChipModule, IconComponent], template: "<p-chip\n  [removable]=\"removable()\"\n  [removeIcon]=\"removeIcon()\"\n  styleClass=\"tk-chip\"\n  (onRemove)=\"removed.emit($event)\">\n  @if (icon()) {\n    <tk-icon [icon]=\"icon()!\" class=\"p-chip-icon\"></tk-icon>\n  }\n  @if (label()) {\n    <span class=\"p-chip-label\">{{ label() }}</span>\n  }\n  <ng-template #removeicon>\n    <tk-icon icon=\"circle-xmark\" styleIcon=\"solid\" class=\"tk-chip-remove-icon\"></tk-icon>\n  </ng-template>\n</p-chip>\n", styles: [":host ::ng-deep .p-chip.p-component.tk-chip{background:var(--tk-color-background-soft, #f2f1f1);border:none;border-radius:var(--tk-borderRadius-full, 62.4375rem);padding:var(--tk-spacing-padding-xs, .25rem) var(--tk-spacing-padding-s, .5rem);display:inline-flex;align-items:center;gap:var(--tk-spacing-gap-xs, .25rem);min-height:var(--tk-size-base-200, 2rem);box-sizing:border-box}:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-label{font-family:inherit;font-size:var(--tk-font-size-paragraph-m, 1rem);color:var(--tk-color-base-surface-700, #424243);font-weight:var(--tk-font-weight-400, 400);margin:0;padding:var(--tk-spacing-padding-none, 0) var(--tk-spacing-padding-xs, .25rem)}:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-icon{color:var(--tk-color-base-surface-700, #424243);font-size:var(--tk-font-size-paragraph-s, .875rem);margin-right:0}:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon{position:relative;background-color:transparent;color:var(--tk-color-base-surface-700, #424243);border-radius:var(--tk-borderRadius-full, 50%);width:var(--tk-font-size-base-113, 1.125rem);height:var(--tk-font-size-base-113, 1.125rem);font-size:var(--tk-font-size-base-113, 1.125rem);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .2s ease,transform .2s ease;margin:0;outline:none;box-shadow:none;border:none}:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon:before{content:\"\";position:absolute;width:var(--tk-spacing-base-50, .5rem);height:var(--tk-spacing-base-50, .5rem);background-color:#fff;border-radius:var(--tk-borderRadius-full, 50%);z-index:0}:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon tk-icon,:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon .tk-chip-remove-icon{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:var(--tk-font-size-base-113, 1.125rem);height:var(--tk-font-size-base-113, 1.125rem);font-size:var(--tk-font-size-base-113, 1.125rem);line-height:1}:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon tk-icon div,:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon tk-icon fa-icon,:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon tk-icon svg,:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon .tk-chip-remove-icon div,:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon .tk-chip-remove-icon fa-icon,:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon .tk-chip-remove-icon svg{display:flex;align-items:center;justify-content:center;width:var(--tk-font-size-base-113, 1.125rem);height:var(--tk-font-size-base-113, 1.125rem)}:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon:hover{color:var(--tk-color-base-surface-900, #222324);transform:scale(1.05)}:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon:focus,:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon:focus-visible,:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon:active{outline:none;box-shadow:none;border:none}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], removeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeIcon", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ChipComponent };
+//# sourceMappingURL=tekus-design-system-components-chip.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tekus-design-system-components-chip.mjs","sources":["../../../projects/design-system/components/chip/src/chip.component.ts","../../../projects/design-system/components/chip/src/chip.component.html","../../../projects/design-system/components/chip/tekus-design-system-components-chip.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';\nimport { ChipModule } from 'primeng/chip';\nimport { IconComponent } from '@tekus/design-system/components/icon';\n\n/**\n * @component ChipComponent\n * @description\n * A component used to display compact elements like labels, filters, or attributes.\n * It wraps PrimeNG's `p-chip` component with custom styling and behavior.\n *\n * This component supports:\n * - `label`: The text to display.\n * - `icon`: Optional icon before the text.\n * - `image`: Optional avatar image.\n * - `removable`: Displays a close button that triggers the `removed` output.\n *\n * @usage\n * ### Basic Usage\n * ```html\n * <tk-chip label=\"Design\"></tk-chip>\n * ```\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  selector: 'tk-chip',\n  imports: [ChipModule, IconComponent],\n  templateUrl: './chip.component.html',\n  styleUrl: './chip.component.scss',\n})\nexport class ChipComponent {\n  /** The text label to display on the chip. */\n  label = input<string | undefined>();\n\n  /** Icon class to display before the label. */\n  icon = input<string | undefined>();\n\n  /** Whether the chip is removable. If true, displays a close icon. */\n  removable = input<boolean>(true);\n\n  /** Custom icon class for the close button. */\n  removeIcon = input<string | undefined>();\n\n  /** Event emitted when the close/remove button is clicked. */\n  removed = output<Event>();\n}\n","<p-chip\n  [removable]=\"removable()\"\n  [removeIcon]=\"removeIcon()\"\n  styleClass=\"tk-chip\"\n  (onRemove)=\"removed.emit($event)\">\n  @if (icon()) {\n    <tk-icon [icon]=\"icon()!\" class=\"p-chip-icon\"></tk-icon>\n  }\n  @if (label()) {\n    <span class=\"p-chip-label\">{{ label() }}</span>\n  }\n  <ng-template #removeicon>\n    <tk-icon icon=\"circle-xmark\" styleIcon=\"solid\" class=\"tk-chip-remove-icon\"></tk-icon>\n  </ng-template>\n</p-chip>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;AAIA;;;;;;;;;;;;;;;;;AAiBG;MAQU,aAAa,CAAA;AAP1B,IAAA,WAAA,GAAA;;QASE,IAAA,CAAA,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAsB;;QAGnC,IAAA,CAAA,IAAI,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAsB;;AAGlC,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAU,IAAI,gFAAC;;QAGhC,IAAA,CAAA,UAAU,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,YAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAsB;;QAGxC,IAAA,CAAA,OAAO,GAAG,MAAM,EAAS;AAC1B,IAAA;+GAfY,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAb,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC7B1B,gdAeA,EAAA,MAAA,EAAA,CAAA,mgGAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDUY,UAAU,6OAAE,aAAa,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,WAAA,EAAA,OAAA,EAAA,MAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAIxB,aAAa,EAAA,UAAA,EAAA,CAAA;kBAPzB,SAAS;sCACS,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,SAAS,WACV,CAAC,UAAU,EAAE,aAAa,CAAC,EAAA,QAAA,EAAA,gdAAA,EAAA,MAAA,EAAA,CAAA,mgGAAA,CAAA,EAAA;;;AEzBtC;;AAEG;;;;"}

package/fesm2022/tekus-design-system-components-color-picker.mjs

@@ -95,8 +95,8 @@ class ColorPickerSpectrumComponent {
         document.removeEventListener('pointermove', this.onDragMove);
         document.removeEventListener('pointerup', this.onDragEnd);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ColorPickerSpectrumComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.3", type: ColorPickerSpectrumComponent, isStandalone: true, selector: "tk-color-picker-spectrum", inputs: { hue: { classPropertyName: "hue", publicName: "hue", isSignal: true, isRequired: false, transformFunction: null }, saturation: { classPropertyName: "saturation", publicName: "saturation", isSignal: true, isRequired: false, transformFunction: null }, brightness: { classPropertyName: "brightness", publicName: "brightness", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ColorPickerSpectrumComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: ColorPickerSpectrumComponent, isStandalone: true, selector: "tk-color-picker-spectrum", inputs: { hue: { classPropertyName: "hue", publicName: "hue", isSignal: true, isRequired: false, transformFunction: null }, saturation: { classPropertyName: "saturation", publicName: "saturation", isSignal: true, isRequired: false, transformFunction: null }, brightness: { classPropertyName: "brightness", publicName: "brightness", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, ngImport: i0, template: `
     <div
       class="tk-color-picker-spectrum__area"
       role="slider"
@@ -119,7 +119,7 @@ class ColorPickerSpectrumComponent {
     </div>
   `, isInline: true, styles: [":host{display:block}.tk-color-picker-spectrum__area{width:100%;height:6.5rem;border-radius:var(--tk-borderRadius-s, .25rem);position:relative;overflow:hidden;cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;outline:none}.tk-color-picker-spectrum__area:before{content:\"\";position:absolute;inset:0;background:linear-gradient(to right,#fff,transparent)}.tk-color-picker-spectrum__area:after{content:\"\";position:absolute;inset:0;background:linear-gradient(to bottom,transparent,#000)}.tk-color-picker-spectrum__area:focus-visible{box-shadow:inset 0 0 0 2px var(--tk-color-border-focus, #16006f)}.tk-color-picker-spectrum__cursor{position:absolute;width:.875rem;height:.875rem;border-radius:var(--tk-borderRadius-full, 50%);border:2px solid var(--tk-color-background-default, #ffffff);box-shadow:0 0 0 1px var(--tk-color-border-strong, #424243);transform:translate(-50%,-50%);pointer-events:none;z-index:2}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ColorPickerSpectrumComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ColorPickerSpectrumComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tk-color-picker-spectrum', template: `
     <div
@@ -167,8 +167,8 @@ class ColorPickerSwatchGridComponent {
     isSelected(color) {
         return color.toLowerCase() === this.selected().toLowerCase();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ColorPickerSwatchGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: ColorPickerSwatchGridComponent, isStandalone: true, selector: "tk-color-picker-swatch-grid", inputs: { colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { picked: "picked" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ColorPickerSwatchGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ColorPickerSwatchGridComponent, isStandalone: true, selector: "tk-color-picker-swatch-grid", inputs: { colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { picked: "picked" }, ngImport: i0, template: `
     <div class="tk-color-picker-swatch-grid__grid" role="group" [attr.aria-label]="ariaLabel()">
       @for (color of colors(); track color) {
         <button
@@ -186,7 +186,7 @@ class ColorPickerSwatchGridComponent {
     </div>
   `, isInline: true, styles: [":host{display:block}.tk-color-picker-swatch-grid__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(1.25rem,1fr));gap:var(--tk-spacing-gap-xs, .25rem)}.tk-color-picker-swatch-grid__swatch{appearance:none;padding:0;width:100%;aspect-ratio:1;border:1px solid var(--tk-color-border-subtle, #e4e4e4);border-radius:var(--tk-borderRadius-xs, .125rem);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}.tk-color-picker-swatch-grid__swatch:hover{transform:scale(1.12)}.tk-color-picker-swatch-grid__swatch:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:1px}.tk-color-picker-swatch-grid__swatch--selected{box-shadow:0 0 0 2px var(--tk-color-background-default, #ffffff),0 0 0 4px var(--tk-color-accent-default, #6ad0bc)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ColorPickerSwatchGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ColorPickerSwatchGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tk-color-picker-swatch-grid', template: `
     <div class="tk-color-picker-swatch-grid__grid" role="group" [attr.aria-label]="ariaLabel()">
@@ -1002,10 +1002,10 @@ class ColorPickerComponent {
             .padStart(2, '0');
         return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: ColorPickerComponent, isStandalone: true, selector: "tk-color-picker", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, presetColors: { classPropertyName: "presetColors", publicName: "presetColors", isSignal: true, isRequired: false, transformFunction: null }, contrastColor: { classPropertyName: "contrastColor", publicName: "contrastColor", isSignal: true, isRequired: false, transformFunction: null }, maxCustomColors: { classPropertyName: "maxCustomColors", publicName: "maxCustomColors", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, texts: { classPropertyName: "texts", publicName: "texts", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, customColors: { classPropertyName: "customColors", publicName: "customColors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", customColors: "customColorsChange", colorChange: "colorChange", textColorChange: "textColorChange", validChange: "validChange", opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["op"], descendants: true, isSignal: true }, { propertyName: "swatchBtnRef", first: true, predicate: ["swatchBtn"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "inputTriggerRef", first: true, predicate: ["inputTrigger"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "panelHexInput", first: true, predicate: ["panelHexInput"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div\n  class=\"tk-color-picker\"\n  [class.tk-color-picker--disabled]=\"isDisabled()\"\n  [class.tk-color-picker--open]=\"isOpen()\"\n  [class.tk-color-picker--invalid]=\"!isValid()\">\n  @if (variant() === 'swatch') {\n    @if (label()) {\n      <span class=\"tk-color-picker__label\">{{ label() }}</span>\n    }\n    <button\n      #swatchBtn\n      type=\"button\"\n      class=\"tk-color-picker__trigger tk-color-picker__trigger--swatch\"\n      [disabled]=\"isDisabled()\"\n      aria-haspopup=\"dialog\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-label]=\"t().openPickerLabel + (label() ? ': ' + label() : '')\"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"onTriggerClick($event)\">\n      <span\n        class=\"tk-color-picker__swatch\"\n        [class.tk-color-picker__swatch--fallback]=\"!swatchColor()\"\n        [style.background-color]=\"swatchColor()\"\n        aria-hidden=\"true\"></span>\n      <tk-icon\n        class=\"tk-color-picker__chevron\"\n        [class.tk-color-picker__chevron--open]=\"isOpen()\"\n        icon=\"chevron-down\"\n        styleIcon=\"regular\"\n        size=\"xs\"></tk-icon>\n    </button>\n  } @else {\n    <div\n      #inputTrigger\n      class=\"tk-color-picker__trigger-input\"\n      [class.tk-color-picker__trigger-input--invalid]=\"!isValid()\">\n      @if (label()) {\n        <label\n          class=\"tk-color-picker__input-label\"\n          [for]=\"fieldId\"\n          [title]=\"label()\"\n          >{{ label() }}</label\n        >\n      }\n      <div class=\"tk-color-picker__input-wrap\">\n        <button\n          type=\"button\"\n          class=\"tk-color-picker__input-swatch\"\n          [class.tk-color-picker__input-swatch--fallback]=\"!swatchColor()\"\n          [style.background-color]=\"swatchColor() ?? null\"\n          [disabled]=\"isDisabled()\"\n          [attr.aria-label]=\"t().openPickerLabel\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"onTriggerClick($event)\"></button>\n        <span class=\"tk-color-picker__input-prefix\" aria-hidden=\"true\">#</span>\n        <input\n          pInputText\n          [id]=\"fieldId\"\n          [value]=\"displayHexNoHash()\"\n          [disabled]=\"isDisabled()\"\n          [class.ng-invalid]=\"triggerControl.invalid\"\n          [class.ng-dirty]=\"triggerControl.dirty\"\n          [class.ng-touched]=\"triggerControl.touched\"\n          [attr.aria-describedby]=\"!isValid() ? errorId : null\"\n          [attr.aria-invalid]=\"!isValid()\"\n          autocomplete=\"off\"\n          (input)=\"onHexNativeInput($event)\"\n          (keydown)=\"onHexKeydown($event)\"\n          (paste)=\"onHexPaste($event)\"\n          (blur)=\"onHexBlur()\" />\n      </div>\n      <div class=\"tk-color-picker__input-bottom\">\n        @if (!isValid()) {\n          <p-message\n            severity=\"error\"\n            size=\"small\"\n            variant=\"simple\"\n            [id]=\"errorId\"\n            >{{ errorText() }}</p-message\n          >\n        } @else if (hint()) {\n          <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{\n            hint()\n          }}</p-message>\n        }\n      </div>\n    </div>\n  }\n\n  @if (variant() === 'swatch') {\n    @if (!isValid()) {\n      <span\n        [id]=\"errorId\"\n        class=\"tk-color-picker__error\"\n        role=\"alert\"\n        aria-live=\"polite\">\n        {{ errorText() }}\n      </span>\n    } @else if (hint()) {\n      <span class=\"tk-color-picker__hint\">{{ hint() }}</span>\n    }\n  }\n</div>\n\n<p-popover\n  #op\n  [styleClass]=\"\n    'tk-color-picker-popover' +\n    (variant() === 'input' ? ' tk-color-picker-popover--input' : '')\n  \"\n  position=\"bottom\"\n  appendTo=\"body\"\n  (onShow)=\"onPopoverShow()\"\n  (onHide)=\"onPopoverHide()\">\n  <div\n    class=\"tk-color-picker__panel\"\n    role=\"group\"\n    [attr.aria-label]=\"t().dialogLabel\"\n    tabindex=\"-1\"\n    autofocus\n    (keydown.enter)=\"onPanelEnter($event)\">\n    @if (resolvedSections().swatches && presetColors().length) {\n      <section class=\"tk-color-picker__section\">\n        <span class=\"tk-color-picker__section-label\">{{\n          t().swatchesLabel\n        }}</span>\n        <tk-color-picker-swatch-grid\n          [colors]=\"presetColors()\"\n          [selected]=\"draftHex()\"\n          [ariaLabel]=\"t().swatchesLabel\"\n          (picked)=\"onSwatchPick($event)\" />\n      </section>\n    }\n\n    @if (resolvedSections().customColors) {\n      <section class=\"tk-color-picker__section\">\n        <span class=\"tk-color-picker__section-label\">{{\n          t().customColorsLabel\n        }}</span>\n        <tk-color-picker-swatch-grid\n          [colors]=\"customColors()\"\n          [selected]=\"draftHex()\"\n          [ariaLabel]=\"t().customColorsLabel\"\n          (picked)=\"onSwatchPick($event)\">\n          @if (canAddCustom()) {\n            <button\n              type=\"button\"\n              class=\"tk-color-picker__add-custom\"\n              [attr.aria-label]=\"t().addCustomColorLabel\"\n              (click)=\"addCustomColor()\">\n              <tk-icon icon=\"plus\" styleIcon=\"regular\" size=\"xs\"></tk-icon>\n            </button>\n          }\n          @if (isCustomColorSelected()) {\n            <button\n              type=\"button\"\n              class=\"tk-color-picker__remove-custom\"\n              [attr.aria-label]=\"t().removeCustomColorLabel\"\n              (click)=\"removeCustomColor()\">\n              \u2212\n            </button>\n          }\n        </tk-color-picker-swatch-grid>\n      </section>\n    }\n\n    @if (\n      resolvedSections().customColors &&\n      (resolvedSections().spectrum ||\n        resolvedSections().hue ||\n        resolvedSections().hex)\n    ) {\n      <div class=\"tk-color-picker__divider\" role=\"separator\"></div>\n    }\n\n    @if (resolvedSections().spectrum) {\n      <tk-color-picker-spectrum\n        [hue]=\"hue()\"\n        [saturation]=\"saturation()\"\n        [brightness]=\"brightness()\"\n        [color]=\"swatchColor() ?? ''\"\n        [ariaLabel]=\"t().spectrumLabel\"\n        (changed)=\"onSpectrumChange($event)\" />\n    }\n\n    @if (resolvedSections().hue) {\n      <input\n        class=\"tk-color-picker__hue\"\n        type=\"range\"\n        min=\"0\"\n        max=\"360\"\n        [value]=\"hue()\"\n        [attr.aria-label]=\"t().hueLabel\"\n        (input)=\"onHueChange($event)\" />\n    }\n\n    @if (\n      (resolvedSections().spectrum || resolvedSections().hue) &&\n      resolvedSections().hex\n    ) {\n      <div class=\"tk-color-picker__divider\" role=\"separator\"></div>\n    }\n\n    @if (resolvedSections().hex) {\n      <section class=\"tk-color-picker__section tk-color-picker__hex-row\">\n        <span\n          class=\"tk-color-picker__swatch tk-color-picker__swatch--large\"\n          [class.tk-color-picker__swatch--fallback]=\"!swatchColor()\"\n          [style.background-color]=\"swatchColor()\"\n          aria-hidden=\"true\"></span>\n        <tk-input-text\n          #panelHexInput\n          class=\"tk-color-picker__panel-hex\"\n          [class.tk-color-picker__trigger-input--invalid]=\"!isValid()\"\n          [label]=\"t().hexLabel\"\n          [id]=\"panelFieldId\"\n          [value]=\"displayHexNoHash()\"\n          prefixText=\"#\"\n          (input)=\"onHexNativeInput($event)\"\n          (keydown)=\"onHexKeydown($event)\"\n          (paste)=\"onHexPaste($event)\"\n          (focusout)=\"onHexBlur()\" />\n        @if (showEyedropper()) {\n          <tk-button\n            class=\"tk-color-picker__eyedropper\"\n            tabindex=\"-1\"\n            severity=\"secondary\"\n            variant=\"outlined\"\n            icon=\"eye-dropper\"\n            styleIcon=\"regular\"\n            [attr.aria-label]=\"t().eyedropperLabel\"\n            (clicked)=\"openEyeDropper()\">\n          </tk-button>\n        }\n      </section>\n    }\n\n    @if (resolvedSections().hex && showContrast()) {\n      <div class=\"tk-color-picker__divider\" role=\"separator\"></div>\n    }\n\n    @if (showContrast()) {\n      <section class=\"tk-color-picker__section tk-color-picker__contrast\">\n        <span class=\"tk-color-picker__section-label\">{{\n          t().contrastLabel\n        }}</span>\n        <div class=\"tk-color-picker__contrast-row\">\n          <span\n            class=\"tk-color-picker__contrast-pill\"\n            [style.background-color]=\"draftHex()\"\n            [attr.aria-label]=\"t().contrastSampleLabel\">\n            <span\n              class=\"tk-color-picker__contrast-sample\"\n              [style.color]=\"contrastTextColor()\">\n              {{ t().contrastSampleText }}\n            </span>\n          </span>\n          <div class=\"tk-color-picker__contrast-info\">\n            <span class=\"tk-color-picker__contrast-label\">{{\n              t().contrastSampleLabel\n            }}</span>\n            <span class=\"tk-color-picker__contrast-ratio\"\n              >{{ contrastResult()!.ratio }}:1</span\n            >\n          </div>\n          @switch (contrastResult()!.level) {\n            @case ('AAA') {\n              <span\n                class=\"tk-color-picker__contrast-badge tk-color-picker__contrast-badge--aaa\"\n                >AAA</span\n              >\n            }\n            @case ('AA') {\n              <span\n                class=\"tk-color-picker__contrast-badge tk-color-picker__contrast-badge--aa\"\n                >AA</span\n              >\n            }\n            @case ('fail') {\n              <span\n                class=\"tk-color-picker__contrast-badge tk-color-picker__contrast-badge--fail\">\n                {{ t().contrastLowLabel }}\n              </span>\n            }\n          }\n        </div>\n      </section>\n    }\n  </div>\n</p-popover>\n", styles: [":host{display:inline-block;font-family:var(--tk-font-family, sans-serif)}.tk-color-picker{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs, .25rem)}.tk-color-picker__label{font-size:var(--tk-font-size-paragraph-m, 1rem);font-weight:var(--tk-font-weight-400, 400);color:var(--tk-color-base-surface-950, #191a1b);margin-bottom:.25rem}.tk-color-picker__trigger{display:flex;align-items:center;gap:var(--tk-spacing-gap-s, .5rem);padding:var(--tk-spacing-padding-xs, .25rem) var(--tk-spacing-padding-s, .5rem);border:1px solid var(--tk-color-border-subtle, #e4e4e4);border-radius:var(--tk-borderRadius-s, .25rem);background:var(--tk-color-background-default, #ffffff);cursor:pointer;transition:border-color .14s ease,background .14s ease}.tk-color-picker__trigger:hover{border-color:var(--tk-color-border-default, #cecdcd)}.tk-color-picker__trigger:focus-within{border-color:var(--tk-color-border-focus, #16006f)}.tk-color-picker__trigger--swatch{appearance:none;width:fit-content;font:inherit;-webkit-user-select:none;user-select:none}.tk-color-picker__trigger--swatch>*{pointer-events:none}.tk-color-picker__trigger--swatch:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:1px}.tk-color-picker__trigger--swatch:disabled{cursor:not-allowed}.tk-color-picker__trigger-input{display:flex;flex-direction:column;position:relative}.tk-color-picker__input-label{position:absolute;left:var(--tk-spacing-base-300, 3rem);top:.75rem;font-size:var(--tk-font-size-paragraph-m, 1rem);font-weight:var(--tk-font-weight-400, 400);color:var(--tk-color-base-surface-500, #8a8a8b);background:var(--tk-color-background-default, #ffffff);padding:0 .25rem;transition:top .2s ease,left .2s ease,color .2s ease;pointer-events:none;z-index:1;max-width:calc(100% - 4rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tk-color-picker--disabled .tk-color-picker__input-label{display:none}.tk-color-picker--invalid .tk-color-picker__input-label{color:var(--tk-color-base-red-700, #cf2604)}.tk-color-picker__input-wrap{position:relative;display:flex;align-items:center;width:100%}.tk-color-picker__input-wrap input.p-inputtext{width:100%;flex:1;border:none;border-bottom:.0625rem solid var(--tk-color-base-surface-300, #d2d2d2);border-radius:0;padding:var(--tk-spacing-base-75, .75rem);padding-left:var(--tk-spacing-base-300, 3rem);color:var(--tk-color-base-surface-950, #191a1b);background-color:transparent;outline:none}.tk-color-picker__input-wrap input.p-inputtext:focus{border-color:var(--tk-color-base-primary-600, #140065);box-shadow:none}.tk-color-picker__input-wrap input.p-inputtext.ng-invalid.ng-dirty,.tk-color-picker__input-wrap input.p-inputtext.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}.tk-color-picker__input-wrap input.p-inputtext:disabled{background-color:var(--tk-color-base-surface-200, #e4e4e4);color:var(--tk-color-base-surface-500, #8a8a8b);opacity:1}.tk-color-picker__input-swatch{appearance:none;padding:0;position:absolute;left:var(--tk-spacing-base-25, .25rem);top:50%;transform:translateY(-50%);width:1.25rem;height:1.25rem;border-radius:var(--tk-borderRadius-xs, .125rem);border:1px solid var(--tk-color-border-subtle, #e4e4e4);flex-shrink:0;cursor:pointer;z-index:1;-webkit-user-select:none;user-select:none;background:transparent}.tk-color-picker__input-swatch--fallback{background:var(--tk-color-base-surface-400, #cecdcd)}.tk-color-picker__input-swatch:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:1px}.tk-color-picker__input-swatch:disabled{cursor:not-allowed;opacity:.5}.tk-color-picker__input-prefix{position:absolute;left:calc(var(--tk-spacing-base-25, .25rem) + 1.25rem + .25rem);top:50%;transform:translateY(-50%);color:var(--tk-color-text-muted, #8a8a8b);font-size:var(--tk-font-size-paragraph-s, .875rem);line-height:1;pointer-events:none;z-index:1}.tk-color-picker__input-bottom{display:flex;margin-top:.25rem;min-height:1.25rem}.tk-color-picker--open .tk-color-picker__trigger{border-color:var(--tk-color-border-strong, #424243)}.tk-color-picker--invalid .tk-color-picker__trigger{border-color:var(--tk-color-feedback-danger-default, #ff6640)}.tk-color-picker--disabled .tk-color-picker__trigger{opacity:.55;cursor:not-allowed;pointer-events:none;background:var(--tk-color-background-soft, #f2f1f1)}.tk-color-picker__swatch{flex-shrink:0;width:1.25rem;height:1.25rem;border-radius:var(--tk-borderRadius-xs, .125rem);border:1px solid var(--tk-color-border-subtle, #e4e4e4)}.tk-color-picker__swatch--fallback{background:var(--tk-color-base-surface-400, #cecdcd)}.tk-color-picker__swatch--large{width:2rem;height:2rem;border-radius:var(--tk-borderRadius-s, .25rem)}.tk-color-picker__chevron{transition:transform .2s ease}.tk-color-picker__chevron--open{transform:rotate(180deg)}.tk-color-picker__error{font-size:var(--tk-font-size-legal-s, .625rem);color:var(--tk-color-feedback-danger-default, #ff6640)}.tk-color-picker__hint{font-size:var(--tk-font-size-legal-s, .625rem);color:var(--tk-color-text-muted, #8a8a8b)}.tk-color-picker__panel{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-m, .75rem);width:16rem;padding:var(--tk-spacing-padding-m, 1rem);box-sizing:border-box}.tk-color-picker__panel:focus,.tk-color-picker__panel:focus-visible{outline:none}.tk-color-picker__section{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs, .25rem)}.tk-color-picker__section-label{font-size:var(--tk-font-size-legal-m, .75rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-subtle, #5d5d5e)}.tk-color-picker__add-custom{appearance:none;padding:0;width:100%;aspect-ratio:1;border:1px dashed var(--tk-color-border-default, #cecdcd);border-radius:var(--tk-borderRadius-xs, .125rem);background:var(--tk-color-background-default, #ffffff);color:var(--tk-color-text-muted, #8a8a8b);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .12s ease,color .12s ease}.tk-color-picker__add-custom:hover{border-color:var(--tk-color-accent-default, #6ad0bc);color:var(--tk-color-accent-default, #6ad0bc)}.tk-color-picker__add-custom:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:1px}.tk-color-picker__remove-custom{appearance:none;padding:0;width:100%;aspect-ratio:1;border:1px dashed var(--tk-color-border-default, #cecdcd);border-radius:var(--tk-borderRadius-xs, .125rem);background:var(--tk-color-background-default, #ffffff);color:var(--tk-color-text-muted, #8a8a8b);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .12s ease,color .12s ease}.tk-color-picker__remove-custom:hover{border-color:var(--tk-color-accent-default, #6ad0bc);color:var(--tk-color-accent-default, #6ad0bc)}.tk-color-picker__remove-custom:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:1px}.tk-color-picker__hue{appearance:none;width:100%;height:.625rem;border-radius:var(--tk-borderRadius-full, 9999px);outline:none;cursor:pointer;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.tk-color-picker__hue::-webkit-slider-thumb{appearance:none;width:1.125rem;height:1.125rem;border-radius:var(--tk-borderRadius-full, 50%);background:var(--tk-color-background-default, #ffffff);border:1px solid var(--tk-color-border-default, #cecdcd);cursor:grab}.tk-color-picker__hue::-moz-range-thumb{width:1.125rem;height:1.125rem;border-radius:var(--tk-borderRadius-full, 50%);background:var(--tk-color-background-default, #ffffff);border:1px solid var(--tk-color-border-default, #cecdcd);cursor:grab}.tk-color-picker__hue:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:2px}.tk-color-picker__divider{width:100%;height:1px;background:var(--tk-color-border-subtle, #e4e4e4);flex-shrink:0}.tk-color-picker__hex-row{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-gap-s, .5rem);margin-top:var(--tk-spacing-gap-s, .5rem)}.tk-color-picker__hex-row>span{flex-shrink:0}.tk-color-picker__hex-row tk-button{flex-shrink:0;min-width:2.5rem;min-height:2.5rem}.tk-color-picker__eyedropper{margin-top:-12px}.tk-color-picker__eyedropper:focus,.tk-color-picker__eyedropper:focus-visible{outline:none;box-shadow:none}.tk-color-picker__panel-hex{flex:1;min-width:0}.tk-color-picker__contrast-row{display:flex;align-items:center;gap:var(--tk-spacing-gap-s, .5rem)}.tk-color-picker__contrast-pill{flex-shrink:0;width:2.5rem;height:2rem;border-radius:var(--tk-borderRadius-s, .25rem);border:1px solid var(--tk-color-border-subtle, #e4e4e4);display:inline-flex;align-items:center;justify-content:center}.tk-color-picker__contrast-sample{font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-600, 600);line-height:1}.tk-color-picker__contrast-info{flex:1;min-width:0;display:flex;flex-direction:column}.tk-color-picker__contrast-label{font-size:var(--tk-font-size-legal-m, .75rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-default, #222324)}.tk-color-picker__contrast-ratio{font-size:var(--tk-font-size-legal-s, .625rem);color:var(--tk-color-text-muted, #8a8a8b)}.tk-color-picker__contrast-badge{flex-shrink:0;font-size:var(--tk-font-size-legal-s, .625rem);font-weight:var(--tk-font-weight-600, 600);padding:var(--tk-spacing-padding-xs, .25rem) var(--tk-spacing-padding-s, .5rem);border-radius:var(--tk-borderRadius-full, 9999px)}.tk-color-picker__contrast-badge--aaa,.tk-color-picker__contrast-badge--aa{background:var(--tk-color-feedback-success-muted, #d1fadf);color:var(--tk-color-feedback-success-strong, #114a3f)}.tk-color-picker__contrast-badge--fail{background:var(--tk-color-feedback-danger-muted, #feede8);color:var(--tk-color-feedback-danger-strong, #7f1d1d)}::ng-deep .tk-color-picker-popover{margin:0!important}::ng-deep .tk-color-picker-popover:before,::ng-deep .tk-color-picker-popover:after{display:none!important}::ng-deep .tk-color-picker-popover--input{margin-top:-22px!important}:host ::ng-deep .tk-color-picker__trigger-input--invalid input.p-inputtext{border-color:var(--tk-color-feedback-danger-default, #ff6640)}:host ::ng-deep .tk-color-picker__trigger-input:has(input:focus) .tk-color-picker__input-label{top:-.75rem;left:0;font-size:var(--tk-font-size-legal-m, .75rem);color:var(--tk-color-base-primary-600, #140065);max-width:none;overflow:visible;text-overflow:clip}:host ::ng-deep .tk-color-picker__trigger-input:has(input.p-filled) .tk-color-picker__input-label{top:-.75rem;left:0;font-size:var(--tk-font-size-legal-m, .75rem);color:var(--tk-color-base-surface-950, #191a1b);max-width:none;overflow:visible;text-overflow:clip}:host ::ng-deep .tk-color-picker__trigger-input:has(input.ng-invalid.ng-dirty) .tk-color-picker__input-label,:host ::ng-deep .tk-color-picker__trigger-input:has(input.ng-invalid.ng-touched) .tk-color-picker__input-label{color:var(--tk-color-base-red-700, #cf2604)}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i2.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "size"], outputs: ["clicked"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }, { kind: "component", type: InputTextComponent, selector: "tk-input-text", inputs: ["value", "control", "label", "type", "id", "icon", "clearable", "errorMessage", "hint", "maxLength"], outputs: ["valueChange"] }, { kind: "component", type: ColorPickerSpectrumComponent, selector: "tk-color-picker-spectrum", inputs: ["hue", "saturation", "brightness", "color", "ariaLabel"], outputs: ["changed"] }, { kind: "component", type: ColorPickerSwatchGridComponent, selector: "tk-color-picker-swatch-grid", inputs: ["colors", "selected", "ariaLabel"], outputs: ["picked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ColorPickerComponent, isStandalone: true, selector: "tk-color-picker", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, presetColors: { classPropertyName: "presetColors", publicName: "presetColors", isSignal: true, isRequired: false, transformFunction: null }, contrastColor: { classPropertyName: "contrastColor", publicName: "contrastColor", isSignal: true, isRequired: false, transformFunction: null }, maxCustomColors: { classPropertyName: "maxCustomColors", publicName: "maxCustomColors", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, texts: { classPropertyName: "texts", publicName: "texts", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, customColors: { classPropertyName: "customColors", publicName: "customColors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", customColors: "customColorsChange", colorChange: "colorChange", textColorChange: "textColorChange", validChange: "validChange", opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["op"], descendants: true, isSignal: true }, { propertyName: "swatchBtnRef", first: true, predicate: ["swatchBtn"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "inputTriggerRef", first: true, predicate: ["inputTrigger"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "panelHexInput", first: true, predicate: ["panelHexInput"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div\n  class=\"tk-color-picker\"\n  [class.tk-color-picker--disabled]=\"isDisabled()\"\n  [class.tk-color-picker--open]=\"isOpen()\"\n  [class.tk-color-picker--invalid]=\"!isValid()\">\n  @if (variant() === 'swatch') {\n    @if (label()) {\n      <span class=\"tk-color-picker__label\">{{ label() }}</span>\n    }\n    <button\n      #swatchBtn\n      type=\"button\"\n      class=\"tk-color-picker__trigger tk-color-picker__trigger--swatch\"\n      [disabled]=\"isDisabled()\"\n      aria-haspopup=\"dialog\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-label]=\"t().openPickerLabel + (label() ? ': ' + label() : '')\"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"onTriggerClick($event)\">\n      <span\n        class=\"tk-color-picker__swatch\"\n        [class.tk-color-picker__swatch--fallback]=\"!swatchColor()\"\n        [style.background-color]=\"swatchColor()\"\n        aria-hidden=\"true\"></span>\n      <tk-icon\n        class=\"tk-color-picker__chevron\"\n        [class.tk-color-picker__chevron--open]=\"isOpen()\"\n        icon=\"chevron-down\"\n        styleIcon=\"regular\"\n        size=\"xs\"></tk-icon>\n    </button>\n  } @else {\n    <div\n      #inputTrigger\n      class=\"tk-color-picker__trigger-input\"\n      [class.tk-color-picker__trigger-input--invalid]=\"!isValid()\">\n      @if (label()) {\n        <label\n          class=\"tk-color-picker__input-label\"\n          [for]=\"fieldId\"\n          [title]=\"label()\"\n          >{{ label() }}</label\n        >\n      }\n      <div class=\"tk-color-picker__input-wrap\">\n        <button\n          type=\"button\"\n          class=\"tk-color-picker__input-swatch\"\n          [class.tk-color-picker__input-swatch--fallback]=\"!swatchColor()\"\n          [style.background-color]=\"swatchColor() ?? null\"\n          [disabled]=\"isDisabled()\"\n          [attr.aria-label]=\"t().openPickerLabel\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"onTriggerClick($event)\"></button>\n        <span class=\"tk-color-picker__input-prefix\" aria-hidden=\"true\">#</span>\n        <input\n          pInputText\n          [id]=\"fieldId\"\n          [value]=\"displayHexNoHash()\"\n          [disabled]=\"isDisabled()\"\n          [class.ng-invalid]=\"triggerControl.invalid\"\n          [class.ng-dirty]=\"triggerControl.dirty\"\n          [class.ng-touched]=\"triggerControl.touched\"\n          [attr.aria-describedby]=\"!isValid() ? errorId : null\"\n          [attr.aria-invalid]=\"!isValid()\"\n          autocomplete=\"off\"\n          (input)=\"onHexNativeInput($event)\"\n          (keydown)=\"onHexKeydown($event)\"\n          (paste)=\"onHexPaste($event)\"\n          (blur)=\"onHexBlur()\" />\n      </div>\n      <div class=\"tk-color-picker__input-bottom\">\n        @if (!isValid()) {\n          <p-message\n            severity=\"error\"\n            size=\"small\"\n            variant=\"simple\"\n            [id]=\"errorId\"\n            >{{ errorText() }}</p-message\n          >\n        } @else if (hint()) {\n          <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{\n            hint()\n          }}</p-message>\n        }\n      </div>\n    </div>\n  }\n\n  @if (variant() === 'swatch') {\n    @if (!isValid()) {\n      <span\n        [id]=\"errorId\"\n        class=\"tk-color-picker__error\"\n        role=\"alert\"\n        aria-live=\"polite\">\n        {{ errorText() }}\n      </span>\n    } @else if (hint()) {\n      <span class=\"tk-color-picker__hint\">{{ hint() }}</span>\n    }\n  }\n</div>\n\n<p-popover\n  #op\n  [styleClass]=\"\n    'tk-color-picker-popover' +\n    (variant() === 'input' ? ' tk-color-picker-popover--input' : '')\n  \"\n  position=\"bottom\"\n  appendTo=\"body\"\n  (onShow)=\"onPopoverShow()\"\n  (onHide)=\"onPopoverHide()\">\n  <div\n    class=\"tk-color-picker__panel\"\n    role=\"group\"\n    [attr.aria-label]=\"t().dialogLabel\"\n    tabindex=\"-1\"\n    autofocus\n    (keydown.enter)=\"onPanelEnter($event)\">\n    @if (resolvedSections().swatches && presetColors().length) {\n      <section class=\"tk-color-picker__section\">\n        <span class=\"tk-color-picker__section-label\">{{\n          t().swatchesLabel\n        }}</span>\n        <tk-color-picker-swatch-grid\n          [colors]=\"presetColors()\"\n          [selected]=\"draftHex()\"\n          [ariaLabel]=\"t().swatchesLabel\"\n          (picked)=\"onSwatchPick($event)\" />\n      </section>\n    }\n\n    @if (resolvedSections().customColors) {\n      <section class=\"tk-color-picker__section\">\n        <span class=\"tk-color-picker__section-label\">{{\n          t().customColorsLabel\n        }}</span>\n        <tk-color-picker-swatch-grid\n          [colors]=\"customColors()\"\n          [selected]=\"draftHex()\"\n          [ariaLabel]=\"t().customColorsLabel\"\n          (picked)=\"onSwatchPick($event)\">\n          @if (canAddCustom()) {\n            <button\n              type=\"button\"\n              class=\"tk-color-picker__add-custom\"\n              [attr.aria-label]=\"t().addCustomColorLabel\"\n              (click)=\"addCustomColor()\">\n              <tk-icon icon=\"plus\" styleIcon=\"regular\" size=\"xs\"></tk-icon>\n            </button>\n          }\n          @if (isCustomColorSelected()) {\n            <button\n              type=\"button\"\n              class=\"tk-color-picker__remove-custom\"\n              [attr.aria-label]=\"t().removeCustomColorLabel\"\n              (click)=\"removeCustomColor()\">\n              \u2212\n            </button>\n          }\n        </tk-color-picker-swatch-grid>\n      </section>\n    }\n\n    @if (\n      resolvedSections().customColors &&\n      (resolvedSections().spectrum ||\n        resolvedSections().hue ||\n        resolvedSections().hex)\n    ) {\n      <div class=\"tk-color-picker__divider\" role=\"separator\"></div>\n    }\n\n    @if (resolvedSections().spectrum) {\n      <tk-color-picker-spectrum\n        [hue]=\"hue()\"\n        [saturation]=\"saturation()\"\n        [brightness]=\"brightness()\"\n        [color]=\"swatchColor() ?? ''\"\n        [ariaLabel]=\"t().spectrumLabel\"\n        (changed)=\"onSpectrumChange($event)\" />\n    }\n\n    @if (resolvedSections().hue) {\n      <input\n        class=\"tk-color-picker__hue\"\n        type=\"range\"\n        min=\"0\"\n        max=\"360\"\n        [value]=\"hue()\"\n        [attr.aria-label]=\"t().hueLabel\"\n        (input)=\"onHueChange($event)\" />\n    }\n\n    @if (\n      (resolvedSections().spectrum || resolvedSections().hue) &&\n      resolvedSections().hex\n    ) {\n      <div class=\"tk-color-picker__divider\" role=\"separator\"></div>\n    }\n\n    @if (resolvedSections().hex) {\n      <section class=\"tk-color-picker__section tk-color-picker__hex-row\">\n        <span\n          class=\"tk-color-picker__swatch tk-color-picker__swatch--large\"\n          [class.tk-color-picker__swatch--fallback]=\"!swatchColor()\"\n          [style.background-color]=\"swatchColor()\"\n          aria-hidden=\"true\"></span>\n        <tk-input-text\n          #panelHexInput\n          class=\"tk-color-picker__panel-hex\"\n          [class.tk-color-picker__trigger-input--invalid]=\"!isValid()\"\n          [label]=\"t().hexLabel\"\n          [id]=\"panelFieldId\"\n          [value]=\"displayHexNoHash()\"\n          prefixText=\"#\"\n          (input)=\"onHexNativeInput($event)\"\n          (keydown)=\"onHexKeydown($event)\"\n          (paste)=\"onHexPaste($event)\"\n          (focusout)=\"onHexBlur()\" />\n        @if (showEyedropper()) {\n          <tk-button\n            class=\"tk-color-picker__eyedropper\"\n            tabindex=\"-1\"\n            severity=\"secondary\"\n            variant=\"outlined\"\n            icon=\"eye-dropper\"\n            styleIcon=\"regular\"\n            [attr.aria-label]=\"t().eyedropperLabel\"\n            (clicked)=\"openEyeDropper()\">\n          </tk-button>\n        }\n      </section>\n    }\n\n    @if (resolvedSections().hex && showContrast()) {\n      <div class=\"tk-color-picker__divider\" role=\"separator\"></div>\n    }\n\n    @if (showContrast()) {\n      <section class=\"tk-color-picker__section tk-color-picker__contrast\">\n        <span class=\"tk-color-picker__section-label\">{{\n          t().contrastLabel\n        }}</span>\n        <div class=\"tk-color-picker__contrast-row\">\n          <span\n            class=\"tk-color-picker__contrast-pill\"\n            [style.background-color]=\"draftHex()\"\n            [attr.aria-label]=\"t().contrastSampleLabel\">\n            <span\n              class=\"tk-color-picker__contrast-sample\"\n              [style.color]=\"contrastTextColor()\">\n              {{ t().contrastSampleText }}\n            </span>\n          </span>\n          <div class=\"tk-color-picker__contrast-info\">\n            <span class=\"tk-color-picker__contrast-label\">{{\n              t().contrastSampleLabel\n            }}</span>\n            <span class=\"tk-color-picker__contrast-ratio\"\n              >{{ contrastResult()!.ratio }}:1</span\n            >\n          </div>\n          @switch (contrastResult()!.level) {\n            @case ('AAA') {\n              <span\n                class=\"tk-color-picker__contrast-badge tk-color-picker__contrast-badge--aaa\"\n                >AAA</span\n              >\n            }\n            @case ('AA') {\n              <span\n                class=\"tk-color-picker__contrast-badge tk-color-picker__contrast-badge--aa\"\n                >AA</span\n              >\n            }\n            @case ('fail') {\n              <span\n                class=\"tk-color-picker__contrast-badge tk-color-picker__contrast-badge--fail\">\n                {{ t().contrastLowLabel }}\n              </span>\n            }\n          }\n        </div>\n      </section>\n    }\n  </div>\n</p-popover>\n", styles: [":host{display:inline-block;font-family:var(--tk-font-family, sans-serif)}.tk-color-picker{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs, .25rem)}.tk-color-picker__label{font-size:var(--tk-font-size-paragraph-m, 1rem);font-weight:var(--tk-font-weight-400, 400);color:var(--tk-color-base-surface-950, #191a1b);margin-bottom:.25rem}.tk-color-picker__trigger{display:flex;align-items:center;gap:var(--tk-spacing-gap-s, .5rem);padding:var(--tk-spacing-padding-xs, .25rem) var(--tk-spacing-padding-s, .5rem);border:1px solid var(--tk-color-border-subtle, #e4e4e4);border-radius:var(--tk-borderRadius-s, .25rem);background:var(--tk-color-background-default, #ffffff);cursor:pointer;transition:border-color .14s ease,background .14s ease}.tk-color-picker__trigger:hover{border-color:var(--tk-color-border-default, #cecdcd)}.tk-color-picker__trigger:focus-within{border-color:var(--tk-color-border-focus, #16006f)}.tk-color-picker__trigger--swatch{appearance:none;width:fit-content;font:inherit;-webkit-user-select:none;user-select:none}.tk-color-picker__trigger--swatch>*{pointer-events:none}.tk-color-picker__trigger--swatch:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:1px}.tk-color-picker__trigger--swatch:disabled{cursor:not-allowed}.tk-color-picker__trigger-input{display:flex;flex-direction:column;position:relative}.tk-color-picker__input-label{position:absolute;left:var(--tk-spacing-base-300, 3rem);top:.75rem;font-size:var(--tk-font-size-paragraph-m, 1rem);font-weight:var(--tk-font-weight-400, 400);color:var(--tk-color-base-surface-500, #8a8a8b);background:var(--tk-color-background-default, #ffffff);padding:0 .25rem;transition:top .2s ease,left .2s ease,color .2s ease;pointer-events:none;z-index:1;max-width:calc(100% - 4rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tk-color-picker--disabled .tk-color-picker__input-label{display:none}.tk-color-picker--invalid .tk-color-picker__input-label{color:var(--tk-color-base-red-700, #cf2604)}.tk-color-picker__input-wrap{position:relative;display:flex;align-items:center;width:100%}.tk-color-picker__input-wrap input.p-inputtext{width:100%;flex:1;border:none;border-bottom:.0625rem solid var(--tk-color-base-surface-300, #d2d2d2);border-radius:0;padding:var(--tk-spacing-base-75, .75rem);padding-left:var(--tk-spacing-base-300, 3rem);color:var(--tk-color-base-surface-950, #191a1b);background-color:transparent;outline:none}.tk-color-picker__input-wrap input.p-inputtext:focus{border-color:var(--tk-color-base-primary-600, #140065);box-shadow:none}.tk-color-picker__input-wrap input.p-inputtext.ng-invalid.ng-dirty,.tk-color-picker__input-wrap input.p-inputtext.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}.tk-color-picker__input-wrap input.p-inputtext:disabled{background-color:var(--tk-color-base-surface-200, #e4e4e4);color:var(--tk-color-base-surface-500, #8a8a8b);opacity:1}.tk-color-picker__input-swatch{appearance:none;padding:0;position:absolute;left:var(--tk-spacing-base-25, .25rem);top:50%;transform:translateY(-50%);width:1.25rem;height:1.25rem;border-radius:var(--tk-borderRadius-xs, .125rem);border:1px solid var(--tk-color-border-subtle, #e4e4e4);flex-shrink:0;cursor:pointer;z-index:1;-webkit-user-select:none;user-select:none;background:transparent}.tk-color-picker__input-swatch--fallback{background:var(--tk-color-base-surface-400, #cecdcd)}.tk-color-picker__input-swatch:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:1px}.tk-color-picker__input-swatch:disabled{cursor:not-allowed;opacity:.5}.tk-color-picker__input-prefix{position:absolute;left:calc(var(--tk-spacing-base-25, .25rem) + 1.25rem + .25rem);top:50%;transform:translateY(-50%);color:var(--tk-color-text-muted, #8a8a8b);font-size:var(--tk-font-size-paragraph-s, .875rem);line-height:1;pointer-events:none;z-index:1}.tk-color-picker__input-bottom{display:flex;margin-top:.25rem;min-height:1.25rem}.tk-color-picker--open .tk-color-picker__trigger{border-color:var(--tk-color-border-strong, #424243)}.tk-color-picker--invalid .tk-color-picker__trigger{border-color:var(--tk-color-feedback-danger-default, #ff6640)}.tk-color-picker--disabled .tk-color-picker__trigger{opacity:.55;cursor:not-allowed;pointer-events:none;background:var(--tk-color-background-soft, #f2f1f1)}.tk-color-picker__swatch{flex-shrink:0;width:1.25rem;height:1.25rem;border-radius:var(--tk-borderRadius-xs, .125rem);border:1px solid var(--tk-color-border-subtle, #e4e4e4)}.tk-color-picker__swatch--fallback{background:var(--tk-color-base-surface-400, #cecdcd)}.tk-color-picker__swatch--large{width:2rem;height:2rem;border-radius:var(--tk-borderRadius-s, .25rem)}.tk-color-picker__chevron{transition:transform .2s ease}.tk-color-picker__chevron--open{transform:rotate(180deg)}.tk-color-picker__error{font-size:var(--tk-font-size-legal-s, .625rem);color:var(--tk-color-feedback-danger-default, #ff6640)}.tk-color-picker__hint{font-size:var(--tk-font-size-legal-s, .625rem);color:var(--tk-color-text-muted, #8a8a8b)}.tk-color-picker__panel{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-m, .75rem);width:16rem;padding:var(--tk-spacing-padding-m, 1rem);box-sizing:border-box}.tk-color-picker__panel:focus,.tk-color-picker__panel:focus-visible{outline:none}.tk-color-picker__section{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs, .25rem)}.tk-color-picker__section-label{font-size:var(--tk-font-size-legal-m, .75rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-subtle, #5d5d5e)}.tk-color-picker__add-custom{appearance:none;padding:0;width:100%;aspect-ratio:1;border:1px dashed var(--tk-color-border-default, #cecdcd);border-radius:var(--tk-borderRadius-xs, .125rem);background:var(--tk-color-background-default, #ffffff);color:var(--tk-color-text-muted, #8a8a8b);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .12s ease,color .12s ease}.tk-color-picker__add-custom:hover{border-color:var(--tk-color-accent-default, #6ad0bc);color:var(--tk-color-accent-default, #6ad0bc)}.tk-color-picker__add-custom:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:1px}.tk-color-picker__remove-custom{appearance:none;padding:0;width:100%;aspect-ratio:1;border:1px dashed var(--tk-color-border-default, #cecdcd);border-radius:var(--tk-borderRadius-xs, .125rem);background:var(--tk-color-background-default, #ffffff);color:var(--tk-color-text-muted, #8a8a8b);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .12s ease,color .12s ease}.tk-color-picker__remove-custom:hover{border-color:var(--tk-color-accent-default, #6ad0bc);color:var(--tk-color-accent-default, #6ad0bc)}.tk-color-picker__remove-custom:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:1px}.tk-color-picker__hue{appearance:none;width:100%;height:.625rem;border-radius:var(--tk-borderRadius-full, 9999px);outline:none;cursor:pointer;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.tk-color-picker__hue::-webkit-slider-thumb{appearance:none;width:1.125rem;height:1.125rem;border-radius:var(--tk-borderRadius-full, 50%);background:var(--tk-color-background-default, #ffffff);border:1px solid var(--tk-color-border-default, #cecdcd);cursor:grab}.tk-color-picker__hue::-moz-range-thumb{width:1.125rem;height:1.125rem;border-radius:var(--tk-borderRadius-full, 50%);background:var(--tk-color-background-default, #ffffff);border:1px solid var(--tk-color-border-default, #cecdcd);cursor:grab}.tk-color-picker__hue:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:2px}.tk-color-picker__divider{width:100%;height:1px;background:var(--tk-color-border-subtle, #e4e4e4);flex-shrink:0}.tk-color-picker__hex-row{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-gap-s, .5rem);margin-top:var(--tk-spacing-gap-s, .5rem)}.tk-color-picker__hex-row>span{flex-shrink:0}.tk-color-picker__hex-row tk-button{flex-shrink:0;min-width:2.5rem;min-height:2.5rem}.tk-color-picker__eyedropper{margin-top:-12px}.tk-color-picker__eyedropper:focus,.tk-color-picker__eyedropper:focus-visible{outline:none;box-shadow:none}.tk-color-picker__panel-hex{flex:1;min-width:0}.tk-color-picker__contrast-row{display:flex;align-items:center;gap:var(--tk-spacing-gap-s, .5rem)}.tk-color-picker__contrast-pill{flex-shrink:0;width:2.5rem;height:2rem;border-radius:var(--tk-borderRadius-s, .25rem);border:1px solid var(--tk-color-border-subtle, #e4e4e4);display:inline-flex;align-items:center;justify-content:center}.tk-color-picker__contrast-sample{font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-600, 600);line-height:1}.tk-color-picker__contrast-info{flex:1;min-width:0;display:flex;flex-direction:column}.tk-color-picker__contrast-label{font-size:var(--tk-font-size-legal-m, .75rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-default, #222324)}.tk-color-picker__contrast-ratio{font-size:var(--tk-font-size-legal-s, .625rem);color:var(--tk-color-text-muted, #8a8a8b)}.tk-color-picker__contrast-badge{flex-shrink:0;font-size:var(--tk-font-size-legal-s, .625rem);font-weight:var(--tk-font-weight-600, 600);padding:var(--tk-spacing-padding-xs, .25rem) var(--tk-spacing-padding-s, .5rem);border-radius:var(--tk-borderRadius-full, 9999px)}.tk-color-picker__contrast-badge--aaa,.tk-color-picker__contrast-badge--aa{background:var(--tk-color-feedback-success-muted, #d1fadf);color:var(--tk-color-feedback-success-strong, #114a3f)}.tk-color-picker__contrast-badge--fail{background:var(--tk-color-feedback-danger-muted, #feede8);color:var(--tk-color-feedback-danger-strong, #7f1d1d)}::ng-deep .tk-color-picker-popover{margin:0!important}::ng-deep .tk-color-picker-popover:before,::ng-deep .tk-color-picker-popover:after{display:none!important}::ng-deep .tk-color-picker-popover--input{margin-top:-22px!important}:host ::ng-deep .tk-color-picker__trigger-input--invalid input.p-inputtext{border-color:var(--tk-color-feedback-danger-default, #ff6640)}:host ::ng-deep .tk-color-picker__trigger-input:has(input:focus) .tk-color-picker__input-label{top:-.75rem;left:0;font-size:var(--tk-font-size-legal-m, .75rem);color:var(--tk-color-base-primary-600, #140065);max-width:none;overflow:visible;text-overflow:clip}:host ::ng-deep .tk-color-picker__trigger-input:has(input.p-filled) .tk-color-picker__input-label{top:-.75rem;left:0;font-size:var(--tk-font-size-legal-m, .75rem);color:var(--tk-color-base-surface-950, #191a1b);max-width:none;overflow:visible;text-overflow:clip}:host ::ng-deep .tk-color-picker__trigger-input:has(input.ng-invalid.ng-dirty) .tk-color-picker__input-label,:host ::ng-deep .tk-color-picker__trigger-input:has(input.ng-invalid.ng-touched) .tk-color-picker__input-label{color:var(--tk-color-base-red-700, #cf2604)}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i2.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "size"], outputs: ["clicked"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }, { kind: "component", type: InputTextComponent, selector: "tk-input-text", inputs: ["value", "control", "label", "type", "id", "icon", "clearable", "errorMessage", "hint", "maxLength"], outputs: ["valueChange"] }, { kind: "component", type: ColorPickerSpectrumComponent, selector: "tk-color-picker-spectrum", inputs: ["hue", "saturation", "brightness", "color", "ariaLabel"], outputs: ["changed"] }, { kind: "component", type: ColorPickerSwatchGridComponent, selector: "tk-color-picker-swatch-grid", inputs: ["colors", "selected", "ariaLabel"], outputs: ["picked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ColorPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tk-color-picker', imports: [
                         ButtonModule,