@kyndryl-design-system/shidoka-applications 2.53.0 → 2.53.1
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"buttonGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/buttonGroup/buttonGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAa,MAAM,KAAK,CAAC;AAQlD,OAAO,kBAAkB,CAAC;AAU1B,eAAO,MAAM,kBAAkB;;;;CAIrB,CAAC;AAEX,MAAM,MAAM,kBAAkB,GAC5B,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,OAAO,kBAAkB,CAAC,CAAC;AAE/D,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAQD;;;;;GAKG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAgC;IAEtD,wEAAwE;IAExE,QAAQ,CAAC,IAAI,EAAE,SAAS,GAAG,YAAY,GAAG,OAAO,CACpB;IAE7B,+DAA+D;IAE/D,QAAQ,CAAC,aAAa,
|
|
1
|
+
{"version":3,"file":"buttonGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/buttonGroup/buttonGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAa,MAAM,KAAK,CAAC;AAQlD,OAAO,kBAAkB,CAAC;AAU1B,eAAO,MAAM,kBAAkB;;;;CAIrB,CAAC;AAEX,MAAM,MAAM,kBAAkB,GAC5B,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,OAAO,kBAAkB,CAAC,CAAC;AAE/D,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAQD;;;;;GAKG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAgC;IAEtD,wEAAwE;IAExE,QAAQ,CAAC,IAAI,EAAE,SAAS,GAAG,YAAY,GAAG,OAAO,CACpB;IAE7B,+DAA+D;IAE/D,QAAQ,CAAC,aAAa,SAAK;IAE3B;;;;OAIG;IAEH,QAAQ,CAAC,UAAU,SAAK;IAExB;;;;OAIG;IAEH,QAAQ,CAAC,UAAU,SAAK;IAExB;;;;OAIG;IAEH,QAAQ,CAAC,gBAAgB,SAAK;IAE9B,2DAA2D;IAE3D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAa;IAE3C,WAAoB,UAAU;;;;;;;;;MAM7B;IAED,2DAA2D;IAC3D,IAAW,YAAY,IAAI,MAAM,CAEhC;IAED,0DAA0D;IAC1D,IAAW,UAAU,IAAI,MAAM,CAE9B;IAED,iCAAiC;IAEjC,QAAQ,CAAC,WAAW;;;;MAAuB;IAE3C;;OAEG;IAEH,QAAQ,CAAC,YAAY;;;;MAAuB;IAE5C,mCAAmC;IAEnC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAY;IAE5B,MAAM;IAQN,YAAY;IAKZ,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC;IAqB1C,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,iBAAiB;IAqDzB,OAAO,CAAC,aAAa;IAarB,OAAO,CAAC,OAAO;IA+Bf,OAAO,CAAC,cAAc,CAAiC;IAEvD,OAAO,CAAC,qBAAqB;IAc7B,OAAO,CAAC,iBAAiB;IAczB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,cAAc;IAiBb,oBAAoB;CAO9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,WAAW,CAAC;KACjC;CACF"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import{_ as t,a as e,b as s,c as i,d as n}from"../../../vendor/tslib-Ac8XvvSX.js";import{i as a,a as r,t as l,r as o,n as c,o as d}from"../../../vendor/@lit/reactive-element-f91Vet7N.js";import{e as h,x as u,o as b}from"../../../vendor/lit-html-BRBT5o_V.js";import{i as m}from"../../../vendor/lit-element-m-OqzV5s.js";import"../button/button.js";import{BUTTON_KINDS as g}from"../button/defs.js";import{j as p,b as k}from"../../../vendor/@kyndryl-design-system/shidoka-icons-bi0_OAYf.js";import"../../../common/helpers/helpers.js";var v=a`.kd-btn-group {
|
|
2
2
|
display: inline-flex;
|
|
3
|
-
gap:
|
|
3
|
+
gap: 1px;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
.kd-btn-group > kyn-button {
|
|
@@ -12,7 +12,7 @@ import{_ as t,a as e,b as s,c as i,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
|
|
|
12
12
|
|
|
13
13
|
.kd-btn-group > kyn-button:focus-within .kd-btn {
|
|
14
14
|
outline-offset: 0 !important;
|
|
15
|
-
}`;const _={DEFAULT:"default",PAGINATION:"pagination",ICONS:"icons"},x={prevButtonDescription:"Previous Page",nextButtonDescription:"Next Page",indivGroupItemDescription:""};let f=(()=>{var a,f,S,y,I,P,N,C,M;let w,E,$,A,B,V,L,O,j,D,W,G=[l("kyn-button-group")],T=[],H=m,U=[],q=[],F=[],R=[],Y=[],z=[],J=[],K=[],Q=[],X=[],Z=[],tt=[],et=[],st=[],it=[],nt=[],at=[],rt=[];return E=class extends H{constructor(){super(...arguments),a.set(this,s(this,U,_.DEFAULT)),f.set(this,(s(this,q),s(this,F
|
|
15
|
+
}`;const _={DEFAULT:"default",PAGINATION:"pagination",ICONS:"icons"},x={prevButtonDescription:"Previous Page",nextButtonDescription:"Next Page",indivGroupItemDescription:""};let f=(()=>{var a,f,S,y,I,P,N,C,M;let w,E,$,A,B,V,L,O,j,D,W,G=[l("kyn-button-group")],T=[],H=m,U=[],q=[],F=[],R=[],Y=[],z=[],J=[],K=[],Q=[],X=[],Z=[],tt=[],et=[],st=[],it=[],nt=[],at=[],rt=[];return E=class extends H{constructor(){super(...arguments),a.set(this,s(this,U,_.DEFAULT)),f.set(this,(s(this,q),s(this,F,0))),S.set(this,(s(this,R),s(this,Y,1))),y.set(this,(s(this,z),s(this,J,5))),I.set(this,(s(this,K),s(this,Q,1))),P.set(this,(s(this,X),s(this,Z,1))),N.set(this,(s(this,tt),s(this,et,x))),C.set(this,(s(this,st),s(this,it,x))),M.set(this,(s(this,nt),s(this,at,void 0))),this._boundHandlers=(s(this,rt),new Map)}get kind(){return i(this,a,"f")}set kind(t){n(this,a,t,"f")}get selectedIndex(){return i(this,f,"f")}set selectedIndex(t){n(this,f,t,"f")}get totalPages(){return i(this,S,"f")}set totalPages(t){n(this,S,t,"f")}get maxVisible(){return i(this,y,"f")}set maxVisible(t){n(this,y,t,"f")}get clickIncrementBy(){return i(this,I,"f")}set clickIncrementBy(t){n(this,I,t,"f")}get _visibleStart(){return i(this,P,"f")}set _visibleStart(t){n(this,P,t,"f")}static get properties(){return{...super.properties,visibleStart:{type:Number,attribute:!1},visibleEnd:{type:Number,attribute:!1}}}get visibleStart(){return this._visibleStart}get visibleEnd(){return Math.min(this.totalPages,this._visibleStart+this.maxVisible-1)}get textStrings(){return i(this,N,"f")}set textStrings(t){n(this,N,t,"f")}get _textStrings(){return i(this,C,"f")}set _textStrings(t){n(this,C,t,"f")}get _buttons(){return i(this,M,"f")}set _buttons(t){n(this,M,t,"f")}render(){return this.kind===_.PAGINATION?this._renderPagination():this.kind===_.ICONS?this._renderIcons():this._renderDefault()}firstUpdated(){this._attachClickListeners(),this._syncSelection()}updated(t){this.kind===_.PAGINATION?(t.has("totalPages")||t.has("maxVisible")||t.has("clickIncrementBy"))&&this._updateWindow():t.has("selectedIndex")&&this._syncSelection(),t.has("kind")&&(this._attachClickListeners(),this._syncSelection())}_renderDefault(){return u`
|
|
16
16
|
<div class=${h({"kd-btn-group":!0})} role="radiogroup">
|
|
17
17
|
<slot @slotchange=${()=>this._handleSlotChange()}></slot>
|
|
18
18
|
</div>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"buttonGroup.js","sources":["../../../../src/components/reusable/buttonGroup/buttonGroup.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport {\n customElement,\n property,\n queryAssignedElements,\n state,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport '../button/button';\nimport type { Button } from '../button/button';\nimport { BUTTON_KINDS } from '../button/defs';\n\nimport ButtonGroupStyles from './buttonGroup.scss?inline';\n\nimport chevronLeftIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-left.svg';\nimport chevronRightIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-right.svg';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\n\nexport const BUTTON_GROUP_KINDS = {\n DEFAULT: 'default',\n PAGINATION: 'pagination',\n ICONS: 'icons',\n} as const;\n\nexport type BUTTON_GROUP_KINDS =\n (typeof BUTTON_GROUP_KINDS)[keyof typeof BUTTON_GROUP_KINDS];\n\nexport interface ButtonConfig {\n value: string | number;\n icon?: any;\n text?: string;\n description?: string;\n disabled?: boolean;\n kind?: string;\n}\n\nconst _defaultTextStrings = {\n prevButtonDescription: 'Previous Page',\n nextButtonDescription: 'Next Page',\n indivGroupItemDescription: '',\n};\n\n/**\n * ButtonGroup component.\n *\n * @slot unnamed - Slot for <kyn-button> elements.\n * @fires on-change - Captures the click event button selection in button group. `detail:{ value: string | number, selectedIndex: number, visibleStart: number, visibleEnd: number }`\n */\n@customElement('kyn-button-group')\nexport class ButtonGroup extends LitElement {\n static override styles = unsafeCSS(ButtonGroupStyles);\n\n /** Button group kind. Valid values: 'default', 'pagination', 'icons' */\n @property({ type: String })\n accessor kind: 'default' | 'pagination' | 'icons' =\n BUTTON_GROUP_KINDS.DEFAULT;\n\n /** zero-based: default button index; for pagination, page-1 */\n @property({ type: Number })\n accessor selectedIndex = -1;\n\n /**\n * @category pagination\n * @remarks only used when `kind === BUTTON_GROUP_KINDS.PAGINATION (`pagination`)`\n * Total number of pages for pagination mode\n */\n @property({ type: Number })\n accessor totalPages = 1;\n\n /**\n * @category pagination\n * @remarks only used when `kind === BUTTON_GROUP_KINDS.PAGINATION (`pagination`)`\n * Maximum number of visible page buttons\n */\n @property({ type: Number })\n accessor maxVisible = 5;\n\n /**\n * @category pagination\n * @remarks only used when `kind === BUTTON_GROUP_KINDS.PAGINATION (`pagination`)`\n * Number of pages to increment/decrement when clicking next/previous\n */\n @property({ type: Number })\n accessor clickIncrementBy = 1;\n\n /** Starting page for the visible range (internal state) */\n @state()\n private accessor _visibleStart: number = 1;\n\n static override get properties() {\n return {\n ...super.properties,\n visibleStart: { type: Number, attribute: false },\n visibleEnd: { type: Number, attribute: false },\n };\n }\n\n /** Current first page in the visible window (read-only) */\n public get visibleStart(): number {\n return this._visibleStart;\n }\n\n /** Current last page in the visible window (read-only) */\n public get visibleEnd(): number {\n return Math.min(this.totalPages, this._visibleStart + this.maxVisible - 1);\n }\n\n /** Text string customization. */\n @property({ type: Object })\n accessor textStrings = _defaultTextStrings;\n\n /** Internal text strings.\n * @internal\n */\n @state()\n accessor _textStrings = _defaultTextStrings;\n\n /** Target <kyn-button> children */\n @queryAssignedElements({ slot: '', flatten: true })\n private accessor _buttons!: Button[];\n\n override render() {\n return this.kind === BUTTON_GROUP_KINDS.PAGINATION\n ? this._renderPagination()\n : this.kind === BUTTON_GROUP_KINDS.ICONS\n ? this._renderIcons()\n : this._renderDefault();\n }\n\n override firstUpdated() {\n this._attachClickListeners();\n this._syncSelection();\n }\n\n override updated(changed: Map<string, any>) {\n if (this.kind === BUTTON_GROUP_KINDS.PAGINATION) {\n if (\n changed.has('totalPages') ||\n changed.has('maxVisible') ||\n changed.has('clickIncrementBy')\n ) {\n this._updateWindow();\n }\n } else {\n if (changed.has('selectedIndex')) {\n this._syncSelection();\n }\n }\n\n if (changed.has('kind')) {\n this._attachClickListeners();\n this._syncSelection();\n }\n }\n\n private _renderDefault() {\n const cls = { 'kd-btn-group': true };\n return html`\n <div class=${classMap(cls)} role=\"radiogroup\">\n <slot @slotchange=${() => this._handleSlotChange()}></slot>\n </div>\n `;\n }\n\n private _renderIcons() {\n const cls = { 'kd-btn-group': true, 'kd-btn-group--icons': true };\n return html`\n <div class=${classMap(cls)} role=\"radiogroup\">\n <slot @slotchange=${() => this._handleSlotChange()}></slot>\n </div>\n `;\n }\n\n private _renderPagination() {\n const currentPage = this.selectedIndex + 1;\n let start = this._visibleStart;\n const end = Math.min(this.totalPages, start + this.maxVisible - 1);\n\n if (end === this.totalPages && this.totalPages > this.maxVisible) {\n start = this.totalPages - this.maxVisible + 1;\n this._visibleStart = start;\n }\n\n const pages = Array.from({ length: end - start + 1 }, (_, i) => start + i);\n const rel = pages.indexOf(currentPage);\n\n return html`\n <div class=\"kd-btn-group\" role=\"radiogroup\">\n <kyn-button\n kind=\"tertiary\"\n class=\"kd-btn--group-first\"\n description=${this.textStrings.prevButtonDescription ||\n `Previous Page`}\n @click=${() => this._onPage('prev')}\n >\n ${unsafeSVG(chevronLeftIcon)}\n </kyn-button>\n\n ${pages.map(\n (p, i) => html`\n <kyn-button\n kind=\"tertiary\"\n description=${this.textStrings.indivGroupItemDescription ||\n `Page ${p} of ${this.totalPages}`}\n class=\"kd-btn--group-middle\"\n ?selected=${i === rel}\n @click=${() => this._onPage(p)}\n data-page=${p}\n >\n ${p}\n </kyn-button>\n `\n )}\n\n <kyn-button\n kind=\"tertiary\"\n class=\"kd-btn--group-last\"\n description=${this.textStrings.nextButtonDescription || `Next Page`}\n @click=${() => this._onPage('next')}\n >\n ${unsafeSVG(chevronRightIcon)}\n </kyn-button>\n </div>\n `;\n }\n\n private _updateWindow() {\n const currentPage = this.selectedIndex + 1;\n const half = Math.floor(this.maxVisible / 2);\n let start = Math.max(1, currentPage - half);\n const end = Math.min(this.totalPages, start + this.maxVisible - 1);\n\n if (end === this.totalPages && this.totalPages > this.maxVisible) {\n start = this.totalPages - this.maxVisible + 1;\n }\n\n this._visibleStart = start;\n }\n\n private _onPage(cmd: 'prev' | 'next' | number) {\n if (cmd === 'prev') {\n const newStart = Math.max(1, this._visibleStart - this.clickIncrementBy);\n this._visibleStart = newStart;\n this.requestUpdate();\n } else if (cmd === 'next') {\n const maxStart = Math.max(1, this.totalPages - this.maxVisible + 1);\n const newStart = Math.min(\n maxStart,\n this._visibleStart + this.clickIncrementBy\n );\n this._visibleStart = newStart;\n this.requestUpdate();\n } else {\n this.selectedIndex = cmd - 1;\n }\n\n this.dispatchEvent(\n new CustomEvent('on-change', {\n bubbles: true,\n composed: true,\n detail: {\n value: typeof cmd === 'number' ? cmd : null,\n selectedIndex: this.selectedIndex,\n visibleStart: this.visibleStart,\n visibleEnd: this.visibleEnd,\n },\n })\n );\n }\n\n private _boundHandlers = new Map<Button, () => void>();\n\n private _attachClickListeners() {\n if (this.kind === BUTTON_GROUP_KINDS.PAGINATION) return;\n this._buttons.forEach((btn, idx) => {\n const existingHandler = this._boundHandlers.get(btn);\n if (existingHandler) {\n btn.removeEventListener('on-click', existingHandler);\n }\n\n const handler = () => this._onButtonClick(idx);\n this._boundHandlers.set(btn, handler);\n btn.addEventListener('on-click', handler);\n });\n }\n\n private _handleSlotChange() {\n requestAnimationFrame(() => {\n this._buttons.forEach((btn) => {\n btn.kind =\n this.kind === BUTTON_GROUP_KINDS.ICONS\n ? BUTTON_KINDS.SECONDARY\n : BUTTON_KINDS.PRIMARY;\n });\n this._syncSelection();\n\n this._attachClickListeners();\n });\n }\n\n private _onButtonClick(idx: number) {\n if (this.kind === BUTTON_GROUP_KINDS.PAGINATION) {\n const raw = this._buttons[idx].value;\n return this._onPage(typeof raw === 'string' ? Number(raw) : raw);\n }\n this.selectedIndex = idx;\n this._emitChange(this._buttons[idx].value);\n this._syncSelection();\n }\n\n private _emitChange(value: unknown) {\n this.dispatchEvent(\n new CustomEvent('on-change', {\n bubbles: true,\n composed: true,\n detail: { value },\n })\n );\n }\n\n private _syncSelection() {\n const total = this._buttons.length;\n this._buttons.forEach((btn, idx) => {\n btn.selected = idx === this.selectedIndex;\n btn.classList.remove(\n 'kd-btn--group-single',\n 'kd-btn--group-first',\n 'kd-btn--group-middle',\n 'kd-btn--group-last'\n );\n if (total === 1) btn.classList.add('kd-btn--group-single');\n else if (idx === 0) btn.classList.add('kd-btn--group-first');\n else if (idx === total - 1) btn.classList.add('kd-btn--group-last');\n else btn.classList.add('kd-btn--group-middle');\n });\n }\n\n override disconnectedCallback() {\n this._boundHandlers.forEach((handler, btn) => {\n btn.removeEventListener('click', handler);\n });\n this._boundHandlers.clear();\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-button-group': ButtonGroup;\n }\n}\n"],"names":["BUTTON_GROUP_KINDS","DEFAULT","PAGINATION","ICONS","_defaultTextStrings","prevButtonDescription","nextButtonDescription","indivGroupItemDescription","ButtonGroup","customElement","LitElement","_classThis","_classSuper","_ButtonGroup_kind_accessor_storage","set","this","__runInitializers","_kind_initializers","_ButtonGroup_selectedIndex_accessor_storage","_kind_extraInitializers","_selectedIndex_initializers","_ButtonGroup_totalPages_accessor_storage","_selectedIndex_extraInitializers","_totalPages_initializers","_ButtonGroup_maxVisible_accessor_storage","_totalPages_extraInitializers","_maxVisible_initializers","_ButtonGroup_clickIncrementBy_accessor_storage","_maxVisible_extraInitializers","_clickIncrementBy_initializers","_ButtonGroup__visibleStart_accessor_storage","_clickIncrementBy_extraInitializers","__visibleStart_initializers","_ButtonGroup_textStrings_accessor_storage","__visibleStart_extraInitializers","_textStrings_initializers","_ButtonGroup__textStrings_accessor_storage","_textStrings_extraInitializers","__textStrings_initializers","_ButtonGroup__buttons_accessor_storage","__textStrings_extraInitializers","__buttons_initializers","_boundHandlers","__buttons_extraInitializers","Map","kind","__classPrivateFieldGet","value","__classPrivateFieldSet","selectedIndex","totalPages","maxVisible","clickIncrementBy","_visibleStart","properties","super","visibleStart","type","Number","attribute","visibleEnd","Math","min","textStrings","_textStrings","_buttons","render","_renderPagination","_renderIcons","_renderDefault","firstUpdated","_attachClickListeners","_syncSelection","updated","changed","has","_updateWindow","html","classMap","_handleSlotChange","currentPage","start","end","pages","Array","from","length","_","i","rel","indexOf","_onPage","unsafeSVG","chevronLeftIcon","map","p","chevronRightIcon","half","floor","max","cmd","newStart","requestUpdate","maxStart","dispatchEvent","CustomEvent","bubbles","composed","detail","forEach","btn","idx","existingHandler","get","removeEventListener","handler","_onButtonClick","addEventListener","requestAnimationFrame","BUTTON_KINDS","SECONDARY","PRIMARY","raw","_emitChange","total","selected","classList","remove","add","disconnectedCallback","clear","_kind_decorators","property","String","_selectedIndex_decorators","_totalPages_decorators","_maxVisible_decorators","_clickIncrementBy_decorators","__visibleStart_decorators","state","_textStrings_decorators","Object","__textStrings_decorators","queryAssignedElements","slot","flatten","__esDecorate","name","static","private","access","obj","metadata","_metadata","__buttons_decorators","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","ButtonGroupStyles"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"buttonGroup.js","sources":["../../../../src/components/reusable/buttonGroup/buttonGroup.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport {\n customElement,\n property,\n queryAssignedElements,\n state,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport '../button/button';\nimport type { Button } from '../button/button';\nimport { BUTTON_KINDS } from '../button/defs';\n\nimport ButtonGroupStyles from './buttonGroup.scss?inline';\n\nimport chevronLeftIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-left.svg';\nimport chevronRightIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-right.svg';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\n\nexport const BUTTON_GROUP_KINDS = {\n DEFAULT: 'default',\n PAGINATION: 'pagination',\n ICONS: 'icons',\n} as const;\n\nexport type BUTTON_GROUP_KINDS =\n (typeof BUTTON_GROUP_KINDS)[keyof typeof BUTTON_GROUP_KINDS];\n\nexport interface ButtonConfig {\n value: string | number;\n icon?: any;\n text?: string;\n description?: string;\n disabled?: boolean;\n kind?: string;\n}\n\nconst _defaultTextStrings = {\n prevButtonDescription: 'Previous Page',\n nextButtonDescription: 'Next Page',\n indivGroupItemDescription: '',\n};\n\n/**\n * ButtonGroup component.\n *\n * @slot unnamed - Slot for <kyn-button> elements.\n * @fires on-change - Captures the click event button selection in button group. `detail:{ value: string | number, selectedIndex: number, visibleStart: number, visibleEnd: number }`\n */\n@customElement('kyn-button-group')\nexport class ButtonGroup extends LitElement {\n static override styles = unsafeCSS(ButtonGroupStyles);\n\n /** Button group kind. Valid values: 'default', 'pagination', 'icons' */\n @property({ type: String })\n accessor kind: 'default' | 'pagination' | 'icons' =\n BUTTON_GROUP_KINDS.DEFAULT;\n\n /** zero-based: default button index; for pagination, page-1 */\n @property({ type: Number })\n accessor selectedIndex = 0;\n\n /**\n * @category pagination\n * @remarks only used when `kind === BUTTON_GROUP_KINDS.PAGINATION (`pagination`)`\n * Total number of pages for pagination mode\n */\n @property({ type: Number })\n accessor totalPages = 1;\n\n /**\n * @category pagination\n * @remarks only used when `kind === BUTTON_GROUP_KINDS.PAGINATION (`pagination`)`\n * Maximum number of visible page buttons\n */\n @property({ type: Number })\n accessor maxVisible = 5;\n\n /**\n * @category pagination\n * @remarks only used when `kind === BUTTON_GROUP_KINDS.PAGINATION (`pagination`)`\n * Number of pages to increment/decrement when clicking next/previous\n */\n @property({ type: Number })\n accessor clickIncrementBy = 1;\n\n /** Starting page for the visible range (internal state) */\n @state()\n private accessor _visibleStart: number = 1;\n\n static override get properties() {\n return {\n ...super.properties,\n visibleStart: { type: Number, attribute: false },\n visibleEnd: { type: Number, attribute: false },\n };\n }\n\n /** Current first page in the visible window (read-only) */\n public get visibleStart(): number {\n return this._visibleStart;\n }\n\n /** Current last page in the visible window (read-only) */\n public get visibleEnd(): number {\n return Math.min(this.totalPages, this._visibleStart + this.maxVisible - 1);\n }\n\n /** Text string customization. */\n @property({ type: Object })\n accessor textStrings = _defaultTextStrings;\n\n /** Internal text strings.\n * @internal\n */\n @state()\n accessor _textStrings = _defaultTextStrings;\n\n /** Target <kyn-button> children */\n @queryAssignedElements({ slot: '', flatten: true })\n private accessor _buttons!: Button[];\n\n override render() {\n return this.kind === BUTTON_GROUP_KINDS.PAGINATION\n ? this._renderPagination()\n : this.kind === BUTTON_GROUP_KINDS.ICONS\n ? this._renderIcons()\n : this._renderDefault();\n }\n\n override firstUpdated() {\n this._attachClickListeners();\n this._syncSelection();\n }\n\n override updated(changed: Map<string, any>) {\n if (this.kind === BUTTON_GROUP_KINDS.PAGINATION) {\n if (\n changed.has('totalPages') ||\n changed.has('maxVisible') ||\n changed.has('clickIncrementBy')\n ) {\n this._updateWindow();\n }\n } else {\n if (changed.has('selectedIndex')) {\n this._syncSelection();\n }\n }\n\n if (changed.has('kind')) {\n this._attachClickListeners();\n this._syncSelection();\n }\n }\n\n private _renderDefault() {\n const cls = { 'kd-btn-group': true };\n return html`\n <div class=${classMap(cls)} role=\"radiogroup\">\n <slot @slotchange=${() => this._handleSlotChange()}></slot>\n </div>\n `;\n }\n\n private _renderIcons() {\n const cls = { 'kd-btn-group': true, 'kd-btn-group--icons': true };\n return html`\n <div class=${classMap(cls)} role=\"radiogroup\">\n <slot @slotchange=${() => this._handleSlotChange()}></slot>\n </div>\n `;\n }\n\n private _renderPagination() {\n const currentPage = this.selectedIndex + 1;\n let start = this._visibleStart;\n const end = Math.min(this.totalPages, start + this.maxVisible - 1);\n\n if (end === this.totalPages && this.totalPages > this.maxVisible) {\n start = this.totalPages - this.maxVisible + 1;\n this._visibleStart = start;\n }\n\n const pages = Array.from({ length: end - start + 1 }, (_, i) => start + i);\n const rel = pages.indexOf(currentPage);\n\n return html`\n <div class=\"kd-btn-group\" role=\"radiogroup\">\n <kyn-button\n kind=\"tertiary\"\n class=\"kd-btn--group-first\"\n description=${this.textStrings.prevButtonDescription ||\n `Previous Page`}\n @click=${() => this._onPage('prev')}\n >\n ${unsafeSVG(chevronLeftIcon)}\n </kyn-button>\n\n ${pages.map(\n (p, i) => html`\n <kyn-button\n kind=\"tertiary\"\n description=${this.textStrings.indivGroupItemDescription ||\n `Page ${p} of ${this.totalPages}`}\n class=\"kd-btn--group-middle\"\n ?selected=${i === rel}\n @click=${() => this._onPage(p)}\n data-page=${p}\n >\n ${p}\n </kyn-button>\n `\n )}\n\n <kyn-button\n kind=\"tertiary\"\n class=\"kd-btn--group-last\"\n description=${this.textStrings.nextButtonDescription || `Next Page`}\n @click=${() => this._onPage('next')}\n >\n ${unsafeSVG(chevronRightIcon)}\n </kyn-button>\n </div>\n `;\n }\n\n private _updateWindow() {\n const currentPage = this.selectedIndex + 1;\n const half = Math.floor(this.maxVisible / 2);\n let start = Math.max(1, currentPage - half);\n const end = Math.min(this.totalPages, start + this.maxVisible - 1);\n\n if (end === this.totalPages && this.totalPages > this.maxVisible) {\n start = this.totalPages - this.maxVisible + 1;\n }\n\n this._visibleStart = start;\n }\n\n private _onPage(cmd: 'prev' | 'next' | number) {\n if (cmd === 'prev') {\n const newStart = Math.max(1, this._visibleStart - this.clickIncrementBy);\n this._visibleStart = newStart;\n this.requestUpdate();\n } else if (cmd === 'next') {\n const maxStart = Math.max(1, this.totalPages - this.maxVisible + 1);\n const newStart = Math.min(\n maxStart,\n this._visibleStart + this.clickIncrementBy\n );\n this._visibleStart = newStart;\n this.requestUpdate();\n } else {\n this.selectedIndex = cmd - 1;\n }\n\n this.dispatchEvent(\n new CustomEvent('on-change', {\n bubbles: true,\n composed: true,\n detail: {\n value: typeof cmd === 'number' ? cmd : null,\n selectedIndex: this.selectedIndex,\n visibleStart: this.visibleStart,\n visibleEnd: this.visibleEnd,\n },\n })\n );\n }\n\n private _boundHandlers = new Map<Button, () => void>();\n\n private _attachClickListeners() {\n if (this.kind === BUTTON_GROUP_KINDS.PAGINATION) return;\n this._buttons.forEach((btn, idx) => {\n const existingHandler = this._boundHandlers.get(btn);\n if (existingHandler) {\n btn.removeEventListener('on-click', existingHandler);\n }\n\n const handler = () => this._onButtonClick(idx);\n this._boundHandlers.set(btn, handler);\n btn.addEventListener('on-click', handler);\n });\n }\n\n private _handleSlotChange() {\n requestAnimationFrame(() => {\n this._buttons.forEach((btn) => {\n btn.kind =\n this.kind === BUTTON_GROUP_KINDS.ICONS\n ? BUTTON_KINDS.SECONDARY\n : BUTTON_KINDS.PRIMARY;\n });\n this._syncSelection();\n\n this._attachClickListeners();\n });\n }\n\n private _onButtonClick(idx: number) {\n if (this.kind === BUTTON_GROUP_KINDS.PAGINATION) {\n const raw = this._buttons[idx].value;\n return this._onPage(typeof raw === 'string' ? Number(raw) : raw);\n }\n this.selectedIndex = idx;\n this._emitChange(this._buttons[idx].value);\n this._syncSelection();\n }\n\n private _emitChange(value: unknown) {\n this.dispatchEvent(\n new CustomEvent('on-change', {\n bubbles: true,\n composed: true,\n detail: { value },\n })\n );\n }\n\n private _syncSelection() {\n const total = this._buttons.length;\n this._buttons.forEach((btn, idx) => {\n btn.selected = idx === this.selectedIndex;\n btn.classList.remove(\n 'kd-btn--group-single',\n 'kd-btn--group-first',\n 'kd-btn--group-middle',\n 'kd-btn--group-last'\n );\n if (total === 1) btn.classList.add('kd-btn--group-single');\n else if (idx === 0) btn.classList.add('kd-btn--group-first');\n else if (idx === total - 1) btn.classList.add('kd-btn--group-last');\n else btn.classList.add('kd-btn--group-middle');\n });\n }\n\n override disconnectedCallback() {\n this._boundHandlers.forEach((handler, btn) => {\n btn.removeEventListener('click', handler);\n });\n this._boundHandlers.clear();\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-button-group': ButtonGroup;\n }\n}\n"],"names":["BUTTON_GROUP_KINDS","DEFAULT","PAGINATION","ICONS","_defaultTextStrings","prevButtonDescription","nextButtonDescription","indivGroupItemDescription","ButtonGroup","customElement","LitElement","_classThis","_classSuper","_ButtonGroup_kind_accessor_storage","set","this","__runInitializers","_kind_initializers","_ButtonGroup_selectedIndex_accessor_storage","_kind_extraInitializers","_selectedIndex_initializers","_ButtonGroup_totalPages_accessor_storage","_selectedIndex_extraInitializers","_totalPages_initializers","_ButtonGroup_maxVisible_accessor_storage","_totalPages_extraInitializers","_maxVisible_initializers","_ButtonGroup_clickIncrementBy_accessor_storage","_maxVisible_extraInitializers","_clickIncrementBy_initializers","_ButtonGroup__visibleStart_accessor_storage","_clickIncrementBy_extraInitializers","__visibleStart_initializers","_ButtonGroup_textStrings_accessor_storage","__visibleStart_extraInitializers","_textStrings_initializers","_ButtonGroup__textStrings_accessor_storage","_textStrings_extraInitializers","__textStrings_initializers","_ButtonGroup__buttons_accessor_storage","__textStrings_extraInitializers","__buttons_initializers","_boundHandlers","__buttons_extraInitializers","Map","kind","__classPrivateFieldGet","value","__classPrivateFieldSet","selectedIndex","totalPages","maxVisible","clickIncrementBy","_visibleStart","properties","super","visibleStart","type","Number","attribute","visibleEnd","Math","min","textStrings","_textStrings","_buttons","render","_renderPagination","_renderIcons","_renderDefault","firstUpdated","_attachClickListeners","_syncSelection","updated","changed","has","_updateWindow","html","classMap","_handleSlotChange","currentPage","start","end","pages","Array","from","length","_","i","rel","indexOf","_onPage","unsafeSVG","chevronLeftIcon","map","p","chevronRightIcon","half","floor","max","cmd","newStart","requestUpdate","maxStart","dispatchEvent","CustomEvent","bubbles","composed","detail","forEach","btn","idx","existingHandler","get","removeEventListener","handler","_onButtonClick","addEventListener","requestAnimationFrame","BUTTON_KINDS","SECONDARY","PRIMARY","raw","_emitChange","total","selected","classList","remove","add","disconnectedCallback","clear","_kind_decorators","property","String","_selectedIndex_decorators","_totalPages_decorators","_maxVisible_decorators","_clickIncrementBy_decorators","__visibleStart_decorators","state","_textStrings_decorators","Object","__textStrings_decorators","queryAssignedElements","slot","flatten","__esDecorate","name","static","private","access","obj","metadata","_metadata","__buttons_decorators","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","ButtonGroupStyles"],"mappings":"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"}
|