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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/components/reusable/button/button.js +2 -3
  2. package/components/reusable/button/button.js.map +1 -1
  3. package/components/reusable/checkbox/checkbox.d.ts +4 -0
  4. package/components/reusable/checkbox/checkbox.d.ts.map +1 -1
  5. package/components/reusable/checkbox/checkbox.js +34 -33
  6. package/components/reusable/checkbox/checkbox.js.map +1 -1
  7. package/components/reusable/dropdown/dropdown.d.ts +27 -0
  8. package/components/reusable/dropdown/dropdown.d.ts.map +1 -1
  9. package/components/reusable/dropdown/dropdown.js +64 -32
  10. package/components/reusable/dropdown/dropdown.js.map +1 -1
  11. package/components/reusable/dropdown/dropdownOption.d.ts +10 -0
  12. package/components/reusable/dropdown/dropdownOption.d.ts.map +1 -1
  13. package/components/reusable/dropdown/dropdownOption.js +56 -28
  14. package/components/reusable/dropdown/dropdownOption.js.map +1 -1
  15. package/components/reusable/pagination/Pagination.js +1 -1
  16. package/components/reusable/pagination/Pagination.js.map +1 -1
  17. package/package.json +1 -1
package/components/reusable/button/button.js CHANGED
@@ -1,4 +1,4 @@
1
- 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`/**
1
+ 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`/**
2
2
  * Copyright Kyndryl, Inc. 2023
3
3
  */
4
4
  *,
