@getflip/swirl-components 0.273.0 → 0.274.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.
package/components.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2024-12-17T13:40:42",
2
+ "timestamp": "2024-12-18T10:03:45",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.18.1",
@@ -6299,7 +6299,22 @@
6299
6299
  "docsTags": []
6300
6300
  }
6301
6301
  ],
6302
- "events": [],
6302
+ "events": [
6303
+ {
6304
+ "event": "componentLoad",
6305
+ "detail": "void",
6306
+ "bubbles": true,
6307
+ "complexType": {
6308
+ "original": "void",
6309
+ "resolved": "void",
6310
+ "references": {}
6311
+ },
6312
+ "cancelable": true,
6313
+ "composed": true,
6314
+ "docs": "",
6315
+ "docsTags": []
6316
+ }
6317
+ ],
6303
6318
  "listeners": [],
6304
6319
  "styles": [],
6305
6320
  "slots": [
@@ -12,6 +12,7 @@ const swirlCardBorderRadiusTokens = ["xs", "sm", "base", "l", "xl"];
12
12
  const SwirlCard = class {
13
13
  constructor(hostRef) {
14
14
  index.registerInstance(this, hostRef);
15
+ this.componentLoad = index.createEvent(this, "componentLoad", 7);
15
16
  this.as = "div";
16
17
  this.borderRadius = "base";
17
18
  this.customBackgroundColor = undefined;
@@ -49,6 +50,9 @@ const SwirlCard = class {
49
50
  this.flashing = false;
50
51
  }, duration);
51
52
  }
53
+ componentDidLoad() {
54
+ this.componentLoad.emit();
55
+ }
52
56
  render() {
53
57
  const Tag = Boolean(this.href) ? "a" : this.as;
54
58
  const hasImage = Boolean(this.el.querySelector('[slot="image"]'));
@@ -85,9 +89,9 @@ const SwirlCard = class {
85
89
  "card--interactive": this.interactive || this.href,
86
90
  "card--is--borderless": this.isBorderless,
87
91
  });
88
- return (index.h(index.Host, { key: '3d12e783c069b6e09e9c94bfe891dc80e0e401c1', styles: { height: this.height } }, index.h(Tag, { key: '97551b12b4cf2e4ab2f74936583ac9ed1dc2a60b', "aria-label": this.swirlAriaLabel, "aria-labelledby": this.swirlAriaLabelledby, class: className, href: this.href, rel: Boolean(this.href) && this.linkTarget === "_blank"
92
+ return (index.h(index.Host, { key: '4d6f94076fcdb889d3ce746039607d59be1cd2b8', styles: { height: this.height } }, index.h(Tag, { key: 'e90f4f6e05f6bce9dc7529e994ac20b78288075f', "aria-label": this.swirlAriaLabel, "aria-labelledby": this.swirlAriaLabelledby, class: className, href: this.href, rel: Boolean(this.href) && this.linkTarget === "_blank"
89
93
  ? "noreferrer"
90
- : undefined, style: styles, target: this.linkTarget }, index.h("div", { key: '8cbbc4f08e59e134afaca1887abcfb587eb55555', class: "card__image", style: { aspectRatio: this.imageAspectRatio } }, index.h("slot", { key: '47dd8500f698a6730f8b081ab64e3049991ff271', name: "image" })), index.h("div", { key: 'b96159e15cc9bfeffac6d86063453d598151ba2d', class: "card__body", style: bodyStyles }, index.h("div", { key: 'a6e3674c5da0d005e4fe30187325d67816525d3b', class: "card__content" }, index.h("slot", { key: '0e1bc603b145fdea67baa131104ed6234dd61373', name: "content" }))))));
94
+ : undefined, style: styles, target: this.linkTarget }, index.h("div", { key: 'b807d3babd972a8fe3ea78cf09f85a9ba3ef0c60', class: "card__image", style: { aspectRatio: this.imageAspectRatio } }, index.h("slot", { key: '50785ca3afed12023065baf6f2a6a11d0fc694b2', name: "image" })), index.h("div", { key: '9cfb96ea5290cbb124c830bb3fb9b24db8d22764', class: "card__body", style: bodyStyles }, index.h("div", { key: 'b499e82609144d547db7ac0c3a9155d2f5c2edd5', class: "card__content" }, index.h("slot", { key: '5de143023d98501f3c98c319223aab370d42c46f', name: "content" }))))));
91
95
  }
