@lukso/web-components 1.132.0 → 1.133.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (100) hide show
  1. package/dist/components/index.cjs +3 -3
  2. package/dist/components/index.js +3 -3
  3. package/dist/components/lukso-button/index.cjs +3 -3
  4. package/dist/components/lukso-button/index.js +3 -3
  5. package/dist/components/lukso-card/index.cjs +6 -6
  6. package/dist/components/lukso-card/index.js +6 -6
  7. package/dist/components/lukso-checkbox/index.cjs +3 -3
  8. package/dist/components/lukso-checkbox/index.js +3 -3
  9. package/dist/components/lukso-color-picker/index.cjs +4 -4
  10. package/dist/components/lukso-color-picker/index.js +4 -4
  11. package/dist/components/lukso-dropdown/index.cjs +4 -4
  12. package/dist/components/lukso-dropdown/index.js +4 -4
  13. package/dist/components/lukso-dropdown-option/index.cjs +2 -2
  14. package/dist/components/lukso-dropdown-option/index.js +2 -2
  15. package/dist/components/lukso-footer/index.cjs +2 -2
  16. package/dist/components/lukso-footer/index.js +2 -2
  17. package/dist/components/lukso-icon/index.cjs +3 -3
  18. package/dist/components/lukso-icon/index.js +3 -3
  19. package/dist/components/lukso-image/index.cjs +4 -4
  20. package/dist/components/lukso-image/index.js +4 -4
  21. package/dist/components/lukso-input/index.cjs +3 -3
  22. package/dist/components/lukso-input/index.js +3 -3
  23. package/dist/components/lukso-modal/index.cjs +2 -2
  24. package/dist/components/lukso-modal/index.js +2 -2
  25. package/dist/components/lukso-navbar/index.cjs +3 -3
  26. package/dist/components/lukso-navbar/index.js +3 -3
  27. package/dist/components/lukso-pagination/index.cjs +3 -3
  28. package/dist/components/lukso-pagination/index.js +3 -3
  29. package/dist/components/lukso-profile/index.cjs +3 -3
  30. package/dist/components/lukso-profile/index.js +3 -3
  31. package/dist/components/lukso-progress/index.cjs +3 -3
  32. package/dist/components/lukso-progress/index.js +3 -3
  33. package/dist/components/lukso-sanitize/index.cjs +2 -2
  34. package/dist/components/lukso-sanitize/index.js +2 -2
  35. package/dist/components/lukso-search/index.cjs +5 -5
  36. package/dist/components/lukso-search/index.js +5 -5
  37. package/dist/components/lukso-select/index.cjs +5 -5
  38. package/dist/components/lukso-select/index.js +5 -5
  39. package/dist/components/lukso-share/index.cjs +2 -2
  40. package/dist/components/lukso-share/index.js +2 -2
  41. package/dist/components/lukso-switch/index.cjs +3 -3
  42. package/dist/components/lukso-switch/index.js +3 -3
  43. package/dist/components/lukso-tag/index.cjs +3 -3
  44. package/dist/components/lukso-tag/index.js +3 -3
  45. package/dist/components/lukso-terms/index.cjs +3 -3
  46. package/dist/components/lukso-terms/index.js +3 -3
  47. package/dist/components/lukso-test/index.cjs +3 -3
  48. package/dist/components/lukso-test/index.js +3 -3
  49. package/dist/components/lukso-textarea/index.cjs +3 -3
  50. package/dist/components/lukso-textarea/index.js +3 -3
  51. package/dist/components/lukso-tooltip/index.cjs +55 -39
  52. package/dist/components/lukso-tooltip/index.d.ts +3 -3
  53. package/dist/components/lukso-tooltip/index.d.ts.map +1 -1
  54. package/dist/components/lukso-tooltip/index.js +55 -39
  55. package/dist/components/lukso-tooltip/lukso-tooltip.stories.d.ts +2 -2
  56. package/dist/components/lukso-tooltip/lukso-tooltip.stories.d.ts.map +1 -1
  57. package/dist/components/lukso-username/index.cjs +4 -4
  58. package/dist/components/lukso-username/index.js +4 -4
  59. package/dist/components/lukso-wizard/index.cjs +3 -3
  60. package/dist/components/lukso-wizard/index.js +3 -3
  61. package/dist/{directive-helpers-BbrBWb9B.js → directive-helpers-3kxRVVhW.js} +1 -1
  62. package/dist/{directive-helpers-D3mI9lsC.cjs → directive-helpers-Claj8QFS.cjs} +1 -1
  63. package/dist/index-7a66ANzh.cjs +50 -0
  64. package/dist/{index-BqVcbfZx.cjs → index-BU2n3O3i.cjs} +1 -1
  65. package/dist/{index-CBUB36kH.cjs → index-CnPbG4we.cjs} +2 -2
  66. package/dist/{index-BwDu-qJI.js → index-CtLMSY1C.js} +2 -2
  67. package/dist/{index-BKL0rD0t.js → index-Cu5nTnv0.js} +3 -3
  68. package/dist/{index-B-jWYFR1.cjs → index-NWJXeIKU.cjs} +3 -3
  69. package/dist/{index-DvI1czUV.js → index-_yzN6-V_.js} +1 -1
  70. package/dist/index-u03FFuQ-.js +41 -0
  71. package/dist/index.cjs +3 -3
  72. package/dist/index.js +3 -3
  73. package/dist/{property-BmOVhAsp.cjs → property-COIvMvUb.cjs} +1 -1
  74. package/dist/{property-BqHUZDET.js → property-CkmArYBu.js} +1 -1
  75. package/dist/shared/tailwind-element/index.cjs +1 -1
  76. package/dist/shared/tailwind-element/index.js +1 -1
  77. package/dist/{state-CfjNOKrO.cjs → state-BPlyD0ke.cjs} +1 -1
  78. package/dist/{state-C3Y3QGjX.js → state-C2ESTJU7.js} +1 -1
  79. package/dist/{style-map-DpzNuCXP.js → style-map-COdlVkYa.js} +1 -1
  80. package/dist/{style-map-DUOdo8Aw.cjs → style-map-DgWKFQAt.cjs} +1 -1
  81. package/dist/tailwind-config.cjs +5 -7
  82. package/dist/tailwind-config.d.ts +0 -1
  83. package/dist/tailwind-config.d.ts.map +1 -1
  84. package/dist/tailwind-config.js +6 -7
  85. package/package.json +1 -1
  86. package/tools/cn.cjs +1 -1
  87. package/tools/cn.js +1 -1
  88. package/tools/copy-assets.cjs +1 -1
  89. package/tools/copy-assets.d.ts.map +1 -1
  90. package/tools/copy-assets.js +2 -2
  91. package/tools/index.cjs +1 -1
  92. package/tools/index.js +1 -1
  93. package/tools/{tailwind-config-DKplCTSo.js → tailwind-config-BItOO0YF.js} +6 -7
  94. package/tools/{tailwind-config-B1HOgutt.cjs → tailwind-config-bTE79eTG.cjs} +5 -7
  95. package/tools/tailwind-config.cjs +1 -2
  96. package/tools/tailwind-config.d.ts +0 -1
  97. package/tools/tailwind-config.d.ts.map +1 -1
  98. package/tools/tailwind-config.js +1 -1
  99. package/dist/index-BitOdrRJ.cjs +0 -50
  100. package/dist/index-DqnJ63Q8.js +0 -41
