@kyndryl-design-system/shidoka-applications 1.3.0 → 1.3.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.
@@ -5,7 +5,6 @@ import '@kyndryl-design-system/shidoka-foundation/components/icon';
5
5
  * Modal.
6
6
  * @slot unnamed - Slot for modal body content.
7
7
  * @slot anchor - Slot for the anchor button content.
8
- * @slot actions - Slot for custom action buttons. Custom action buttons will not trigger the `on-close` event.
9
8
  * @fires on-close - Emits the modal close event with `returnValue` (`'ok'` or `'cancel'`).
10
9
  */
11
10
  export declare class Modal extends LitElement {
@@ -1 +1 @@
1
- {"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/modal/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,6DAA6D,CAAC;AACrE,OAAO,2DAA2D,CAAC;AAInE;;;;;;GAMG;AACH,qBACa,KAAM,SAAQ,UAAU;IACnC,OAAgB,MAAM,+BAAa;IAEnC,wBAAwB;IAExB,IAAI,UAAS;IAEb,+CAA+C;IAE/C,IAAI,SAAU;IAEd,oCAAoC;IAEpC,SAAS,SAAM;IAEf,4BAA4B;IAE5B,SAAS,SAAM;IAEf,sBAAsB;IAEtB,MAAM,SAAQ;IAEd,0BAA0B;IAE1B,UAAU,SAAY;IAEtB,+EAA+E;IAE/E,WAAW,UAAS;IAEpB,4LAA4L;IAE5L,WAAW,EAAG,QAAQ,CAAC;IAEvB;;OAEG;IAEH,OAAO,EAAG,GAAG,CAAC;IAEL,MAAM;IA+Df,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,eAAe;IAUd,OAAO,CAAC,YAAY,EAAE,GAAG;CASnC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,KAAK,CAAC;KACpB;CACF"}
1
+ {"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/modal/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,6DAA6D,CAAC;AACrE,OAAO,2DAA2D,CAAC;AAInE;;;;;GAKG;AACH,qBACa,KAAM,SAAQ,UAAU;IACnC,OAAgB,MAAM,+BAAa;IAEnC,wBAAwB;IAExB,IAAI,UAAS;IAEb,+CAA+C;IAE/C,IAAI,SAAU;IAEd,oCAAoC;IAEpC,SAAS,SAAM;IAEf,4BAA4B;IAE5B,SAAS,SAAM;IAEf,sBAAsB;IAEtB,MAAM,SAAQ;IAEd,0BAA0B;IAE1B,UAAU,SAAY;IAEtB,+EAA+E;IAE/E,WAAW,UAAS;IAEpB,4LAA4L;IAE5L,WAAW,EAAG,QAAQ,CAAC;IAEvB;;OAEG;IAEH,OAAO,EAAG,GAAG,CAAC;IAEL,MAAM;IAiEf,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,eAAe;IAUd,OAAO,CAAC,YAAY,EAAE,GAAG;CASnC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,KAAK,CAAC;KACpB;CACF"}
@@ -43,9 +43,11 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
43
43
  ${this.cancelText}
44
44
  </kd-button>
45
45
 
46
+ <!--
46
47
  <div class="custom-actions">
47
48
  <slot name="actions"></slot>
48
49
  </div>
50
+ -->
49
51
  </div>
50
52
  </form>
51
53
  </dialog>
@@ -1 +1 @@
1
- {"version":3,"file":"modal.js","sources":["../../../../src/components/reusable/modal/modal.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport ModalScss from './modal.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/button';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\n\nimport closeIcon from '@carbon/icons/es/close/32';\n\n/**\n * Modal.\n * @slot unnamed - Slot for modal body content.\n * @slot anchor - Slot for the anchor button content.\n * @slot actions - Slot for custom action buttons. Custom action buttons will not trigger the `on-close` event.\n * @fires on-close - Emits the modal close event with `returnValue` (`'ok'` or `'cancel'`).\n */\n@customElement('kyn-modal')\nexport class Modal extends LitElement {\n static override styles = ModalScss;\n\n /** Modal open state. */\n @property({ type: Boolean })\n open = false;\n\n /** Modal size. `'auto'`, `'md'`, or `'lg'`. */\n @property({ type: String })\n size = 'auto';\n\n /** Title/heading text, required. */\n @property({ type: String })\n titleText = '';\n\n /** Label text, optional. */\n @property({ type: String })\n labelText = '';\n\n /** OK button text. */\n @property({ type: String })\n okText = 'OK';\n\n /** Cancel button text. */\n @property({ type: String })\n cancelText = 'Cancel';\n\n /** Changes the primary button styles to indicate the action is destructive. */\n @property({ type: Boolean })\n destructive = false;\n\n /** Function to execute before the modal can close. Useful for running checks or validations before closing. Exposes `returnValue` (`'ok'` or `'cancel'`). Must return `true` or `false`. */\n @property({ attribute: false })\n beforeClose!: Function;\n\n /** The dialog element\n * @internal\n */\n @query('dialog')\n _dialog!: any;\n\n override render() {\n const classes = {\n modal: true,\n 'size--md': this.size === 'md',\n 'size--lg': this.size === 'lg',\n };\n\n return html`\n <button class=\"anchor\" @click=${this._openModal}>\n <slot name=\"anchor\"></slot>\n </button>\n\n <dialog\n class=\"${classMap(classes)}\"\n autofocus\n aria-labelledby=\"dialogLabel\"\n @cancel=${(e: Event) => this._closeModal(e, 'cancel')}\n >\n <button\n class=\"close\"\n @click=${(e: Event) => this._closeModal(e, 'cancel')}\n >\n <kd-icon .icon=${closeIcon}></kd-icon>\n </button>\n\n <header>\n <div>\n ${this.labelText !== ''\n ? html`<span class=\"label\">${this.labelText}</span>`\n : null}\n <h1 id=\"dialogLabel\">${this.titleText}</h1>\n </div>\n </header>\n\n <form method=\"dialog\" class=\"body\">\n <slot></slot>\n\n <div class=\"actions\">\n <kd-button\n value=\"ok\"\n ?destructive=${this.destructive}\n @click=${(e: Event) => this._closeModal(e, 'ok')}\n >\n ${this.okText}\n </kd-button>\n\n <kd-button\n value=\"cancel\"\n kind=\"secondary\"\n @click=${(e: Event) => this._closeModal(e, 'cancel')}\n >\n ${this.cancelText}\n </kd-button>\n\n <div class=\"custom-actions\">\n <slot name=\"actions\"></slot>\n </div>\n </div>\n </form>\n </dialog>\n `;\n }\n\n private _openModal() {\n this.open = true;\n }\n\n private _closeModal(e: Event, returnValue: string) {\n if (\n !this.beforeClose ||\n (this.beforeClose && this.beforeClose(returnValue))\n ) {\n this.open = false;\n this._dialog.returnValue = returnValue;\n this._emitCloseEvent(e);\n }\n }\n\n private _emitCloseEvent(e: Event) {\n const event = new CustomEvent('on-close', {\n detail: {\n returnValue: this._dialog.returnValue,\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n\n override updated(changedProps: any) {\n if (changedProps.has('open')) {\n if (this.open) {\n this._dialog.showModal();\n } else {\n this._dialog.close();\n }\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-modal': Modal;\n }\n}\n"],"names":["Modal","LitElement","constructor","this","open","size","titleText","labelText","okText","cancelText","destructive","render","classes","modal","html","_openModal","classMap","e","_closeModal","closeIcon","returnValue","beforeClose","_dialog","_emitCloseEvent","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","showModal","close","styles","ModalScss","__decorate","property","type","Boolean","prototype","String","attribute","query","customElement"],"mappings":"m8BAkBO,IAAMA,EAAN,cAAoBC,EAApBC,kCAKLC,KAAIC,MAAG,EAIPD,KAAIE,KAAG,OAIPF,KAASG,UAAG,GAIZH,KAASI,UAAG,GAIZJ,KAAMK,OAAG,KAITL,KAAUM,WAAG,SAIbN,KAAWO,aAAG,CA6Gf,CAjGUC,SACP,MAAMC,EAAU,CACdC,OAAO,EACP,WAA0B,OAAdV,KAAKE,KACjB,WAA0B,OAAdF,KAAKE,MAGnB,OAAOS,CAAI;sCACuBX,KAAKY;;;;;iBAK1BC,EAASJ;;;kBAGPK,GAAad,KAAKe,YAAYD,EAAG;;;;mBAIhCA,GAAad,KAAKe,YAAYD,EAAG;;2BAE1BE;;;;;cAKM,KAAnBhB,KAAKI,UACHO,CAAI,uBAAuBX,KAAKI,mBAChC;mCACmBJ,KAAKG;;;;;;;;;;6BAUXH,KAAKO;uBACVO,GAAad,KAAKe,YAAYD,EAAG;;gBAEzCd,KAAKK;;;;;;uBAMGS,GAAad,KAAKe,YAAYD,EAAG;;gBAEzCd,KAAKM;;;;;;;;;KAUlB,CAEOM,aACNZ,KAAKC,MAAO,CACb,CAEOc,YAAYD,EAAUG,KAEzBjB,KAAKkB,aACLlB,KAAKkB,aAAelB,KAAKkB,YAAYD,MAEtCjB,KAAKC,MAAO,EACZD,KAAKmB,QAAQF,YAAcA,EAC3BjB,KAAKoB,gBAAgBN,GAExB,CAEOM,gBAAgBN,GACtB,MAAMO,EAAQ,IAAIC,YAAY,WAAY,CACxCC,OAAQ,CACNN,YAAajB,KAAKmB,QAAQF,YAC1BO,UAAWV,KAGfd,KAAKyB,cAAcJ,EACpB,CAEQK,QAAQC,GACXA,EAAaC,IAAI,UACf5B,KAAKC,KACPD,KAAKmB,QAAQU,YAEb7B,KAAKmB,QAAQW,QAGlB,GAxIejC,EAAMkC,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACLvC,EAAAwC,UAAA,YAAA,GAIbJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACJzC,EAAAwC,UAAA,YAAA,GAIdJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACHzC,EAAAwC,UAAA,iBAAA,GAIfJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACHzC,EAAAwC,UAAA,iBAAA,GAIfJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACJzC,EAAAwC,UAAA,cAAA,GAIdJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACIzC,EAAAwC,UAAA,kBAAA,GAItBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACEvC,EAAAwC,UAAA,mBAAA,GAIpBJ,EAAA,CADCC,EAAS,CAAEK,WAAW,KACA1C,EAAAwC,UAAA,mBAAA,GAMvBJ,EAAA,CADCO,EAAM,WACO3C,EAAAwC,UAAA,eAAA,GAvCHxC,EAAKoC,EAAA,CADjBQ,EAAc,cACF5C"}
1
+ {"version":3,"file":"modal.js","sources":["../../../../src/components/reusable/modal/modal.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport ModalScss from './modal.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/button';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\n\nimport closeIcon from '@carbon/icons/es/close/32';\n\n/**\n * Modal.\n * @slot unnamed - Slot for modal body content.\n * @slot anchor - Slot for the anchor button content.\n * @fires on-close - Emits the modal close event with `returnValue` (`'ok'` or `'cancel'`).\n */\n@customElement('kyn-modal')\nexport class Modal extends LitElement {\n static override styles = ModalScss;\n\n /** Modal open state. */\n @property({ type: Boolean })\n open = false;\n\n /** Modal size. `'auto'`, `'md'`, or `'lg'`. */\n @property({ type: String })\n size = 'auto';\n\n /** Title/heading text, required. */\n @property({ type: String })\n titleText = '';\n\n /** Label text, optional. */\n @property({ type: String })\n labelText = '';\n\n /** OK button text. */\n @property({ type: String })\n okText = 'OK';\n\n /** Cancel button text. */\n @property({ type: String })\n cancelText = 'Cancel';\n\n /** Changes the primary button styles to indicate the action is destructive. */\n @property({ type: Boolean })\n destructive = false;\n\n /** Function to execute before the modal can close. Useful for running checks or validations before closing. Exposes `returnValue` (`'ok'` or `'cancel'`). Must return `true` or `false`. */\n @property({ attribute: false })\n beforeClose!: Function;\n\n /** The dialog element\n * @internal\n */\n @query('dialog')\n _dialog!: any;\n\n override render() {\n const classes = {\n modal: true,\n 'size--md': this.size === 'md',\n 'size--lg': this.size === 'lg',\n };\n\n return html`\n <button class=\"anchor\" @click=${this._openModal}>\n <slot name=\"anchor\"></slot>\n </button>\n\n <dialog\n class=\"${classMap(classes)}\"\n autofocus\n aria-labelledby=\"dialogLabel\"\n @cancel=${(e: Event) => this._closeModal(e, 'cancel')}\n >\n <button\n class=\"close\"\n @click=${(e: Event) => this._closeModal(e, 'cancel')}\n >\n <kd-icon .icon=${closeIcon}></kd-icon>\n </button>\n\n <header>\n <div>\n ${this.labelText !== ''\n ? html`<span class=\"label\">${this.labelText}</span>`\n : null}\n <h1 id=\"dialogLabel\">${this.titleText}</h1>\n </div>\n </header>\n\n <form method=\"dialog\" class=\"body\">\n <slot></slot>\n\n <div class=\"actions\">\n <kd-button\n value=\"ok\"\n ?destructive=${this.destructive}\n @click=${(e: Event) => this._closeModal(e, 'ok')}\n >\n ${this.okText}\n </kd-button>\n\n <kd-button\n value=\"cancel\"\n kind=\"secondary\"\n @click=${(e: Event) => this._closeModal(e, 'cancel')}\n >\n ${this.cancelText}\n </kd-button>\n\n <!--\n <div class=\"custom-actions\">\n <slot name=\"actions\"></slot>\n </div>\n -->\n </div>\n </form>\n </dialog>\n `;\n }\n\n private _openModal() {\n this.open = true;\n }\n\n private _closeModal(e: Event, returnValue: string) {\n if (\n !this.beforeClose ||\n (this.beforeClose && this.beforeClose(returnValue))\n ) {\n this.open = false;\n this._dialog.returnValue = returnValue;\n this._emitCloseEvent(e);\n }\n }\n\n private _emitCloseEvent(e: Event) {\n const event = new CustomEvent('on-close', {\n detail: {\n returnValue: this._dialog.returnValue,\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n\n override updated(changedProps: any) {\n if (changedProps.has('open')) {\n if (this.open) {\n this._dialog.showModal();\n } else {\n this._dialog.close();\n }\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-modal': Modal;\n }\n}\n"],"names":["Modal","LitElement","constructor","this","open","size","titleText","labelText","okText","cancelText","destructive","render","classes","modal","html","_openModal","classMap","e","_closeModal","closeIcon","returnValue","beforeClose","_dialog","_emitCloseEvent","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","showModal","close","styles","ModalScss","__decorate","property","type","Boolean","prototype","String","attribute","query","customElement"],"mappings":"m8BAiBO,IAAMA,EAAN,cAAoBC,EAApBC,kCAKLC,KAAIC,MAAG,EAIPD,KAAIE,KAAG,OAIPF,KAASG,UAAG,GAIZH,KAASI,UAAG,GAIZJ,KAAMK,OAAG,KAITL,KAAUM,WAAG,SAIbN,KAAWO,aAAG,CA+Gf,CAnGUC,SACP,MAAMC,EAAU,CACdC,OAAO,EACP,WAA0B,OAAdV,KAAKE,KACjB,WAA0B,OAAdF,KAAKE,MAGnB,OAAOS,CAAI;sCACuBX,KAAKY;;;;;iBAK1BC,EAASJ;;;kBAGPK,GAAad,KAAKe,YAAYD,EAAG;;;;mBAIhCA,GAAad,KAAKe,YAAYD,EAAG;;2BAE1BE;;;;;cAKM,KAAnBhB,KAAKI,UACHO,CAAI,uBAAuBX,KAAKI,mBAChC;mCACmBJ,KAAKG;;;;;;;;;;6BAUXH,KAAKO;uBACVO,GAAad,KAAKe,YAAYD,EAAG;;gBAEzCd,KAAKK;;;;;;uBAMGS,GAAad,KAAKe,YAAYD,EAAG;;gBAEzCd,KAAKM;;;;;;;;;;;KAYlB,CAEOM,aACNZ,KAAKC,MAAO,CACb,CAEOc,YAAYD,EAAUG,KAEzBjB,KAAKkB,aACLlB,KAAKkB,aAAelB,KAAKkB,YAAYD,MAEtCjB,KAAKC,MAAO,EACZD,KAAKmB,QAAQF,YAAcA,EAC3BjB,KAAKoB,gBAAgBN,GAExB,CAEOM,gBAAgBN,GACtB,MAAMO,EAAQ,IAAIC,YAAY,WAAY,CACxCC,OAAQ,CACNN,YAAajB,KAAKmB,QAAQF,YAC1BO,UAAWV,KAGfd,KAAKyB,cAAcJ,EACpB,CAEQK,QAAQC,GACXA,EAAaC,IAAI,UACf5B,KAAKC,KACPD,KAAKmB,QAAQU,YAEb7B,KAAKmB,QAAQW,QAGlB,GA1IejC,EAAMkC,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACLvC,EAAAwC,UAAA,YAAA,GAIbJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACJzC,EAAAwC,UAAA,YAAA,GAIdJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACHzC,EAAAwC,UAAA,iBAAA,GAIfJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACHzC,EAAAwC,UAAA,iBAAA,GAIfJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACJzC,EAAAwC,UAAA,cAAA,GAIdJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACIzC,EAAAwC,UAAA,kBAAA,GAItBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACEvC,EAAAwC,UAAA,mBAAA,GAIpBJ,EAAA,CADCC,EAAS,CAAEK,WAAW,KACA1C,EAAAwC,UAAA,mBAAA,GAMvBJ,EAAA,CADCO,EAAM,WACO3C,EAAAwC,UAAA,eAAA,GAvCHxC,EAAKoC,EAAA,CADjBQ,EAAc,cACF5C"}
@@ -14,9 +14,14 @@ export declare class Tooltip extends LitElement {
14
14
  direction: string;
15
15
  /** Assistive text for anchor button. */
16
16
  assistiveText: string;
17
+ /** Timeout function to delay modal close.
18
+ * @internal
19
+ */
20
+ timer: any;
17
21
  render(): import("lit-html").TemplateResult<1>;
18
- private _handleClick;
19
- private _handleClickOut;
22
+ private _handleOpen;
23
+ private _handleClose;
24
+ private _handleMouseLeave;
20
25
  private _handleEsc;
21
26
  connectedCallback(): void;
22
27
  disconnectedCallback(): void;
@@ -1 +1 @@
1
- {"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/tooltip/tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,2DAA2D,CAAC;AAGnE;;;;GAIG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,+BAAe;IAGrC,IAAI,UAAS;IAEb,kEAAkE;IAElE,cAAc,SAAY;IAE1B,sEAAsE;IAEtE,SAAS,SAAS;IAElB,wCAAwC;IAExC,aAAa,SAAoB;IAExB,MAAM;IAoCf,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,UAAU;IAMT,iBAAiB;IAMjB,oBAAoB;CAK9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,OAAO,CAAC;KACxB;CACF"}
1
+ {"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/tooltip/tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,2DAA2D,CAAC;AAGnE;;;;GAIG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,+BAAe;IAGrC,IAAI,UAAS;IAEb,kEAAkE;IAElE,cAAc,SAAY;IAE1B,sEAAsE;IAEtE,SAAS,SAAS;IAElB,wCAAwC;IAExC,aAAa,SAAoB;IAEjC;;OAEG;IAEH,KAAK,EAAE,GAAG,CAAC;IAEF,MAAM;IAyCf,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,UAAU;IAMT,iBAAiB;IAKjB,oBAAoB;CAI9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,OAAO,CAAC;KACxB;CACF"}
@@ -1,22 +1,27 @@
1
- import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as e}from'./../../../external/lit-html/lit-html.js';import{LitElement as o}from'./../../../external/lit-element/lit-element.js';import{customElement as i}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as s}from'./../../../external/@lit/reactive-element/decorators/property.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as n}from'./../../../external/lit-html/directives/class-map.js';import r from"./tooltip.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import l from'./../../../external/@carbon/icons/es/information/20.js';let c=class extends o{constructor(){super(...arguments),this.open=!1,this.anchorPosition="center",this.direction="top",this.assistiveText="Toggle Tooltip"}render(){const t={content:!0,open:this.open,"anchor--start":"start"===this.anchorPosition,"anchor--end":"end"===this.anchorPosition,"anchor--center":"center"===this.anchorPosition,"direction--top":"top"===this.direction,"direction--bottom":"bottom"===this.direction,"direction--left":"left"===this.direction,"direction--right":"right"===this.direction};return e`
1
+ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as o}from'./../../../external/lit-element/lit-element.js';import{customElement as i}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as s}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as r}from'./../../../external/lit-html/directives/class-map.js';import l from"./tooltip.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import a from'./../../../external/@carbon/icons/es/information/20.js';let d=class extends o{constructor(){super(...arguments),this.open=!1,this.anchorPosition="center",this.direction="top",this.assistiveText="Toggle Tooltip"}render(){const e={content:!0,open:this.open,"anchor--start":"start"===this.anchorPosition,"anchor--end":"end"===this.anchorPosition,"anchor--center":"center"===this.anchorPosition,"direction--top":"top"===this.direction,"direction--bottom":"bottom"===this.direction,"direction--left":"left"===this.direction,"direction--right":"right"===this.direction};return t`
2
2
  <div class="tooltip">
