@alegendstale/holly-components 0.2.34 → 0.2.35

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.
@@ -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;
@@ -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"}
@@ -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;
@@ -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
@@ -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,yBAmDlB,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"}
@@ -14,11 +14,15 @@ 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
+ }
17
22
 
18
- :host([display]:hover) {
19
- & > p {
20
- display: flex;
21
- }
23
+ /* Display determines whether tooltip is displayed */
24
+ :host(:not([trigger="hover"])[display]) p {
25
+ display: flex;
22
26
  }
23
27
 
24
28
  p {
@@ -44,7 +48,6 @@ export const styles = css `
44
48
  top: var(--tooltip-y);
45
49
 
46
50
  /* Obsidian Styling */
47
-
48
51
  box-sizing: border-box;
49
52
  animation: pop-down 200ms forwards ease-in-out;
50
53
  box-shadow: 0 2px 8px var(--background-modifier-box-shadow);
@@ -60,17 +63,17 @@ let ToolTip = class ToolTip extends LitElement {
60
63
  constructor() {
61
64
  super(...arguments);
62
65
  this.display = false;
63
- this.text = '';
64
66
  this.trigger = 'manual';
67
+ this.text = '';
65
68
  /**
66
69
  * Clamps the tooltip position to within the bounds
67
70
  */
68
71
  this.clampPosition = (pos, bounds) => {
69
- if (!this.contentEl || !bounds)
72
+ if (!this.textEl || !bounds)
70
73
  return { x: 0, y: 0 };
71
74
  // Get tooltip bounds
72
- let tooltipWidth = this.contentEl.offsetWidth;
73
- let tooltipHeight = this.contentEl.offsetHeight;
75
+ let tooltipWidth = this.textEl.offsetWidth;
76
+ let tooltipHeight = this.textEl.offsetHeight;
74
77
  // Set tooltip position left or right side of mouse based on whether cursor is halfway
75
78
  let leftPosition = pos.x - bounds.left > bounds.width / 2 ? pos.x - bounds.left - 56 : pos.x - bounds.left + 64;
76
79
  let halfTooltipWidth = tooltipWidth / 2;
@@ -93,12 +96,10 @@ let ToolTip = class ToolTip extends LitElement {
93
96
  render() {
94
97
  return html `
95
98
  <slot
96
- @pointerover=${() => this.display = this.trigger === 'hover' ? true : this.display}
97
- @pointerout=${() => this.display = this.trigger === 'hover' ? false : this.display}
98
99
  @click=${() => this.trigger === 'click' ? this.display = !this.display : null}
99
100
  >
100
101
  </slot>
101
- <p id='content'>
102
+ <p>
102
103
  ${this.text}
103
104
  </p>
104
105
  `;
@@ -113,17 +114,17 @@ let ToolTip = class ToolTip extends LitElement {
113
114
  };
114
115
  ToolTip.styles = styles;
115
116
  __decorate([
116
- query('#content')
117
- ], ToolTip.prototype, "contentEl", void 0);
117
+ query('p')
118
+ ], ToolTip.prototype, "textEl", void 0);
118
119
  __decorate([
119
120
  property({ type: Boolean, reflect: true })
120
121
  ], ToolTip.prototype, "display", void 0);
121
122
  __decorate([
122
123
  property({ type: String })
123
- ], ToolTip.prototype, "text", void 0);
124
+ ], ToolTip.prototype, "trigger", void 0);
124
125
  __decorate([
125
126
  property({ type: String })
126
- ], ToolTip.prototype, "trigger", void 0);
127
+ ], ToolTip.prototype, "text", void 0);
127
128
  ToolTip = __decorate([
128
129
  condCustomElement('tool-tip')
129
130
  ], ToolTip);
@@ -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.35",
4
4
  "name": "@alegendstale/holly-components",
5
5
  "description": "Reusable UI components created using lit",
6
6
  "type": "module",