@@ -2,10 +2,10 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-BitOdrRJ.cjs');
6
- const property = require('../../property-BmOVhAsp.cjs');
5
+ const shared_tailwindElement_index = require('../../index-7a66ANzh.cjs');
6
+ const property = require('../../property-COIvMvUb.cjs');
7
7
  const index = require('../../index-CaJky2qL.cjs');
8
- const index$1 = require('../../index-BqVcbfZx.cjs');
8
+ const index$1 = require('../../index-BU2n3O3i.cjs');
9
9
 
10
10
  const style = ":host {\n display: inline-flex\n}";
11
11
 
@@ -1,7 +1,7 @@
1
- import { T as TailwindStyledElement, x } from '../../index-DqnJ63Q8.js';
2
- import { n, t } from '../../property-BqHUZDET.js';
1
+ import { T as TailwindStyledElement, x } from '../../index-u03FFuQ-.js';
2
+ import { n, t } from '../../property-CkmArYBu.js';
3
3
  import { c as ce } from '../../index-B9iart53.js';
4
- import { c as customStyleMap } from '../../index-DvI1czUV.js';
4
+ import { c as customStyleMap } from '../../index-_yzN6-V_.js';
5
5
 
6
6
  const style = ":host {\n display: inline-flex\n}";
7
7
 
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-BitOdrRJ.cjs');
6
- const property = require('../../property-BmOVhAsp.cjs');
7
- const state = require('../../state-CfjNOKrO.cjs');
5
+ const shared_tailwindElement_index = require('../../index-7a66ANzh.cjs');
6
+ const property = require('../../property-COIvMvUb.cjs');
7
+ const state = require('../../state-BPlyD0ke.cjs');
8
8
  const index = require('../../index-D0nCA-7X.cjs');
9
9
  require('../lukso-icon/index.cjs');
10
10
  require('../lukso-sanitize/index.cjs');
@@ -1,6 +1,6 @@
1
- import { T as TailwindStyledElement, x } from '../../index-DqnJ63Q8.js';
2
- import { n, t } from '../../property-BqHUZDET.js';
3
- import { r } from '../../state-C3Y3QGjX.js';
1
+ import { T as TailwindStyledElement, x } from '../../index-u03FFuQ-.js';
2
+ import { n, t } from '../../property-CkmArYBu.js';
3
+ import { r } from '../../state-C2ESTJU7.js';
4
4
  import { c as customClassMap } from '../../index-F8ll4iy2.js';
5
5
  import '../lukso-icon/index.js';
6
6
  import '../lukso-sanitize/index.js';
@@ -2,10 +2,10 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-BitOdrRJ.cjs');
6
- const property = require('../../property-BmOVhAsp.cjs');
5
+ const shared_tailwindElement_index = require('../../index-7a66ANzh.cjs');
6
+ const property = require('../../property-COIvMvUb.cjs');
7
7
  const directive = require('../../directive-DT5Y-Nw0.cjs');