3
3
  <button
4
4
  aria-label=${this.assistiveText}
5
5
  title=${this.assistiveText}
6
6
  aria-describedby="tooltip"
7
- @click=${this._handleClick}
7
+ @mouseenter=${this._handleOpen}
8
+ @mouseleave=${this._handleMouseLeave}
9
+ @focus=${this._handleOpen}
10
+ @blur=${this._handleClose}
8
11
  >
9
- <slot name="anchor"><kd-icon .icon=${l}></kd-icon></slot>
12
+ <slot name="anchor"><kd-icon .icon=${a}></kd-icon></slot>
10
13
  </button>
11
14
 
12
15
  <div
13
16
  id="tooltip"
14
17
  aria-hidden=${!this.open}
15
18
  role="tooltip"
16
- class=${n(t)}
19
+ class=${r(e)}
20
+ @mouseenter=${this._handleOpen}
21
+ @mouseleave=${this._handleMouseLeave}
17
22
  >
18
23
  <slot></slot>
19
24
  </div>
20
25
  </div>
21
- `}_handleClick(){this.open=!this.open}_handleClickOut(t){this.open&&!t.composedPath().includes(this)&&(this.open=!1)}_handleEsc(t){this.open&&"Escape"===t.key&&(this.open=!1)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(t=>this._handleClickOut(t))),document.addEventListener("keydown",(t=>this._handleEsc(t)))}disconnectedCallback(){document.removeEventListener("click",(t=>this._handleClickOut(t))),document.removeEventListener("keydown",(t=>this._handleEsc(t))),super.disconnectedCallback()}};c.styles=r,t([s({type:Boolean})],c.prototype,"open",void 0),t([s({type:String})],c.prototype,"anchorPosition",void 0),t([s({type:String})],c.prototype,"direction",void 0),t([s({type:String})],c.prototype,"assistiveText",void 0),c=t([i("kyn-tooltip")],c);export{c as Tooltip};
26
+ `}_handleOpen(){clearTimeout(this.timer),this.open=!0}_handleClose(){this.open=!1}_handleMouseLeave(){this.timer=setTimeout((()=>{this.open=!1,clearTimeout(this.timer)}),500)}_handleEsc(e){this.open&&"Escape"===e.key&&(this.open=!1)}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",(e=>this._handleEsc(e)))}disconnectedCallback(){document.removeEventListener("keydown",(e=>this._handleEsc(e))),super.disconnectedCallback()}};d.styles=l,e([s({type:Boolean})],d.prototype,"open",void 0),e([s({type:String})],d.prototype,"anchorPosition",void 0),e([s({type:String})],d.prototype,"direction",void 0),e([s({type:String})],d.prototype,"assistiveText",void 0),e([n()],d.prototype,"timer",void 0),d=e([i("kyn-tooltip")],d);export{d as Tooltip};
22
27
  //# sourceMappingURL=tooltip.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"tooltip.js","sources":["../../../../src/components/reusable/tooltip/tooltip.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport TooltipScss from './tooltip.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport infoIcon from '@carbon/icons/es/information/20';\n\n/**\n * Tooltip.\n * @slot unnamed - Slot for tooltip content.\n * @slot anchor - Slot for custom anchor button content.\n */\n@customElement('kyn-tooltip')\nexport class Tooltip extends LitElement {\n static override styles = TooltipScss;\n\n @property({ type: Boolean })\n open = false;\n\n /** Tooltip anchor position. `'start'`, `'end'`, or `'center'`. */\n @property({ type: String })\n anchorPosition = 'center';\n\n /** Tooltip direction. `'top'`, `'bottom'`, `'left'`, or `'right'`. */\n @property({ type: String })\n direction = 'top';\n\n /** Assistive text for anchor button. */\n @property({ type: String })\n assistiveText = 'Toggle Tooltip';\n\n override render() {\n const classes = {\n content: true,\n open: this.open,\n 'anchor--start': this.anchorPosition === 'start',\n 'anchor--end': this.anchorPosition === 'end',\n 'anchor--center': this.anchorPosition === 'center',\n 'direction--top': this.direction === 'top',\n 'direction--bottom': this.direction === 'bottom',\n 'direction--left': this.direction === 'left',\n 'direction--right': this.direction === 'right',\n };\n\n return html`\n <div class=\"tooltip\">\n <button\n aria-label=${this.assistiveText}\n title=${this.assistiveText}\n aria-describedby=\"tooltip\"\n @click=${this._handleClick}\n >\n <slot name=\"anchor\"><kd-icon .icon=${infoIcon}></kd-icon></slot>\n </button>\n\n <div\n id=\"tooltip\"\n aria-hidden=${!this.open}\n role=\"tooltip\"\n class=${classMap(classes)}\n >\n <slot></slot>\n </div>\n </div>\n `;\n }\n\n private _handleClick() {\n this.open = !this.open;\n }\n\n private _handleClickOut(e: Event) {\n if (this.open && !e.composedPath().includes(this)) {\n this.open = false;\n }\n }\n\n private _handleEsc(e: KeyboardEvent) {\n if (this.open && e.key === 'Escape') {\n this.open = false;\n }\n }\n\n override connectedCallback() {\n super.connectedCallback();\n document.addEventListener('click', (e) => this._handleClickOut(e));\n document.addEventListener('keydown', (e) => this._handleEsc(e));\n }\n\n override disconnectedCallback() {\n document.removeEventListener('click', (e) => this._handleClickOut(e));\n document.removeEventListener('keydown', (e) => this._handleEsc(e));\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-tooltip': Tooltip;\n }\n}\n"],"names":["Tooltip","LitElement","constructor","this","open","anchorPosition","direction","assistiveText","render","classes","content","html","_handleClick","infoIcon","classMap","_handleClickOut","e","composedPath","includes","_handleEsc","key","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","styles","TooltipScss","__decorate","property","type","Boolean","prototype","String","customElement"],"mappings":"+yBAcO,IAAMA,EAAN,cAAsBC,EAAtBC,kCAILC,KAAIC,MAAG,EAIPD,KAAcE,eAAG,SAIjBF,KAASG,UAAG,MAIZH,KAAaI,cAAG,gBAiEjB,CA/DUC,SACP,MAAMC,EAAU,CACdC,SAAS,EACTN,KAAMD,KAAKC,KACX,gBAAyC,UAAxBD,KAAKE,eACtB,cAAuC,QAAxBF,KAAKE,eACpB,iBAA0C,WAAxBF,KAAKE,eACvB,iBAAqC,QAAnBF,KAAKG,UACvB,oBAAwC,WAAnBH,KAAKG,UAC1B,kBAAsC,SAAnBH,KAAKG,UACxB,mBAAuC,UAAnBH,KAAKG,WAG3B,OAAOK,CAAI;;;uBAGQR,KAAKI;kBACVJ,KAAKI;;mBAEJJ,KAAKS;;+CAEuBC;;;;;yBAKtBV,KAAKC;;kBAEZU,EAASL;;;;;KAMxB,CAEOG,eACNT,KAAKC,MAAQD,KAAKC,IACnB,CAEOW,gBAAgBC,GAClBb,KAAKC,OAASY,EAAEC,eAAeC,SAASf,QAC1CA,KAAKC,MAAO,EAEf,CAEOe,WAAWH,GACbb,KAAKC,MAAkB,WAAVY,EAAEI,MACjBjB,KAAKC,MAAO,EAEf,CAEQiB,oBACPC,MAAMD,oBACNE,SAASC,iBAAiB,SAAUR,GAAMb,KAAKY,gBAAgBC,KAC/DO,SAASC,iBAAiB,WAAYR,GAAMb,KAAKgB,WAAWH,IAC7D,CAEQS,uBACPF,SAASG,oBAAoB,SAAUV,GAAMb,KAAKY,gBAAgBC,KAClEO,SAASG,oBAAoB,WAAYV,GAAMb,KAAKgB,WAAWH,KAC/DM,MAAMG,sBACP,GA/EezB,EAAM2B,OAAGC,EAGzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACLhC,EAAAiC,UAAA,YAAA,GAIbJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACQlC,EAAAiC,UAAA,sBAAA,GAI1BJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACAlC,EAAAiC,UAAA,iBAAA,GAIlBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACelC,EAAAiC,UAAA,qBAAA,GAhBtBjC,EAAO6B,EAAA,CADnBM,EAAc,gBACFnC"}
