npm - @kyndryl-design-system/shidoka-applications - Versions diffs - 2.97.3 → 2.97.5 - Mend

@kyndryl-design-system/shidoka-applications 2.97.3 → 2.97.5

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 (14) hide show

package/components/reusable/accordion/accordionItem.d.ts CHANGED Viewed

@@ -37,10 +37,17 @@ export declare class AccordionItem extends LitElement {
      * @ignore
      */
     private accessor _compact;
+    /**
+     * Whether an icon is assigned to the icon slot.
+     * @ignore
+     */
+    private accessor _hasIcon;
     setIndex(index: number): void;
     setShowNumbers(value: boolean): void;
     setFilledHeader(value: boolean): void;
     setCompact(value: boolean): void;
+    private _handleIconSlotChange;
+    firstUpdated(): void;
     open(): void;
     close(): void;
     private _handleClick;

package/components/reusable/accordion/accordionItem.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"accordionItem.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/accordion/accordionItem.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAQ,UAAU,EAAa,MAAM,KAAK,CAAC;AAOlD;;;;;;;;GAQG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,0BAAyB;IAE/C,mCAAmC;IAEnC,QAAQ,CAAC,MAAM,UAAS;IAExB,qCAAqC;IAErC,QAAQ,CAAC,QAAQ,UAAS;IAE1B;;;OAGG;IACM,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAK;IAErC;;;OAGG;IACM,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAS;IAE9C;;;OAGG;IACM,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAS;IAEhD;;;OAGG;IACM,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAS;IAE3C,QAAQ,CAAC,KAAK,EAAE,MAAM;IAItB,cAAc,CAAC,KAAK,EAAE,OAAO;IAI7B,eAAe,CAAC,KAAK,EAAE,OAAO;IAI9B,UAAU,CAAC,KAAK,EAAE,OAAO;IAIzB,IAAI;IAIJ,KAAK;IAIL,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,gBAAgB;IASf,MAAM;~~CA0DhB~~;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,aAAa,CAAC;KACrC;CACF"}
1	+ {"version":3,"file":"accordionItem.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/accordion/accordionItem.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAQ,UAAU,EAAa,MAAM,KAAK,CAAC;AAOlD;;;;;;;;GAQG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,0BAAyB;IAE/C,mCAAmC;IAEnC,QAAQ,CAAC,MAAM,UAAS;IAExB,qCAAqC;IAErC,QAAQ,CAAC,QAAQ,UAAS;IAE1B;;;OAGG;IACM,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAK;IAErC;;;OAGG;IACM,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAS;IAE9C;;;OAGG;IACM,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAS;IAEhD;;;OAGG;IACM,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAS;IAE3C;;;OAGG;IACM,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAS;IAE3C,QAAQ,CAAC,KAAK,EAAE,MAAM;IAItB,cAAc,CAAC,KAAK,EAAE,OAAO;IAI7B,eAAe,CAAC,KAAK,EAAE,OAAO;IAI9B,UAAU,CAAC,KAAK,EAAE,OAAO;IAIzB,OAAO,CAAC,qBAAqB;IAKpB,YAAY;IAUrB,IAAI;IAIJ,KAAK;IAIL,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,gBAAgB;IASf,MAAM;CAiEhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,aAAa,CAAC;KACrC;CACF"}

package/components/reusable/accordion/accordionItem.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import{__setFunctionName as e,__esDecorate as t,__runInitializers as i,__classPrivateFieldGet as o,__classPrivateFieldSet as a}from"tslib";import{css as n,LitElement as d,unsafeCSS as r,html as s}from"lit";import{customElement as l,property as c,state as m}from"lit/decorators.js";import{classMap as h}from"lit-html/directives/class-map.js";import{unsafeSVG as p}from"lit/directives/unsafe-svg.js";import{A as k}from"../../../vendor/@kyndryl-design-system/shidoka-icons-BX5ha5gR.js";var u=n`/**
+import{__setFunctionName as e,__esDecorate as t,__runInitializers as i,__classPrivateFieldGet as o,__classPrivateFieldSet as n}from"tslib";import{css as a,LitElement as d,unsafeCSS as r,html as s}from"lit";import{customElement as c,property as l,state as m}from"lit/decorators.js";import{classMap as h}from"lit-html/directives/class-map.js";import{unsafeSVG as p}from"lit/directives/unsafe-svg.js";import{A as y}from"../../../vendor/@kyndryl-design-system/shidoka-icons-BX5ha5gR.js";var k=a`/**
  * Copyright Kyndryl, Inc. 2023
  */
 *,