8
- const directiveHelpers = require('../../directive-helpers-D3mI9lsC.cjs');
8
+ const directiveHelpers = require('../../directive-helpers-Claj8QFS.cjs');
9
9
 
10
10
  /**
11
11
  * @license
@@ -1,7 +1,7 @@
1
- import { E, b as T, T as TailwindStyledElement, x as x$1 } from '../../index-DqnJ63Q8.js';
2
- import { n as n$2, t as t$2 } from '../../property-BqHUZDET.js';
1
+ import { E, b as T, T as TailwindStyledElement, x as x$1 } from '../../index-u03FFuQ-.js';
2
+ import { n as n$2, t as t$2 } from '../../property-CkmArYBu.js';
3
3
  import { i as i$1, t as t$1, e as e$1 } from '../../directive-BKuZRRPO.js';
4
- import { f as f$1 } from '../../directive-helpers-BbrBWb9B.js';
4
+ import { f as f$1 } from '../../directive-helpers-3kxRVVhW.js';
5
5
 
6
6
  /**
7
7
  * @license
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-BitOdrRJ.cjs');
6
- const property = require('../../property-BmOVhAsp.cjs');
7
- const state = require('../../state-CfjNOKrO.cjs');
5
+ const shared_tailwindElement_index = require('../../index-7a66ANzh.cjs');
6
+ const property = require('../../property-COIvMvUb.cjs');
7
+ const state = require('../../state-BPlyD0ke.cjs');
8
8
  const index = require('../../index-CaJky2qL.cjs');
9
9
  require('../../tailwind-config.cjs');
10
10
  const cn = require('../../cn-CNdKneQ1.cjs');
@@ -1,6 +1,6 @@
1
- import { T as TailwindStyledElement, E, x } from '../../index-DqnJ63Q8.js';
2
- import { n, t } from '../../property-BqHUZDET.js';
3
- import { r } from '../../state-C3Y3QGjX.js';
1
+ import { T as TailwindStyledElement, E, x } from '../../index-u03FFuQ-.js';
2
+ import { n, t } from '../../property-CkmArYBu.js';
3
+ import { r } from '../../state-C2ESTJU7.js';
4
4
  import { c as ce } from '../../index-B9iart53.js';
5
5
  import '../../tailwind-config.js';
6
6
  import { c as cn } from '../../cn-Cu9aP49j.js';
@@ -2,11 +2,11 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-BitOdrRJ.cjs');
6
- const property = require('../../property-BmOVhAsp.cjs');
7
- const state = require('../../state-CfjNOKrO.cjs');
5
+ const shared_tailwindElement_index = require('../../index-7a66ANzh.cjs');
6
+ const property = require('../../property-COIvMvUb.cjs');
7
+ const state = require('../../state-BPlyD0ke.cjs');
8
8
  const index = require('../../index-CaJky2qL.cjs');
9
- const styleMap = require('../../style-map-DUOdo8Aw.cjs');
9
+ require('../lukso-sanitize/index.cjs');
10
10
 
11
11
  var top = 'top';
12
12
  var bottom = 'bottom';
@@ -3470,18 +3470,15 @@ exports.LuksoTooltip = class LuksoTooltip extends shared_tailwindElement_index.T
3470
3470
  this.copyText = "";
3471
3471
  this.copyValue = "";
3472
3472
  this.offset = 10;
3473
- this.options = "";
3474
3473
  this.showArrow = true;
3475
3474
  this.showDelay = 300;
3476
3475
  this.hideDelay = 300;
3477
3476
  this.showCopy = false;
3478
- this.optionsParsed = [];
3479
3477
  this.tooltipInstance = void 0;
3480
3478
  this.styles = index.ce({
3481
3479
  slots: {
3482
3480
  tooltip: "hidden",
3483
- trigger: "cursor-pointer flex flex-col items-center",
3484
- options: "rounded-4 hover:bg-neutral-95"
3481
+ trigger: "cursor-pointer flex flex-col items-center"
3485
3482
  },
3486
3483
  variants: {
3487
3484
  hasNoText: {
@@ -3491,6 +3488,30 @@ exports.LuksoTooltip = class LuksoTooltip extends shared_tailwindElement_index.T
3491
3488
  }
3492
3489
  }
3493
3490
  });
3491
+ this.handleSlotChange = () => {
3492
+ const textSlot = this.shadowRoot?.querySelector(
3493
+ 'slot[name="text"]'
3494
+ );
3495
+ if (textSlot) {
3496
+ setTimeout(() => {
3497
+ const assignedNodes = textSlot.assignedNodes({ flatten: true });
3498
+ const html2 = assignedNodes.map((node) => {
3499
+ if (node.nodeType === Node.ELEMENT_NODE) {
3500
+ return node.innerHTML;
3501
+ }
3502
+ if (node.nodeType === Node.TEXT_NODE) {
3503
+ return node.textContent?.trim() || "";
3504
+ }
3505
+ return "";
3506
+ }).filter(Boolean).join("").replace(/<!--\?lit\$.*?\$-->/g, "");
3507
+ const decoded = this.decodeHtmlEntities(html2);
3508
+ if (decoded && `<div>${decoded}</div>` !== this.text) {
3509
+ this.text = `<div>${decoded}</div>`;
3510
+ this.initTooltip();
3511
+ }
3512
+ }, 0);
3513
+ }
3514
+ };
3494
3515
  }
3495
3516
  hideOnClickCheck() {
3496
3517
  if (this.hideOnClick === "toggle") {
@@ -3510,7 +3531,7 @@ exports.LuksoTooltip = class LuksoTooltip extends shared_tailwindElement_index.T
3510
3531
  this.tooltipInstance.destroy();
3511
3532
  this.tooltipInstance = void 0;
3512
3533
  }
3513
- if (!this.text && !this.options) {
3534
+ if (!this.text) {
3514
3535
  return;
3515
3536
  }
3516
3537
  this.tooltipInstance = tippy(trigger, {
@@ -3548,19 +3569,12 @@ exports.LuksoTooltip = class LuksoTooltip extends shared_tailwindElement_index.T
3548
3569
  if (changedProperties.has("show") && this.trigger === "manual") {
3549
3570
  if (this.show) {
3550
3571
  !this.tooltipInstance && this.initTooltip();
3551
- this.tooltipInstance.show();
3572
+ this.tooltipInstance?.show();
3552
3573
  } else {
3553
3574
  this.tooltipInstance?.hide();
3554
3575
  }
3555
3576
  return;
3556
3577
  }
3557
- if (changedProperties.has("options") && !!this.options) {
3558
- try {
3559
- this.optionsParsed = JSON.parse(this.options);
3560
- } catch (error) {
3561
- console.warn("Could not parse options", error);
3562
- }
3563
- }
3564
3578
  if (changedProperties.has("text")) {
3565
3579
  if (this.text !== "") {
3566
3580
  this.initTooltip();
@@ -3570,25 +3584,32 @@ exports.LuksoTooltip = class LuksoTooltip extends shared_tailwindElement_index.T
3570
3584
  }
3571
3585
  }
3572
3586
  }
3587
+ connectedCallback() {
3588
+ super.connectedCallback();
3589
+ setTimeout(() => {
3590
+ const textSlot = this.shadowRoot?.querySelector(
3591
+ 'slot[name="text"]'
3592
+ );
3593
+ if (textSlot) {
3594
+ textSlot.addEventListener("slotchange", this.handleSlotChange);
3595
+ this.handleSlotChange();
3596
+ }
3597
+ }, 0);
3598
+ }
3573
3599
  disconnectedCallback() {
3574
3600
  super.disconnectedCallback();
3575
3601
  this.tooltipInstance?.destroy();
3602
+ const textSlot = this.shadowRoot?.querySelector(
3603
+ 'slot[name="text"]'
3604
+ );
3605
+ if (textSlot) {
3606
+ textSlot.removeEventListener("slotchange", this.handleSlotChange);
3607
+ }
3576
3608
  }
3577
- optionsTemplate(styles) {
3578
- return shared_tailwindElement_index.x`<ul>
3579
- ${Object.entries(this.optionsParsed)?.map(
3580
- (option) => shared_tailwindElement_index.x`<li
3581
- class=${styles.options()}
3582
- style=${styleMap.o({
3583
- padding: "4px 8px",
3584
- cursor: "pointer"
3585
- })}
3586
- onClick="navigator.clipboard.writeText('${option[1].value}')"
3587
- >
3588
- ${option[1].text}
3589
- </li>`
3590
- )}
3591
- </ul>`;
3609
+ decodeHtmlEntities(str) {
3610
+ const txt = document.createElement("textarea");
3611
+ txt.innerHTML = str;
3612
+ return txt.value;
3592
3613
  }
3593
3614
  render() {
3594
3615
  const styles = this.styles({
@@ -3596,8 +3617,9 @@ exports.LuksoTooltip = class LuksoTooltip extends shared_tailwindElement_index.T
3596
3617
  });
3597
3618
  return shared_tailwindElement_index.x`
3598
3619
  <div id="tooltip" role="tooltip" class=${styles.tooltip()}>
3599
- ${this.options ? this.optionsTemplate(styles) : this.text}
3620
+ ${shared_tailwindElement_index.x`<lukso-sanitize html-content=${this.text}></lukso-sanitize>`}
3600
3621
  </div>
3622
+ <slot name="text" class="hidden"></slot>
3601
3623
  ${this.isClipboardCopy ? shared_tailwindElement_index.x`<lukso-tooltip
3602
3624
  variant=${this.variant}
3603
3625
  size=${this.size}
@@ -3661,9 +3683,6 @@ __decorateClass([
3661
3683
  __decorateClass([
3662
3684
  property.n({ type: Number })
3663
3685
  ], exports.LuksoTooltip.prototype, "offset", 2);
3664
- __decorateClass([
3665
- property.n({ type: String })
3666
- ], exports.LuksoTooltip.prototype, "options", 2);
3667
3686
  __decorateClass([
3668
3687
  property.n({ type: Boolean, attribute: "show-arrow" })
3669
3688
  ], exports.LuksoTooltip.prototype, "showArrow", 2);
@@ -3676,9 +3695,6 @@ __decorateClass([
3676
3695
  __decorateClass([
3677
3696
  state.r()
3678
3697
  ], exports.LuksoTooltip.prototype, "showCopy", 2);
3679
- __decorateClass([
3680
- state.r()
3681
- ], exports.LuksoTooltip.prototype, "optionsParsed", 2);
3682
3698
  exports.LuksoTooltip = __decorateClass([
3683
3699
  property.t("lukso-tooltip")
3684
3700
  ], exports.LuksoTooltip);
@@ -22,20 +22,20 @@ export declare class LuksoTooltip extends LuksoTooltip_base {
22
22
  copyText: string;
23
23
  copyValue: string;
24
24
  offset: number;
25
- options: string;
26
25
  showArrow: boolean;
27
26
  showDelay: number;
28
27
  hideDelay: number;
29
28
  showCopy: boolean;
30
- optionsParsed: TooltipOption[];
31
29
  private tooltipInstance;
32
30
  private styles;
33
31
  private hideOnClickCheck;
34
32
  private initTooltip;
35
33
  private handleClick;
36
34
  willUpdate(changedProperties: PropertyValues<this>): Promise<void>;
35
+ connectedCallback(): void;
37
36
  disconnectedCallback(): void;
38
- private optionsTemplate;
37
+ private handleSlotChange;
38
+ private decodeHtmlEntities;
39
39
  render(): import('lit-html').TemplateResult<1>;
40
40
  }
41
41
  declare global {
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAA;AAS/C,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAA;AAC9E,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,OAAO,CAAA;AAC5C,MAAM,MAAM,gBAAgB,GACxB,KAAK,GACL,WAAW,GACX,SAAS,GACT,OAAO,GACP,aAAa,GACb,WAAW,GACX,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,UAAU,GACV,MAAM,GACN,YAAY,GACZ,UAAU,CAAA;AACd,MAAM,MAAM,cAAc,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,CAAA;AAE9D,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;;AAED,qBACa,YAAa,SAAQ,iBAA4B;IAE5D,OAAO,EAAE,cAAc,CAAU;IAGjC,IAAI,EAAE,WAAW,CAAW;IAG5B,SAAS,EAAE,gBAAgB,CAAQ;IAGnC,OAAO,EAAE,cAAc,CAAe;IAGtC,IAAI,SAAK;IAGT,QAAQ,SAAM;IAGd,IAAI,UAAQ;IAGZ,WAAW,SAAS;IAGpB,eAAe,UAAQ;IAGvB,QAAQ,SAAK;IAGb,SAAS,SAAK;IAGd,MAAM,SAAK;IAGX,OAAO,SAAK;IAGZ,SAAS,UAAO;IAGhB,SAAS,SAAM;IAGf,SAAS,SAAM;IAGf,QAAQ,UAAQ;IAGhB,aAAa,EAAE,aAAa,EAAE,CAAK;IAEnC,OAAO,CAAC,eAAe,CAAY;IAEnC,OAAO,CAAC,MAAM,CAaZ;IAEF,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,WAAW;IAmCnB,OAAO,CAAC,WAAW;IAab,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAgCxD,oBAAoB;IAKpB,OAAO,CAAC,eAAe;IAmBvB,MAAM;CAqCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAA;KAC9B;CACF"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAA;AAO/C,OAAO,6BAA6B,CAAA;AAEpC,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAA;AAC9E,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,OAAO,CAAA;AAC5C,MAAM,MAAM,gBAAgB,GACxB,KAAK,GACL,WAAW,GACX,SAAS,GACT,OAAO,GACP,aAAa,GACb,WAAW,GACX,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,UAAU,GACV,MAAM,GACN,YAAY,GACZ,UAAU,CAAA;AACd,MAAM,MAAM,cAAc,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,CAAA;AAE9D,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;;AAED,qBACa,YAAa,SAAQ,iBAA4B;IAE5D,OAAO,EAAE,cAAc,CAAU;IAGjC,IAAI,EAAE,WAAW,CAAW;IAG5B,SAAS,EAAE,gBAAgB,CAAQ;IAGnC,OAAO,EAAE,cAAc,CAAe;IAGtC,IAAI,SAAK;IAGT,QAAQ,SAAM;IAGd,IAAI,UAAQ;IAGZ,WAAW,SAAS;IAGpB,eAAe,UAAQ;IAGvB,QAAQ,SAAK;IAGb,SAAS,SAAK;IAGd,MAAM,SAAK;IAGX,SAAS,UAAO;IAGhB,SAAS,SAAM;IAGf,SAAS,SAAM;IAGf,QAAQ,UAAQ;IAEhB,OAAO,CAAC,eAAe,CAAY;IAEnC,OAAO,CAAC,MAAM,CAYZ;IAEF,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,WAAW;IAmCnB,OAAO,CAAC,WAAW;IAab,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAwBxD,iBAAiB;IAejB,oBAAoB;IAYpB,OAAO,CAAC,gBAAgB,CA8BvB;IAED,OAAO,CAAC,kBAAkB;IAM1B,MAAM;CAsCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAA;KAC9B;CACF"}
@@ -1,8 +1,8 @@
1
- import { T as TailwindStyledElement, x } from '../../index-DqnJ63Q8.js';
2
- import { n, t } from '../../property-BqHUZDET.js';
3
- import { r } from '../../state-C3Y3QGjX.js';
1
+ import { T as TailwindStyledElement, x } from '../../index-u03FFuQ-.js';
2
+ import { n, t } from '../../property-CkmArYBu.js';
3
+ import { r } from '../../state-C2ESTJU7.js';
4
4
  import { c as ce } from '../../index-B9iart53.js';
5
- import { o } from '../../style-map-DpzNuCXP.js';
5
+ import '../lukso-sanitize/index.js';
6
6
 
7
7
  var top = 'top';
8
8
  var bottom = 'bottom';
@@ -3466,18 +3466,15 @@ let LuksoTooltip = class extends TailwindStyledElement(style) {
3466
3466
  this.copyText = "";
3467
3467
  this.copyValue = "";
3468
3468
  this.offset = 10;
3469
- this.options = "";
3470
3469
  this.showArrow = true;
3471
3470
  this.showDelay = 300;
3472
3471
  this.hideDelay = 300;
3473
3472
  this.showCopy = false;
3474
- this.optionsParsed = [];
3475
3473
  this.tooltipInstance = void 0;
3476
3474
  this.styles = ce({
3477
3475
  slots: {
3478
3476
  tooltip: "hidden",
3479
- trigger: "cursor-pointer flex flex-col items-center",
3480
- options: "rounded-4 hover:bg-neutral-95"
3477
+ trigger: "cursor-pointer flex flex-col items-center"
3481
3478
  },
3482
3479
  variants: {
3483
3480
  hasNoText: {
@@ -3487,6 +3484,30 @@ let LuksoTooltip = class extends TailwindStyledElement(style) {
3487
3484
  }
3488
3485
  }
3489
3486
  });
3487
+ this.handleSlotChange = () => {
3488
+ const textSlot = this.shadowRoot?.querySelector(
3489
+ 'slot[name="text"]'
3490
+ );
3491
+ if (textSlot) {
3492
+ setTimeout(() => {
3493
+ const assignedNodes = textSlot.assignedNodes({ flatten: true });
3494
+ const html2 = assignedNodes.map((node) => {
3495
+ if (node.nodeType === Node.ELEMENT_NODE) {
3496
+ return node.innerHTML;
3497
+ }
3498
+ if (node.nodeType === Node.TEXT_NODE) {
3499
+ return node.textContent?.trim() || "";
3500
+ }
3501
+ return "";
3502
+ }).filter(Boolean).join("").replace(/<!--\?lit\$.*?\$-->/g, "");
3503
+ const decoded = this.decodeHtmlEntities(html2);
3504
+ if (decoded && `<div>${decoded}</div>` !== this.text) {
3505
+ this.text = `<div>${decoded}</div>`;
3506
+ this.initTooltip();
3507
+ }
3508
+ }, 0);
3509
+ }
3510
+ };
3490
3511
  }
3491
3512
  hideOnClickCheck() {
3492
3513
  if (this.hideOnClick === "toggle") {
@@ -3506,7 +3527,7 @@ let LuksoTooltip = class extends TailwindStyledElement(style) {
3506
3527
  this.tooltipInstance.destroy();
3507
3528
  this.tooltipInstance = void 0;
3508
3529
  }
3509
- if (!this.text && !this.options) {
3530
+ if (!this.text) {
3510
3531
  return;
3511
3532
  }
3512
3533
  this.tooltipInstance = tippy(trigger, {
@@ -3544,19 +3565,12 @@ let LuksoTooltip = class extends TailwindStyledElement(style) {
3544
3565
  if (changedProperties.has("show") && this.trigger === "manual") {
3545
3566
  if (this.show) {
3546
3567
  !this.tooltipInstance && this.initTooltip();
3547
- this.tooltipInstance.show();
3568
+ this.tooltipInstance?.show();
3548
3569
  } else {
3549
3570
  this.tooltipInstance?.hide();
3550
3571
  }
3551
3572
  return;
3552
3573
  }
3553
- if (changedProperties.has("options") && !!this.options) {
3554
- try {
3555
- this.optionsParsed = JSON.parse(this.options);
3556
- } catch (error) {
3557
- console.warn("Could not parse options", error);
3558
- }
3559
- }
3560
3574
  if (changedProperties.has("text")) {
3561
3575
  if (this.text !== "") {
3562
3576
  this.initTooltip();
@@ -3566,25 +3580,32 @@ let LuksoTooltip = class extends TailwindStyledElement(style) {
3566
3580
  }
3567
3581
  }
3568
3582
  }
3583
+ connectedCallback() {
3584
+ super.connectedCallback();
3585
+ setTimeout(() => {
3586
+ const textSlot = this.shadowRoot?.querySelector(
3587
+ 'slot[name="text"]'
3588
+ );
3589
+ if (textSlot) {
3590
+ textSlot.addEventListener("slotchange", this.handleSlotChange);
3591
+ this.handleSlotChange();
3592
+ }
3593
+ }, 0);
3594
+ }
3569
3595
  disconnectedCallback() {
3570
3596
  super.disconnectedCallback();
3571
3597
  this.tooltipInstance?.destroy();
3598
+ const textSlot = this.shadowRoot?.querySelector(
3599
+ 'slot[name="text"]'
3600
+ );
3601
+ if (textSlot) {
3602
+ textSlot.removeEventListener("slotchange", this.handleSlotChange);
3603
+ }
3572
3604
  }
3573
- optionsTemplate(styles) {
3574
- return x`<ul>
3575
- ${Object.entries(this.optionsParsed)?.map(
3576
- (option) => x`<li
3577
- class=${styles.options()}
3578
- style=${o({
3579
- padding: "4px 8px",
3580
- cursor: "pointer"
3581
- })}
3582
- onClick="navigator.clipboard.writeText('${option[1].value}')"
3583
- >
3584
- ${option[1].text}
3585
- </li>`
3586
- )}
3587
- </ul>`;
3605
+ decodeHtmlEntities(str) {
3606
+ const txt = document.createElement("textarea");
3607
+ txt.innerHTML = str;
3608
+ return txt.value;
3588
3609
  }
3589
3610
  render() {
3590
3611
  const styles = this.styles({
@@ -3592,8 +3613,9 @@ let LuksoTooltip = class extends TailwindStyledElement(style) {
3592
3613
  });
3593
3614
  return x`
3594
3615
  <div id="tooltip" role="tooltip" class=${styles.tooltip()}>
3595
- ${this.options ? this.optionsTemplate(styles) : this.text}
3616
+ ${x`<lukso-sanitize html-content=${this.text}></lukso-sanitize>`}
3596
3617
  </div>
3618
+ <slot name="text" class="hidden"></slot>
3597
3619
  ${this.isClipboardCopy ? x`<lukso-tooltip
3598
3620
  variant=${this.variant}
3599
3621
  size=${this.size}
@@ -3657,9 +3679,6 @@ __decorateClass([
3657
3679
  __decorateClass([
3658
3680
  n({ type: Number })
3659
3681
  ], LuksoTooltip.prototype, "offset", 2);
3660
- __decorateClass([
3661
- n({ type: String })
3662
- ], LuksoTooltip.prototype, "options", 2);
3663
3682
  __decorateClass([
3664
3683
  n({ type: Boolean, attribute: "show-arrow" })
3665
3684
  ], LuksoTooltip.prototype, "showArrow", 2);
@@ -3672,9 +3691,6 @@ __decorateClass([
3672
3691
  __decorateClass([
3673
3692
  r()
3674
3693
  ], LuksoTooltip.prototype, "showCopy", 2);
3675
- __decorateClass([
3676
- r()
3677
- ], LuksoTooltip.prototype, "optionsParsed", 2);
3678
3694
  LuksoTooltip = __decorateClass([
3679
3695
  t("lukso-tooltip")
3680
3696
  ], LuksoTooltip);
@@ -24,8 +24,8 @@ export declare const PlacementBottom: any;
24
24
  export declare const Offset: any;
25
25
  /** Tooltip can work as clipboard copy component. For that wou need to enable `is-clipboard-copy` and set `copy-text` attribute.. */