1
+ {"version":3,"file":"tooltip.js","sources":["../../../../src/components/reusable/tooltip/tooltip.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport TooltipScss from './tooltip.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport infoIcon from '@carbon/icons/es/information/20';\n\n/**\n * Tooltip.\n * @slot unnamed - Slot for tooltip content.\n * @slot anchor - Slot for custom anchor button content.\n */\n@customElement('kyn-tooltip')\nexport class Tooltip extends LitElement {\n static override styles = TooltipScss;\n\n @property({ type: Boolean })\n open = false;\n\n /** Tooltip anchor position. `'start'`, `'end'`, or `'center'`. */\n @property({ type: String })\n anchorPosition = 'center';\n\n /** Tooltip direction. `'top'`, `'bottom'`, `'left'`, or `'right'`. */\n @property({ type: String })\n direction = 'top';\n\n /** Assistive text for anchor button. */\n @property({ type: String })\n assistiveText = 'Toggle Tooltip';\n\n /** Timeout function to delay modal close.\n * @internal\n */\n @state()\n timer: any;\n\n override render() {\n const classes = {\n content: true,\n open: this.open,\n 'anchor--start': this.anchorPosition === 'start',\n 'anchor--end': this.anchorPosition === 'end',\n 'anchor--center': this.anchorPosition === 'center',\n 'direction--top': this.direction === 'top',\n 'direction--bottom': this.direction === 'bottom',\n 'direction--left': this.direction === 'left',\n 'direction--right': this.direction === 'right',\n };\n\n return html`\n <div class=\"tooltip\">\n <button\n aria-label=${this.assistiveText}\n title=${this.assistiveText}\n aria-describedby=\"tooltip\"\n @mouseenter=${this._handleOpen}\n @mouseleave=${this._handleMouseLeave}\n @focus=${this._handleOpen}\n @blur=${this._handleClose}\n >\n <slot name=\"anchor\"><kd-icon .icon=${infoIcon}></kd-icon></slot>\n </button>\n\n <div\n id=\"tooltip\"\n aria-hidden=${!this.open}\n role=\"tooltip\"\n class=${classMap(classes)}\n @mouseenter=${this._handleOpen}\n @mouseleave=${this._handleMouseLeave}\n >\n <slot></slot>\n </div>\n </div>\n `;\n }\n\n private _handleOpen() {\n clearTimeout(this.timer);\n this.open = true;\n }\n\n private _handleClose() {\n this.open = false;\n }\n\n private _handleMouseLeave() {\n this.timer = setTimeout(() => {\n this.open = false;\n clearTimeout(this.timer);\n }, 500);\n }\n\n private _handleEsc(e: KeyboardEvent) {\n if (this.open && e.key === 'Escape') {\n this.open = false;\n }\n }\n\n override connectedCallback() {\n super.connectedCallback();\n document.addEventListener('keydown', (e) => this._handleEsc(e));\n }\n\n override disconnectedCallback() {\n document.removeEventListener('keydown', (e) => this._handleEsc(e));\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-tooltip': Tooltip;\n }\n}\n"],"names":["Tooltip","LitElement","constructor","this","open","anchorPosition","direction","assistiveText","render","classes","content","html","_handleOpen","_handleMouseLeave","_handleClose","infoIcon","classMap","clearTimeout","timer","setTimeout","_handleEsc","e","key","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","styles","TooltipScss","__decorate","property","type","Boolean","prototype","String","state","customElement"],"mappings":"u4BAcO,IAAMA,EAAN,cAAsBC,EAAtBC,kCAILC,KAAIC,MAAG,EAIPD,KAAcE,eAAG,SAIjBF,KAASG,UAAG,MAIZH,KAAaI,cAAG,gBAgFjB,CAxEUC,SACP,MAAMC,EAAU,CACdC,SAAS,EACTN,KAAMD,KAAKC,KACX,gBAAyC,UAAxBD,KAAKE,eACtB,cAAuC,QAAxBF,KAAKE,eACpB,iBAA0C,WAAxBF,KAAKE,eACvB,iBAAqC,QAAnBF,KAAKG,UACvB,oBAAwC,WAAnBH,KAAKG,UAC1B,kBAAsC,SAAnBH,KAAKG,UACxB,mBAAuC,UAAnBH,KAAKG,WAG3B,OAAOK,CAAI;;;uBAGQR,KAAKI;kBACVJ,KAAKI;;wBAECJ,KAAKS;wBACLT,KAAKU;mBACVV,KAAKS;kBACNT,KAAKW;;+CAEwBC;;;;;yBAKtBZ,KAAKC;;kBAEZY,EAASP;wBACHN,KAAKS;wBACLT,KAAKU;;;;;KAM1B,CAEOD,cACNK,aAAad,KAAKe,OAClBf,KAAKC,MAAO,CACb,CAEOU,eACNX,KAAKC,MAAO,CACb,CAEOS,oBACNV,KAAKe,MAAQC,YAAW,KACtBhB,KAAKC,MAAO,EACZa,aAAad,KAAKe,MAAM,GACvB,IACJ,CAEOE,WAAWC,GACblB,KAAKC,MAAkB,WAAViB,EAAEC,MACjBnB,KAAKC,MAAO,EAEf,CAEQmB,oBACPC,MAAMD,oBACNE,SAASC,iBAAiB,WAAYL,GAAMlB,KAAKiB,WAAWC,IAC7D,CAEQM,uBACPF,SAASG,oBAAoB,WAAYP,GAAMlB,KAAKiB,WAAWC,KAC/DG,MAAMG,sBACP,GA9Fe3B,EAAM6B,OAAGC,EAGzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACLlC,EAAAmC,UAAA,YAAA,GAIbJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACQpC,EAAAmC,UAAA,sBAAA,GAI1BJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACApC,EAAAmC,UAAA,iBAAA,GAIlBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACepC,EAAAmC,UAAA,qBAAA,GAMjCJ,EAAA,CADCM,KACUrC,EAAAmC,UAAA,aAAA,GAtBAnC,EAAO+B,EAAA,CADnBO,EAAc,gBACFtC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kyndryl-design-system/shidoka-applications",
3
- "version": "1.3.0",
3
+ "version": "1.3.1",
4
4
  "description": "Shidoka Web Components for Applications",
5
5
  "main": "index.js",
6
6
  "type": "module",
@@ -33,7 +33,7 @@
33
33
  "query-selector-shadow-dom": "^1.0.1"
34
34
  },
35
35
  "peerDependencies": {
36
- "@kyndryl-design-system/shidoka-foundation": "^1.3.5"
36
+ "@kyndryl-design-system/shidoka-foundation": "^1.3.6"
37
37
  },
38
38
  "devDependencies": {
39
39
  "@babel/core": "^7.20.12",
@@ -44,7 +44,7 @@
44
44
  "@commitlint/cli": "^17.4.4",
45
45
  "@commitlint/config-conventional": "^17.4.4",
46
46
  "@custom-elements-manifest/analyzer": "^0.6.8",
47
- "@kyndryl-design-system/shidoka-foundation": "^1.3.5",
47
+ "@kyndryl-design-system/shidoka-foundation": "^1.3.6",
48
48
  "@open-wc/testing": "^3.1.7",
49
49
  "@rollup/plugin-node-resolve": "^15.0.1",
50
50
  "@rollup/plugin-typescript": "^11.0.0",