@kyndryl-design-system/shidoka-applications 2.31.2 → 2.32.0

package/components/reusable/badge/badge.js

@@ -45,7 +45,7 @@ import{_ as o}from"../../../vendor/tslib-53a81efe.js";import{n as r,t as e,c as
   display: flex;
   align-items: center;
   border-radius: 16px;
-  padding: 4px;
+  padding: 4px 8px;
   gap: 4px;
   max-width: 161px;
 }

package/components/reusable/button/button.js

@@ -1,4 +1,4 @@
-import{_ as o}from"../../../vendor/tslib-53a81efe.js";import{t,n as r,a as e,l as i,i as n,b as d,e as a}from"../../../vendor/lit-461e78e6.js";import{i as l,s,x as c}from"../../../vendor/lit-element-c6c02f24.js";import{e as b}from"../../../vendor/lit-html-29220869.js";import{debounce as u}from"../../../common/helpers/helpers.js";import{BUTTON_TYPES as k,BUTTON_KINDS as v,BUTTON_SIZES as h,BUTTON_ICON_POSITION as p,BUTTON_KINDS_SOLID as y,BUTTON_KINDS_OUTLINE as g}from"./defs.js";var m=l`/**
+import{_ as o}from"../../../vendor/tslib-53a81efe.js";import{t,n as r,a as e,l as n,i,b as d,e as a}from"../../../vendor/lit-461e78e6.js";import{i as l,s,x as c}from"../../../vendor/lit-element-c6c02f24.js";import{e as b}from"../../../vendor/lit-html-29220869.js";import{debounce as u}from"../../../common/helpers/helpers.js";import{BUTTON_TYPES as k,BUTTON_KINDS as v,BUTTON_SIZES as h,BUTTON_ICON_POSITION as p,BUTTON_KINDS_SOLID as y,BUTTON_KINDS_OUTLINE as g}from"./defs.js";var m=l`/**
  * Copyright Kyndryl, Inc. 2023
  */
 *,