26
26
  export declare const ClipboardCopy: any;
27
- /** Tooltip with `options` (copied to clipboard). */
28
- export declare const OptionsTooltip: any;
29
27
  /** Delayed show/hide. */
30
28
  export declare const DelayedTooltip: any;
29
+ /** With named slot you can pass in HTML content into the tooltip. */
30
+ export declare const NamedSlot: any;
31
31
  //# sourceMappingURL=lukso-tooltip.stories.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"lukso-tooltip.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-tooltip/lukso-tooltip.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,SAAS,CAAA;AAChB,OAAO,uBAAuB,CAAA;AAE9B,gEAAgE;AAChE,QAAA,MAAM,IAAI,EAAE,IA0NX,CAAA;AAED,eAAe,IAAI,CAAA;AA6CnB,8CAA8C;AAC9C,eAAO,MAAM,cAAc,KAA2B,CAAA;AAMtD,4CAA4C;AAC5C,eAAO,MAAM,YAAY,KAA2B,CAAA;AAOpD,sEAAsE;AACtE,eAAO,MAAM,QAAQ,KAA2B,CAAA;AAUhD,gCAAgC;AAChC,eAAO,MAAM,SAAS,KAA2B,CAAA;AASjD,mCAAmC;AACnC,eAAO,MAAM,YAAY,KAA2B,CAAA;AASpD,qCAAqC;AACrC,eAAO,MAAM,cAAc,KAA2B,CAAA;AAStD,oCAAoC;AACpC,eAAO,MAAM,aAAa,KAA2B,CAAA;AASrD,oEAAoE;AACpE,eAAO,MAAM,cAAc,KAA2B,CAAA;AAOtD,eAAO,MAAM,aAAa,KAA2B,CAAA;AAQrD,eAAO,MAAM,eAAe,KAA2B,CAAA;AASvD,8DAA8D;AAC9D,eAAO,MAAM,MAAM,KAA2B,CAAA;AAS9C,qIAAqI;AACrI,eAAO,MAAM,aAAa,KAA2B,CAAA;AAUrD,qDAAqD;AACrD,eAAO,MAAM,cAAc,KAA2B,CAAA;AAwBtD,0BAA0B;AAC1B,eAAO,MAAM,cAAc,KAA2B,CAAA"}