@@ -43,6 +43,12 @@ import{__setFunctionName as e,__esDecorate as t,__runInitializers as i,__classPr
   padding: 0px 0px;
   display: block;
   border-radius: inherit;
+  --kyn-accordion-item-body-padding-top: 24px;
+  --kyn-accordion-item-body-padding-right: 16px;
+  --kyn-accordion-item-body-padding-bottom: 24px;
+  --kyn-accordion-item-body-padding-left: 16px;
+  --kyn-accordion-item-body-icon-offset: 0px;
+  --kyn-accordion-item-body-number-offset: 0px;
 }
 .kyn-accordion-item.filled-header .kyn-accordion-item-title {
   background-color: var(--kd-color-background-container-subtle);
@@ -51,30 +57,53 @@ import{__setFunctionName as e,__esDecorate as t,__runInitializers as i,__classPr
   outline-width: 1px;
   outline-color: var(--kd-color-border-ui-default);
 }
-.kyn-accordion-item.filled-header .kyn-accordion-item-body {
-  border-top: 1px solid var(--kd-color-border-variants-light);
-}
 .kyn-accordion-item.compact .kyn-accordion-item-title {
   padding: 16px;
 }
+.kyn-accordion-item.compact {
+  --kyn-accordion-item-body-padding-top: 8px;
+  --kyn-accordion-item-body-padding-bottom: 16px;
+}
+.kyn-accordion-item.has-icon {
+  --kyn-accordion-item-body-icon-offset: 40px;
+}
+.kyn-accordion-item.compact.has-icon {
+  --kyn-accordion-item-body-icon-offset: 32px;
+}
+.kyn-accordion-item.show-number {
+  --kyn-accordion-item-body-number-offset: 24px;
+}
+.kyn-accordion-item.has-icon.show-number {
+  --kyn-accordion-item-body-number-offset: 25px;
+}
+.kyn-accordion-item.compact.show-number {
+  --kyn-accordion-item-body-number-offset: 17px;
+}
+.kyn-accordion-item.compact.has-icon.show-number {
+  --kyn-accordion-item-body-number-offset: 17px;
+}
 .kyn-accordion-item .kyn-accordion-item-body {
-  padding: 24px 16px;
-  display: none;
+  display: grid;
+  grid-template-rows: 0fr;
+  border-top: 0 solid transparent;
+  opacity: 0;
+  transition: grid-template-rows 220ms ease, opacity 180ms ease, border-color 180ms ease;
 }
 .kyn-accordion-item.opened.filled-header .kyn-accordion-item-title {
   border-radius: 0;
 }
 .kyn-accordion-item.opened .kyn-accordion-item-body {
-  display: block;
+  grid-template-rows: 1fr;
+  opacity: 1;
+}
+.kyn-accordion-item.opened.filled-header .kyn-accordion-item-body {
+  border-top-width: 1px;
+  border-top-color: var(--kd-color-border-variants-light);
 }
 .kyn-accordion-item .icon {
   vertical-align: middle;
 }
-.compact .kyn-accordion-item-body {
-  padding-top: 0;
-}
 .right {
   display: flex;
   align-items: center;
@@ -120,6 +149,8 @@ slot[name=icon]::slotted(span) {
   outline-color: var(--kd-color-border-variants-focus);
 }
 .kyn-accordion-item-title .number {
+  display: flex;
+  align-items: center;
   font-weight: var(--kd-font-weight-regular);
   color: var(--kd-color-text-variant-placeholder);
   padding-right: 16px;
@@ -186,9 +217,26 @@ slot[name=icon]::slotted(span) {
   color: var(--kd-color-text-link-level-disabled);
 }
+.kyn-accordion-item-detail {
+  overflow: hidden;
+  padding: 0 var(--kyn-accordion-item-body-padding-right) 0 calc(var(--kyn-accordion-item-body-padding-left) + var(--kyn-accordion-item-body-icon-offset) + var(--kyn-accordion-item-body-number-offset));
+  transition: padding 220ms ease;
+}
+.opened .kyn-accordion-item-detail {
+  padding-top: var(--kyn-accordion-item-body-padding-top);
+  padding-bottom: var(--kyn-accordion-item-body-padding-bottom);
+}
 .disabled .kyn-accordion-item-body {
   color: var(--kd-color-text-link-level-disabled);
-}`;let g=(()=>{var n,g,y,b,v,f;let x,_,w,$,z,S,H,N,j=[l("kyn-accordion-item")],O=[],M=d,W=[],C=[],E=[],I=[],K=[],A=[],B=[],D=[],T=[],F=[],P=[],q=[];return _=class extends M{get opened(){return o(this,n,"f")}set opened(e){a(this,n,e,"f")}get disabled(){return o(this,g,"f")}set disabled(e){a(this,g,e,"f")}get _index(){return o(this,y,"f")}set _index(e){a(this,y,e,"f")}get _showNumber(){return o(this,b,"f")}set _showNumber(e){a(this,b,e,"f")}get _filledHeader(){return o(this,v,"f")}set _filledHeader(e){a(this,v,e,"f")}get _compact(){return o(this,f,"f")}set _compact(e){a(this,f,e,"f")}setIndex(e){this._index=e}setShowNumbers(e){this._showNumber=e}setFilledHeader(e){this._filledHeader=e}setCompact(e){this._compact=e}open(){this.opened||this._toggleOpenState()}close(){this.opened&&this._toggleOpenState()}_handleClick(e){e.preventDefault(),this._toggleOpenState()}_handleKeypress(e){e.preventDefault()," "!=e.key&&"Enter"!=e.key||this._toggleOpenState()}_toggleOpenState(){this.disabled||(this.opened=!this.opened,this._emitToggleEvent())}_emitToggleEvent(){const e=new CustomEvent("on-toggle",{bubbles:!0,composed:!0,detail:{opened:this.opened}});this.dispatchEvent(e)}render(){const e=h({"kyn-accordion-item":!0,opened:this.opened,disabled:this.disabled,"filled-header":this._filledHeader,compact:this._compact});return s`
+}
+@media (prefers-reduced-motion: reduce) {
+  .kyn-accordion-item-body,
+  .kyn-accordion-item-detail {
+    transition: none;
+  }
+}`;let b=(()=>{var a,b,g,u,f,v,x;let _,w,$,I,S,z,N,H,j,C=[c("kyn-accordion-item")],E=[],M=d,O=[],W=[],K=[],A=[],B=[],D=[],T=[],q=[],F=[],P=[],R=[],U=[],G=[],J=[];return w=class extends M{get opened(){return o(this,a,"f")}set opened(e){n(this,a,e,"f")}get disabled(){return o(this,b,"f")}set disabled(e){n(this,b,e,"f")}get _index(){return o(this,g,"f")}set _index(e){n(this,g,e,"f")}get _showNumber(){return o(this,u,"f")}set _showNumber(e){n(this,u,e,"f")}get _filledHeader(){return o(this,f,"f")}set _filledHeader(e){n(this,f,e,"f")}get _compact(){return o(this,v,"f")}set _compact(e){n(this,v,e,"f")}get _hasIcon(){return o(this,x,"f")}set _hasIcon(e){n(this,x,e,"f")}setIndex(e){this._index=e}setShowNumbers(e){this._showNumber=e}setFilledHeader(e){this._filledHeader=e}setCompact(e){this._compact=e}_handleIconSlotChange(e){const t=e.target;this._hasIcon=t.assignedElements({flatten:!0}).length>0}firstUpdated(){const e=this.renderRoot.querySelector('slot[name="icon"]');e&&(this._hasIcon=e.assignedElements({flatten:!0}).length>0)}open(){this.opened||this._toggleOpenState()}close(){this.opened&&this._toggleOpenState()}_handleClick(e){e.preventDefault(),this._toggleOpenState()}_handleKeypress(e){e.preventDefault()," "!=e.key&&"Enter"!=e.key||this._toggleOpenState()}_toggleOpenState(){this.disabled||(this.opened=!this.opened,this._emitToggleEvent())}_emitToggleEvent(){const e=new CustomEvent("on-toggle",{bubbles:!0,composed:!0,detail:{opened:this.opened}});this.dispatchEvent(e)}render(){const e=h({"kyn-accordion-item":!0,opened:this.opened,disabled:this.disabled,"filled-header":this._filledHeader,compact:this._compact,"has-icon":this._hasIcon,"show-number":this._showNumber});return s`
       <div class="${e}">
         <div
           class="kyn-accordion-item-title"
@@ -202,7 +250,10 @@ slot[name=icon]::slotted(span) {
           id="kyn-accordion-item-title-${this._index}"
         >
           <div class="icon">
-            <slot name="icon"></slot>
+            <slot
+              name="icon"
+              @slotchange=${e=>this._handleIconSlotChange(e)}
+            ></slot>
           </div>
           ${this._showNumber?s` <div class="number">${this._index}</div> `:null}
@@ -218,7 +269,7 @@ slot[name=icon]::slotted(span) {
           </div>
           <div class="right">
-            <div class="expand-icon">${p(k)}</div>
+            <div class="expand-icon">${p(y)}</div>
           </div>
         </div>
@@ -227,11 +278,13 @@ slot[name=icon]::slotted(span) {
           id="kyn-accordion-item-body-${this._index}"
           role="region"
           aria-labelledby="kyn-accordion-item-title-${this._index}"
+          aria-hidden=${String(!this.opened)}
+          ?inert=${!this.opened}
         >
           <div class="kyn-accordion-item-detail">
             <slot name="body"></slot>
           </div>
         </div>
       </div>
-    `}constructor(){super(...arguments),n.set(this,i(this,W,!1)),g.set(this,(i(this,C),i(this,E,!1))),y.set(this,(i(this,I),i(this,K,1))),b.set(this,(i(this,A),i(this,B,!1))),v.set(this,(i(this,D),i(this,T,!1))),f.set(this,(i(this,F),i(this,P,!1))),i(this,q)}},n=new WeakMap,g=new WeakMap,y=new WeakMap,b=new WeakMap,v=new WeakMap,f=new WeakMap,e(_,"AccordionItem"),(()=>{var e;const i="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(e=M[Symbol.metadata])&&void 0!==e?e:null):void 0;w=[c({type:Boolean})],$=[c({type:Boolean})],z=[m()],S=[m()],H=[m()],N=[m()],t(_,null,w,{kind:"accessor",name:"opened",static:!1,private:!1,access:{has:e=>"opened"in e,get:e=>e.opened,set:(e,t)=>{e.opened=t}},metadata:i},W,C),t(_,null,$,{kind:"accessor",name:"disabled",static:!1,private:!1,access:{has:e=>"disabled"in e,get:e=>e.disabled,set:(e,t)=>{e.disabled=t}},metadata:i},E,I),t(_,null,z,{kind:"accessor",name:"_index",static:!1,private:!1,access:{has:e=>"_index"in e,get:e=>e._index,set:(e,t)=>{e._index=t}},metadata:i},K,A),t(_,null,S,{kind:"accessor",name:"_showNumber",static:!1,private:!1,access:{has:e=>"_showNumber"in e,get:e=>e._showNumber,set:(e,t)=>{e._showNumber=t}},metadata:i},B,D),t(_,null,H,{kind:"accessor",name:"_filledHeader",static:!1,private:!1,access:{has:e=>"_filledHeader"in e,get:e=>e._filledHeader,set:(e,t)=>{e._filledHeader=t}},metadata:i},T,F),t(_,null,N,{kind:"accessor",name:"_compact",static:!1,private:!1,access:{has:e=>"_compact"in e,get:e=>e._compact,set:(e,t)=>{e._compact=t}},metadata:i},P,q),t(null,x={value:_},j,{kind:"class",name:_.name,metadata:i},null,O),_=x.value,i&&Object.defineProperty(_,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:i})})(),_.styles=r(u),i(_,O),_})();export{g as AccordionItem};
+    `}constructor(){super(...arguments),a.set(this,i(this,O,!1)),b.set(this,(i(this,W),i(this,K,!1))),g.set(this,(i(this,A),i(this,B,1))),u.set(this,(i(this,D),i(this,T,!1))),f.set(this,(i(this,q),i(this,F,!1))),v.set(this,(i(this,P),i(this,R,!1))),x.set(this,(i(this,U),i(this,G,!1))),i(this,J)}},a=new WeakMap,b=new WeakMap,g=new WeakMap,u=new WeakMap,f=new WeakMap,v=new WeakMap,x=new WeakMap,e(w,"AccordionItem"),(()=>{var e;const i="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(e=M[Symbol.metadata])&&void 0!==e?e:null):void 0;$=[l({type:Boolean})],I=[l({type:Boolean})],S=[m()],z=[m()],N=[m()],H=[m()],j=[m()],t(w,null,$,{kind:"accessor",name:"opened",static:!1,private:!1,access:{has:e=>"opened"in e,get:e=>e.opened,set:(e,t)=>{e.opened=t}},metadata:i},O,W),t(w,null,I,{kind:"accessor",name:"disabled",static:!1,private:!1,access:{has:e=>"disabled"in e,get:e=>e.disabled,set:(e,t)=>{e.disabled=t}},metadata:i},K,A),t(w,null,S,{kind:"accessor",name:"_index",static:!1,private:!1,access:{has:e=>"_index"in e,get:e=>e._index,set:(e,t)=>{e._index=t}},metadata:i},B,D),t(w,null,z,{kind:"accessor",name:"_showNumber",static:!1,private:!1,access:{has:e=>"_showNumber"in e,get:e=>e._showNumber,set:(e,t)=>{e._showNumber=t}},metadata:i},T,q),t(w,null,N,{kind:"accessor",name:"_filledHeader",static:!1,private:!1,access:{has:e=>"_filledHeader"in e,get:e=>e._filledHeader,set:(e,t)=>{e._filledHeader=t}},metadata:i},F,P),t(w,null,H,{kind:"accessor",name:"_compact",static:!1,private:!1,access:{has:e=>"_compact"in e,get:e=>e._compact,set:(e,t)=>{e._compact=t}},metadata:i},R,U),t(w,null,j,{kind:"accessor",name:"_hasIcon",static:!1,private:!1,access:{has:e=>"_hasIcon"in e,get:e=>e._hasIcon,set:(e,t)=>{e._hasIcon=t}},metadata:i},G,J),t(null,_={value:w},C,{kind:"class",name:w.name,metadata:i},null,E),w=_.value,i&&Object.defineProperty(w,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:i})})(),w.styles=r(k),i(w,E),w})();export{b as AccordionItem};
 //# sourceMappingURL=accordionItem.js.map

package/components/reusable/accordion/accordionItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"accordionItem.js","sources":["../../../../src/components/reusable/accordion/accordionItem.ts"],"sourcesContent":["/*\n Copyright Kyndryl, Inc. 2022\n /\n\nimport { html, LitElement, unsafeCSS } from 'lit';\nimport { state, property, customElement } from 'lit/decorators.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport stylesheet from './accordionItem.scss?inline';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport chevronIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/24/chevron-down.svg';\n\n/\n Accordion Item component. \n @fires on-toggle - Emits the `opened` state when the accordion item opens/closes. `detail:{ opened: boolean }`.\n * @slot icon - Optional leading icon. 24px, or 16px for compact.\n * @slot body - Body of the accordion item.\n * @slot title - Title of the accordion item.\n * @slot subtitle - Optional subtitle of the accordion item.\n \n /\n@customElement('kyn-accordion-item')\nexport class AccordionItem extends LitElement {\n static override styles = unsafeCSS(stylesheet);\n\n /** Accordion item opened state. /\n @property({ type: Boolean })\n accessor opened = false;\n\n /* Accordion item disabled state. /\n @property({ type: Boolean })\n accessor disabled = false;\n\n /\n The index of this item. Passed from the Accordion.\n * @ignore\n /\n @state() private accessor _index = 1;\n\n /\n Whether the number should be shown. Passed from the Accordion.\n * @ignore\n /\n @state() private accessor _showNumber = false;\n\n /\n Whether this item displays a filled header. Passed from the Accordion.\n * @ignore\n /\n @state() private accessor _filledHeader = false;\n\n /\n Whether this item is compact. Passed from the Accordion.\n * @ignore\n */\n @state() private accessor _compact = false;\n\n setIndex(index: number) {\n this._index = index;\n }\n\n setShowNumbers(value: boolean) {\n this._showNumber = value;\n }\n\n setFilledHeader(value: boolean) {\n this._filledHeader = value;\n }\n\n setCompact(value: boolean) {\n this._compact = value;\n }\n\n open() {\n if (!this.opened) this._toggleOpenState();\n }\n\n close() {\n if (this.opened) this._toggleOpenState();\n }\n\n private _handleClick(e: Event) {\n e.preventDefault();\n this._toggleOpenState();\n }\n\n private _handleKeypress(e: KeyboardEvent) {\n e.preventDefault();\n if (e.key == ' ' \|\| e.key == 'Enter') this._toggleOpenState();\n }\n\n private _toggleOpenState() {\n if (!this.disabled) {\n this.opened = !this.opened;\n\n this._emitToggleEvent();\n }\n }\n\n private _emitToggleEvent() {\n const event = new CustomEvent('on-toggle', {\n bubbles: true,\n composed: true,\n detail: { opened: this.opened },\n });\n this.dispatchEvent(event);\n }\n\n override render() {\n const classes: any = classMap({\n 'kyn-accordion-item': true,\n opened: this.opened,\n disabled: this.disabled,\n 'filled-header': this._filledHeader,\n compact: this._compact,\n });\n\n return html`\n <div class=\"${classes}\">\n <div\n class=\"kyn-accordion-item-title\"\n aria-controls=\"kyn-accordion-item-body-${this._index}\"\n aria-expanded=${this.opened}\n aria-disabled=${this.disabled}\n tabindex=\"0\"\n role=\"button\"\n @click=\"${(e: Event) => this._handleClick(e)}\"\n @keypress=\"${(e: KeyboardEvent) => this._handleKeypress(e)}\"\n id=\"kyn-accordion-item-title-${this._index}\"\n >\n <div class=\"icon\">\n <slot name=\"icon\"></slot>\n </div>\n\n ${this._showNumber\n ? html` <div class=\"number\">${this._index}</div> `\n : null}\n\n <div>\n <div class=\"title\">\n <slot name=\"title\"></slot>\n </div>\n\n <div class=\"kyn-accordion-item-subtitle\">\n <slot name=\"subtitle\"></slot>\n </div>\n </div>\n\n <div class=\"right\">\n <div class=\"expand-icon\">${unsafeSVG(chevronIcon)}</div>\n </div>\n </div>\n\n <div\n class=\"kyn-accordion-item-body\"\n id=\"kyn-accordion-item-body-${this._index}\"\n role=\"region\"\n aria-labelledby=\"kyn-accordion-item-title-${this._index}\"\n >\n <div class=\"kyn-accordion-item-detail\">\n <slot name=\"body\"></slot>\n </div>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-accordion-item': AccordionItem;\n }\n}\n"],"names":["AccordionItem","customElement","LitElement","_classThis","_classSuper","opened","__classPrivateFieldGet","this","_AccordionItem_opened_accessor_storage","value","__classPrivateFieldSet","disabled","_AccordionItem_disabled_accessor_storage","_index","_AccordionItem__index_accessor_storage","_showNumber","_AccordionItem__showNumber_accessor_storage","_filledHeader","_AccordionItem__filledHeader_accessor_storage","_compact","_AccordionItem__compact_accessor_storage","setIndex","index","setShowNumbers","setFilledHeader","setCompact","open","_toggleOpenState","close","_handleClick","e","preventDefault","_handleKeypress","key","_emitToggleEvent","event","CustomEvent","bubbles","composed","detail","dispatchEvent","render","classes","classMap","compact","html","unsafeSVG","chevronIcon","set","__runInitializers","_opened_initializers","_opened_extraInitializers","_disabled_initializers","_disabled_extraInitializers","__index_initializers","__index_extraInitializers","__showNumber_initializers","__showNumber_extraInitializers","__filledHeader_initializers","__filledHeader_extraInitializers","__compact_initializers","_opened_decorators","property","type","Boolean","_disabled_decorators","__index_decorators","state","__showNumber_decorators","__filledHeader_decorators","__compact_decorators","__esDecorate","kind","name","static","private","access","has","obj","get","metadata","_metadata","__compact_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","stylesheet"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAqBaA,EAAa,6CADzBC,EAAc,8BACoBC,qEAARC,EAAA,cAAQC,EAKjC,UAASC,GAAM,OAAAC,EAAAC,KAAAC,EAAA,IAAA,CAAf,UAASH,CAAMI,GAAAC,EAAAH,KAAAC,EAAAC,EAAA,IAAA,CAIf,YAASE,GAAQ,OAAAL,EAAAC,KAAAK,EAAA,IAAA,CAAjB,YAASD,CAAQF,GAAAC,EAAAH,KAAAK,EAAAH,EAAA,IAAA,CAMR,UAAiBI,GAAM,OAAAP,EAAAC,KAAAO,EAAA,IAAA,CAAvB,UAAiBD,CAAMJ,GAAAC,EAAAH,KAAAO,EAAAL,EAAA,IAAA,CAMvB,eAAiBM,GAAW,OAAAT,EAAAC,KAAAS,EAAA,IAAA,CAA5B,eAAiBD,CAAWN,GAAAC,EAAAH,KAAAS,EAAAP,EAAA,IAAA,CAM5B,iBAAiBQ,GAAa,OAAAX,EAAAC,KAAAW,EAAA,IAAA,CAA9B,iBAAiBD,CAAaR,GAAAC,EAAAH,KAAAW,EAAAT,EAAA,IAAA,CAM9B,YAAiBU,GAAQ,OAAAb,EAAAC,KAAAa,EAAA,IAAA,CAAzB,YAAiBD,CAAQV,GAAAC,EAAAH,KAAAa,EAAAX,EAAA,IAAA,CAElC,QAAAY,CAASC,GACPf,KAAKM,OAASS,CAChB,CAEA,cAAAC,CAAed,GACbF,KAAKQ,YAAcN,CACrB,CAEA,eAAAe,CAAgBf,GACdF,KAAKU,cAAgBR,CACvB,CAEA,UAAAgB,CAAWhB,GACTF,KAAKY,SAAWV,CAClB,CAEA,IAAAiB,GACOnB,KAAKF,QAAQE,KAAKoB,kBACzB,CAEA,KAAAC,GACMrB,KAAKF,QAAQE,KAAKoB,kBACxB,CAEQ,YAAAE,CAAaC,GACnBA,EAAEC,iBACFxB,KAAKoB,kBACP,CAEQ,eAAAK,CAAgBF,GACtBA,EAAEC,iBACW,KAATD,EAAEG,KAAuB,SAATH,EAAEG,KAAgB1B,KAAKoB,kBAC7C,CAEQ,gBAAAA,GACDpB,KAAKI,WACRJ,KAAKF,QAAUE,KAAKF,OAEpBE,KAAK2B,mBAET,CAEQ,gBAAAA,GACN,MAAMC,EAAQ,IAAIC,YAAY,YAAa,CACzCC,SAAS,EACTC,UAAU,EACVC,OAAQ,CAAElC,OAAQE,KAAKF,UAEzBE,KAAKiC,cAAcL,EACrB,CAES,MAAAM,GACP,MAAMC,EAAeC,EAAS,CAC5B,sBAAsB,EACtBtC,OAAQE,KAAKF,OACbM,SAAUJ,KAAKI,SACf,gBAAiBJ,KAAKU,cACtB2B,QAASrC,KAAKY,WAGhB,OAAO0B,CAAI;oBACKH;;;mDAG+BnC,KAAKM;0BAC9BN,KAAKF;0BACLE,KAAKI;;;oBAGVmB,GAAavB,KAAKsB,aAAaC;uBAC5BA,GAAqBvB,KAAKyB,gBAAgBF;yCACzBvB,KAAKM;;;;;;YAMlCN,KAAKQ,YACH8B,CAAI,wBAAwBtC,KAAKM,gBACjC;;;;;;;;;;;;;uCAayBiC,EAAUC;;;;;;wCAMTxC,KAAKM;;sDAESN,KAAKM;;;;;;;KAQzD,mCA1ISL,EAAAwC,IAAAzC,KAAA0C,EAAA1C,KAAA2C,GAAS,IAITtC,EAAAoC,IAAAzC,MAAA0C,EAAA1C,KAAA4C,GAAAF,EAAA1C,KAAA6C,GAAW,KAMMtC,EAAAkC,IAAAzC,MAAA0C,EAAA1C,KAAA8C,GAAAJ,EAAA1C,KAAA+C,EAAS,KAMTtC,EAAAgC,IAAAzC,MAAA0C,EAAA1C,KAAAgD,GAAAN,EAAA1C,KAAAiD,GAAc,KAMdtC,EAAA8B,IAAAzC,MAAA0C,EAAA1C,KAAAkD,GAAAR,EAAA1C,KAAAmD,GAAgB,KAMhBtC,EAAA4B,IAAAzC,MAAA0C,EAAA1C,KAAAoD,GAAAV,EAAA1C,KAAAqD,GAAW,gQA7BpCC,EAAA,CAAAC,EAAS,CAAEC,KAAMC,WAIjBC,EAAA,CAAAH,EAAS,CAAEC,KAAMC,WAOjBE,EAAA,CAAAC,KAMAC,EAAA,CAAAD,KAMAE,EAAA,CAAAF,KAMAG,EAAA,CAAAH,KA5BDI,EAAApE,EAAA,KAAA0D,EAAA,CAAAW,KAAA,WAAAC,KAAA,SAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAC,IAAAC,GAAA,WAAAA,EAAAC,IAAAD,GAAAA,EAASzE,OAAM2C,IAAA,CAAA8B,EAAArE,KAAAqE,EAANzE,OAAMI,CAAA,GAAAuE,SAAAC,GAAA/B,EAAAC,GAIfoB,EAAApE,EAAA,KAAA8D,EAAA,CAAAO,KAAA,WAAAC,KAAA,WAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAC,IAAAC,GAAA,aAAAA,EAAAC,IAAAD,GAAAA,EAASnE,SAAQqC,IAAA,CAAA8B,EAAArE,KAAAqE,EAARnE,SAAQF,CAAA,GAAAuE,SAAAC,GAAA7B,EAAAC,GAMRkB,EAAApE,EAAA,KAAA+D,EAAA,CAAAM,KAAA,WAAAC,KAAA,SAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAC,IAAAC,GAAA,WAAAA,EAAAC,IAAAD,GAAAA,EAAiBjE,OAAMmC,IAAA,CAAA8B,EAAArE,KAAAqE,EAANjE,OAAMJ,CAAA,GAAAuE,SAAAC,GAAA3B,EAAAC,GAMvBgB,EAAApE,EAAA,KAAAiE,EAAA,CAAAI,KAAA,WAAAC,KAAA,cAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAC,IAAAC,GAAA,gBAAAA,EAAAC,IAAAD,GAAAA,EAAiB/D,YAAWiC,IAAA,CAAA8B,EAAArE,KAAAqE,EAAX/D,YAAWN,CAAA,GAAAuE,SAAAC,GAAAzB,EAAAC,GAM5Bc,EAAApE,EAAA,KAAAkE,EAAA,CAAAG,KAAA,WAAAC,KAAA,gBAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAC,IAAAC,GAAA,kBAAAA,EAAAC,IAAAD,GAAAA,EAAiB7D,cAAa+B,IAAA,CAAA8B,EAAArE,KAAAqE,EAAb7D,cAAaR,CAAA,GAAAuE,SAAAC,GAAAvB,EAAAC,GAM9BY,EAAApE,EAAA,KAAAmE,EAAA,CAAAE,KAAA,WAAAC,KAAA,WAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAC,IAAAC,GAAA,aAAAA,EAAAC,IAAAD,GAAAA,EAAiB3D,SAAQ6B,IAAA,CAAA8B,EAAArE,KAAAqE,EAAR3D,SAAQV,CAAA,GAAAuE,SAAAC,GAAArB,EAAAsB,GAjCpCX,EAAA,KAAAY,EAAA,CAAA1E,MAAAN,GAAAiF,EAAA,CAAAZ,KAAA,QAAAC,KAAAtE,EAAAsE,KAAAO,SAAAC,GAAA,KAAAI,iHACkBlF,EAAAmF,OAASC,EAAUC,GADxBvC,EAAA9C,EAAAkF,MAAa"}
1	+ {"version":3,"file":"accordionItem.js","sources":["../../../../src/components/reusable/accordion/accordionItem.ts"],"sourcesContent":["/*\n Copyright Kyndryl, Inc. 2022\n /\n\nimport { html, LitElement, unsafeCSS } from 'lit';\nimport { state, property, customElement } from 'lit/decorators.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport stylesheet from './accordionItem.scss?inline';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport chevronIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/24/chevron-down.svg';\n\n/\n Accordion Item component. \n @fires on-toggle - Emits the `opened` state when the accordion item opens/closes. `detail:{ opened: boolean }`.\n * @slot icon - Optional leading icon. 24px, or 16px for compact.\n * @slot body - Body of the accordion item.\n * @slot title - Title of the accordion item.\n * @slot subtitle - Optional subtitle of the accordion item.\n \n /\n@customElement('kyn-accordion-item')\nexport class AccordionItem extends LitElement {\n static override styles = unsafeCSS(stylesheet);\n\n /** Accordion item opened state. /\n @property({ type: Boolean })\n accessor opened = false;\n\n /* Accordion item disabled state. /\n @property({ type: Boolean })\n accessor disabled = false;\n\n /\n The index of this item. Passed from the Accordion.\n * @ignore\n /\n @state() private accessor _index = 1;\n\n /\n Whether the number should be shown. Passed from the Accordion.\n * @ignore\n /\n @state() private accessor _showNumber = false;\n\n /\n Whether this item displays a filled header. Passed from the Accordion.\n * @ignore\n /\n @state() private accessor _filledHeader = false;\n\n /\n Whether this item is compact. Passed from the Accordion.\n * @ignore\n /\n @state() private accessor _compact = false;\n\n /\n Whether an icon is assigned to the icon slot.\n * @ignore\n */\n @state() private accessor _hasIcon = false;\n\n setIndex(index: number) {\n this._index = index;\n }\n\n setShowNumbers(value: boolean) {\n this._showNumber = value;\n }\n\n setFilledHeader(value: boolean) {\n this._filledHeader = value;\n }\n\n setCompact(value: boolean) {\n this._compact = value;\n }\n\n private _handleIconSlotChange(e: Event) {\n const slot = e.target as HTMLSlotElement;\n this._hasIcon = slot.assignedElements({ flatten: true }).length > 0;\n }\n\n override firstUpdated() {\n const iconSlot = this.renderRoot.querySelector(\n 'slot[name=\"icon\"]'\n ) as HTMLSlotElement \| null;\n\n if (iconSlot) {\n this._hasIcon = iconSlot.assignedElements({ flatten: true }).length > 0;\n }\n }\n\n open() {\n if (!this.opened) this._toggleOpenState();\n }\n\n close() {\n if (this.opened) this._toggleOpenState();\n }\n\n private _handleClick(e: Event) {\n e.preventDefault();\n this._toggleOpenState();\n }\n\n private _handleKeypress(e: KeyboardEvent) {\n e.preventDefault();\n if (e.key == ' ' \|\| e.key == 'Enter') this._toggleOpenState();\n }\n\n private _toggleOpenState() {\n if (!this.disabled) {\n this.opened = !this.opened;\n\n this._emitToggleEvent();\n }\n }\n\n private _emitToggleEvent() {\n const event = new CustomEvent('on-toggle', {\n bubbles: true,\n composed: true,\n detail: { opened: this.opened },\n });\n this.dispatchEvent(event);\n }\n\n override render() {\n const classes: any = classMap({\n 'kyn-accordion-item': true,\n opened: this.opened,\n disabled: this.disabled,\n 'filled-header': this._filledHeader,\n compact: this._compact,\n 'has-icon': this._hasIcon,\n 'show-number': this._showNumber,\n });\n\n return html`\n <div class=\"${classes}\">\n <div\n class=\"kyn-accordion-item-title\"\n aria-controls=\"kyn-accordion-item-body-${this._index}\"\n aria-expanded=${this.opened}\n aria-disabled=${this.disabled}\n tabindex=\"0\"\n role=\"button\"\n @click=\"${(e: Event) => this._handleClick(e)}\"\n @keypress=\"${(e: KeyboardEvent) => this._handleKeypress(e)}\"\n id=\"kyn-accordion-item-title-${this._index}\"\n >\n <div class=\"icon\">\n <slot\n name=\"icon\"\n @slotchange=${(e: Event) => this._handleIconSlotChange(e)}\n ></slot>\n </div>\n\n ${this._showNumber\n ? html` <div class=\"number\">${this._index}</div> `\n : null}\n\n <div>\n <div class=\"title\">\n <slot name=\"title\"></slot>\n </div>\n\n <div class=\"kyn-accordion-item-subtitle\">\n <slot name=\"subtitle\"></slot>\n </div>\n </div>\n\n <div class=\"right\">\n <div class=\"expand-icon\">${unsafeSVG(chevronIcon)}</div>\n </div>\n </div>\n\n <div\n class=\"kyn-accordion-item-body\"\n id=\"kyn-accordion-item-body-${this._index}\"\n role=\"region\"\n aria-labelledby=\"kyn-accordion-item-title-${this._index}\"\n aria-hidden=${String(!this.opened)}\n ?inert=${!this.opened}\n >\n <div class=\"kyn-accordion-item-detail\">\n <slot name=\"body\"></slot>\n </div>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-accordion-item': AccordionItem;\n }\n}\n"],"names":["AccordionItem","customElement","LitElement","_classThis","_classSuper","opened","__classPrivateFieldGet","this","_AccordionItem_opened_accessor_storage","value","__classPrivateFieldSet","disabled","_AccordionItem_disabled_accessor_storage","_index","_AccordionItem__index_accessor_storage","_showNumber","_AccordionItem__showNumber_accessor_storage","_filledHeader","_AccordionItem__filledHeader_accessor_storage","_compact","_AccordionItem__compact_accessor_storage","_hasIcon","_AccordionItem__hasIcon_accessor_storage","setIndex","index","setShowNumbers","setFilledHeader","setCompact","_handleIconSlotChange","e","slot","target","assignedElements","flatten","length","firstUpdated","iconSlot","renderRoot","querySelector","open","_toggleOpenState","close","_handleClick","preventDefault","_handleKeypress","key","_emitToggleEvent","event","CustomEvent","bubbles","composed","detail","dispatchEvent","render","classes","classMap","compact","html","unsafeSVG","chevronIcon","String","set","__runInitializers","_opened_initializers","_opened_extraInitializers","_disabled_initializers","_disabled_extraInitializers","__index_initializers","__index_extraInitializers","__showNumber_initializers","__showNumber_extraInitializers","__filledHeader_initializers","__filledHeader_extraInitializers","__compact_initializers","__compact_extraInitializers","__hasIcon_initializers","_opened_decorators","property","type","Boolean","_disabled_decorators","__index_decorators","state","__showNumber_decorators","__filledHeader_decorators","__compact_decorators","__hasIcon_decorators","__esDecorate","kind","name","static","private","access","has","obj","get","metadata","_metadata","__hasIcon_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","stylesheet"],"mappings":"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"}

package/components/reusable/dropdown/dropdown.js CHANGED Viewed

@@ -924,6 +924,9 @@ slot[name=add-option-button]::slotted(*) {
 .placeholder-text {
   color: var(--kd-color-text-level-primary);
 }
+.select[disabled] .placeholder-text {
+  color: var(--kd-color-text-level-disabled);
+}
 .dropdown.ai-connected .wrapper .custom .options {
   box-shadow: var(--kd-elevation-level-1);