92
96
  get el() { return index.getElement(this); }
93
97
  };
@@ -43,6 +43,9 @@ export class SwirlCard {
43
43
  this.flashing = false;
44
44
  }, duration);
45
45
  }
46
+ componentDidLoad() {
47
+ this.componentLoad.emit();
48
+ }
46
49
  render() {
47
50
  const Tag = Boolean(this.href) ? "a" : this.as;
48
51
  const hasImage = Boolean(this.el.querySelector('[slot="image"]'));
@@ -79,9 +82,9 @@ export class SwirlCard {
79
82
  "card--interactive": this.interactive || this.href,
80
83
  "card--is--borderless": this.isBorderless,
81
84
  });
82
- return (h(Host, { key: '3d12e783c069b6e09e9c94bfe891dc80e0e401c1', styles: { height: this.height } }, h(Tag, { key: '97551b12b4cf2e4ab2f74936583ac9ed1dc2a60b', "aria-label": this.swirlAriaLabel, "aria-labelledby": this.swirlAriaLabelledby, class: className, href: this.href, rel: Boolean(this.href) && this.linkTarget === "_blank"
85
+ return (h(Host, { key: '4d6f94076fcdb889d3ce746039607d59be1cd2b8', styles: { height: this.height } }, h(Tag, { key: 'e90f4f6e05f6bce9dc7529e994ac20b78288075f', "aria-label": this.swirlAriaLabel, "aria-labelledby": this.swirlAriaLabelledby, class: className, href: this.href, rel: Boolean(this.href) && this.linkTarget === "_blank"
83
86
  ? "noreferrer"
84
- : undefined, style: styles, target: this.linkTarget }, h("div", { key: '8cbbc4f08e59e134afaca1887abcfb587eb55555', class: "card__image", style: { aspectRatio: this.imageAspectRatio } }, h("slot", { key: '47dd8500f698a6730f8b081ab64e3049991ff271', name: "image" })), h("div", { key: 'b96159e15cc9bfeffac6d86063453d598151ba2d', class: "card__body", style: bodyStyles }, h("div", { key: 'a6e3674c5da0d005e4fe30187325d67816525d3b', class: "card__content" }, h("slot", { key: '0e1bc603b145fdea67baa131104ed6234dd61373', name: "content" }))))));
87
+ : undefined, style: styles, target: this.linkTarget }, h("div", { key: 'b807d3babd972a8fe3ea78cf09f85a9ba3ef0c60', class: "card__image", style: { aspectRatio: this.imageAspectRatio } }, h("slot", { key: '50785ca3afed12023065baf6f2a6a11d0fc694b2', name: "image" })), h("div", { key: '9cfb96ea5290cbb124c830bb3fb9b24db8d22764', class: "card__body", style: bodyStyles }, h("div", { key: 'b499e82609144d547db7ac0c3a9155d2f5c2edd5', class: "card__content" }, h("slot", { key: '5de143023d98501f3c98c319223aab370d42c46f', name: "content" }))))));
85
88
  }
86
89
  static get is() { return "swirl-card"; }
87
90
  static get encapsulation() { return "shadow"; }
@@ -543,6 +546,24 @@ export class SwirlCard {
543
546
  "flashing": {}
544
547
  };
545
548
  }
549
+ static get events() {
550
+ return [{
551
+ "method": "componentLoad",
552
+ "name": "componentLoad",
553
+ "bubbles": true,
554
+ "cancelable": true,
555
+ "composed": true,
556
+ "docs": {
557
+ "tags": [],
558
+ "text": ""
559
+ },
560
+ "complexType": {
561
+ "original": "void",
562
+ "resolved": "void",
563
+ "references": {}
564
+ }
565
+ }];
566
+ }
546
567
  static get methods() {
547
568
  return {
548
569
  "flash": {