1
+ {"version":3,"file":"lukso-tooltip.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-tooltip/lukso-tooltip.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,SAAS,CAAA;AAChB,OAAO,uBAAuB,CAAA;AAE9B,gEAAgE;AAChE,QAAA,MAAM,IAAI,EAAE,IAmNX,CAAA;AAED,eAAe,IAAI,CAAA;AA+CnB,8CAA8C;AAC9C,eAAO,MAAM,cAAc,KAA2B,CAAA;AAOtD,4CAA4C;AAC5C,eAAO,MAAM,YAAY,KAA2B,CAAA;AAQpD,sEAAsE;AACtE,eAAO,MAAM,QAAQ,KAA2B,CAAA;AAUhD,gCAAgC;AAChC,eAAO,MAAM,SAAS,KAA2B,CAAA;AAUjD,mCAAmC;AACnC,eAAO,MAAM,YAAY,KAA2B,CAAA;AAUpD,qCAAqC;AACrC,eAAO,MAAM,cAAc,KAA2B,CAAA;AAUtD,oCAAoC;AACpC,eAAO,MAAM,aAAa,KAA2B,CAAA;AAUrD,oEAAoE;AACpE,eAAO,MAAM,cAAc,KAA2B,CAAA;AAQtD,eAAO,MAAM,aAAa,KAA2B,CAAA;AASrD,eAAO,MAAM,eAAe,KAA2B,CAAA;AAUvD,8DAA8D;AAC9D,eAAO,MAAM,MAAM,KAA2B,CAAA;AAU9C,qIAAqI;AACrI,eAAO,MAAM,aAAa,KAA2B,CAAA;AAUrD,0BAA0B;AAC1B,eAAO,MAAM,cAAc,KAA2B,CAAA;AAStD,qEAAqE;AACrE,eAAO,MAAM,SAAS,KAA2B,CAAA"}
@@ -2,11 +2,11 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- require('../../index-BitOdrRJ.cjs');
6
- require('../../property-BmOVhAsp.cjs');
5
+ require('../../index-7a66ANzh.cjs');
6
+ require('../../property-COIvMvUb.cjs');
7
7
  require('../../index-CaJky2qL.cjs');