@@ -50,7 +50,6 @@ import{_ as o}from"../../../vendor/tslib-53a81efe.js";import{t,n as r,a as e,l a
   text-decoration: none;
   cursor: pointer;
   width: 100%;
-  min-width: 96px;
   max-width: 100%;
   display: flex;
   align-items: center;
@@ -416,5 +415,5 @@ import{_ as o}from"../../../vendor/tslib-53a81efe.js";import{t,n as r,a as e,l a
               </span>
             </button>
           `}
-    `}handleClick(o){this.internals.form&&("submit"===this.type?this.internals.form.requestSubmit():"reset"===this.type&&this.internals.form.reset());const t=new CustomEvent("on-click",{detail:{origEvent:o}});this.dispatchEvent(t)}_testIconOnly(){var o,t;if(!(null===(o=this._iconEls)||void 0===o?void 0:o.length))return!1;return!(null===(t=this._slottedEls)||void 0===t?void 0:t.filter((o=>""!==o.textContent.trim()))).filter((o=>{if(o.tagName){const t=getComputedStyle(o);return"none"!==t.display&&"hidden"!==t.visibility}return!0})).length}_handleSlotChange(){this.iconOnly=this._testIconOnly(),this.requestUpdate()}_reSizeButton(){(this.isFloating||this.showOnScroll)&&window.innerWidth<=672?this._reSizeBtn=!0:this._reSizeBtn=!1}_handleScroll(){const o=window.scrollY,t=window.innerHeight,r=document.documentElement.scrollHeight;this._showButton=o>(r-t)/2}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this._debounceResize),this.showOnScroll&&window.addEventListener("scroll",this._debounceScroll)}disconnectedCallback(){window.removeEventListener("resize",this._debounceResize),this.showOnScroll&&window.removeEventListener("scroll",this._debounceScroll),super.disconnectedCallback()}};f.styles=[m],f.shadowRootOptions={...s.shadowRootOptions,delegatesFocus:!0},f.formAssociated=!0,o([t()],f.prototype,"internals",void 0),o([r({type:String})],f.prototype,"description",void 0),o([r({type:String})],f.prototype,"type",void 0),o([r({type:String})],f.prototype,"kind",void 0),o([r({type:String})],f.prototype,"href",void 0),o([r({type:String})],f.prototype,"target",void 0),o([r({type:String})],f.prototype,"size",void 0),o([r({type:String})],f.prototype,"iconPosition",void 0),o([t()],f.prototype,"iconOnly",void 0),o([r({type:Boolean,reflect:!0})],f.prototype,"disabled",void 0),o([r({type:String})],f.prototype,"value",void 0),o([r({type:String})],f.prototype,"name",void 0),o([r({type:Boolean})],f.prototype,"isFloating",void 0),o([r({type:Boolean})],f.prototype,"showOnScroll",void 0),o([t()],f.prototype,"_showButton",void 0),o([t()],f.prototype,"_reSizeBtn",void 0),o([r({type:String})],f.prototype,"formmethod",void 0),o([e()],f.prototype,"_slottedEls",void 0),o([i({slot:"icon"})],f.prototype,"_iconEls",void 0),o([n(".button")],f.prototype,"_btnEl",void 0),f=o([a("kyn-button")],f);export{f as Button};
+    `}handleClick(o){this.internals.form&&("submit"===this.type?this.internals.form.requestSubmit():"reset"===this.type&&this.internals.form.reset());const t=new CustomEvent("on-click",{detail:{origEvent:o}});this.dispatchEvent(t)}_testIconOnly(){var o,t;if(!(null===(o=this._iconEls)||void 0===o?void 0:o.length))return!1;return!(null===(t=this._slottedEls)||void 0===t?void 0:t.filter((o=>""!==o.textContent.trim()))).filter((o=>{if(o.tagName){const t=getComputedStyle(o);return"none"!==t.display&&"hidden"!==t.visibility}return!0})).length}_handleSlotChange(){this.iconOnly=this._testIconOnly(),this.requestUpdate()}_reSizeButton(){(this.isFloating||this.showOnScroll)&&window.innerWidth<=672?this._reSizeBtn=!0:this._reSizeBtn=!1}_handleScroll(){const o=window.scrollY,t=window.innerHeight,r=document.documentElement.scrollHeight;this._showButton=o>(r-t)/2}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this._debounceResize),this.showOnScroll&&window.addEventListener("scroll",this._debounceScroll)}disconnectedCallback(){window.removeEventListener("resize",this._debounceResize),this.showOnScroll&&window.removeEventListener("scroll",this._debounceScroll),super.disconnectedCallback()}};f.styles=[m],f.shadowRootOptions={...s.shadowRootOptions,delegatesFocus:!0},f.formAssociated=!0,o([t()],f.prototype,"internals",void 0),o([r({type:String})],f.prototype,"description",void 0),o([r({type:String})],f.prototype,"type",void 0),o([r({type:String})],f.prototype,"kind",void 0),o([r({type:String})],f.prototype,"href",void 0),o([r({type:String})],f.prototype,"target",void 0),o([r({type:String})],f.prototype,"size",void 0),o([r({type:String})],f.prototype,"iconPosition",void 0),o([t()],f.prototype,"iconOnly",void 0),o([r({type:Boolean,reflect:!0})],f.prototype,"disabled",void 0),o([r({type:String})],f.prototype,"value",void 0),o([r({type:String})],f.prototype,"name",void 0),o([r({type:Boolean})],f.prototype,"isFloating",void 0),o([r({type:Boolean})],f.prototype,"showOnScroll",void 0),o([t()],f.prototype,"_showButton",void 0),o([t()],f.prototype,"_reSizeBtn",void 0),o([r({type:String})],f.prototype,"formmethod",void 0),o([e()],f.prototype,"_slottedEls",void 0),o([n({slot:"icon"})],f.prototype,"_iconEls",void 0),o([i(".button")],f.prototype,"_btnEl",void 0),f=o([a("kyn-button")],f);export{f as Button};
 //# sourceMappingURL=button.js.map

package/components/reusable/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../../src/components/reusable/button/button.ts"],"sourcesContent":["/**\n * Copyright Kyndryl, Inc. 2023\n */\n\nimport { html, LitElement } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  query,\n  queryAssignedNodes,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport { debounce } from '../../../common/helpers/helpers';\n\nimport {\n  BUTTON_KINDS,\n  BUTTON_SIZES,\n  BUTTON_TYPES,\n  BUTTON_ICON_POSITION,\n  BUTTON_KINDS_SOLID,\n  BUTTON_KINDS_OUTLINE,\n} from './defs';\n\nimport stylesheet from './button.scss';\n\n/**\n * Button component.\n *\n * @slot unnamed - Slot for button text.\n * @slot icon - Slot for an icon.\n * @fires on-click - Emits the original click event.\n */\n@customElement('kyn-button')\nexport class Button extends LitElement {\n  static override styles = [stylesheet];\n\n  /** @ignore */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /** ARIA label for the button for accessibility. */\n  @property({ type: String })\n  description = '';\n\n  /** Type for the &lt;button&gt; element. */\n  @property({ type: String })\n  type: BUTTON_TYPES = BUTTON_TYPES.BUTTON;\n\n  /** Specifies the visual appearance/kind of the button. */\n  @property({ type: String })\n  kind: BUTTON_KINDS = BUTTON_KINDS.PRIMARY;\n\n  /** Converts the button to an &lt;a&gt; tag if specified. */\n  @property({ type: String })\n  href = '';\n\n  /** Link target, only valid if href is supplied. */\n  @property({ type: String })\n  target = '_self';\n\n  /** Specifies the size of the button. */\n  @property({ type: String })\n  size: BUTTON_SIZES = BUTTON_SIZES.MEDIUM;\n\n  /** Specifies the position of the icon relative to any button text. */\n  @property({ type: String })\n  iconPosition: BUTTON_ICON_POSITION = BUTTON_ICON_POSITION.CENTER;\n\n  /** Determines if the button is disabled.\n   * @internal\n   */\n  @state()\n  iconOnly = false;\n\n  /** Determines if the button is disabled. */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Button value.  */\n  @property({ type: String })\n  value = '';\n\n  /** Button name. */\n  @property({ type: String })\n  name = '';\n\n  /** Determines if the button is Floatable */\n  @property({ type: Boolean })\n  isFloating = false;\n\n  /** Show button after scrolling to 50% of the page*/\n  @property({ type: Boolean })\n  showOnScroll = false;\n\n  /** Determines showButton state .\n   * @internal\n   */\n  @state()\n  _showButton = false;\n\n  /** re-size button to 'medium' at mobile breakpoint.\n   * @internal\n   */\n  @state()\n  _reSizeBtn = false;\n\n  /** Button formmethod.  */\n  @property({ type: String })\n  formmethod!: any;\n\n  /** Queries default slot nodes.\n   * @internal\n   */\n  @queryAssignedNodes()\n  _slottedEls!: Array<any>;\n\n  /** Queries icon slot nodes.\n   * @internal\n   */\n  @queryAssignedElements({ slot: 'icon' })\n  _iconEls!: Array<any>;\n\n  /** Queries the .button element.\n   * @internal\n   */\n  @query('.button')\n  _btnEl!: any;\n\n  override render() {\n    const BtnClasses = {\n      'kd-btn': true,\n      [`kd-btn--${this.kind}`]: true,\n      'kd-btn--solid-styles': BUTTON_KINDS_SOLID.includes(this.kind),\n      'kd-btn--outline-styles': BUTTON_KINDS_OUTLINE.includes(this.kind),\n      'kd-btn--large': this.size === BUTTON_SIZES.LARGE,\n      'kd-btn--small': this.size === BUTTON_SIZES.SMALL,\n      'kd-btn--medium': this._reSizeBtn || this.size === BUTTON_SIZES.MEDIUM,\n      'kd-btn--icon-align': !!this.iconPosition,\n      [`kd-btn--icon-${this.iconPosition}`]:\n        !!this.iconPosition && !this.iconOnly,\n      [`kd-btn--icon-center`]: this._iconEls?.length && this.iconOnly,\n      'kd-btn--float': this.isFloating,\n      'kd-btn--hidden': this.showOnScroll && !this._showButton,\n      'icon-only': this._iconEls?.length && this.iconOnly,\n    };\n\n    return html`\n      ${this.href && this.href !== ''\n        ? html`\n            <a\n              part=\"button\"\n              class=${classMap(BtnClasses)}\n              href=${this.href}\n              target=${this.target}\n              ?disabled=${this.disabled}\n              aria-label=${ifDefined(this.description)}\n              title=${ifDefined(this.description)}\n              @click=${(e: Event) => this.handleClick(e)}\n            >\n              <span>\n                <slot @slotchange=${() => this._handleSlotChange()}></slot>\n                <slot\n                  name=\"icon\"\n                  @slotchange=${() => this._handleSlotChange()}\n                ></slot>\n              </span>\n            </a>\n          `\n        : html`\n            <button\n              part=\"button\"\n              class=${classMap(BtnClasses)}\n              type=${this.type}\n              ?disabled=${this.disabled}\n              aria-label=${ifDefined(this.description)}\n              title=${ifDefined(this.description)}\n              name=${ifDefined(this.name)}\n              value=${ifDefined(this.value)}\n              formmethod=${ifDefined(this.formmethod)}\n              @click=${(e: Event) => this.handleClick(e)}\n            >\n              <span>\n                <slot @slotchange=${() => this._handleSlotChange()}></slot>\n                <slot\n                  name=\"icon\"\n                  @slotchange=${() => this._handleSlotChange()}\n                ></slot>\n              </span>\n            </button>\n          `}\n    `;\n  }\n\n  private handleClick(e: Event) {\n    if (this.internals.form) {\n      if (this.type === 'submit') {\n        this.internals.form.requestSubmit();\n      } else if (this.type === 'reset') {\n        this.internals.form.reset();\n      }\n    }\n\n    const event = new CustomEvent('on-click', {\n      detail: { origEvent: e },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _testIconOnly() {\n    if (!this._iconEls?.length) {\n      return false;\n    }\n\n    const TextNodes = this._slottedEls?.filter((node: any) => {\n      return node.textContent.trim() !== '';\n    });\n\n    const VisibleTextNodes = TextNodes.filter((node: any) => {\n      if (node.tagName) {\n        const Styles = getComputedStyle(node);\n        return Styles.display !== 'none' && Styles.visibility !== 'hidden';\n      } else {\n        return true;\n      }\n    });\n\n    return !VisibleTextNodes.length;\n  }\n\n  private _handleSlotChange() {\n    this.iconOnly = this._testIconOnly();\n    this.requestUpdate();\n  }\n\n  /** @internal */\n  private _debounceResize = debounce(() => {\n    this._reSizeButton();\n    this.iconOnly = this._testIconOnly();\n  });\n\n  /** @internal */\n  private _reSizeButton() {\n    // Resize button to medium at mobile breakpoint\n    if ((this.isFloating || this.showOnScroll) && window.innerWidth <= 672) {\n      this._reSizeBtn = true;\n    } else {\n      this._reSizeBtn = false;\n    }\n  }\n\n  /** @internal */\n  private _debounceScroll = debounce(() => {\n    if (this.showOnScroll) {\n      this._handleScroll();\n    }\n  });\n\n  /** @internal */\n  private _handleScroll() {\n    const scrollPosition = window.scrollY;\n    const windowHeight = window.innerHeight;\n    const pageHeight = document.documentElement.scrollHeight;\n    // Show the button if scrolled 50% of the page\n    this._showButton = scrollPosition > (pageHeight - windowHeight) / 2;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener('resize', this._debounceResize);\n    if (this.showOnScroll) {\n      window.addEventListener('scroll', this._debounceScroll);\n    }\n  }\n\n  override disconnectedCallback() {\n    window.removeEventListener('resize', this._debounceResize);\n    if (this.showOnScroll) {\n      window.removeEventListener('scroll', this._debounceScroll);\n    }\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-button': Button;\n  }\n}\n"],"names":["Button","LitElement","constructor","this","internals","attachInternals","description","type","BUTTON_TYPES","BUTTON","kind","BUTTON_KINDS","PRIMARY","href","target","size","BUTTON_SIZES","MEDIUM","iconPosition","BUTTON_ICON_POSITION","CENTER","iconOnly","disabled","value","name","isFloating","showOnScroll","_showButton","_reSizeBtn","_debounceResize","debounce","_reSizeButton","_testIconOnly","_debounceScroll","_handleScroll","render","BtnClasses","BUTTON_KINDS_SOLID","includes","BUTTON_KINDS_OUTLINE","LARGE","SMALL","_a","_iconEls","length","_b","html","classMap","ifDefined","e","handleClick","_handleSlotChange","formmethod","form","requestSubmit","reset","event","CustomEvent","detail","origEvent","dispatchEvent","_slottedEls","filter","node","textContent","trim","tagName","Styles","getComputedStyle","display","visibility","requestUpdate","window","innerWidth","scrollPosition","scrollY","windowHeight","innerHeight","pageHeight","document","documentElement","scrollHeight","connectedCallback","super","addEventListener","disconnectedCallback","removeEventListener","styles","stylesheet","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","String","Boolean","reflect","queryAssignedNodes","queryAssignedElements","slot","query","customElement"],"mappings":"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"}
+{"version":3,"file":"button.js","sources":["../../../../src/components/reusable/button/button.ts"],"sourcesContent":["/**\n * Copyright Kyndryl, Inc. 2023\n */\n\nimport { html, LitElement } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  query,\n  queryAssignedNodes,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport { debounce } from '../../../common/helpers/helpers';\n\nimport {\n  BUTTON_KINDS,\n  BUTTON_SIZES,\n  BUTTON_TYPES,\n  BUTTON_ICON_POSITION,\n  BUTTON_KINDS_SOLID,\n  BUTTON_KINDS_OUTLINE,\n} from './defs';\n\nimport stylesheet from './button.scss';\n\n/**\n * Button component.\n *\n * @slot unnamed - Slot for button text.\n * @slot icon - Slot for an icon.\n * @fires on-click - Emits the original click event.\n */\n@customElement('kyn-button')\nexport class Button extends LitElement {\n  static override styles = [stylesheet];\n\n  /** @ignore */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /** ARIA label for the button for accessibility. */\n  @property({ type: String })\n  description = '';\n\n  /** Type for the &lt;button&gt; element. */\n  @property({ type: String })\n  type: BUTTON_TYPES = BUTTON_TYPES.BUTTON;\n\n  /** Specifies the visual appearance/kind of the button. */\n  @property({ type: String })\n  kind: BUTTON_KINDS = BUTTON_KINDS.PRIMARY;\n\n  /** Converts the button to an &lt;a&gt; tag if specified. */\n  @property({ type: String })\n  href = '';\n\n  /** Link target, only valid if href is supplied. */\n  @property({ type: String })\n  target = '_self';\n\n  /** Specifies the size of the button. */\n  @property({ type: String })\n  size: BUTTON_SIZES = BUTTON_SIZES.MEDIUM;\n\n  /** Specifies the position of the icon relative to any button text. */\n  @property({ type: String })\n  iconPosition: BUTTON_ICON_POSITION = BUTTON_ICON_POSITION.CENTER;\n\n  /** Determines if the button is disabled.\n   * @internal\n   */\n  @state()\n  iconOnly = false;\n\n  /** Determines if the button is disabled. */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Button value.  */\n  @property({ type: String })\n  value = '';\n\n  /** Button name. */\n  @property({ type: String })\n  name = '';\n\n  /** Determines if the button is Floatable */\n  @property({ type: Boolean })\n  isFloating = false;\n\n  /** Show button after scrolling to 50% of the page*/\n  @property({ type: Boolean })\n  showOnScroll = false;\n\n  /** Determines showButton state .\n   * @internal\n   */\n  @state()\n  _showButton = false;\n\n  /** re-size button to 'medium' at mobile breakpoint.\n   * @internal\n   */\n  @state()\n  _reSizeBtn = false;\n\n  /** Button formmethod.  */\n  @property({ type: String })\n  formmethod!: any;\n\n  /** Queries default slot nodes.\n   * @internal\n   */\n  @queryAssignedNodes()\n  _slottedEls!: Array<any>;\n\n  /** Queries icon slot nodes.\n   * @internal\n   */\n  @queryAssignedElements({ slot: 'icon' })\n  _iconEls!: Array<any>;\n\n  /** Queries the .button element.\n   * @internal\n   */\n  @query('.button')\n  _btnEl!: any;\n\n  override render() {\n    const BtnClasses = {\n      'kd-btn': true,\n      [`kd-btn--${this.kind}`]: true,\n      'kd-btn--solid-styles': BUTTON_KINDS_SOLID.includes(this.kind),\n      'kd-btn--outline-styles': BUTTON_KINDS_OUTLINE.includes(this.kind),\n      'kd-btn--large': this.size === BUTTON_SIZES.LARGE,\n      'kd-btn--small': this.size === BUTTON_SIZES.SMALL,\n      'kd-btn--medium': this._reSizeBtn || this.size === BUTTON_SIZES.MEDIUM,\n      'kd-btn--icon-align': !!this.iconPosition,\n      [`kd-btn--icon-${this.iconPosition}`]:\n        !!this.iconPosition && !this.iconOnly,\n      [`kd-btn--icon-center`]: this._iconEls?.length && this.iconOnly,\n      'kd-btn--float': this.isFloating,\n      'kd-btn--hidden': this.showOnScroll && !this._showButton,\n      'icon-only': this._iconEls?.length && this.iconOnly,\n    };\n\n    return html`\n      ${this.href && this.href !== ''\n        ? html`\n            <a\n              part=\"button\"\n              class=${classMap(BtnClasses)}\n              href=${this.href}\n              target=${this.target}\n              ?disabled=${this.disabled}\n              aria-label=${ifDefined(this.description)}\n              title=${ifDefined(this.description)}\n              @click=${(e: Event) => this.handleClick(e)}\n            >\n              <span>\n                <slot @slotchange=${() => this._handleSlotChange()}></slot>\n                <slot\n                  name=\"icon\"\n                  @slotchange=${() => this._handleSlotChange()}\n                ></slot>\n              </span>\n            </a>\n          `\n        : html`\n            <button\n              part=\"button\"\n              class=${classMap(BtnClasses)}\n              type=${this.type}\n              ?disabled=${this.disabled}\n              aria-label=${ifDefined(this.description)}\n              title=${ifDefined(this.description)}\n              name=${ifDefined(this.name)}\n              value=${ifDefined(this.value)}\n              formmethod=${ifDefined(this.formmethod)}\n              @click=${(e: Event) => this.handleClick(e)}\n            >\n              <span>\n                <slot @slotchange=${() => this._handleSlotChange()}></slot>\n                <slot\n                  name=\"icon\"\n                  @slotchange=${() => this._handleSlotChange()}\n                ></slot>\n              </span>\n            </button>\n          `}\n    `;\n  }\n\n  private handleClick(e: Event) {\n    if (this.internals.form) {\n      if (this.type === 'submit') {\n        this.internals.form.requestSubmit();\n      } else if (this.type === 'reset') {\n        this.internals.form.reset();\n      }\n    }\n\n    const event = new CustomEvent('on-click', {\n      detail: { origEvent: e },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _testIconOnly() {\n    if (!this._iconEls?.length) {\n      return false;\n    }\n\n    const TextNodes = this._slottedEls?.filter((node: any) => {\n      return node.textContent.trim() !== '';\n    });\n\n    const VisibleTextNodes = TextNodes.filter((node: any) => {\n      if (node.tagName) {\n        const Styles = getComputedStyle(node);\n        return Styles.display !== 'none' && Styles.visibility !== 'hidden';\n      } else {\n        return true;\n      }\n    });\n\n    return !VisibleTextNodes.length;\n  }\n\n  private _handleSlotChange() {\n    this.iconOnly = this._testIconOnly();\n    this.requestUpdate();\n  }\n\n  /** @internal */\n  private _debounceResize = debounce(() => {\n    this._reSizeButton();\n    this.iconOnly = this._testIconOnly();\n  });\n\n  /** @internal */\n  private _reSizeButton() {\n    // Resize button to medium at mobile breakpoint\n    if ((this.isFloating || this.showOnScroll) && window.innerWidth <= 672) {\n      this._reSizeBtn = true;\n    } else {\n      this._reSizeBtn = false;\n    }\n  }\n\n  /** @internal */\n  private _debounceScroll = debounce(() => {\n    if (this.showOnScroll) {\n      this._handleScroll();\n    }\n  });\n\n  /** @internal */\n  private _handleScroll() {\n    const scrollPosition = window.scrollY;\n    const windowHeight = window.innerHeight;\n    const pageHeight = document.documentElement.scrollHeight;\n    // Show the button if scrolled 50% of the page\n    this._showButton = scrollPosition > (pageHeight - windowHeight) / 2;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener('resize', this._debounceResize);\n    if (this.showOnScroll) {\n      window.addEventListener('scroll', this._debounceScroll);\n    }\n  }\n\n  override disconnectedCallback() {\n    window.removeEventListener('resize', this._debounceResize);\n    if (this.showOnScroll) {\n      window.removeEventListener('scroll', this._debounceScroll);\n    }\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-button': Button;\n  }\n}\n"],"names":["Button","LitElement","constructor","this","internals","attachInternals","description","type","BUTTON_TYPES","BUTTON","kind","BUTTON_KINDS","PRIMARY","href","target","size","BUTTON_SIZES","MEDIUM","iconPosition","BUTTON_ICON_POSITION","CENTER","iconOnly","disabled","value","name","isFloating","showOnScroll","_showButton","_reSizeBtn","_debounceResize","debounce","_reSizeButton","_testIconOnly","_debounceScroll","_handleScroll","render","BtnClasses","BUTTON_KINDS_SOLID","includes","BUTTON_KINDS_OUTLINE","LARGE","SMALL","_a","_iconEls","length","_b","html","classMap","ifDefined","e","handleClick","_handleSlotChange","formmethod","form","requestSubmit","reset","event","CustomEvent","detail","origEvent","dispatchEvent","_slottedEls","filter","node","textContent","trim","tagName","Styles","getComputedStyle","display","visibility","requestUpdate","window","innerWidth","scrollPosition","scrollY","windowHeight","innerHeight","pageHeight","document","documentElement","scrollHeight","connectedCallback","super","addEventListener","disconnectedCallback","removeEventListener","styles","stylesheet","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","String","Boolean","reflect","queryAssignedNodes","queryAssignedElements","slot","query","customElement"],"mappings":"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"}

package/components/reusable/checkbox/checkbox.d.ts

@@ -33,6 +33,10 @@ export declare class Checkbox extends LitElement {
      * Checkbox disabled state, inherited from the parent group.
      */
     disabled: boolean;
+    /**
+     * Prevent checkbox from being focusable. Disables it functionally but not visually.
+     */
+    notFocusable: boolean;
     /**
      * Checkbox group invalid state, inherited from the parent group.
      * @internal

package/components/reusable/checkbox/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/checkbox/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC;;;;GAIG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,MAAgB;IAEtC,cAAc;IACd,OAAgB,iBAAiB;;;;MAG/B;IAEF,sBAAsB;IAEtB,KAAK,SAAM;IAEX;;;OAGG;IAEH,IAAI,SAAM;IAEV;;;OAGG;IAEH,OAAO,UAAS;IAEhB;;;OAGG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,OAAO,UAAS;IAEhB;;;OAGG;IAEH,aAAa,UAAS;IAEtB,oEAAoE;IAEpE,aAAa,UAAS;IAEb,MAAM;IA2Bf,OAAO,CAAC,YAAY;CAarB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,QAAQ,CAAC;KAC1B;CACF"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/checkbox/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC;;;;GAIG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,MAAgB;IAEtC,cAAc;IACd,OAAgB,iBAAiB;;;;MAG/B;IAEF,sBAAsB;IAEtB,KAAK,SAAM;IAEX;;;OAGG;IAEH,IAAI,SAAM;IAEV;;;OAGG;IAEH,OAAO,UAAS;IAEhB;;;OAGG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,YAAY,UAAS;IAErB;;;OAGG;IAEH,OAAO,UAAS;IAEhB;;;OAGG;IAEH,aAAa,UAAS;IAEtB,oEAAoE;IAEpE,aAAa,UAAS;IAEb,MAAM;IA4Bf,OAAO,CAAC,YAAY;CAarB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,QAAQ,CAAC;KAC1B;CACF"}

package/components/reusable/checkbox/checkbox.js

@@ -57,30 +57,30 @@ input::before {
   transition: 150ms transform ease-out;
   transform: scale(0);
 }
-input:not([disabled]):active {
+input:not(.disabled):active {
   background: var(--kd-color-background-button-primary-pressed);
   border-color: var(--kd-color-background-ui-hollow-pressed);
 }
-input:not([disabled]):hover {
+input:not(.disabled):hover {
   background: var(--kd-color-background-ui-hollow-hover);
   border-color: var(--kd-color-border-ui-hover);
 }
-input:not([disabled]):focus-visible {
+input:not(.disabled):focus-visible {
   border-color: var(--kd-color-border-forms-default);
   outline-color: var(--kd-color-border-variants-focus);
   background: var(--kd-color-background-ui-hollow-default);
   outline-offset: 2px;
 }
-input:not([disabled]):active {
+input:not(.disabled):active {
   background: var(--kd-color-background-ui-hollow-pressed);
   border-color: var(--kd-color-border-ui-pressed);
   outline-color: transparent;
 }
-input:not([disabled]):checked {
+input:not(.disabled):checked {
   background: var(--kd-color-background-ui-default-secondary);
   border-color: transparent;
 }
-input:not([disabled]):checked::before {
+input:not(.disabled):checked::before {
   transform: scale(1);
   background: var(--kd-color-background-ui-hollow-default);
   mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMuNSA1Ljg1NTQ3TDkgLTIuMDMwNjNlLTA2TDEwIDEuMDY0NjNMMy40ODU2NiA4TDAgNC4yODkwNkwxLjAxNDM0IDMuMjA5MTZMMy41IDUuODU1NDdaIiBmaWxsPSIjMDAwIi8+DQo8L3N2Zz4=");
@@ -92,31 +92,31 @@ input:not([disabled]):checked::before {
   mask-position: center;
   -webkit-mask-position: center;
 }
-input:not([disabled]):checked:hover {
+input:not(.disabled):checked:hover {
   outline-color: transparent;
 }
-input:not([disabled]):checked:hover::before {
+input:not(.disabled):checked:hover::before {
   background: var(--kd-color-background-ui-hollow-hover);
 }
-input:not([disabled]):checked:focus-visible {
+input:not(.disabled):checked:focus-visible {
   border-color: transparent;
   outline-color: var(--kd-color-border-variants-focus);
 }
-input:not([disabled]):checked:active {
+input:not(.disabled):checked:active {
   border-color: transparent;
 }
-input:not([disabled]):checked:active::before {
+input:not(.disabled):checked:active::before {
   background: var(--kd-color-background-ui-hollow-pressed);
 }
-input[disabled] {
+input.disabled {
   background: var(--kd-color-background-forms-disabled);
   border-color: var(--kd-color-border-ui-disabled);
 }
-input[disabled]:checked {
+input.disabled:checked {
   background: var(--kd-color-background-forms-disabled);
   border-color: transparent;
 }
-input[disabled]:checked::before {
+input.disabled:checked::before {
   transform: scale(1);
   background: var(--kd-color-icon-disabled);
   mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMuNSA1Ljg1NTQ3TDkgLTIuMDMwNjNlLTA2TDEwIDEuMDY0NjNMMy40ODU2NiA4TDAgNC4yODkwNkwxLjAxNDM0IDMuMjA5MTZMMy41IDUuODU1NDdaIiBmaWxsPSIjMDAwIi8+DQo8L3N2Zz4=");
@@ -129,11 +129,11 @@ input[disabled]:checked::before {
   -webkit-mask-position: center;
 }
 
-input[type=checkbox]:indeterminate:not([disabled]) {
+input[type=checkbox]:indeterminate:not(.disabled) {
   background: var(--kd-color-background-ui-default-secondary);
   border-color: transparent;
 }
-input[type=checkbox]:indeterminate:not([disabled])::before {
+input[type=checkbox]:indeterminate:not(.disabled)::before {
   content: "";
   display: block;
   width: 10px;
@@ -143,26 +143,26 @@ input[type=checkbox]:indeterminate:not([disabled])::before {
   mask: linear-gradient(transparent 3px, #000 3px 5px, transparent 5px);
   -webkit-mask: linear-gradient(transparent 3px, #000 3px 5px, transparent 5px);
 }
-input[type=checkbox]:indeterminate:not([disabled]):hover {
+input[type=checkbox]:indeterminate:not(.disabled):hover {
   background: var(--kd-color-background-ui-default-secondary);
   border-color: transparent;
 }
-input[type=checkbox]:indeterminate:not([disabled]):hover::before {
+input[type=checkbox]:indeterminate:not(.disabled):hover::before {
   background: var(--kd-color-background-ui-hollow-hover);
 }
-input[type=checkbox]:indeterminate:not([disabled]):active {
+input[type=checkbox]:indeterminate:not(.disabled):active {
   background: var(--kd-color-background-ui-default-secondary);
   border-color: transparent;
 }
-input[type=checkbox]:indeterminate:not([disabled]):active::before {
+input[type=checkbox]:indeterminate:not(.disabled):active::before {
   background: var(--kd-color-background-ui-hollow-pressed);
 }
 
-input[type=checkbox]:indeterminate:disabled {
+input[type=checkbox]:indeterminate.disabled {
   background: var(--kd-color-background-ui-default-disabled);
   border-color: transparent;
 }
-input[type=checkbox]:indeterminate:disabled::before {
+input[type=checkbox]:indeterminate.disabled::before {
   content: "";
   display: block;
   width: 10px;
@@ -176,33 +176,33 @@ input[type=checkbox]:indeterminate:disabled::before {
 input[type=checkbox][invalid] {
   border-color: var(--kd-color-status-error-dark);
 }
-input[type=checkbox][invalid]:not([disabled]):checked, input[type=checkbox][invalid]:not([disabled]):indeterminate {
+input[type=checkbox][invalid]:not(.disabled):checked, input[type=checkbox][invalid]:not(.disabled):indeterminate {
   background: var(--kd-color-status-error-dark);
   border-color: transparent;
 }
-input[type=checkbox][invalid]:not([disabled]):checked:hover, input[type=checkbox][invalid]:not([disabled]):indeterminate:hover {
+input[type=checkbox][invalid]:not(.disabled):checked:hover, input[type=checkbox][invalid]:not(.disabled):indeterminate:hover {
   background: var(--kd-color-background-button-primary-destructive-hover);
   border-color: var(--kd-color-background-button-primary-destructive-hover);
 }
-input[type=checkbox][invalid]:not([disabled]):checked:active, input[type=checkbox][invalid]:not([disabled]):indeterminate:active {
+input[type=checkbox][invalid]:not(.disabled):checked:active, input[type=checkbox][invalid]:not(.disabled):indeterminate:active {
   background: var(--kd-color-background-button-primary-destructive-pressed);
   border-color: var(--kd-color-background-button-primary-destructive-pressed);
   outline-color: var(--kd-color-background-button-primary-destructive-pressed);
 }
-input[type=checkbox][invalid][disabled] {
+input[type=checkbox][invalid].disabled {
   border-color: var(--kd-color-border-ui-disabled);
 }
-input[type=checkbox][invalid][disabled]:hover {
+input[type=checkbox][invalid].disabled:hover {
   border-color: var(--kd-color-border-ui-disabled);
 }
-input[type=checkbox][invalid][disabled][checked] {
+input[type=checkbox][invalid].disabled[checked] {
   border-color: transparent;
 }
-input[type=checkbox][invalid][disabled][checked]:hover {
+input[type=checkbox][invalid].disabled[checked]:hover {
   border-color: transparent;
   background: var(--kd-color-background-ui-default-disabled);
 }
-input[type=checkbox][invalid][disabled]:active, input[type=checkbox][invalid][disabled]:focus-visible {
+input[type=checkbox][invalid].disabled:active, input[type=checkbox][invalid].disabled:focus-visible {
   background-color: transparent;
   border-color: var(--kd-color-border-ui-disabled);
   outline-color: transparent;
@@ -229,7 +229,7 @@ input[type=checkbox][invalid]:active {
   position: absolute;
   white-space: nowrap;
   width: 1px;
-}`;let l=class extends i{constructor(){super(...arguments),this.value="",this.name="",this.checked=!1,this.required=!1,this.disabled=!1,this.invalid=!1,this.visiblyHidden=!1,this.indeterminate=!1}render(){return d`
+}`;let l=class extends i{constructor(){super(...arguments),this.value="",this.name="",this.checked=!1,this.required=!1,this.disabled=!1,this.notFocusable=!1,this.invalid=!1,this.visiblyHidden=!1,this.indeterminate=!1}render(){return d`
       <label
         ?disabled=${this.disabled}
         ?invalid=${this.invalid}
@@ -240,17 +240,18 @@ input[type=checkbox][invalid]:active {
         </span>
 
         <input
+          class=${this.disabled?"disabled":""}
           type="checkbox"
           name=${this.name}
           value=${this.value}
           .checked=${this.checked}
           ?checked=${this.checked}
           ?required=${this.required}
-          ?disabled=${this.disabled}
+          ?disabled=${this.disabled||this.notFocusable}
           ?invalid=${this.invalid}
           @change=${e=>this.handleChange(e)}
           .indeterminate=${this.indeterminate}
         />
       </label>
-    `}handleChange(e){const o=new CustomEvent("on-checkbox-change",{bubbles:!0,composed:!0,detail:{checked:e.target.checked,value:e.target.value,origEvent:e}});this.dispatchEvent(o)}};l.styles=n,l.shadowRootOptions={...i.shadowRootOptions,delegatesFocus:!0},e([o({type:String})],l.prototype,"value",void 0),e([o({type:String})],l.prototype,"name",void 0),e([o({type:Boolean,reflect:!0})],l.prototype,"checked",void 0),e([o({type:Boolean})],l.prototype,"required",void 0),e([o({type:Boolean})],l.prototype,"disabled",void 0),e([o({type:Boolean})],l.prototype,"invalid",void 0),e([o({type:Boolean})],l.prototype,"visiblyHidden",void 0),e([o({type:Boolean})],l.prototype,"indeterminate",void 0),l=e([r("kyn-checkbox")],l);export{l as Checkbox};
+    `}handleChange(e){const o=new CustomEvent("on-checkbox-change",{bubbles:!0,composed:!0,detail:{checked:e.target.checked,value:e.target.value,origEvent:e}});this.dispatchEvent(o)}};l.styles=n,l.shadowRootOptions={...i.shadowRootOptions,delegatesFocus:!0},e([o({type:String})],l.prototype,"value",void 0),e([o({type:String})],l.prototype,"name",void 0),e([o({type:Boolean,reflect:!0})],l.prototype,"checked",void 0),e([o({type:Boolean})],l.prototype,"required",void 0),e([o({type:Boolean})],l.prototype,"disabled",void 0),e([o({type:Boolean})],l.prototype,"notFocusable",void 0),e([o({type:Boolean})],l.prototype,"invalid",void 0),e([o({type:Boolean})],l.prototype,"visiblyHidden",void 0),e([o({type:Boolean})],l.prototype,"indeterminate",void 0),l=e([r("kyn-checkbox")],l);export{l as Checkbox};
 //# sourceMappingURL=checkbox.js.map

package/components/reusable/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../../../src/components/reusable/checkbox/checkbox.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport CheckboxScss from './checkbox.scss';\n\n/**\n * Checkbox.\n * @fires on-checkbox-change - Captures the change event and emits the selected value and original event details.\n * @slot unnamed - Slot for label text.\n */\n@customElement('kyn-checkbox')\nexport class Checkbox extends LitElement {\n  static override styles = CheckboxScss;\n\n  /** @ignore */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /** Checkbox value. */\n  @property({ type: String })\n  value = '';\n\n  /**\n   * Checkbox name, inherited from the parent group.\n   * @ignore\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * Checkbox checked state, inherited from the parent group if value matches.\n   * @internal\n   */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /**\n   * Makes the input required, inherited from the parent group.\n   * @internal\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * Checkbox disabled state, inherited from the parent group.\n   */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * Checkbox group invalid state, inherited from the parent group.\n   * @internal\n   */\n  @property({ type: Boolean })\n  invalid = false;\n\n  /**\n   * Determines whether the label should be hidden from visual view but remain accessible\n   * to screen readers for accessibility purposes.\n   */\n  @property({ type: Boolean })\n  visiblyHidden = false;\n\n  /** Determines whether the checkbox is in an indeterminate state. */\n  @property({ type: Boolean })\n  indeterminate = false;\n\n  override render() {\n    return html`\n      <label\n        ?disabled=${this.disabled}\n        ?invalid=${this.invalid}\n        class=\"${this.visiblyHidden ? 'label-hidden' : ''}\"\n      >\n        <span class=${classMap({ 'sr-only': this.visiblyHidden })}>\n          <slot></slot>\n        </span>\n\n        <input\n          type=\"checkbox\"\n          name=${this.name}\n          value=${this.value}\n          .checked=${this.checked}\n          ?checked=${this.checked}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n          ?invalid=${this.invalid}\n          @change=${(e: any) => this.handleChange(e)}\n          .indeterminate=${this.indeterminate}\n        />\n      </label>\n    `;\n  }\n\n  private handleChange(e: any) {\n    // emit selected value, bubble so it can be captured by the checkbox group\n    const event = new CustomEvent('on-checkbox-change', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        checked: e.target.checked,\n        value: e.target.value,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-checkbox': Checkbox;\n  }\n}\n"],"names":["Checkbox","LitElement","constructor","this","value","name","checked","required","disabled","invalid","visiblyHidden","indeterminate","render","html","classMap","e","handleChange","event","CustomEvent","bubbles","composed","detail","target","origEvent","dispatchEvent","styles","CheckboxScss","shadowRootOptions","delegatesFocus","__decorate","property","type","String","prototype","Boolean","reflect","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAWO,IAAMA,EAAN,cAAuBC,EAAvB,WAAAC,uBAWLC,KAAKC,MAAG,GAORD,KAAIE,KAAG,GAOPF,KAAOG,SAAG,EAOVH,KAAQI,UAAG,EAMXJ,KAAQK,UAAG,EAOXL,KAAOM,SAAG,EAOVN,KAAaO,eAAG,EAIhBP,KAAaQ,eAAG,CA0CjB,CAxCU,MAAAC,GACP,OAAOC,CAAI;;oBAEKV,KAAKK;mBACNL,KAAKM;iBACPN,KAAKO,cAAgB,eAAiB;;sBAEjCI,EAAS,CAAE,UAAWX,KAAKO;;;;;;iBAMhCP,KAAKE;kBACJF,KAAKC;qBACFD,KAAKG;qBACLH,KAAKG;sBACJH,KAAKI;sBACLJ,KAAKK;qBACNL,KAAKM;oBACLM,GAAWZ,KAAKa,aAAaD;2BACvBZ,KAAKQ;;;KAI7B,CAEO,YAAAK,CAAaD,GAEnB,MAAME,EAAQ,IAAIC,YAAY,qBAAsB,CAClDC,SAAS,EACTC,UAAU,EACVC,OAAQ,CACNf,QAASS,EAAEO,OAAOhB,QAClBF,MAAOW,EAAEO,OAAOlB,MAChBmB,UAAWR,KAGfZ,KAAKqB,cAAcP,EACpB,GAhGejB,EAAMyB,OAAGC,EAGT1B,EAAA2B,kBAAoB,IAC/B1B,EAAW0B,kBACdC,gBAAgB,GAKlBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACPhC,EAAAiC,UAAA,aAAA,GAOXJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACRhC,EAAAiC,UAAA,YAAA,GAOVJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,QAASC,SAAS,KACpBnC,EAAAiC,UAAA,eAAA,GAOhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDlC,EAAAiC,UAAA,gBAAA,GAMjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDlC,EAAAiC,UAAA,gBAAA,GAOjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACFlC,EAAAiC,UAAA,eAAA,GAOhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACIlC,EAAAiC,UAAA,qBAAA,GAItBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACIlC,EAAAiC,UAAA,qBAAA,GAxDXjC,EAAQ6B,EAAA,CADpBO,EAAc,iBACFpC"}
+{"version":3,"file":"checkbox.js","sources":["../../../../src/components/reusable/checkbox/checkbox.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport CheckboxScss from './checkbox.scss';\n\n/**\n * Checkbox.\n * @fires on-checkbox-change - Captures the change event and emits the selected value and original event details.\n * @slot unnamed - Slot for label text.\n */\n@customElement('kyn-checkbox')\nexport class Checkbox extends LitElement {\n  static override styles = CheckboxScss;\n\n  /** @ignore */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /** Checkbox value. */\n  @property({ type: String })\n  value = '';\n\n  /**\n   * Checkbox name, inherited from the parent group.\n   * @ignore\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * Checkbox checked state, inherited from the parent group if value matches.\n   * @internal\n   */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /**\n   * Makes the input required, inherited from the parent group.\n   * @internal\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * Checkbox disabled state, inherited from the parent group.\n   */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * Prevent checkbox from being focusable. Disables it functionally but not visually.\n   */\n  @property({ type: Boolean })\n  notFocusable = false;\n\n  /**\n   * Checkbox group invalid state, inherited from the parent group.\n   * @internal\n   */\n  @property({ type: Boolean })\n  invalid = false;\n\n  /**\n   * Determines whether the label should be hidden from visual view but remain accessible\n   * to screen readers for accessibility purposes.\n   */\n  @property({ type: Boolean })\n  visiblyHidden = false;\n\n  /** Determines whether the checkbox is in an indeterminate state. */\n  @property({ type: Boolean })\n  indeterminate = false;\n\n  override render() {\n    return html`\n      <label\n        ?disabled=${this.disabled}\n        ?invalid=${this.invalid}\n        class=\"${this.visiblyHidden ? 'label-hidden' : ''}\"\n      >\n        <span class=${classMap({ 'sr-only': this.visiblyHidden })}>\n          <slot></slot>\n        </span>\n\n        <input\n          class=${this.disabled ? 'disabled' : ''}\n          type=\"checkbox\"\n          name=${this.name}\n          value=${this.value}\n          .checked=${this.checked}\n          ?checked=${this.checked}\n          ?required=${this.required}\n          ?disabled=${this.disabled || this.notFocusable}\n          ?invalid=${this.invalid}\n          @change=${(e: any) => this.handleChange(e)}\n          .indeterminate=${this.indeterminate}\n        />\n      </label>\n    `;\n  }\n\n  private handleChange(e: any) {\n    // emit selected value, bubble so it can be captured by the checkbox group\n    const event = new CustomEvent('on-checkbox-change', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        checked: e.target.checked,\n        value: e.target.value,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-checkbox': Checkbox;\n  }\n}\n"],"names":["Checkbox","LitElement","constructor","this","value","name","checked","required","disabled","notFocusable","invalid","visiblyHidden","indeterminate","render","html","classMap","e","handleChange","event","CustomEvent","bubbles","composed","detail","target","origEvent","dispatchEvent","styles","CheckboxScss","shadowRootOptions","delegatesFocus","__decorate","property","type","String","prototype","Boolean","reflect","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAWO,IAAMA,EAAN,cAAuBC,EAAvB,WAAAC,uBAWLC,KAAKC,MAAG,GAORD,KAAIE,KAAG,GAOPF,KAAOG,SAAG,EAOVH,KAAQI,UAAG,EAMXJ,KAAQK,UAAG,EAMXL,KAAYM,cAAG,EAOfN,KAAOO,SAAG,EAOVP,KAAaQ,eAAG,EAIhBR,KAAaS,eAAG,CA2CjB,CAzCU,MAAAC,GACP,OAAOC,CAAI;;oBAEKX,KAAKK;mBACNL,KAAKO;iBACPP,KAAKQ,cAAgB,eAAiB;;sBAEjCI,EAAS,CAAE,UAAWZ,KAAKQ;;;;;kBAK/BR,KAAKK,SAAW,WAAa;;iBAE9BL,KAAKE;kBACJF,KAAKC;qBACFD,KAAKG;qBACLH,KAAKG;sBACJH,KAAKI;sBACLJ,KAAKK,UAAYL,KAAKM;qBACvBN,KAAKO;oBACLM,GAAWb,KAAKc,aAAaD;2BACvBb,KAAKS;;;KAI7B,CAEO,YAAAK,CAAaD,GAEnB,MAAME,EAAQ,IAAIC,YAAY,qBAAsB,CAClDC,SAAS,EACTC,UAAU,EACVC,OAAQ,CACNhB,QAASU,EAAEO,OAAOjB,QAClBF,MAAOY,EAAEO,OAAOnB,MAChBoB,UAAWR,KAGfb,KAAKsB,cAAcP,EACpB,GAvGelB,EAAM0B,OAAGC,EAGT3B,EAAA4B,kBAAoB,IAC/B3B,EAAW2B,kBACdC,gBAAgB,GAKlBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACPjC,EAAAkC,UAAA,aAAA,GAOXJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACRjC,EAAAkC,UAAA,YAAA,GAOVJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,QAASC,SAAS,KACpBpC,EAAAkC,UAAA,eAAA,GAOhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDnC,EAAAkC,UAAA,gBAAA,GAMjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDnC,EAAAkC,UAAA,gBAAA,GAMjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACGnC,EAAAkC,UAAA,oBAAA,GAOrBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACFnC,EAAAkC,UAAA,eAAA,GAOhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACInC,EAAAkC,UAAA,qBAAA,GAItBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACInC,EAAAkC,UAAA,qBAAA,GA9DXlC,EAAQ8B,EAAA,CADpBO,EAAc,iBACFrC"}

package/components/reusable/dropdown/dropdown.d.ts

@@ -8,6 +8,8 @@ declare const Dropdown_base: (new (...args: any[]) => import("../../../common/mi
  * @fires on-change - Captures the input event and emits the selected value and original event details.
  * @fires on-search - Capture the search input event and emits the search text.
  * @fires on-clear-all - Captures the the multi-select clear all button click event and emits the value.
+ * @fires on-add-option - Captures the add button click and emits the newly added option.
+ * @fires on-clear-all - Captures the the multi-select clear all button click event and emits the value.
  * @slot unnamed - Slot for dropdown options.
  * @slot tooltip - Slot for tooltip.
  */
@@ -60,7 +62,12 @@ export declare class Dropdown extends Dropdown_base {
         requiredText: string;
         errorText: string;
         clearAll: string;
+        clear: string;
+        addItem: string;
+        add: string;
     };
+    /** Enables the "Add New Option" feature. */
+    allowAddOption: boolean;
     /** Internal text strings.
      * @internal
      */
@@ -70,7 +77,15 @@ export declare class Dropdown extends Dropdown_base {
         requiredText: string;
         errorText: string;
         clearAll: string;
+        clear: string;
+        addItem: string;
+        add: string;
     };
+    /**
+     * New dropdown option value.
+     * @ignore
+     */
+    newOptionValue: string;
     /**
      * Selected option text, automatically derived.
      * @ignore
@@ -115,6 +130,11 @@ export declare class Dropdown extends Dropdown_base {
      * @ignore
      */
     clearMultipleEl: HTMLElement;
+    /**
+     * Queries the .add-option-input DOM element.
+     * @ignore
+     */
+    addOptionInputEl: HTMLInputElement;
     /**
      * Open drawer upwards.
      * @ignore
@@ -134,9 +154,13 @@ export declare class Dropdown extends Dropdown_base {
      */
     prevSearchKeydownIndex: number;
     render(): import("lit").TemplateResult<1>;
+    private _onAddOptionInputKeydown;
+    private _onAddOptionInputFocus;
+    private _handleAddOption;
     private renderHelperContent;
     firstUpdated(): void;
     private handleSlotChange;
+    private updateChildOptions;
     private handleClick;
     private _handleLabelClick;
     private handleButtonKeydown;
@@ -165,6 +189,9 @@ export declare class Dropdown extends Dropdown_base {
     updated(changedProps: any): void;
     private _updateTags;
     private _updateOptions;
+    private _handleInputNewOption;
+    private _handleRemoveOption;
+    private _updateSelectedText;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/reusable/dropdown/dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"names":[],"mappings":"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"}