@alegendstale/holly-components 0.2.34 → 0.2.36

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 (13) hide show
  1. package/dist/components/canvas/canvas-image.d.ts +1 -1
  2. package/dist/components/canvas/canvas-image.d.ts.map +1 -1
  3. package/dist/components/canvas/canvas-image.js +4 -0
  4. package/dist/components/tool-tip/tool-tip.d.ts +2 -2
  5. package/dist/components/tool-tip/tool-tip.d.ts.map +1 -1
  6. package/dist/components/tool-tip/tool-tip.js +24 -18
  7. package/dist/components/tool-tip/tool-tip.stories.d.ts +1 -1
  8. package/dist/components/tool-tip/tool-tip.stories.d.ts.map +1 -1
  9. package/dist/components/tool-tip/tool-tip.stories.js +4 -4
  10. package/dist/decorators/condCustomElement.d.ts.map +1 -1
  11. package/dist/decorators/condCustomElement.js +0 -2
  12. package/dist/utils/generateUtils.d.ts.map +1 -1
  13. package/package.json +1 -1
package/dist/components/canvas/canvas-image.d.ts CHANGED
@@ -3,7 +3,7 @@ import quantize from 'quantize';
3
3
  import { CanvasBase } from './canvas-base.js';
4
4
  export declare class CanvasImage extends CanvasBase {
5
5
  static styles: import("lit").CSSResult[];
6
- image: HTMLImageElement;
6
+ image?: HTMLImageElement;
7
7
  imageURL: string;
8
8
  smoothing: boolean;
9
9
  private loading;
package/dist/components/canvas/canvas-image.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"canvas-image.d.ts","sourceRoot":"","sources":["../../../src/components/canvas/canvas-image.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,QAAsB,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C,qBACa,WAAY,SAAQ,UAAU;IAC1C,MAAM,CAAC,MAAM,4BAeX;IAGF,KAAK,EAAG,gBAAgB,CAAC;IAGzB,QAAQ,EAAE,MAAM,CAAM;IAGtB,SAAS,EAAE,OAAO,CAAS;IAE3B,OAAO,CAAC,OAAO,CAAiB;IAChC,KAAK,EAAE,MAAM,CAAK;IAClB,MAAM,EAAE,MAAM,CAAK;IAEnB,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAOhE,MAAM;IAYN;;;;;OAKG;IACI,WAAW,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;IAyBlE;;;;;OAKG;IACU,UAAU,CAAC,SAAS,SAAI,EAAE,OAAO,SAAK;IAqBnD;;;;;OAKG;IACU,gBAAgB,CAAC,OAAO,EAAE,MAAM;IAuB7C;;OAEG;IACU,YAAY,CAAC,CAAC,SAAI,EAAE,CAAC,SAAI;IAStC;;OAEG;IACH,OAAO,CAAC,cAAc,CAQnB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,WAAW,CAAC;KAC5B;CACD"}
1
+ {"version":3,"file":"canvas-image.d.ts","sourceRoot":"","sources":["../../../src/components/canvas/canvas-image.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,QAAsB,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C,qBACa,WAAY,SAAQ,UAAU;IAC1C,MAAM,CAAC,MAAM,4BAeX;IAGF,KAAK,CAAC,EAAE,gBAAgB,CAAC;IAGzB,QAAQ,EAAE,MAAM,CAAM;IAGtB,SAAS,EAAE,OAAO,CAAS;IAE3B,OAAO,CAAC,OAAO,CAAiB;IAChC,KAAK,EAAE,MAAM,CAAK;IAClB,MAAM,EAAE,MAAM,CAAK;IAEnB,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAOhE,MAAM;IAYN;;;;;OAKG;IACI,WAAW,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;IA6BlE;;;;;OAKG;IACU,UAAU,CAAC,SAAS,SAAI,EAAE,OAAO,SAAK;IAqBnD;;;;;OAKG;IACU,gBAAgB,CAAC,OAAO,EAAE,MAAM;IAuB7C;;OAEG;IACU,YAAY,CAAC,CAAC,SAAI,EAAE,CAAC,SAAI;IAStC;;OAEG;IACH,OAAO,CAAC,cAAc,CAQnB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,WAAW,CAAC;KAC5B;CACD"}
package/dist/components/canvas/canvas-image.js CHANGED
@@ -52,10 +52,14 @@ let CanvasImage = class CanvasImage extends CanvasBase {
52
52
  * @param height The canvas height
53
53
  */
54
54
  updateImage(imageURL, width, height) {
55
+ if (!this.image)
56
+ return;
55
57
  // Set URL
56
58
  this.image.src = imageURL;
57
59
  // Wait for image to load before calculating dimensions & drawing image to canvas
58
60
  this.waitForLoading().then(() => {
61
+ if (!this.image)
62
+ return;
59
63
  // Calculate the new height based on the aspect ratio
60
64
  const aspectRatio = this.image.naturalHeight / this.image.naturalWidth;
61
65
  let newWidth = width;
package/dist/components/tool-tip/tool-tip.d.ts CHANGED
@@ -4,10 +4,10 @@ export type TriggerTypes = 'hover' | 'click' | 'manual';
4
4
  export declare const styles: import("lit").CSSResult;
5
5
  export declare class ToolTip extends LitElement {
6
6
  static styles: import("lit").CSSResult;
7
- contentEl?: HTMLParagraphElement;
7
+ textEl?: HTMLParagraphElement;
8
8
  display: boolean;
9
- text: string;
10
9
  trigger: TriggerTypes;
10
+ text: string;
11
11
  render(): import("lit-html").TemplateResult<1>;
12
12
  /**
13
13
  * Clamps the tooltip position to within the bounds
package/dist/components/tool-tip/tool-tip.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tool-tip.d.ts","sourceRoot":"","sources":["../../../src/components/tool-tip/tool-tip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAG9C,MAAM,MAAM,YAAY,GACtB,OAAO,GACP,OAAO,GACP,QAAQ,CAAA;AAEV,eAAO,MAAM,MAAM,yBAgDlB,CAAA;AAED,qBACa,OAAQ,SAAQ,UAAU;IACtC,MAAM,CAAC,MAAM,0BAAU;IAGvB,SAAS,CAAC,EAAE,oBAAoB,CAAC;IAGjC,OAAO,UAAS;IAGhB,IAAI,SAAM;IAGV,OAAO,EAAE,YAAY,CAAY;IAEjC,MAAM;IAcN;;OAEG;IACH,aAAa,GAAI,KAAK;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,QAAQ,OAAO;;;MAsB7D;IAEK,kBAAkB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO;IAIpD,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM;CAInC;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}
1
+ {"version":3,"file":"tool-tip.d.ts","sourceRoot":"","sources":["../../../src/components/tool-tip/tool-tip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAG9C,MAAM,MAAM,YAAY,GACtB,OAAO,GACP,OAAO,GACP,QAAQ,CAAA;AAEV,eAAO,MAAM,MAAM,yBAwDlB,CAAA;AAED,qBACa,OAAQ,SAAQ,UAAU;IACtC,MAAM,CAAC,MAAM,0BAAU;IAGvB,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAG9B,OAAO,UAAS;IAGhB,OAAO,EAAE,YAAY,CAAY;IAGjC,IAAI,SAAM;IAEV,MAAM;IAYN;;OAEG;IACH,aAAa,GAAI,KAAK;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,QAAQ,OAAO;;;MAsB7D;IAEK,kBAAkB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO;IAIpD,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM;CAInC;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}
package/dist/components/tool-tip/tool-tip.js CHANGED
@@ -14,11 +14,20 @@ export const styles = css `
14
14
  --tooltip-x: 0;
15
15
  --tooltip-y: 0;
16
16
  }
17
+
18
+ /* Hover determines whether tooltip is displayed */
19
+ :host([trigger="hover"]:hover) p {
20
+ display: flex;
21
+ }
22
+
23
+ /* Display determines whether tooltip is displayed */
24
+ :host(:not([trigger="hover"])[display]) p {
25
+ display: flex;
26
+ }
17
27
 
18
- :host([display]:hover) {
19
- & > p {
20
- display: flex;
21
- }
28
+ /* Use ID to force display none when there is no text */
29
+ :host([text=""]) #tip {
30
+ display: none;
22
31
  }
23
32
 
24
33
  p {
@@ -44,7 +53,6 @@ export const styles = css `
44
53
  top: var(--tooltip-y);
45
54
 
46
55
  /* Obsidian Styling */
47
-
48
56
  box-sizing: border-box;
49
57
  animation: pop-down 200ms forwards ease-in-out;
50
58
  box-shadow: 0 2px 8px var(--background-modifier-box-shadow);
@@ -60,17 +68,17 @@ let ToolTip = class ToolTip extends LitElement {
60
68
  constructor() {
61
69
  super(...arguments);
62
70
  this.display = false;
63
- this.text = '';
64
71
  this.trigger = 'manual';
72
+ this.text = '';
65
73
  /**
66
74
  * Clamps the tooltip position to within the bounds
67
75
  */
68
76
  this.clampPosition = (pos, bounds) => {
69
- if (!this.contentEl || !bounds)
77
+ if (!this.textEl || !bounds)
70
78
  return { x: 0, y: 0 };
71
79
  // Get tooltip bounds
72
- let tooltipWidth = this.contentEl.offsetWidth;
73
- let tooltipHeight = this.contentEl.offsetHeight;
80
+ let tooltipWidth = this.textEl.offsetWidth;
81
+ let tooltipHeight = this.textEl.offsetHeight;
74
82
  // Set tooltip position left or right side of mouse based on whether cursor is halfway
75
83
  let leftPosition = pos.x - bounds.left > bounds.width / 2 ? pos.x - bounds.left - 56 : pos.x - bounds.left + 64;
76
84
  let halfTooltipWidth = tooltipWidth / 2;
@@ -93,12 +101,10 @@ let ToolTip = class ToolTip extends LitElement {
93
101
  render() {
94
102
  return html `
95
103
  <slot
96
- @pointerover=${() => this.display = this.trigger === 'hover' ? true : this.display}
97
- @pointerout=${() => this.display = this.trigger === 'hover' ? false : this.display}
98
104
  @click=${() => this.trigger === 'click' ? this.display = !this.display : null}
99
105
  >
100
106
  </slot>
101
- <p id='content'>
107
+ <p id="tip">
102
108
  ${this.text}
103
109
  </p>
104
110
  `;
@@ -113,17 +119,17 @@ let ToolTip = class ToolTip extends LitElement {
113
119
  };
114
120
  ToolTip.styles = styles;
115
121
  __decorate([
116
- query('#content')
117
- ], ToolTip.prototype, "contentEl", void 0);
122
+ query('p')
123
+ ], ToolTip.prototype, "textEl", void 0);
118
124
  __decorate([
119
125
  property({ type: Boolean, reflect: true })
120
126
  ], ToolTip.prototype, "display", void 0);
121
127
  __decorate([
122
- property({ type: String })
123
- ], ToolTip.prototype, "text", void 0);
124
- __decorate([
125
- property({ type: String })
128
+ property({ type: String, reflect: true })
126
129
  ], ToolTip.prototype, "trigger", void 0);
130
+ __decorate([
131
+ property({ type: String, reflect: true })
132
+ ], ToolTip.prototype, "text", void 0);
127
133
  ToolTip = __decorate([
128
134
  condCustomElement('tool-tip')
129
135
  ], ToolTip);
package/dist/components/tool-tip/tool-tip.stories.d.ts CHANGED
@@ -3,7 +3,7 @@ import { TriggerTypes } from './tool-tip.js';
3
3
  declare const meta: Meta;
4
4
  export default meta;
5
5
  type Props = {
6
- content: string;
6
+ text: string;
7
7
  trigger: TriggerTypes;
8
8
  };
9
9
  type Story = StoryObj<Props>;
package/dist/components/tool-tip/tool-tip.stories.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tool-tip.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tool-tip/tool-tip.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,YAAY,CAAA;CAAE,CAAC;AAExD,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAY7B,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC"}
1
+ {"version":3,"file":"tool-tip.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tool-tip/tool-tip.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,YAAY,CAAA;CAAE,CAAC;AAErD,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAY7B,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC"}
package/dist/components/tool-tip/tool-tip.stories.js CHANGED
@@ -6,9 +6,9 @@ const meta = {
6
6
  };
7
7
  export default meta;
8
8
  const Template = {
9
- render: ({ content, trigger }) => {
9
+ render: ({ text, trigger }) => {
10
10
  return html `
11
- <tool-tip content=${content} trigger=${trigger}>
11
+ <tool-tip text=${text} trigger=${trigger}>
12
12
  <button>${trigger} me</button>
13
13
  </tool-tip>
14
14
  `;
@@ -17,14 +17,14 @@ const Template = {
17
17
  export const Hover = {
18
18
  ...Template,
19
19
  args: {
20
- content: 'hovered tooltip',
20
+ text: 'hovered tooltip',
21
21
  trigger: 'hover'
22
22
  }
23
23
  };
24
24
  export const Click = {
25
25
  ...Template,
26
26
  args: {
27
- content: 'clicked tooltip',
27
+ text: 'clicked tooltip',
28
28
  trigger: 'click'
29
29
  }
30
30
  };
package/dist/decorators/condCustomElement.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"condCustomElement.d.ts","sourceRoot":"","sources":["../../src/decorators/condCustomElement.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEtC,KAAK,WAAW,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAErD;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,MAAM,IAChC,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EAAE,aAAa,CAAC,OAMjE"}
1
+ {"version":3,"file":"condCustomElement.d.ts","sourceRoot":"","sources":["../../src/decorators/condCustomElement.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEtC,KAAK,WAAW,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAErD;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,MAAM,IAChC,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EAAE,aAAa,CAAC,OAIjE"}
package/dist/decorators/condCustomElement.js CHANGED
@@ -7,8 +7,6 @@ export function condCustomElement(tagName) {
7
7
  return function (constructor) {
8
8
  if (!customElements.get(tagName))
9
9
  litCustomElement(tagName)(constructor);
10
- else
11
- console.warn(`Custom element ${tagName} is already defined.`);
12
10
  return constructor;
13
11
  };
14
12
  }
package/dist/utils/generateUtils.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"generateUtils.d.ts","sourceRoot":"","sources":["../../src/utils/generateUtils.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,8BAA8B,CAAA;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,oDAAoD,CAAC;AAErF,oBAAY,WAAW;IACnB,aAAa,kBAAkB;IAC/B,aAAa,kBAAkB;IAC/B,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,MAAM,WAAW;CACpB;AAED,KAAK,cAAc,GAAG;IAClB,SAAS,CAAC,EAAE,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAA;IACvC,QAAQ,CAAC,EAAE,eAAe,CAAA;CAC7B,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,GAAE,cAAiD;;;EAmDnH"}
1
+ {"version":3,"file":"generateUtils.d.ts","sourceRoot":"","sources":["../../src/utils/generateUtils.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,8BAA8B,CAAA;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,oDAAoD,CAAC;AAErF,oBAAY,WAAW;IACtB,aAAa,kBAAkB;IAC/B,aAAa,kBAAkB;IAC/B,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,MAAM,WAAW;CACjB;AAED,KAAK,cAAc,GAAG;IACrB,SAAS,CAAC,EAAE,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAA;IACvC,QAAQ,CAAC,EAAE,eAAe,CAAA;CAC1B,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,GAAE,cAAiD;;;EAmDnH"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "private": false,
3
- "version": "0.2.34",
3
+ "version": "0.2.36",
4
4
  "name": "@alegendstale/holly-components",
5
5
  "description": "Reusable UI components created using lit",
6
6
  "type": "module",