8
- const components_luksoUsername_index = require('../../index-B-jWYFR1.cjs');
9
- require('../../index-BqVcbfZx.cjs');
8
+ const components_luksoUsername_index = require('../../index-NWJXeIKU.cjs');
9
+ require('../../index-BU2n3O3i.cjs');
10
10
  require('../../tailwind-config.cjs');
11
11
  require('../../cn-CNdKneQ1.cjs');
12
12
 
@@ -1,7 +1,7 @@
1
- import '../../index-DqnJ63Q8.js';
2
- import '../../property-BqHUZDET.js';
1
+ import '../../index-u03FFuQ-.js';
2
+ import '../../property-CkmArYBu.js';
3
3
  import '../../index-B9iart53.js';
4
- export { L as LuksoUsername } from '../../index-BKL0rD0t.js';
5
- import '../../index-DvI1czUV.js';
4
+ export { L as LuksoUsername } from '../../index-Cu5nTnv0.js';
5
+ import '../../index-_yzN6-V_.js';
6
6
  import '../../tailwind-config.js';
7
7
  import '../../cn-Cu9aP49j.js';
@@ -2,10 +2,10 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-BitOdrRJ.cjs');
6
- const property = require('../../property-BmOVhAsp.cjs');
5
+ const shared_tailwindElement_index = require('../../index-7a66ANzh.cjs');
6
+ const property = require('../../property-COIvMvUb.cjs');
7
7
  const directive = require('../../directive-DT5Y-Nw0.cjs');