@@ -50,7 +50,6 @@ import{_ as o}from"../../../vendor/tslib-53a81efe.js";import{t,n as r,a as e,l a
50
50
  text-decoration: none;
51
51
  cursor: pointer;
52
52
  width: 100%;
53
- min-width: 96px;
54
53
  max-width: 100%;
55
54
  display: flex;
56
55
  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
416
415
  </span>
417
416
  </button>
418
417
  `}
419
- `}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};
418
+ `}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};
420
419
  //# sourceMappingURL=button.js.map
package/components/reusable/button/button.js.map CHANGED
@@ -1 +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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"}
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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"}
package/components/reusable/checkbox/checkbox.d.ts CHANGED
@@ -33,6 +33,10 @@ export declare class Checkbox extends LitElement {
33
33
  * Checkbox disabled state, inherited from the parent group.
34
34
  */
35
35
  disabled: boolean;
36
+ /**
37
+ * Prevent checkbox from being focusable. Disables it functionally but not visually.
38
+ */
39
+ notFocusable: boolean;
36
40
  /**
37
41
  * Checkbox group invalid state, inherited from the parent group.
38
42
  * @internal
package/components/reusable/checkbox/checkbox.d.ts.map CHANGED
@@ -1 +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"}
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;;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 CHANGED
@@ -57,30 +57,30 @@ input::before {
57
57
  transition: 150ms transform ease-out;
58
58
  transform: scale(0);
59
59
  }
60
- input:not([disabled]):active {
60
+ input:not(.disabled):active {
61
61
  background: var(--kd-color-background-button-primary-pressed);
62
62
  border-color: var(--kd-color-background-ui-hollow-pressed);
63
63
  }
64
- input:not([disabled]):hover {
64
+ input:not(.disabled):hover {
65
65
  background: var(--kd-color-background-ui-hollow-hover);
66
66
  border-color: var(--kd-color-border-ui-hover);
67
67
  }
68
- input:not([disabled]):focus-visible {
68
+ input:not(.disabled):focus-visible {
69
69
  border-color: var(--kd-color-border-forms-default);
70
70
  outline-color: var(--kd-color-border-variants-focus);
71
71
  background: var(--kd-color-background-ui-hollow-default);
72
72
  outline-offset: 2px;
73
73
  }
74
- input:not([disabled]):active {
74
+ input:not(.disabled):active {
75
75
  background: var(--kd-color-background-ui-hollow-pressed);
76
76
  border-color: var(--kd-color-border-ui-pressed);
77
77
  outline-color: transparent;
78
78
  }
79
- input:not([disabled]):checked {
79
+ input:not(.disabled):checked {
80
80
  background: var(--kd-color-background-ui-default-secondary);
81
81
  border-color: transparent;
82
82
  }
83
- input:not([disabled]):checked::before {
83
+ input:not(.disabled):checked::before {
84
84
  transform: scale(1);
85
85
  background: var(--kd-color-background-ui-hollow-default);
86
86
  mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMuNSA1Ljg1NTQ3TDkgLTIuMDMwNjNlLTA2TDEwIDEuMDY0NjNMMy40ODU2NiA4TDAgNC4yODkwNkwxLjAxNDM0IDMuMjA5MTZMMy41IDUuODU1NDdaIiBmaWxsPSIjMDAwIi8+DQo8L3N2Zz4=");
@@ -92,31 +92,31 @@ input:not([disabled]):checked::before {
92
92
  mask-position: center;
93
93
  -webkit-mask-position: center;
94
94
  }
95
- input:not([disabled]):checked:hover {
95
+ input:not(.disabled):checked:hover {
96
96
  outline-color: transparent;
97
97
  }
98
- input:not([disabled]):checked:hover::before {
98
+ input:not(.disabled):checked:hover::before {
99
99
  background: var(--kd-color-background-ui-hollow-hover);
100
100
  }
101
- input:not([disabled]):checked:focus-visible {
101
+ input:not(.disabled):checked:focus-visible {
102
102
  border-color: transparent;
103
103
  outline-color: var(--kd-color-border-variants-focus);
104
104
  }
105
- input:not([disabled]):checked:active {
105
+ input:not(.disabled):checked:active {
106
106
  border-color: transparent;
107
107
  }
108
- input:not([disabled]):checked:active::before {
108
+ input:not(.disabled):checked:active::before {
109
109
  background: var(--kd-color-background-ui-hollow-pressed);
110
110
  }
111
- input[disabled] {
111
+ input.disabled {
112
112
  background: var(--kd-color-background-forms-disabled);
113
113
  border-color: var(--kd-color-border-ui-disabled);
114
114
  }
115
- input[disabled]:checked {
115
+ input.disabled:checked {
116
116
  background: var(--kd-color-background-forms-disabled);
117
117
  border-color: transparent;
118
118
  }
119
- input[disabled]:checked::before {
119
+ input.disabled:checked::before {
120
120
  transform: scale(1);
121
121
  background: var(--kd-color-icon-disabled);
122
122
  mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMuNSA1Ljg1NTQ3TDkgLTIuMDMwNjNlLTA2TDEwIDEuMDY0NjNMMy40ODU2NiA4TDAgNC4yODkwNkwxLjAxNDM0IDMuMjA5MTZMMy41IDUuODU1NDdaIiBmaWxsPSIjMDAwIi8+DQo8L3N2Zz4=");
@@ -129,11 +129,11 @@ input[disabled]:checked::before {
129
129
  -webkit-mask-position: center;
130
130
  }
131
131
 
132
- input[type=checkbox]:indeterminate:not([disabled]) {
132
+ input[type=checkbox]:indeterminate:not(.disabled) {
133
133
  background: var(--kd-color-background-ui-default-secondary);
134
134
  border-color: transparent;
135
135
  }
136
- input[type=checkbox]:indeterminate:not([disabled])::before {
136
+ input[type=checkbox]:indeterminate:not(.disabled)::before {
137
137
  content: "";
138
138
  display: block;
139
139
  width: 10px;
@@ -143,26 +143,26 @@ input[type=checkbox]:indeterminate:not([disabled])::before {
143
143
  mask: linear-gradient(transparent 3px, #000 3px 5px, transparent 5px);
144
144
  -webkit-mask: linear-gradient(transparent 3px, #000 3px 5px, transparent 5px);
145
145
  }
146
- input[type=checkbox]:indeterminate:not([disabled]):hover {
146
+ input[type=checkbox]:indeterminate:not(.disabled):hover {
147
147
  background: var(--kd-color-background-ui-default-secondary);
148
148
  border-color: transparent;
149
149
  }
150
- input[type=checkbox]:indeterminate:not([disabled]):hover::before {
150
+ input[type=checkbox]:indeterminate:not(.disabled):hover::before {
151
151
  background: var(--kd-color-background-ui-hollow-hover);
152
152
  }
153
- input[type=checkbox]:indeterminate:not([disabled]):active {
153
+ input[type=checkbox]:indeterminate:not(.disabled):active {
154
154
  background: var(--kd-color-background-ui-default-secondary);
155
155
  border-color: transparent;
156
156
  }
157
- input[type=checkbox]:indeterminate:not([disabled]):active::before {
157
+ input[type=checkbox]:indeterminate:not(.disabled):active::before {
158
158
  background: var(--kd-color-background-ui-hollow-pressed);
159
159
  }
160
160
 
161
- input[type=checkbox]:indeterminate:disabled {
161
+ input[type=checkbox]:indeterminate.disabled {
162
162
  background: var(--kd-color-background-ui-default-disabled);
163
163
  border-color: transparent;
164
164
  }
165
- input[type=checkbox]:indeterminate:disabled::before {
165
+ input[type=checkbox]:indeterminate.disabled::before {
166
166
  content: "";
167
167
  display: block;
168
168
  width: 10px;
@@ -176,33 +176,33 @@ input[type=checkbox]:indeterminate:disabled::before {
176
176
  input[type=checkbox][invalid] {
177
177
  border-color: var(--kd-color-status-error-dark);
178
178
  }
179
- input[type=checkbox][invalid]:not([disabled]):checked, input[type=checkbox][invalid]:not([disabled]):indeterminate {
179
+ input[type=checkbox][invalid]:not(.disabled):checked, input[type=checkbox][invalid]:not(.disabled):indeterminate {
180
180
  background: var(--kd-color-status-error-dark);
181
181
  border-color: transparent;
182
182
  }
183
- input[type=checkbox][invalid]:not([disabled]):checked:hover, input[type=checkbox][invalid]:not([disabled]):indeterminate:hover {
183
+ input[type=checkbox][invalid]:not(.disabled):checked:hover, input[type=checkbox][invalid]:not(.disabled):indeterminate:hover {
184
184
  background: var(--kd-color-background-button-primary-destructive-hover);
185
185
  border-color: var(--kd-color-background-button-primary-destructive-hover);
186
186
  }
187
- input[type=checkbox][invalid]:not([disabled]):checked:active, input[type=checkbox][invalid]:not([disabled]):indeterminate:active {
187
+ input[type=checkbox][invalid]:not(.disabled):checked:active, input[type=checkbox][invalid]:not(.disabled):indeterminate:active {
188
188
  background: var(--kd-color-background-button-primary-destructive-pressed);
189
189
  border-color: var(--kd-color-background-button-primary-destructive-pressed);
190
190
  outline-color: var(--kd-color-background-button-primary-destructive-pressed);
191
191
  }
192
- input[type=checkbox][invalid][disabled] {
192
+ input[type=checkbox][invalid].disabled {
193
193
  border-color: var(--kd-color-border-ui-disabled);
194
194
  }
195
- input[type=checkbox][invalid][disabled]:hover {
195
+ input[type=checkbox][invalid].disabled:hover {
196
196
  border-color: var(--kd-color-border-ui-disabled);
197
197
  }
198
- input[type=checkbox][invalid][disabled][checked] {
198
+ input[type=checkbox][invalid].disabled[checked] {
199
199
  border-color: transparent;
200
200
  }
201
- input[type=checkbox][invalid][disabled][checked]:hover {
201
+ input[type=checkbox][invalid].disabled[checked]:hover {
202
202
  border-color: transparent;
203
203
  background: var(--kd-color-background-ui-default-disabled);
204
204
  }
205
- input[type=checkbox][invalid][disabled]:active, input[type=checkbox][invalid][disabled]:focus-visible {
205
+ input[type=checkbox][invalid].disabled:active, input[type=checkbox][invalid].disabled:focus-visible {
206
206
  background-color: transparent;
207
207
  border-color: var(--kd-color-border-ui-disabled);
208
208
  outline-color: transparent;
@@ -229,7 +229,7 @@ input[type=checkbox][invalid]:active {
229
229
  position: absolute;
230
230
  white-space: nowrap;
231
231
  width: 1px;
232
- }`;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`
232
+ }`;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`
233
233
  <label
234
234
  ?disabled=${this.disabled}
235
235
  ?invalid=${this.invalid}
@@ -240,17 +240,18 @@ input[type=checkbox][invalid]:active {
240
240
  </span>
241
241
 
242
242
  <input
243
+ class=${this.disabled?"disabled":""}
243
244
  type="checkbox"
244
245
  name=${this.name}
245
246
  value=${this.value}
246
247
  .checked=${this.checked}
247
248
  ?checked=${this.checked}
248
249
  ?required=${this.required}
249
- ?disabled=${this.disabled}
250
+ ?disabled=${this.disabled||this.notFocusable}
250
251
  ?invalid=${this.invalid}
251
252
  @change=${e=>this.handleChange(e)}
252
253
  .indeterminate=${this.indeterminate}
253
254
  />
254
255
  </label>
255
- `}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};
256
+ `}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};
256
257
  //# sourceMappingURL=checkbox.js.map
package/components/reusable/checkbox/checkbox.js.map CHANGED
@@ -1 +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"}
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 * 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 CHANGED
@@ -8,6 +8,8 @@ declare const Dropdown_base: (new (...args: any[]) => import("../../../common/mi
8
8
  * @fires on-change - Captures the input event and emits the selected value and original event details.
9
9
  * @fires on-search - Capture the search input event and emits the search text.
10
10
  * @fires on-clear-all - Captures the the multi-select clear all button click event and emits the value.
11
+ * @fires on-add-option - Captures the add button click and emits the newly added option.
12
+ * @fires on-clear-all - Captures the the multi-select clear all button click event and emits the value.
11
13
  * @slot unnamed - Slot for dropdown options.
12
14
  * @slot tooltip - Slot for tooltip.
13
15
  */
@@ -60,7 +62,12 @@ export declare class Dropdown extends Dropdown_base {
60
62
  requiredText: string;
61
63
  errorText: string;
62
64
  clearAll: string;
65
+ clear: string;
66
+ addItem: string;
67
+ add: string;
63
68
  };
69
+ /** Enables the "Add New Option" feature. */
70
+ allowAddOption: boolean;
64
71
  /** Internal text strings.
65
72
  * @internal
66
73
  */
@@ -70,7 +77,15 @@ export declare class Dropdown extends Dropdown_base {
70
77
  requiredText: string;
71
78
  errorText: string;
72
79
  clearAll: string;
80
+ clear: string;
81
+ addItem: string;
82
+ add: string;
73
83
  };
84
+ /**
85
+ * New dropdown option value.
86
+ * @ignore
87
+ */
88
+ newOptionValue: string;
74
89
  /**
75
90
  * Selected option text, automatically derived.
76
91
  * @ignore
@@ -115,6 +130,11 @@ export declare class Dropdown extends Dropdown_base {
115
130
  * @ignore
116
131
  */
117
132
  clearMultipleEl: HTMLElement;
133
+ /**
134
+ * Queries the .add-option-input DOM element.
135
+ * @ignore
136
+ */
137
+ addOptionInputEl: HTMLInputElement;
118
138
  /**
119
139
  * Open drawer upwards.
120
140
  * @ignore
@@ -134,9 +154,13 @@ export declare class Dropdown extends Dropdown_base {
134
154
  */
135
155
  prevSearchKeydownIndex: number;
136
156
  render(): import("lit").TemplateResult<1>;
157
+ private _onAddOptionInputKeydown;
158
+ private _onAddOptionInputFocus;
159
+ private _handleAddOption;
137
160
  private renderHelperContent;
138
161
  firstUpdated(): void;
139
162
  private handleSlotChange;
163
+ private updateChildOptions;
140
164
  private handleClick;
141
165
  private _handleLabelClick;
142
166
  private handleButtonKeydown;
@@ -165,6 +189,9 @@ export declare class Dropdown extends Dropdown_base {
165
189
  updated(changedProps: any): void;
166
190
  private _updateTags;
167
191
  private _updateOptions;
192
+ private _handleInputNewOption;
193
+ private _handleRemoveOption;
194
+ private _updateSelectedText;
168
195
  }
169
196
  declare global {
170
197
  interface HTMLElementTagNameMap {
package/components/reusable/dropdown/dropdown.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"names":[],"mappings":"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"}