8
- const directiveHelpers = require('../../directive-helpers-D3mI9lsC.cjs');
8
+ const directiveHelpers = require('../../directive-helpers-Claj8QFS.cjs');
9
9
  const index = require('../../index-CaJky2qL.cjs');
10
10
 
11
11
  /**
@@ -1,7 +1,7 @@
1
- import { b as T, T as TailwindStyledElement, x } from '../../index-DqnJ63Q8.js';
2
- import { n, t as t$1 } from '../../property-BqHUZDET.js';
1
+ import { b as T, T as TailwindStyledElement, x } from '../../index-u03FFuQ-.js';
2
+ import { n, t as t$1 } from '../../property-CkmArYBu.js';
3
3
  import { e, i, t } from '../../directive-BKuZRRPO.js';
4
- import { p, v, r, M, m } from '../../directive-helpers-BbrBWb9B.js';
4
+ import { p, v, r, M, m } from '../../directive-helpers-3kxRVVhW.js';
5
5
  import { c as ce } from '../../index-B9iart53.js';
6
6
 
7
7
  /**
@@ -1,4 +1,4 @@
1
- import { Z } from './index-DqnJ63Q8.js';
1
+ import { Z } from './index-u03FFuQ-.js';
2
2
 
3
3
  /**
4
4
  * @license
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- const shared_tailwindElement_index = require('./index-BitOdrRJ.cjs');
3
+ const shared_tailwindElement_index = require('./index-7a66ANzh.cjs');
4
4
 
5
5
  /**
6
6
  * @license