@behold/widget 0.5.141 → 0.5.143

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 (68) hide show
  1. package/dist/{Branding-BBp9uyYk.js → Branding-DnsmsfXd.js} +1 -1
  2. package/dist/ElasticCarousel-Cj5YJMBI.js +1 -0
  3. package/dist/ErrorMessage-DTtHpZcb.js +1 -0
  4. package/dist/GalleryWall-CyjIJ7Mv.js +1 -0
  5. package/dist/Grid-CllqGUGv.js +1 -0
  6. package/dist/PopoverGallery-DuOcWg5w.js +1 -0
  7. package/dist/Widget.d.ts +6 -6
  8. package/dist/Widget.d.ts.map +1 -1
  9. package/dist/base-Y-HoNPH4.js +1 -0
  10. package/dist/{caret-right-CN2RPSyP.js → caret-right-CSBbJCRm.js} +1 -1
  11. package/dist/elements/AlbumPost.d.ts +7 -5
  12. package/dist/elements/AlbumPost.d.ts.map +1 -1
  13. package/dist/elements/BaseElement.d.ts +6 -11
  14. package/dist/elements/BaseElement.d.ts.map +1 -1
  15. package/dist/elements/BasePost.d.ts +11 -11
  16. package/dist/elements/BasePost.d.ts.map +1 -1
  17. package/dist/elements/BaseWidget.d.ts +1 -1
  18. package/dist/elements/BaseWidget.d.ts.map +1 -1
  19. package/dist/elements/Branding.d.ts +1 -1
  20. package/dist/elements/Branding.d.ts.map +1 -1
  21. package/dist/elements/Image.d.ts +11 -11
  22. package/dist/elements/Image.d.ts.map +1 -1
  23. package/dist/elements/ImagePost.d.ts +7 -5
  24. package/dist/elements/ImagePost.d.ts.map +1 -1
  25. package/dist/elements/PopoverGallery.d.ts +20 -20
  26. package/dist/elements/PopoverGallery.d.ts.map +1 -1
  27. package/dist/elements/PopoverGallerySlide.d.ts +16 -16
  28. package/dist/elements/PopoverGallerySlide.d.ts.map +1 -1
  29. package/dist/elements/PopoverSlideAlbum.d.ts +12 -7
  30. package/dist/elements/PopoverSlideAlbum.d.ts.map +1 -1
  31. package/dist/elements/PopoverSlideVideo.d.ts +7 -12
  32. package/dist/elements/PopoverSlideVideo.d.ts.map +1 -1
  33. package/dist/elements/Video.d.ts +5 -5
  34. package/dist/elements/Video.d.ts.map +1 -1
  35. package/dist/elements/VideoPost.d.ts +7 -7
  36. package/dist/elements/VideoPost.d.ts.map +1 -1
  37. package/dist/index-D5q_Y1zD.js +1 -0
  38. package/dist/index.js +2 -2
  39. package/dist/lib/RGBStringToHSLArray.d.ts +1 -1
  40. package/dist/lib/RGBStringToHSLArray.d.ts.map +1 -1
  41. package/dist/lib/createElement.d.ts +10 -7
  42. package/dist/lib/createElement.d.ts.map +1 -1
  43. package/dist/lib/gyre.d.ts +5 -5
  44. package/dist/lib/gyre.d.ts.map +1 -1
  45. package/dist/lib/hurdyGurdy.d.ts +24 -21
  46. package/dist/lib/hurdyGurdy.d.ts.map +1 -1
  47. package/dist/lib/popoverScroller.d.ts +14 -14
  48. package/dist/lib/popoverScroller.d.ts.map +1 -1
  49. package/dist/lib/trapFocus.d.ts +3 -3
  50. package/dist/lib/trapFocus.d.ts.map +1 -1
  51. package/dist/lib/utils.d.ts +11 -11
  52. package/dist/lib/utils.d.ts.map +1 -1
  53. package/dist/widgets/ElasticCarousel.d.ts +23 -26
  54. package/dist/widgets/ElasticCarousel.d.ts.map +1 -1
  55. package/dist/widgets/ErrorMessage.d.ts +8 -10
  56. package/dist/widgets/ErrorMessage.d.ts.map +1 -1
  57. package/dist/widgets/GalleryWall.d.ts +16 -16
  58. package/dist/widgets/GalleryWall.d.ts.map +1 -1
  59. package/dist/widgets/Grid.d.ts +15 -18
  60. package/dist/widgets/Grid.d.ts.map +1 -1
  61. package/package.json +1 -1
  62. package/dist/ElasticCarousel-BPzlJmUK.js +0 -1
  63. package/dist/ErrorMessage-eWcJTpco.js +0 -1
  64. package/dist/GalleryWall-CwFfK_xY.js +0 -1
  65. package/dist/Grid-DLCUma3K.js +0 -1
  66. package/dist/PopoverGallery-CQUBmiu_.js +0 -1
  67. package/dist/base-Dt_vAgSJ.js +0 -1
  68. package/dist/index-CyQNRHCL.js +0 -1
@@ -1,27 +1,27 @@
1
1
  export default class PopoverScroller {
2
2
  slides: Array<HTMLElement>;
3
3
  containerEl: HTMLElement;
4
- onSlideChange: Function;
5
- onRequestClose: Function;
4
+ onSlideChange: (newIndex: number) => void;
5
+ onRequestClose?: () => void;
6
6
  _initialized: boolean;
7
- _currentSlide: number;
8
- _scrollContainerEl: HTMLElement;
9
- _innerEl: HTMLElement;
10
- _throttledScroll: Function;
7
+ _currentSlide: number | null;
8
+ _scrollContainerEl: HTMLElement | null;
9
+ _innerEl: HTMLElement | null;
10
+ _throttledScroll: () => void;
11
11
  _goToRaf: number;
12
- constructor({ slides, containerEl, onSlideChange, onRequestClose }: {
13
- slides: any;
14
- containerEl: any;
15
- onSlideChange: any;
16
- onRequestClose?: any;
12
+ constructor({ slides, containerEl, onSlideChange, onRequestClose, }: {
13
+ slides: HTMLElement[];
14
+ containerEl: HTMLElement;
15
+ onSlideChange: (newIndex: number) => void;
16
+ onRequestClose?: () => void;
17
17
  });
18
18
  init(index?: number): void;
19
19
  destroy(): void;
20
20
  _handleScroll(): void;
21
- _onBackGroundClick(evt: any): void;
21
+ _onBackGroundClick(evt: MouseEvent): void;
22
22
  _goTo({ index, animate }: {
23
- index: any;
24
- animate?: boolean;
23
+ index: number;
24
+ animate: boolean;
25
25
  }): void;
26
26
  }
27
27
  //# sourceMappingURL=popoverScroller.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"popoverScroller.d.ts","sourceRoot":"","sources":["../../src/lib/popoverScroller.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,OAAO,eAAe;IAClC,MAAM,EAAE,KAAK,CAAC,WAAW,CAAC,CAAA;IAC1B,WAAW,EAAE,WAAW,CAAA;IACxB,aAAa,EAAE,QAAQ,CAAA;IACvB,cAAc,EAAE,QAAQ,CAAA;IAExB,YAAY,EAAE,OAAO,CAAA;IACrB,aAAa,EAAE,MAAM,CAAA;IACrB,kBAAkB,EAAE,WAAW,CAAA;IAC/B,QAAQ,EAAE,WAAW,CAAA;IACrB,gBAAgB,EAAE,QAAQ,CAAA;IAC1B,QAAQ,EAAE,MAAM,CAAA;gBAEJ,EAAE,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,cAAqB,EAAE;;;;;KAAA;IAiBzE,IAAI,CAAC,KAAK,SAAI;IAuBd,OAAO;IAiBP,aAAa;IASb,kBAAkB,CAAC,GAAG,KAAA;IAMtB,KAAK,CAAC,EAAE,KAAK,EAAE,OAAc,EAAE;;;KAAA;CAchC"}
1
+ {"version":3,"file":"popoverScroller.d.ts","sourceRoot":"","sources":["../../src/lib/popoverScroller.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,OAAO,eAAe;IAClC,MAAM,EAAE,KAAK,CAAC,WAAW,CAAC,CAAA;IAC1B,WAAW,EAAE,WAAW,CAAA;IACxB,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAE3B,YAAY,EAAE,OAAO,CAAA;IACrB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,kBAAkB,EAAE,WAAW,GAAG,IAAI,CAAA;IACtC,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAA;IAC5B,gBAAgB,EAAE,MAAM,IAAI,CAAA;IAC5B,QAAQ,EAAE,MAAM,CAAI;gBAER,EACV,MAAM,EACN,WAAW,EACX,aAAa,EACb,cAAc,GACf,EAAE;QACD,MAAM,EAAE,WAAW,EAAE,CAAA;QACrB,WAAW,EAAE,WAAW,CAAA;QACxB,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;QACzC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;KAC5B;IAiBD,IAAI,CAAC,KAAK,SAAI;IA0Bd,OAAO;IAoBP,aAAa;IASb,kBAAkB,CAAC,GAAG,EAAE,UAAU;IAMlC,KAAK,CAAC,EAAE,KAAK,EAAE,OAAc,EAAE,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAE;CAcrE"}
@@ -1,8 +1,8 @@
1
1
  export declare function updateTabbableEls({ include, exclude, merge, }: {
2
- include?: any[];
3
- exclude?: any[];
2
+ include?: (HTMLElement | ShadowRoot)[];
3
+ exclude?: (HTMLElement | ShadowRoot)[];
4
4
  merge?: boolean;
5
5
  }): void;
6
- export declare function trapFocus(el: HTMLElement | ShadowRoot, exclude?: any[], initialFocusIndex?: number): Promise<void>;
6
+ export declare function trapFocus(el: HTMLElement | ShadowRoot, exclude?: HTMLElement[], initialFocusIndex?: number): Promise<void>;
7
7
  export declare function releaseFocus(newFocusEl: HTMLElement): void;
8
8
  //# sourceMappingURL=trapFocus.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"trapFocus.d.ts","sourceRoot":"","sources":["../../src/lib/trapFocus.ts"],"names":[],"mappings":"AA8HA,wBAAgB,iBAAiB,CAAC,EAChC,OAAY,EACZ,OAAY,EACZ,KAAa,GACd;;;;CAAA,QAeA;AAED,wBAAsB,SAAS,CAC7B,EAAE,EAAE,WAAW,GAAG,UAAU,EAC5B,OAAO,QAAK,EACZ,iBAAiB,SAAI,iBAqBtB;AAED,wBAAgB,YAAY,CAAC,UAAU,EAAE,WAAW,QAUnD"}
1
+ {"version":3,"file":"trapFocus.d.ts","sourceRoot":"","sources":["../../src/lib/trapFocus.ts"],"names":[],"mappings":"AA8HA,wBAAgB,iBAAiB,CAAC,EAChC,OAAY,EACZ,OAAY,EACZ,KAAa,GACd,EAAE;IACD,OAAO,CAAC,EAAE,CAAC,WAAW,GAAG,UAAU,CAAC,EAAE,CAAA;IACtC,OAAO,CAAC,EAAE,CAAC,WAAW,GAAG,UAAU,CAAC,EAAE,CAAA;IACtC,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,QAeA;AAED,wBAAsB,SAAS,CAC7B,EAAE,EAAE,WAAW,GAAG,UAAU,EAC5B,OAAO,GAAE,WAAW,EAAO,EAC3B,iBAAiB,SAAI,iBAqBtB;AAED,wBAAgB,YAAY,CAAC,UAAU,EAAE,WAAW,QAUnD"}
@@ -2,7 +2,7 @@
2
2
  * @param input Object or array to clone
3
3
  * @description A simple clone using JSON.stringify and JSON.parse. Properties with an undefined value will be included in the result with a value of null
4
4
  */
5
- export declare function clone<ReturnType = object>(input: object | Array<any>): ReturnType;
5
+ export declare function clone<T>(input: T): T;
6
6
  /**
7
7
  * @description
8
8
  * Force DOM layout. Coupled with a requestAnimationFrame this can be
@@ -22,10 +22,10 @@ export declare function preloadMedia(type: 'img' | 'video', src: string): Promis
22
22
  * @param maxChars - Restrict to n total characters
23
23
  */
24
24
  export declare function getTruncatedText({ text, maxLines, maxChars }: {
25
- text: any;
25
+ text?: string;
26
26
  maxLines?: number;
27
27
  maxChars?: number;
28
- }): any;
28
+ }): string;
29
29
  /**
30
30
  * Generate a placeholder svg image
31
31
  */
@@ -39,13 +39,13 @@ export declare function getPlaceholderImage(width: number, height: number): stri
39
39
  * If multiple elements tie for highest intersectionRatio, the most visible
40
40
  * element that appears earliest in the array is returned.
41
41
  */
42
- export declare function getMostVisible(els: Array<HTMLElement>): Promise<number>;
42
+ export declare function getMostVisible(els: Array<Element>): Promise<number | null>;
43
43
  /**
44
44
  * @param el - The target element
45
- * @returns a {result: Promise, abort: Function}
45
+ * @returns a {result: Promise, abort: () => void}
46
46
  * @description More performant async replacement for getBoundingClientRect
47
47
  */
48
- export declare function getAsyncRect(el: Element, cb: Function): () => void;
48
+ export declare function getAsyncRect(el: Element, cb: (rect: DOMRect) => void): () => void;
49
49
  /**
50
50
  * @param el - the element to query
51
51
  * @description
@@ -58,7 +58,7 @@ export declare function getClosestShadowRootOrDocument(el: Node): Document | Sha
58
58
  * @param thisArg - this context to apply to callback
59
59
  * @param throttleFirst - start with a delay?
60
60
  */
61
- export declare function throttle(callback: Function, wait: number, thisArg?: any, throttleFirst?: boolean): Function;
61
+ export declare function throttle<T extends (...args: Parameters<T>) => void>(callback: T, wait: number, thisArg: unknown, throttleFirst?: boolean): (...args: Parameters<T>) => void;
62
62
  /**
63
63
  * @param target - An element to toggle classes on
64
64
  * @param classes - An object with the format { className: boolean }
@@ -72,7 +72,7 @@ export declare function setClasses(target: Element, classes: {
72
72
  * @param target - An element to set a CSS custom property on
73
73
  * @param vars - An object of the form { "--var-name": "var-value" }
74
74
  */
75
- export declare function setCssVars(target: HTMLElement, vars: {
75
+ export declare function setCssVars(target: HTMLElement | undefined, vars: {
76
76
  [key: string]: string;
77
77
  }): void;
78
78
  /**
@@ -80,10 +80,10 @@ export declare function setCssVars(target: HTMLElement, vars: {
80
80
  * @param obj2 - Object to compare
81
81
  * @param props - An array of properties to compare
82
82
  * @description
83
- * Compares the properties of two objects. Returns true if, for
83
+ * Compares the properties of two objects literal. Returns true if, for
84
84
  * any property in the props array, obj1[prop] !== obj2[prop]
85
85
  */
86
- export declare function hasChanges(obj1: object, obj2: object, props: string | string[], depth?: 0 | 1): boolean;
86
+ export declare function hasChanges(obj1: any, obj2: any, props: string | string[], depth?: 0 | 1): boolean;
87
87
  /**
88
88
  * @param a - value to compare
89
89
  * @param b - value to compare
@@ -92,7 +92,7 @@ export declare function hasChanges(obj1: object, obj2: object, props: string | s
92
92
  * @description
93
93
  * Check if two values are the same
94
94
  */
95
- export declare function isEqual(a: any, b: any, fuzzyNumbers?: boolean, sortArrays?: boolean): any;
95
+ export declare function isEqual(a: any, b: any, fuzzyNumbers?: boolean, sortArrays?: boolean): boolean;
96
96
  /**
97
97
  * @param text - The text to announce
98
98
  * @param mood - assertive or polite
@@ -1 +1 @@
1
- {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,KAAK,CAAC,UAAU,GAAG,MAAM,EACvC,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,GACzB,UAAU,CAOZ;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,IAAI,MAAM,CAEpC;AAED;;;;GAIG;AACH,wBAAsB,YAAY,CAAC,IAAI,EAAE,KAAK,GAAG,OAAO,EAAE,GAAG,EAAE,MAAM,oBAmBpE;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,QAAY,EAAE,QAAa,EAAE;;;;CAAA,OAUrE;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,UAEhE;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAmBvE;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,cAsBrD;AAED;;;;GAIG;AACH,wBAAgB,8BAA8B,CAC5C,EAAE,EAAE,IAAI,GACP,QAAQ,GAAG,UAAU,CAYvB;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CACtB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,MAAM,EACZ,OAAO,MAAO,EACd,aAAa,UAAQ,GACpB,QAAQ,CAgBV;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CACxB,MAAM,EAAE,OAAO,EACf,OAAO,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CAAE,QASpC;AAED;;;GAGG;AACH,wBAAgB,UAAU,CACxB,MAAM,EAAE,WAAW,EACnB,IAAI,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,QAMhC;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CACxB,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,EACxB,KAAK,GAAE,CAAC,GAAG,CAAK,WA0BjB;AAED;;;;;;;GAOG;AACH,wBAAgB,OAAO,CACrB,CAAC,EAAE,GAAG,EACN,CAAC,EAAE,GAAG,EACN,YAAY,UAAQ,EACpB,UAAU,UAAQ,OAkCnB;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,SAAc,QAwBtE;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,QAKlE;AAED,wBAAgB,8BAA8B,CAC5C,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,MAAM,UAef"}
1
+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,CAOpC;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,IAAI,MAAM,CAEpC;AAED;;;;GAIG;AACH,wBAAsB,YAAY,CAAC,IAAI,EAAE,KAAK,GAAG,OAAO,EAAE,GAAG,EAAE,MAAM,oBAmBpE;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,IAAS,EAAE,QAAY,EAAE,QAAa,EAAE;;;;CAAA,UAU1E;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,UAEhE;AAED;;;;;;;;GAQG;AACH,wBAAsB,cAAc,CAClC,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,GAClB,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAoDxB;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,cAwBpE;AAED;;;;GAIG;AACH,wBAAgB,8BAA8B,CAC5C,EAAE,EAAE,IAAI,GACP,QAAQ,GAAG,UAAU,CAgBvB;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,EACjE,QAAQ,EAAE,CAAC,EACX,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,OAAO,EAChB,aAAa,UAAQ,GACpB,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAgBlC;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CACxB,MAAM,EAAE,OAAO,EACf,OAAO,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CAAE,QASpC;AAED;;;GAGG;AACH,wBAAgB,UAAU,CACxB,MAAM,EAAE,WAAW,GAAG,SAAS,EAC/B,IAAI,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,QAMhC;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CACxB,IAAI,EAAE,GAAG,EACT,IAAI,EAAE,GAAG,EACT,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,EACxB,KAAK,GAAE,CAAC,GAAG,CAAK,WA8BjB;AAED;;;;;;;GAOG;AACH,wBAAgB,OAAO,CACrB,CAAC,EAAE,GAAG,EACN,CAAC,EAAE,GAAG,EACN,YAAY,UAAQ,EACpB,UAAU,UAAQ,GACjB,OAAO,CAiCT;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,SAAc,QAwBtE;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,QAKlE;AAED,wBAAgB,8BAA8B,CAC5C,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,MAAM,UAef"}
@@ -4,25 +4,25 @@ import type PopoverGallery from '../elements/PopoverGallery.js';
4
4
  import type BasePost from '../elements/BasePost.js';
5
5
  export default class ElasticCarousel extends Base {
6
6
  label: string;
7
- widgetSettings: WidgetSettings;
8
- feedMetadata: FeedMetadata;
9
- posts: Posts;
10
- previewLoadingColors: string;
7
+ widgetSettings?: WidgetSettings;
8
+ feedMetadata?: FeedMetadata;
9
+ posts?: Posts;
10
+ previewLoadingColors?: string;
11
11
  startIndex: number;
12
- containerEl: HTMLElement;
13
- headerEl: HTMLElement;
14
- innerEl: HTMLElement;
15
- footerEl: HTMLElement;
16
- instagramLogoEl: HTMLImageElement;
17
- labelEl: HTMLLinkElement;
18
- leftArrowEl: HTMLButtonElement;
19
- rightArrowEl: HTMLButtonElement;
20
- slidesContainerEl: HTMLElement;
21
- postEls: Array<any>;
22
- popoverGalleryEl: PopoverGallery;
12
+ containerEl?: HTMLElement;
13
+ headerEl?: HTMLElement;
14
+ innerEl?: HTMLElement;
15
+ footerEl?: HTMLElement;
16
+ instagramLogoEl?: HTMLImageElement;
17
+ labelEl?: HTMLLinkElement;
18
+ leftArrowEl?: HTMLButtonElement;
19
+ rightArrowEl?: HTMLButtonElement;
20
+ slidesContainerEl?: HTMLElement;
21
+ postEls: Array<BasePost>;
22
+ popoverGalleryEl?: PopoverGallery;
23
23
  langDirection: 'ltr' | 'rtl';
24
- appliedBreakpoint: Breakpoint;
25
- medianPaletteHSL: Array<string>;
24
+ appliedBreakpoint?: Breakpoint;
25
+ medianPaletteHSL?: Array<string>;
26
26
  gyre: Gyre;
27
27
  constructor();
28
28
  setup(): void;
@@ -36,16 +36,13 @@ export default class ElasticCarousel extends Base {
36
36
  * Handle reaching the end
37
37
  */
38
38
  _handleEnd(atEnd: boolean): void;
39
- _handlePropChange({ changedProp, oldValue, newValue }: {
40
- changedProp: any;
41
- oldValue: any;
42
- newValue: any;
39
+ _handlePropChange({ changedProp, oldValue, newValue, }: {
40
+ changedProp: string;
41
+ oldValue: unknown;
42
+ newValue: unknown;
43
43
  }): void;
44
- _handlePostsChange({ oldValue, newValue }: {
45
- oldValue: any;
46
- newValue: any;
47
- }): void;
48
- _handleSettingsChange(oldValue: any, newValue: any): void;
44
+ _handlePostsChange(): void;
45
+ _handleSettingsChange(oldValue: WidgetSettings, newValue: WidgetSettings): void;
49
46
  _handleMetadataChange(): void;
50
47
  /**
51
48
  * Enable popup carousel
@@ -1 +1 @@
1
- {"version":3,"file":"ElasticCarousel.d.ts","sourceRoot":"","sources":["../../src/widgets/ElasticCarousel.ts"],"names":[],"mappings":"AAIA,OAAO,IAAI,MAAM,2BAA2B,CAAA;AAI5C,OAAO,IAAI,MAAM,gBAAgB,CAAA;AACjC,OAAO,KAAK,cAAc,MAAM,+BAA+B,CAAA;AAC/D,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAA;AAUnD,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,IAAI;IAC/C,KAAK,SAAoB;IAGzB,cAAc,EAAE,cAAc,CAAA;IAC9B,YAAY,EAAE,YAAY,CAAA;IAC1B,KAAK,EAAE,KAAK,CAAA;IACZ,oBAAoB,EAAE,MAAM,CAAO;IACnC,UAAU,SAAI;IAGd,WAAW,EAAE,WAAW,CAAA;IACxB,QAAQ,EAAE,WAAW,CAAA;IACrB,OAAO,EAAE,WAAW,CAAA;IACpB,QAAQ,EAAE,WAAW,CAAA;IACrB,eAAe,EAAE,gBAAgB,CAAA;IACjC,OAAO,EAAE,eAAe,CAAA;IACxB,WAAW,EAAE,iBAAiB,CAAA;IAC9B,YAAY,EAAE,iBAAiB,CAAA;IAC/B,iBAAiB,EAAE,WAAW,CAAA;IAC9B,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAA;IACnB,gBAAgB,EAAE,cAAc,CAAA;IAChC,aAAa,EAAE,KAAK,GAAG,KAAK,CAAA;IAC5B,iBAAiB,EAAE,UAAU,CAAA;IAC7B,gBAAgB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;IAC/B,IAAI,EAAE,IAAI,CAAA;;IAuHV,KAAK;IA4DL,oBAAoB;IAKpB,WAAW;IAsDX;;OAEG;IACH,kBAAkB,CAAC,KAAK,EAAE,MAAM;IAsBhC;;OAEG;IACH,UAAU,CAAC,KAAK,EAAE,OAAO;IAWzB,iBAAiB,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE;;;;KAAA;IAyBrD,kBAAkB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE;;;KAAA;IAwBzC,qBAAqB,CAAC,QAAQ,KAAA,EAAE,QAAQ,KAAA;IAiDxC,qBAAqB;IAqBrB;;OAEG;IACG,oBAAoB;IAwB1B,aAAa,CAAC,KAAK,EAAE,mBAAmB;IAWxC;;OAEG;IACH,wBAAwB;IAcxB;;OAEG;IACH,oBAAoB;IAyBpB;;OAEG;IACH,gBAAgB,CAAC,IAAI,EAAE,QAAQ;IAI/B;;OAEG;IACH,QAAQ;IAMR;;OAEG;IACH,QAAQ;IASR,WAAW,CAAC,UAAU,EAAE,UAAU;IAwBlC,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;IAiB7D,gBAAgB,CAAC,UAAU,EAAE,UAAU,EAAE,WAAW,GAAE,OAAe;IAkKrE,aAAa,CAAC,UAAU,EAAE,UAAU,GAAG,KAAK,CAAC,QAAQ,CAAC;IAkEtD,MAAM,CAAC,QAAQ,CAAC,IAAI,SAA4B,GAAG,MAAM;CAM1D;AAKD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,eAAe,CAAA;KAC3C;CACF"}
1
+ {"version":3,"file":"ElasticCarousel.d.ts","sourceRoot":"","sources":["../../src/widgets/ElasticCarousel.ts"],"names":[],"mappings":"AAIA,OAAO,IAAI,MAAM,2BAA2B,CAAA;AAI5C,OAAO,IAAI,MAAM,gBAAgB,CAAA;AACjC,OAAO,KAAK,cAAc,MAAM,+BAA+B,CAAA;AAC/D,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAA;AAUnD,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,IAAI;IAC/C,KAAK,SAAoB;IAGzB,cAAc,CAAC,EAAE,cAAc,CAAA;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,UAAU,SAAI;IAGd,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,QAAQ,CAAC,EAAE,WAAW,CAAA;IACtB,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,QAAQ,CAAC,EAAE,WAAW,CAAA;IACtB,eAAe,CAAC,EAAE,gBAAgB,CAAA;IAClC,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,WAAW,CAAC,EAAE,iBAAiB,CAAA;IAC/B,YAAY,CAAC,EAAE,iBAAiB,CAAA;IAChC,iBAAiB,CAAC,EAAE,WAAW,CAAA;IAC/B,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAK;IAC7B,gBAAgB,CAAC,EAAE,cAAc,CAAA;IACjC,aAAa,EAAE,KAAK,GAAG,KAAK,CAAQ;IACpC,iBAAiB,CAAC,EAAE,UAAU,CAAA;IAC9B,gBAAgB,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;IAChC,IAAI,EAAE,IAAI,CAAA;;IAuHV,KAAK;IA8DL,oBAAoB;IAKpB,WAAW;IAuDX;;OAEG;IACH,kBAAkB,CAAC,KAAK,EAAE,MAAM;IAsBhC;;OAEG;IACH,UAAU,CAAC,KAAK,EAAE,OAAO;IAWzB,iBAAiB,CAAC,EAChB,WAAW,EACX,QAAQ,EACR,QAAQ,GACT,EAAE;QACD,WAAW,EAAE,MAAM,CAAA;QACnB,QAAQ,EAAE,OAAO,CAAA;QACjB,QAAQ,EAAE,OAAO,CAAA;KAClB;IA4BD,kBAAkB;IA0BlB,qBAAqB,CAAC,QAAQ,EAAE,cAAc,EAAE,QAAQ,EAAE,cAAc;IAiDxE,qBAAqB;IAqBrB;;OAEG;IACG,oBAAoB;IA0B1B,aAAa,CAAC,KAAK,EAAE,mBAAmB;IAaxC;;OAEG;IACH,wBAAwB;IAcxB;;OAEG;IACH,oBAAoB;IAyBpB;;OAEG;IACH,gBAAgB,CAAC,IAAI,EAAE,QAAQ;IAI/B;;OAEG;IACH,QAAQ;IAMR;;OAEG;IACH,QAAQ;IASR,WAAW,CAAC,UAAU,EAAE,UAAU;IAyBlC,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;IAiB7D,gBAAgB,CAAC,UAAU,EAAE,UAAU,EAAE,WAAW,GAAE,OAAe;IAkLrE,aAAa,CAAC,UAAU,EAAE,UAAU,GAAG,KAAK,CAAC,QAAQ,CAAC;IAoEtD,MAAM,CAAC,QAAQ,CAAC,IAAI,SAA4B,GAAG,MAAM;CAM1D;AAKD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,eAAe,CAAA;KAC3C;CACF"}
@@ -2,17 +2,15 @@ import Base from '../elements/BaseElement.js';
2
2
  export default class ErrorMessage extends Base {
3
3
  label: string;
4
4
  shadow: ShadowRoot;
5
- linkEl: HTMLLinkElement;
6
- logoEl: HTMLDivElement;
7
- styleEl: HTMLStyleElement;
8
- errorTitleEl: HTMLElement;
9
- errorMessageEl: HTMLElement;
10
- errorMessageTextEl: HTMLElement;
11
- errorMessage: string;
5
+ linkEl?: HTMLLinkElement;
6
+ logoEl?: HTMLDivElement;
7
+ styleEl?: HTMLStyleElement;
8
+ errorTitleEl?: HTMLElement;
9
+ errorMessageEl?: HTMLElement;
10
+ errorMessageTextEl?: HTMLElement;
11
+ errorMessage?: string;
12
12
  constructor();
13
- _handlePropChange({ changedProp }: {
14
- changedProp: any;
15
- }): void;
13
+ _handlePropChange(): void;
16
14
  /**
17
15
  * Render
18
16
  */
@@ -1 +1 @@
1
- {"version":3,"file":"ErrorMessage.d.ts","sourceRoot":"","sources":["../../src/widgets/ErrorMessage.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,4BAA4B,CAAA;AAS7C,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,IAAI;IAC5C,KAAK,SAAiB;IAGtB,MAAM,EAAE,UAAU,CAAA;IAClB,MAAM,EAAE,eAAe,CAAA;IACvB,MAAM,EAAE,cAAc,CAAA;IACtB,OAAO,EAAE,gBAAgB,CAAA;IACzB,YAAY,EAAE,WAAW,CAAA;IACzB,cAAc,EAAE,WAAW,CAAA;IAC3B,kBAAkB,EAAE,WAAW,CAAA;IAG/B,YAAY,EAAE,MAAM,CAAA;;IAqBpB,iBAAiB,CAAC,EAAE,WAAW,EAAE;;KAAA;IAIjC;;OAEG;IACH,MAAM;IAsDN,aAAa,CAAC,KAAK,EAAE,mBAAmB,GAAG,IAAI;IAsB/C,MAAM,CAAC,QAAQ,CAAC,IAAI,SAAyB,GAAG,MAAM;CAMvD;AAKD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,YAAY,CAAA;KACrC;CACF"}
1
+ {"version":3,"file":"ErrorMessage.d.ts","sourceRoot":"","sources":["../../src/widgets/ErrorMessage.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,4BAA4B,CAAA;AAS7C,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,IAAI;IAC5C,KAAK,SAAiB;IAGtB,MAAM,EAAE,UAAU,CAAA;IAClB,MAAM,CAAC,EAAE,eAAe,CAAA;IACxB,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB,OAAO,CAAC,EAAE,gBAAgB,CAAA;IAC1B,YAAY,CAAC,EAAE,WAAW,CAAA;IAC1B,cAAc,CAAC,EAAE,WAAW,CAAA;IAC5B,kBAAkB,CAAC,EAAE,WAAW,CAAA;IAGhC,YAAY,CAAC,EAAE,MAAM,CAAA;;IAqBrB,iBAAiB;IAIjB;;OAEG;IACH,MAAM;IAsDN,aAAa,CAAC,KAAK,EAAE,mBAAmB,GAAG,IAAI;IAsB/C,MAAM,CAAC,QAAQ,CAAC,IAAI,SAAyB,GAAG,MAAM;CAMvD;AAKD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,YAAY,CAAA;KACrC;CACF"}
@@ -4,26 +4,26 @@ import type PopoverGallery from '../elements/PopoverGallery.js';
4
4
  import type BasePost from '../elements/BasePost.js';
5
5
  export default class GalleryWall extends Base {
6
6
  label: string;
7
- widgetSettings: WidgetSettings;
8
- feedMetadata: FeedMetadata;
7
+ widgetSettings?: WidgetSettings;
8
+ feedMetadata?: FeedMetadata;
9
9
  posts: Posts;
10
- previewLoadingColors: string;
11
- containerEl: HTMLElement;
12
- brandingEl: Branding;
13
- heightRefEl: HTMLElement;
10
+ previewLoadingColors?: string;
11
+ containerEl?: HTMLElement;
12
+ brandingEl?: Branding;
13
+ heightRefEl?: HTMLElement;
14
14
  postEls: Array<BasePost>;
15
- popoverGalleryEl: PopoverGallery;
16
- appliedBreakpoint: Breakpoint;
17
- medianPaletteHSL: Array<string>;
15
+ popoverGalleryEl?: PopoverGallery;
16
+ appliedBreakpoint?: Breakpoint;
17
+ medianPaletteHSL?: Array<string>;
18
18
  constructor();
19
19
  setup(): void;
20
- _handlePropChange({ changedProp, oldValue, newValue }: {
21
- changedProp: any;
22
- oldValue: any;
23
- newValue: any;
20
+ _handlePropChange({ changedProp, oldValue, newValue, }: {
21
+ changedProp: string;
22
+ oldValue: unknown;
23
+ newValue: unknown;
24
24
  }): void;
25
25
  _handlePostsChange(): void;
26
- _handleSettingsChange(oldValue: any, newValue: any): void;
26
+ _handleSettingsChange(oldValue: WidgetSettings, newValue: WidgetSettings): void;
27
27
  _handleMetadataChange(): void;
28
28
  /**
29
29
  * Enable popup carousel
@@ -44,8 +44,8 @@ export default class GalleryWall extends Base {
44
44
  _handlePostClick(post: BasePost): void;
45
45
  renderPosts(breakpoint: Breakpoint): void;
46
46
  getMatchingBreakpoint(width: number, breakpoints: Breakpoints): {
47
- width: string;
48
47
  numPosts: number;
48
+ width: string;
49
49
  borderRadius: string;
50
50
  applyBorderRadiusToContainer: boolean;
51
51
  postAspectRatio: [number, number];
@@ -70,7 +70,7 @@ export default class GalleryWall extends Base {
70
70
  };
71
71
  renderBreakpoint(breakpoint: Breakpoint, forceRender?: boolean): void;
72
72
  createPostEls(breakpoint: Breakpoint): Array<BasePost>;
73
- setContainerHeight: Function;
73
+ setContainerHeight: () => void;
74
74
  static register(name?: string): string;
75
75
  }
76
76
  declare global {
@@ -1 +1 @@
1
- {"version":3,"file":"GalleryWall.d.ts","sourceRoot":"","sources":["../../src/widgets/GalleryWall.ts"],"names":[],"mappings":"AAIA,OAAO,IAAI,MAAM,2BAA2B,CAAA;AAC5C,OAAO,QAAQ,MAAM,yBAAyB,CAAA;AAI9C,OAAO,KAAK,cAAc,MAAM,+BAA+B,CAAA;AAC/D,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAA;AAOnD,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,IAAI;IAC3C,KAAK,SAAgB;IAGrB,cAAc,EAAE,cAAc,CAAA;IAC9B,YAAY,EAAE,YAAY,CAAA;IAC1B,KAAK,EAAE,KAAK,CAAA;IACZ,oBAAoB,EAAE,MAAM,CAAO;IAGnC,WAAW,EAAE,WAAW,CAAA;IACxB,UAAU,EAAE,QAAQ,CAAA;IACpB,WAAW,EAAE,WAAW,CAAA;IACxB,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAA;IACxB,gBAAgB,EAAE,cAAc,CAAA;IAChC,iBAAiB,EAAE,UAAU,CAAA;IAC7B,gBAAgB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;;IAwC/B,KAAK;IAsEL,iBAAiB,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE;;;;KAAA;IA0BrD,kBAAkB;IAYlB,qBAAqB,CAAC,QAAQ,KAAA,EAAE,QAAQ,KAAA;IA0BxC,qBAAqB;IAqBrB;;OAEG;IACG,oBAAoB;IAoB1B,aAAa,CAAC,KAAK,EAAE,mBAAmB;IAWxC;;OAEG;IACH,wBAAwB;IAexB;;OAEG;IACH,oBAAoB;IAepB;;OAEG;IACH,gBAAgB,CAAC,IAAI,EAAE,QAAQ;IAO/B,WAAW,CAAC,UAAU,EAAE,UAAU;IAiBlC,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;IA2B7D,gBAAgB,CAAC,UAAU,EAAE,UAAU,EAAE,WAAW,GAAE,OAAe;IAoFrE,aAAa,CAAC,UAAU,EAAE,UAAU,GAAG,KAAK,CAAC,QAAQ,CAAC;IAwDtD,kBAAkB,WAgBjB;IAKD,MAAM,CAAC,QAAQ,CAAC,IAAI,SAAwB,GAAG,MAAM;CAMtD;AAKD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,WAAW,CAAA;KACnC;CACF"}
1
+ {"version":3,"file":"GalleryWall.d.ts","sourceRoot":"","sources":["../../src/widgets/GalleryWall.ts"],"names":[],"mappings":"AAIA,OAAO,IAAI,MAAM,2BAA2B,CAAA;AAC5C,OAAO,QAAQ,MAAM,yBAAyB,CAAA;AAI9C,OAAO,KAAK,cAAc,MAAM,+BAA+B,CAAA;AAC/D,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAA;AAOnD,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,IAAI;IAC3C,KAAK,SAAgB;IAGrB,cAAc,CAAC,EAAE,cAAc,CAAA;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,KAAK,EAAE,KAAK,CAAK;IACjB,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAG7B,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAK;IAC7B,gBAAgB,CAAC,EAAE,cAAc,CAAA;IACjC,iBAAiB,CAAC,EAAE,UAAU,CAAA;IAC9B,gBAAgB,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAmB;;IAwCnD,KAAK;IAwEL,iBAAiB,CAAC,EAChB,WAAW,EACX,QAAQ,EACR,QAAQ,GACT,EAAE;QACD,WAAW,EAAE,MAAM,CAAA;QACnB,QAAQ,EAAE,OAAO,CAAA;QACjB,QAAQ,EAAE,OAAO,CAAA;KAClB;IA4BD,kBAAkB;IAelB,qBAAqB,CAAC,QAAQ,EAAE,cAAc,EAAE,QAAQ,EAAE,cAAc;IA4BxE,qBAAqB;IAqBrB;;OAEG;IACG,oBAAoB;IAsB1B,aAAa,CAAC,KAAK,EAAE,mBAAmB;IAaxC;;OAEG;IACH,wBAAwB;IAqBxB;;OAEG;IACH,oBAAoB;IAqBpB;;OAEG;IACH,gBAAgB,CAAC,IAAI,EAAE,QAAQ;IAO/B,WAAW,CAAC,UAAU,EAAE,UAAU;IAiBlC,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;IA2B7D,gBAAgB,CAAC,UAAU,EAAE,UAAU,EAAE,WAAW,GAAE,OAAe;IA4FrE,aAAa,CAAC,UAAU,EAAE,UAAU,GAAG,KAAK,CAAC,QAAQ,CAAC;IAwDtD,kBAAkB,aAmBjB;IAKD,MAAM,CAAC,QAAQ,CAAC,IAAI,SAAwB,GAAG,MAAM;CAMtD;AAKD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,WAAW,CAAA;KACnC;CACF"}
@@ -4,29 +4,26 @@ import type PopoverGallery from '../elements/PopoverGallery.js';
4
4
  import type BasePost from '../elements/BasePost.js';
5
5
  export default class Grid extends Base {
6
6
  label: string;
7
- widgetSettings: WidgetSettings;
8
- feedMetadata: FeedMetadata;
7
+ widgetSettings?: WidgetSettings;
8
+ feedMetadata?: FeedMetadata;
9
9
  posts: Posts;
10
- previewLoadingColors: string;
11
- containerEl: HTMLElement;
12
- postsContainerEl: HTMLElement;
13
- brandingEl: Branding;
14
- postEls: Array<any>;
15
- popoverGalleryEl: PopoverGallery;
16
- appliedBreakpoint: Breakpoint;
10
+ previewLoadingColors?: string;
11
+ containerEl?: HTMLElement;
12
+ postsContainerEl?: HTMLElement;
13
+ brandingEl?: Branding;
14
+ postEls: Array<BasePost>;
15
+ popoverGalleryEl?: PopoverGallery;
16
+ appliedBreakpoint?: Breakpoint;
17
17
  medianPaletteHSL: Array<string>;
18
18
  constructor();
19
19
  setup(): void;
20
- _handlePropChange({ changedProp, oldValue, newValue }: {
21
- changedProp: any;
22
- oldValue: any;
23
- newValue: any;
20
+ _handlePropChange({ changedProp, oldValue, newValue, }: {
21
+ changedProp: string;
22
+ oldValue: unknown;
23
+ newValue: unknown;
24
24
  }): void;
25
- _handlePostsChange({ oldValue, newValue }: {
26
- oldValue: any;
27
- newValue: any;
28
- }): void;
29
- _handleSettingsChange(oldValue: any, newValue: any): void;
25
+ _handlePostsChange(): void;
26
+ _handleSettingsChange(oldValue: WidgetSettings, newValue: WidgetSettings): void;
30
27
  _handleMetadataChange(): void;
31
28
  /**
32
29
  * Enable popup carousel
@@ -1 +1 @@
1
- {"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/widgets/Grid.ts"],"names":[],"mappings":"AAIA,OAAO,IAAI,MAAM,2BAA2B,CAAA;AAC5C,OAAO,QAAQ,MAAM,yBAAyB,CAAA;AAI9C,OAAO,KAAK,cAAc,MAAM,+BAA+B,CAAA;AAC/D,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAA;AAOnD,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,IAAI;IACpC,KAAK,SAAS;IAGd,cAAc,EAAE,cAAc,CAAA;IAC9B,YAAY,EAAE,YAAY,CAAA;IAC1B,KAAK,EAAE,KAAK,CAAA;IACZ,oBAAoB,EAAE,MAAM,CAAO;IAGnC,WAAW,EAAE,WAAW,CAAA;IACxB,gBAAgB,EAAE,WAAW,CAAA;IAC7B,UAAU,EAAE,QAAQ,CAAA;IACpB,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAA;IACnB,gBAAgB,EAAE,cAAc,CAAA;IAChC,iBAAiB,EAAE,UAAU,CAAA;IAC7B,gBAAgB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;;IA0C/B,KAAK;IAgFL,iBAAiB,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE;;;;KAAA;IAyBrD,kBAAkB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE;;;KAAA;IAkBzC,qBAAqB,CAAC,QAAQ,KAAA,EAAE,QAAQ,KAAA;IA2BxC,qBAAqB;IAqBrB;;OAEG;IACG,oBAAoB;IAqB1B,aAAa,CAAC,KAAK,EAAE,mBAAmB;IAUxC;;OAEG;IACH,wBAAwB;IAexB;;OAEG;IACH,oBAAoB;IAepB;;OAEG;IACH,gBAAgB,CAAC,IAAI,EAAE,QAAQ;IAO/B,WAAW,CAAC,UAAU,EAAE,UAAU;IAYlC,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;IAyB7D,gBAAgB,CAAC,UAAU,EAAE,UAAU,EAAE,WAAW,GAAE,OAAe;IAwErE,aAAa,CAAC,UAAU,EAAE,UAAU,GAAG,KAAK,CAAC,QAAQ,CAAC;IAoDtD,MAAM,CAAC,QAAQ,CAAC,IAAI,SAAgB,GAAG,MAAM;CAM9C;AAKD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,IAAI,CAAA;KACpB;CACF"}
1
+ {"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/widgets/Grid.ts"],"names":[],"mappings":"AAIA,OAAO,IAAI,MAAM,2BAA2B,CAAA;AAC5C,OAAO,QAAQ,MAAM,yBAAyB,CAAA;AAI9C,OAAO,KAAK,cAAc,MAAM,+BAA+B,CAAA;AAC/D,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAA;AAOnD,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,IAAI;IACpC,KAAK,SAAS;IAGd,cAAc,CAAC,EAAE,cAAc,CAAA;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,KAAK,EAAE,KAAK,CAAK;IACjB,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAG7B,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,gBAAgB,CAAC,EAAE,WAAW,CAAA;IAC9B,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAK;IAC7B,gBAAgB,CAAC,EAAE,cAAc,CAAA;IACjC,iBAAiB,CAAC,EAAE,UAAU,CAAA;IAC9B,gBAAgB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAmB;;IA0ClD,KAAK;IAkFL,iBAAiB,CAAC,EAChB,WAAW,EACX,QAAQ,EACR,QAAQ,GACT,EAAE;QACD,WAAW,EAAE,MAAM,CAAA;QACnB,QAAQ,EAAE,OAAO,CAAA;QACjB,QAAQ,EAAE,OAAO,CAAA;KAClB;IA4BD,kBAAkB;IAmBlB,qBAAqB,CAAC,QAAQ,EAAE,cAAc,EAAE,QAAQ,EAAE,cAAc;IA6BxE,qBAAqB;IAqBrB;;OAEG;IACG,oBAAoB;IAuB1B,aAAa,CAAC,KAAK,EAAE,mBAAmB;IAaxC;;OAEG;IACH,wBAAwB;IAexB;;OAEG;IACH,oBAAoB;IAepB;;OAEG;IACH,gBAAgB,CAAC,IAAI,EAAE,QAAQ;IAO/B,WAAW,CAAC,UAAU,EAAE,UAAU;IAYlC,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;IAwB7D,gBAAgB,CAAC,UAAU,EAAE,UAAU,EAAE,WAAW,GAAE,OAAe;IA6ErE,aAAa,CAAC,UAAU,EAAE,UAAU,GAAG,KAAK,CAAC,QAAQ,CAAC;IAoDtD,MAAM,CAAC,QAAQ,CAAC,IAAI,SAAgB,GAAG,MAAM;CAM9C;AAKD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,IAAI,CAAA;KACpB;CACF"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@behold/widget",
3
- "version": "0.5.141",
3
+ "version": "0.5.143",
4
4
  "author": "Griffin Johnston",
5
5
  "license": "UNLICENSED",
6
6
  "keywords": [
@@ -1 +0,0 @@
1
- import{c as t,l as s,g as i,d as e,m as o,s as h,j as r}from"./index-CyQNRHCL.js";import{B as n,a,b as l,A as c,c as d,g as u}from"./base-Dt_vAgSJ.js";import{c as p,a as g}from"./caret-right-CN2RPSyP.js";const b=/^mozilla\/\d\.\d\W/,f=/(\w+)\/(\d+\.\d+(?:\.\d+)?(?:\.\d+)?)/g,m=/^(ver|cri|gec)/,v=["chrome","opera","safari","edge","firefox"],w="Unknown";let x=window.navigator.userAgentData,y=window.navigator.userAgent;const S={iphone:/iphone/,ipad:/ipad|macintosh/,android:/android/},P={windows:/win/,mac:/macintosh/,linux:/linux/},_=function(){if(y){const t=y.toLowerCase().replace(b,""),s=Object.keys(S).find(s=>S[s].test(t)&&window.navigator.maxTouchPoints>=1),i=Object.keys(P).find(s=>P[s].test(t)),e=s||i,o=t.match(f),h=/version\/(\d+(\.\d+)*)/,r=t.match(h),n=Array.isArray(r)?r[1]:null,a=o&&(o.length>2&&!m.test(o[1])?1:0),l=o&&o[o.length-1-(a||0)].split("/");return{os:e,browser:l&&l[0],version:n||l&&l[1]}}if(x){const t=x.platform.toLowerCase();let s;for(const t of x.brands){const i=t.brand.toLowerCase(),e=v.find(t=>{if(i.includes(t))return t});if(e){s={browser:e,version:t.version};break}}return{os:t,...s||{browser:w,version:w}}}return console.error("Could not find `userAgent` or `userAgentData` window.navigator properties to set `os`, `browser` and `version`"),{os:navigator.platform||w,browser:w,version:w}}(),C={mass:1,naturalFrequency:7,dampingRatio:.65},M={mass:1,naturalFrequency:4.5,dampingRatio:.65},k={mass:1,naturalFrequency:2,dampingRatio:1},E={mass:1,naturalFrequency:2,dampingRatio:1};class R{containerEl;slideEls;height;gap;borderRadius;applyBorderRadiusToContainer;snapToSlide;bindToScrollPos;resizeObserver;onSlideChange;onReachEnd;startIndex;t;i;o;h;l;u;p;m;v;S;P;_;C;M;k;R;T;$;I;A;L;B;F;j;O;G;V;q;D;atEnd;anchorSlide;constructor({onSlideChange:t,onReachEnd:s}){this.l=[],this.h=new Map,this.u=!1,this.p=0,this.m=!1,this.v=!1,this.S=0,this.P=0,this._=0,this.anchorSlide=0,this.C=0,this.k={start:0,previous:0},this.R=[],this.T=15,this.$=0,this.B=1/60,this.F=3,this.borderRadius=20,this.applyBorderRadiusToContainer=!1,this.gap=20,this.height=300,this.snapToSlide=!1,this.bindToScrollPos=!1,this.atEnd=!1,this.I=40,this.A=0,this.L=0,this.j=window.innerHeight,this.O=null,this.G=0,this.V=()=>{},this.onSlideChange=t,this.onReachEnd=s;let i=window.ResizeObserver;"ResizeObserver"in window==0&&(i=window.BeholdResizeObserver),this.resizeObserver=new i(t=>this.handleResize(t)),this.handlePointerdown=this.handlePointerdown.bind(this),this.handlePointermove=this.handlePointermove.bind(this),this.handlePointerup=this.handlePointerup.bind(this),this.handleVirtObserver=this.handleVirtObserver.bind(this)}init({containerEl:s,slideEls:i,height:e=300,gap:o=20,borderRadius:h=40,applyBorderRadiusToContainer:r=!0,snapToSlide:n=!1,bindToScrollPos:a=!1,startIndex:l=0}){this.startIndex=l,this.containerEl=s,this.slideEls=i.map(s=>t({classes:"ec-slide",contents:s,style:{backgroundColor:s.backgroundColor}})),this.o=i,this.t=s.offsetWidth,this.i=s?.scrollWidth||0,this.M=this.t-this.i,this.u=!1,this.p=0,this.D=new IntersectionObserver(this.handleVirtObserver,{root:this.containerEl,rootMargin:`0px ${this.t/4}px 0px ${this.t}px`}),this.updateSettings({height:e,gap:o,borderRadius:h,applyBorderRadiusToContainer:r,snapToSlide:n,bindToScrollPos:a}),this.addEventListeners(),this.containerEl.style.setProperty("--ec-container-width",`${this.t}px`),this.t<600&&(this.T=12),l>0&&(this.containerEl.style.opacity="0"),this.containerEl.beholdReplaceChildren(...this.slideEls),this.updateDimensions(),this.u=!0,this.loop(performance.now())}handleVirtObserver(t){t.forEach(t=>{const s=t.target,i=this.slideEls.indexOf(s);this.setVirtualization(s,i,t.isIntersecting)})}updateSettings({height:t=300,gap:s=20,borderRadius:i=40,applyBorderRadiusToContainer:e=!0,snapToSlide:o=!1,bindToScrollPos:h=!1}){cancelAnimationFrame(this.q),this.q=requestAnimationFrame(()=>{this.height=t,this.gap=s,this.borderRadius=Math.min(i/100*this.height,.45*this.t*.5),this.I=Math.max(this.borderRadius,40),this.applyBorderRadiusToContainer=e,this.snapToSlide=o,this.bindToScrollPos=h,this.containerEl.style.setProperty("--ec-height",`${this.height}px`),this.containerEl.style.setProperty("--ec-border-radius",this.applyBorderRadiusToContainer?`${this.borderRadius}px`:"0px"),this.snapToSlide&&(this.C=-this.getClosestSlideToPoint(this.C).leftEdge)})}destroy(){this.u=!1,cancelAnimationFrame(this.q),this.removeEventListeners(),this.slideEls?.length&&this.slideEls.forEach(t=>{t.remove()}),this.slideEls=null,this.containerEl=null}handleResize(t){let s=null;t&&t.forEach(t=>{t.target===this.containerEl&&(s=t.borderBoxSize?t.borderBoxSize[0].inlineSize:t.contentRect.width)}),this.updateDimensions(s)}addEventListeners(){this.removeEventListeners(),this.slideEls.length&&this.slideEls.forEach(t=>{this.resizeObserver.observe(t),this.D.observe(t)}),this.containerEl&&(this.resizeObserver.observe(this.containerEl),this.containerEl.addEventListener("pointerdown",this.handlePointerdown),document.addEventListener("pointermove",this.handlePointermove,{passive:!0}),document.addEventListener("pointerup",this.handlePointerup),document.body.addEventListener("pointerleave",this.handlePointerup))}removeEventListeners(){this.resizeObserver.disconnect(),this.containerEl&&(this.containerEl.removeEventListener("pointerdown",this.handlePointerdown),document.removeEventListener("pointermove",this.handlePointermove),document.removeEventListener("pointerup",this.handlePointerup))}handlePointerdown(t){this.m=!0,this.P=this._,this.C=this._,this.k.start=t.clientX,this.k.previous=t.clientX,this.updateDimensions()}handlePointermove(t){if(!this.m)return;const i=t.clientX-this.k.start;Math.abs(i)>10&&this.containerEl.classList.add("ec-is-dragging"),this.C=this.P+i,s(this.R,t.clientX-this.k.previous,10),this.k.previous=t.clientX}handlePointerup(){var t;this.containerEl.classList.remove("ec-is-dragging"),this.m=!1,this.C+=((t=this.R).length?t.reduce((t,s)=>t+s,0)/t.length:0)*this.T}updateDimensions(t){this.t=t||this.containerEl.offsetWidth;let s=0;this.l=this.slideEls.map((t,i)=>{let e=t.offsetWidth,o=s;return s+=e,i<this.l.length-1&&(s+=this.gap),{width:e,x:o}}),this.i=s,this.M=this.t-this.i,this.containerEl.style.setProperty("--ec-container-width",`${this.t}px`),this.t<600?this.T=12:this.T=15}isAtBoundary(){return this.C>0||this.C<this.t-this.i}getPhysicsConfig(){return this.m?C:this.v?M:this.isAtBoundary()?k:E}updatePosition(){if(!this.m)if(this.C>0)this.C-=.25*this.C;else if(this.C<this.M){const t=this.C-this.M;this.C-=.25*t}const t=this.B,s=this._-this.C,i=Math.abs(s)<.01&&Math.abs(this.S)<.01;if(!this.m&&i)return this._=this.C,void(this.S=0);const e=this.getPhysicsConfig(),{mass:o,naturalFrequency:h,dampingRatio:r}=e,n=o*(2*h*Math.PI)**2,a=(-n*s+-2*r*Math.sqrt(n*o)*this.S)/o;this.S+=a*t,this._+=this.S*t}getClosestSlideToPoint(t){return this.l.reduce((s,i,e)=>{const o=Math.abs(s.cumulativeWidth+t);return o<s.distanceFromTarget?{index:e,distanceFromTarget:o,leftEdge:s.cumulativeWidth,cumulativeWidth:s.cumulativeWidth+i.width+this.gap}:{...s,cumulativeWidth:s.cumulativeWidth+i.width+this.gap}},{index:0,distanceFromTarget:1/0,leftEdge:0,cumulativeWidth:0})}updateScrollPos(){this.V(),this.V=i(this.containerEl,t=>{this.t=t.width,this.M=this.t-this.i;const s=Math.max(Math.min((this.j-t.top)/(this.j+t.height),1),0);if(s!==this.G){this.v=!0;const t=this.G-s,i=this.j*t*.5;this.C+=i,this.C=Math.max(Math.min(0,this.C),this.t-this.i),this.G=s}this.O=t})}getSlidePositions(){const t=this._;let s=t,i=!1;const e=this.slideEls.map((e,o)=>{const h=this.o[o],r=this.l[o]?.width;o>0&&(s+=this.l[o-1]?.width+this.gap);let n=0,a=0,l=0,c=0,d=Math.min(r*this.F,this.t);const u=this.l[o];u&&u.x+u.width*this.F>this.i&&(d=r*(this.slideEls.length-o)+Math.round(this.A*this.F));let p=Math.min(Math.max(d-Math.max(this.t-s+Math.round(this.A*this.F),0),0)/(d-this.I),1);const g=(r-this.I)*p;if(l=g,n=-g/2,c-=g,s<this.t&&s+r-l+this.gap>=this.t&&t<=0){const t=r-a-l,e=this.I-(this.t-s)<=0?t:this.t-s,h=this.t-(s+e);h>0&&!this.A&&(this.A=h,this.L=o+1,i=!0),e<this.I/2&&!this.A&&(this.A=e+this.gap,this.L=o+1,i=!0)}Math.round(s-this.gap)<=0&&Math.round(r+s)>0&&(o!==this.anchorSlide&&this.onSlideChange&&this.onSlideChange(o),this.anchorSlide=o),s<=0&&(a=Math.min(Math.abs(s),r-this.I),n=s/-2);const b={el:e,contentEl:h,xPos:s,rightClipInset:l,leftClipInset:a,innerTranslate:n};return s+=c,b});return i?this.getSlidePositions():e}setVirtualization(t,s,i=!0){if(i){if(t.childElementCount>0)return;const s=this.h.get(t);s&&(t.replaceChildren(s),this.h.delete(t),t.style.width="")}else{if(!t.firstElementChild||!this.l[s])return;const i=t.firstElementChild;t.style.width=`${this.l[s].width}px`,t.style.backgroundColor=i.backgroundColor,this.h.set(t,t.removeChild(t.firstElementChild))}}positionSlides(){this.getSlidePositions().forEach(({el:t,contentEl:s,xPos:i,rightClipInset:e,leftClipInset:o,innerTranslate:h},r)=>{const n=this.l[r]?.width-e-o,a=Math.min(this.borderRadius,n/2);t?.style.setProperty("--transform",`translate3d(${i}px, 0 ,0)`),this.h.has(t)||(t?.style.setProperty("--clip",`inset(0 ${e}px 0 ${o}px round ${a}px)`),s?.style.setProperty("--content-transform",`translate3d(${h}px, 0, 0)`))})}goToSlide(t,s=!0){t=Math.max(Math.min(t,this.slideEls.length-1),0),this.updateDimensions(),t===this.l.length-1?this.C=this.M:(this.C=this.l[t]?.x||0===this.l[t]?.x?-this.l[t]?.x:this.C,this.C=Math.max(this.C,this.M)),s||(this._=this.C)}advance(){this.goToSlide(Math.min(this.getClosestSlideToPoint(this.C).index+1,this.slideEls.length-1))}retreat(){this.goToSlide(Math.max(this.getClosestSlideToPoint(this.C).index-1,0))}render(){if(this.R.shift(),!this.slideEls)return;this.bindToScrollPos&&this.updateScrollPos();const t=this.getClosestSlideToPoint(this.M),s=this.C+t.leftEdge<=0;if(this.snapToSlide&&!this.m&&!this.isAtBoundary()&&!s){const t=this.getClosestSlideToPoint(this.C);this.C=-t.leftEdge}this.atEnd=t.cumulativeWidth+this.C-this.t-this.gap<=0,this.atEnd&&this.onReachEnd?this.onReachEnd(!0):this.onReachEnd(!1),this.updatePosition(),this.positionSlides(),this.v=!1,this.startIndex>0&&(this.p<4&&(1==this.p&&this.goToSlide(this.startIndex,!1),3==this.p&&(this.containerEl.style.opacity="")),this.p++)}loop(t){if(!this.u)return;const s="safari"===_.browser?8:12;t-this.$>s&&(this.render(),this.$=t),requestAnimationFrame(t=>this.loop(t))}}class T extends n{label="ElasticCarousel";widgetSettings;feedMetadata;posts;previewLoadingColors=null;startIndex=0;containerEl;headerEl;innerEl;footerEl;instagramLogoEl;labelEl;leftArrowEl;rightArrowEl;slidesContainerEl;postEls;popoverGalleryEl;langDirection;appliedBreakpoint;medianPaletteHSL;gyre;constructor(){super(),this.onPropChange(this.H,["widgetSettings","feedMetadata","posts","previewLoadingColors","startIndex"],["widgetSettings","feedMetadata","posts"],this.setup),a.register(),l.register(),c.register(),this.gyre=new R({onSlideChange:t=>this.W(t),onReachEnd:t=>this.J(t)}),this.U=this.U.bind(this),this.N=this.N.bind(this),this.addEventListener("post-focus-next",this.K),this.addEventListener("post-focus-previous",this.X),this.onConnect(()=>{e("elasticCarousel: onConnect"),this.N(),this.containerEl||(this.slidesContainerEl=t({classes:"ec-slides"}),this.headerEl=t({type:"header",classes:"ec-header",attributes:{dir:"ltr"}}),this.innerEl=t({classes:"ec-inner",contents:[this.slidesContainerEl]}),this.footerEl=t({type:"footer",classes:"ec-footer",attributes:{dir:"ltr"}}),this.labelEl=t({classes:"ec-label",attributes:{dir:this.langDirection??"ltr"}}),this.leftArrowEl=t({type:"button",classes:"ec-button ec-retreat",contents:[p],listeners:{click:()=>this.Y()},attributes:{tabindex:-1,disabled:!0,"aria-hidden":!0}}),this.rightArrowEl=t({type:"button",classes:"ec-button ec-advance",contents:[g],listeners:{click:()=>this.Z()},attributes:{tabindex:-1,"aria-hidden":!0}}),this.containerEl=t({type:"figure",classes:"ec-carousel",contents:[this.innerEl]})),this.renderWidget(this.containerEl,[d,'.ec-carousel{--ec-controls-margin:20px;--ec-button-border-radius:40%;--ec-icon-color:#4a4a4a;--ec-text-color:#4a4a4a;--ec-button-color:#f4f4f4;--ec-button-hover-color:#ececec;--ec-button-icon-color:#4a4a4a;--ec-button-icon-hover-color:#2e2e2e;--ec-button-gap:min(calc(var(--ec-controls-margin)/2),5px);flex-direction:column;height:var(--ec-height);margin:0;overflow:hidden;width:100%}.ec-carousel,.ec-inner{display:flex;justify-content:center}.ec-inner{align-items:center}.ec-slides{border-radius:var(--ec-border-radius);cursor:grab;height:var(--ec-height);justify-content:flex-start;overflow:hidden;position:relative;touch-action:pan-y;width:100%}.ec-slide,.ec-slides{display:flex;isolation:isolate}.ec-slide{clip-path:var(--clip);flex-shrink:0;height:100%;left:0;max-width:calc(var(--ec-container-width)*.45);position:absolute;top:0;transform:var(--transform);-moz-user-select:none;user-select:none;-webkit-user-select:none;will-change:clip-path,transform}.ec-slide behold-album-post,.ec-slide behold-image-post,.ec-slide behold-video-post{transform:var(--content-transform)}.ec-slide .post--placeholder{aspect-ratio:unset;height:100%}.ec-is-dragging{cursor:grabbing}.ec-is-dragging .ec-slide{pointer-events:none}.ec-footer,.ec-header{display:flex;justify-content:center}.ec-carousel--controls-sides .ec-footer,.ec-carousel--controls-sides .ec-header{padding:0 64px;padding-inline:64px}.ec-header{margin-bottom:var(--ec-controls-margin)}.ec-footer{margin-top:var(--ec-controls-margin)}.ec-label{align-items:center;display:flex;flex-shrink:1;gap:7px 5px;line-height:1.2;min-width:0;overflow:hidden;text-overflow:ellipsis;-moz-user-select:none;user-select:none;-webkit-user-select:none}.ec-carousel--controls-center .ec-button+.ec-label,.ec-carousel--controls-split .ec-button+.ec-label{margin:0 max(calc(var(--ec-controls-margin)*1.5),20px)}.ec-carousel--label-right .ec-label{margin-left:auto}.ec-carousel--label-left .ec-label{margin-right:auto}.ec-label svg{flex-shrink:0;height:24px;margin-right:5px;width:24px}.ec-label svg path{fill:var(--behold-icon-color,var(--ec-icon-color))}.ec-label a,.ec-label div{color:var(--behold-text-color,var(--ec-text-color));display:inline-block;font-family:inherit;font-size:19px;overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.ec-button,.ec-carousel--controls-center .ec-footer,.ec-carousel--controls-center .ec-header{justify-content:center}.ec-button{align-items:center;background-color:transparent;border:none;cursor:pointer;display:flex;flex-shrink:0;height:44px;padding:0;touch-action:manipulation;transition:all .3s ease;width:44px}.ec-carousel--controls-sides .ec-button{height:var(--ec-height);width:64px}.ec-button:disabled{cursor:default;opacity:.5}.ec-button:before{background-color:var(--behold-button-color,var(--ec-button-color));border-radius:var(--ec-button-border-radius);content:"";height:44px;position:absolute;transition:all .3s ease;width:44px}.ec-button:not(:disabled):hover:before{background-color:var(\n --behold-button-hover-color,var(--ec-button-hover-color)\n )}.ec-button svg{height:14px;position:relative;width:auto;z-index:1}.ec-button svg path{fill:var(--behold-button-icon-color,var(--ec-button-icon-color));transition:all .3s ease}.ec-button:not(:disabled):hover svg path{fill:var(\n --behold-button-icon-hover-color,var(--ec-button-icon-hover-color)\n )}.ec-retreat{padding-right:var(--ec-button-gap);width:calc(44px + var(--ec-button-gap))}.ec-retreat:dir(rtl){padding-right:0;padding-inline-end:var(--ec-button-gap)}.ec-carousel--controls-split .ec-retreat{margin-right:auto}.ec-carousel--controls-split .ec-retreat:dir(rtl){margin-right:0;margin-inline-end:auto}.ec-carousel--controls-right .ec-retreat{margin-left:auto}.ec-carousel--controls-right .ec-retreat:dir(rtl){margin-left:0;margin-inline-start:auto}.ec-advance{padding-left:var(--ec-button-gap);width:calc(44px + var(--ec-button-gap))}.ec-advance:dir(rtl){padding-left:0;padding-inline-start:var(--ec-button-gap)}.ec-carousel--controls-split .ec-advance{margin-left:auto}.ec-carousel--controls-split .ec-advance:dir(rtl){margin-left:0;margin-inline-start:auto}.ec-carousel--controls-left .ec-advance{margin-right:auto;margin-inline-end:auto}.ec-carousel--controls-left .ec-advance:dir(rtl){margin-right:0;margin-inline-end:auto}.ec-carousel--controls-sides .ec-retreat{padding-right:20px}.ec-carousel--controls-sides .ec-advance{padding-left:20px}.post{height:100%;max-width:calc(var(--ec-container-width)*.45)}.post a{-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.post--placeholder{background-color:#dedede;height:0;min-height:100%;padding-bottom:calc(100%/var(--post-aspect-ratio))}']),this.setAttribute("tabindex","0"),this.setAttribute("aria-label","Gallery of Instagram posts. Shift + arrow keys to navigate"),this.onResize(this,this,this.tt)})}setup(){if(e("elasticCarousel: setup"),"transparent"!==this.widgetSettings.loadingColor){const t=this.posts.filter(t=>t.colorPalette).map(t=>t.colorPalette);this.medianPaletteHSL=u(t,this.widgetSettings.loadingColor)}const t=this.getMatchingBreakpoint(this.offsetWidth,this.widgetSettings.breakpoints);this.renderBreakpoint(t),o(this.containerEl,{"--ec-icon-color":this.widgetSettings.iconColor,"--ec-text-color":this.widgetSettings.textColor,"--ec-button-color":this.widgetSettings.buttonColor,"--ec-button-hover-color":this.widgetSettings.buttonHoverColor,"--ec-button-icon-color":this.widgetSettings.buttonIconColor,"--ec-button-icon-hover-color":this.widgetSettings.buttonIconHoverColor}),this.postEls&&this.postEls.forEach(t=>{t.widgetSettings=this.widgetSettings,t.feedMetadata=this.feedMetadata}),this.st(),"openPopupGallery"===this.widgetSettings.onPostClick&&this.enablePopoverGallery(),this.previewLoadingColors&&(this.postEls.forEach(t=>{t.previewLoadingColors=this.previewLoadingColors}),h(this,{"is-previewing-loading-colors":!!this.previewLoadingColors}))}N(){const t=getComputedStyle(document.body);this.langDirection=t.direction}st(){e("elasticCarousel: buildLabel");const s=document.createElement("template");s.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><path d="M295.42,6c-53.2,2.51-89.53,11-121.29,23.48-32.87,12.81-60.73,30-88.45,57.82S40.89,143,28.17,175.92c-12.31,31.83-20.65,68.19-23,121.42S2.3,367.68,2.56,503.46,3.42,656.26,6,709.6c2.54,53.19,11,89.51,23.48,121.28,12.83,32.87,30,60.72,57.83,88.45S143,964.09,176,976.83c31.8,12.29,68.17,20.67,121.39,23s70.35,2.87,206.09,2.61,152.83-.86,206.16-3.39S799.1,988,830.88,975.58c32.87-12.86,60.74-30,88.45-57.84S964.1,862,976.81,829.06c12.32-31.8,20.69-68.17,23-121.35,2.33-53.37,2.88-70.41,2.62-206.17s-.87-152.78-3.4-206.1-11-89.53-23.47-121.32c-12.85-32.87-30-60.7-57.82-88.45S862,40.87,829.07,28.19c-31.82-12.31-68.17-20.7-121.39-23S637.33,2.3,501.54,2.56,348.75,3.4,295.42,6m5.84,903.88c-48.75-2.12-75.22-10.22-92.86-17-23.36-9-40-19.88-57.58-37.29s-28.38-34.11-37.5-57.42c-6.85-17.64-15.1-44.08-17.38-92.83-2.48-52.69-3-68.51-3.29-202s.22-149.29,2.53-202c2.08-48.71,10.23-75.21,17-92.84,9-23.39,19.84-40,37.29-57.57s34.1-28.39,57.43-37.51c17.62-6.88,44.06-15.06,92.79-17.38,52.73-2.5,68.53-3,202-3.29s149.31.21,202.06,2.53c48.71,2.12,75.22,10.19,92.83,17,23.37,9,40,19.81,57.57,37.29s28.4,34.07,37.52,57.45c6.89,17.57,15.07,44,17.37,92.76,2.51,52.73,3.08,68.54,3.32,202s-.23,149.31-2.54,202c-2.13,48.75-10.21,75.23-17,92.89-9,23.35-19.85,40-37.31,57.56s-34.09,28.38-57.43,37.5c-17.6,6.87-44.07,15.07-92.76,17.39-52.73,2.48-68.53,3-202.05,3.29s-149.27-.25-202-2.53m407.6-674.61a60,60,0,1,0,59.88-60.1,60,60,0,0,0-59.88,60.1M245.77,503c.28,141.8,115.44,256.49,257.21,256.22S759.52,643.8,759.25,502,643.79,245.48,502,245.76,245.5,361.22,245.77,503m90.06-.18a166.67,166.67,0,1,1,167,166.34,166.65,166.65,0,0,1-167-166.34" transform="translate(-2.5 -2.5)"/><title>Instagram</title></svg>';let i=`https://instagram.com/${this.feedMetadata.username}`;if(this.widgetSettings.labelLink?.length&&(i=this.widgetSettings.labelLink),this.widgetSettings.labelLink?.length||this.widgetSettings.label?.length){const e=t({type:"a",contents:this.widgetSettings.label?.length?this.widgetSettings.label:this.feedMetadata.username,attributes:{href:i,target:"_blank"}});this.labelEl.beholdReplaceChildren(s.content,e)}else if(this.feedMetadata.hashtags?.length){const i=this.feedMetadata.hashtags.map((s,i,e)=>t({type:"a",contents:["#",s,i<e.length-1?", ":""],attributes:{target:"_blank",href:`https://instagram.com/explore/tags/${s}`}}));this.labelEl.beholdReplaceChildren(s.content,...i)}else{const e=t({type:"a",contents:[this.feedMetadata.username],attributes:{target:"_blank",href:i}});this.labelEl.beholdReplaceChildren(s.content,e)}}W(t){0===t&&this.leftArrowEl?this.leftArrowEl.disabled=!0:this.leftArrowEl.disabled=!1,this.gyre.atEnd?this.rightArrowEl.disabled=!0:this.rightArrowEl.disabled=!1,this.dispatchEvent(new CustomEvent("slide-change",{bubbles:!0,composed:!0,detail:{index:t,currentPost:this.posts?.[t??0]}}))}J(t){this.rightArrowEl.disabled=!!t}H({changedProp:t,oldValue:s,newValue:i}){switch(t){case"posts":this.it({oldValue:s,newValue:i});break;case"widgetSettings":this.et(s,i);break;case"feedMetadata":this.ot();break;case"previewLoadingColors":this.postEls.forEach(t=>{t.previewLoadingColors=this.previewLoadingColors}),h(this,{"is-previewing-loading-colors":!!this.previewLoadingColors})}}it({oldValue:t,newValue:s}){this.postEls=[],this.renderBreakpoint(this.getMatchingBreakpoint(this.offsetWidth,this.widgetSettings.breakpoints),!0),this.postEls.forEach(t=>{t.widgetSettings=this.widgetSettings,t.feedMetadata=this.feedMetadata}),this.popoverGalleryEl&&(this.popoverGalleryEl.posts=this.posts)}et(t,s){let i=!1;this.postEls?.length&&!r(t.breakpoints,s.breakpoints,["postHeight"],1)||(i=!0),o(this.containerEl,{"--ec-icon-color":s.iconColor,"--ec-text-color":s.textColor,"--ec-button-color":s.buttonColor,"--ec-button-hover-color":s.buttonHoverColor,"--ec-button-icon-color":s.buttonIconColor,"--ec-button-icon-hover-color":s.buttonIconHoverColor}),r(t,s,["label","labelLink"])&&this.st(),"openPopupGallery"!==t?.onPostClick&&"openPopupGallery"===s?.onPostClick&&this.enablePopoverGallery();const e=this.getMatchingBreakpoint(this.offsetWidth,s.breakpoints);this.renderBreakpoint(e,i),this.postEls.forEach(t=>{t.widgetSettings=s}),this.popoverGalleryEl&&(this.popoverGalleryEl.widgetSettings=s)}ot(){let t=`from @${this.feedMetadata.username}`;this.feedMetadata.hashtags?.length&&(t=`from hashtag${this.feedMetadata.hashtags.length>1?"s":""} ${this.feedMetadata.hashtags.join(", ")}`),this.setAttribute("aria-label",`Gallery of Instagram posts ${t}. Shift + arrow keys to navigate`),this.postEls.forEach(t=>{t.feedMetadata=this.feedMetadata}),this.popoverGalleryEl&&(this.popoverGalleryEl.feedMetadata=this.feedMetadata)}async enablePopoverGallery(){if(this.popoverGalleryEl)return;const{default:t}=await import("./PopoverGallery-CQUBmiu_.js");t.register(),this.popoverGalleryEl=document.createElement("behold-popover-gallery"),Object.assign(this.popoverGalleryEl,{widgetSettings:this.widgetSettings,feedMetadata:this.feedMetadata,posts:this.posts,closeFocusEl:this,onSlideChange:t=>{"number"==typeof t&&(this.gyre.goToSlide(t),this.popoverGalleryEl.closeFocusEl=this.postEls[t])}})}tt(t){const s=t.contentBoxSize?.[0]?.inlineSize,i=this.widgetSettings.breakpoints,e=this.getMatchingBreakpoint(s,i);this.renderBreakpoint(e)}X(){if(!this.postEls.length)return;let t=[...this.postEls].indexOf(this.shadow.activeElement?.parentElement);t>0&&(t-=1),this.postEls[t].focus(),this.gyre.goToSlide(t)}K(){if(!this.postEls.length)return;let t=[...this.postEls].indexOf(this.shadow.activeElement?.parentElement);this.gyre.anchorSlide>0&&t<this.gyre.anchorSlide&&(t=this.gyre.anchorSlide),t>-1&&t<this.postEls.length-1&&(t+=1),t<0&&(t=0),this.postEls[t].focus(),this.gyre.goToSlide(t)}U(t){this.popoverGalleryEl.open(this.postEls.indexOf(t),t)}Z(){this.gyre&&this.gyre.advance()}Y(){this.gyre&&this.gyre.retreat()}renderPosts(t){this.postEls=this.createPostEls(t),e("elasticCarousel: renderPosts"),this.raf(()=>{this.gyre.destroy(),this.gyre.init({containerEl:this.slidesContainerEl,slideEls:this.postEls,height:t.postHeight,gap:t.gap.x,borderRadius:parseInt(t.borderRadius),applyBorderRadiusToContainer:t.applyBorderRadiusToContainer||!0,snapToSlide:t.snapToSlide||!1,bindToScrollPos:t.bindToScrollPos||!1,startIndex:this.startIndex})},"renderPosts")}getMatchingBreakpoint(t,s){e("elasticCarousel: getMatchingBreakpoint");const i=Object.entries(s).map(([t,s])=>({width:t,...s})).filter(t=>"default"!==t.width).sort((t,s)=>parseInt(s.width)-parseInt(t.width)).reduce((s,i)=>t<=parseInt(i.width)?i:s,s.default);return{...s.default,...i}}renderBreakpoint(t,s=!1){if(!this.posts||!this.containerEl)return;e("elasticCarousel: renderBreakpoint"),this.N();const i=this.appliedBreakpoint,{showControls:n,controlsPosition:a,controlsJustification:l,showLabel:c,labelPosition:d,labelJustification:u,buttonBorderRadius:p,controlsMargin:g,postHeight:b}=t;if(this.postEls?.length&&!r(i,t,["numPosts","forcePostAspectRatio","postAspectRatio","postHeight"])||(s=!0),b&&this.slidesContainerEl.style.setProperty("--ec-height",`${b}px`),this.widgetSettings.maxWidth&&this.widgetSettings.constrainWidth&&this.containerEl.style.maxWidth!==`${this.widgetSettings.maxWidth}px`&&(this.containerEl.style.maxWidth=`${this.widgetSettings.maxWidth}px`),this.widgetSettings.constrainWidth||(this.containerEl.style.maxWidth=""),this.leftArrowEl.remove(),this.rightArrowEl.remove(),r(i,t,["showControls","controlsPosition","controlsJustification","showLabel","labelPosition","labelJustification"])||n&&!this.leftArrowEl.isConnected||c&&!this.labelEl.isConnected){this.leftArrowEl.remove(),this.rightArrowEl.remove(),this.labelEl.remove(),this.headerEl.remove(),this.footerEl.remove(),o(this.containerEl,{"--ec-button-border-radius":`${p}%`,"--ec-controls-margin":`${g}px`}),h(this.containerEl,{"ec-carousel--controls-sides":"sides"===a,"ec-carousel--controls-left":"left"===l,"ec-carousel--controls-right":"right"===l,"ec-carousel--controls-center":"center"===l,"ec-carousel--controls-split":"split"===l,"ec-carousel--label-left":"left"===u,"ec-carousel--label-right":"right"===u,"ec-carousel--label-center":"left"===u}),c&&("top"===d&&this.headerEl.append(this.labelEl),"bottom"===d&&this.footerEl.append(this.labelEl));let t=this.innerEl;if("top"===a&&(t=this.headerEl),"bottom"===a&&(t=this.footerEl),n&&"sides"===a)"rtl"===this.langDirection?(t.append(this.leftArrowEl),t.prepend(this.rightArrowEl)):(t.prepend(this.leftArrowEl),t.append(this.rightArrowEl));else if(n)switch(l){case"left":t.prepend(this.rightArrowEl),t.prepend(this.leftArrowEl);break;case"right":t.append(this.leftArrowEl),t.append(this.rightArrowEl);break;default:t.prepend(this.leftArrowEl),t.append(this.rightArrowEl)}this.headerEl.childElementCount&&this.containerEl.prepend(this.headerEl),this.footerEl.childElementCount&&this.containerEl.append(this.footerEl)}this.containerEl.setAttribute("data-hover-effect",this.widgetSettings.hoverEffect),s?this.renderPosts(t):this.gyre.updateSettings({height:t.postHeight,gap:t.gap.x,borderRadius:parseInt(t.borderRadius),applyBorderRadiusToContainer:t.applyBorderRadiusToContainer,snapToSlide:t.snapToSlide,bindToScrollPos:t.bindToScrollPos}),this.appliedBreakpoint=t}createPostEls(s){e("elasticCarousel: createPostEls");const{numPosts:i,postHeight:o,postAspectRatio:h,forcePostAspectRatio:r}=s,n=this.posts.filter((t,i)=>i<(s?.numPosts||this.posts?.length||12)),a=n.map((s,e)=>{const a=[s.sizes.full.width,s.sizes.full.height],l=r?h||[1,1]:a,c=l.reduce((t,s)=>t/s);let d="behold-image-post";return"VIDEO"===s.mediaType&&(d="behold-video-post"),"CAROUSEL_ALBUM"===s.mediaType&&(d="behold-album-post"),t({type:d,props:{post:s,widgetSettings:this.widgetSettings,feedMetadata:this.feedMetadata,medianPaletteHSL:this.medianPaletteHSL,onClick:this.U,hasRowGap:!0,isLastRow:!1,index:e,aspectRatio:l,totalPosts:n?.length||i||this.posts?.length||0},style:{width:o*c+"px","--post-aspect-ratio":c}})});for(;a.length<s.numPosts;){const s=t({classes:"post post--placeholder",style:{width:`${o}px`,"--post-aspect-ratio":1}});a.push(s)}return a}static register(t="behold-elastic-carousel"){return customElements.get(t)||customElements.define(t,T),t}}export{T as default};
@@ -1 +0,0 @@
1
- import{B as e,t,c as s,s as i}from"./index-CyQNRHCL.js";import{l as o}from"./logo-CAJXYQBc.js";class a extends e{label="ErrorMessage";shadow;linkEl;logoEl;styleEl;errorTitleEl;errorMessageEl;errorMessageTextEl;errorMessage;constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.onPropChange(this.t,["errorMessage"]),this.onConnect(()=>{this.onResize(this,this,t(this.i,50,this))}),this.onConnect(()=>{this.render()})}t({changedProp:e}){this.render()}render(){if(!this.errorMessage)return;const e=JSON.parse(this.errorMessage).message;let t="Error";e.includes("Upgrade")&&(t="Upgrade Required"),this.linkEl=s({type:"a",classes:"link",attributes:{href:"https://behold.so",target:"_blank"}}),this.logoEl=s({type:"div",classes:"logo",contents:o,attributes:{"aria-label":"behold"}}),this.errorTitleEl=s({classes:"message__title",contents:[t]}),this.errorMessageTextEl=s({classes:"message__inner"}),this.errorMessageTextEl.innerHTML=e?.replace("Upgrade your plan",'<a href="https://app.behold.so/account" target="blank">Upgrade your plan</a>'),this.errorMessageEl=s({classes:"message",contents:[this.errorTitleEl,this.errorMessageTextEl]}),this.styleEl=s({type:"style",contents:':host{align-items:center;background:#f4f3f0;background-size:auto 100%;border:none;border-radius:40px;box-shadow:none;box-sizing:border-box;color:#1a1a1a;display:flex;height:200px;justify-content:center;margin:0;max-width:750px;min-width:50px;outline:none;overflow:hidden;padding:20px;position:relative;width:100%}:host *{box-sizing:border-box}:host(.large){height:180px}:host(.medium),:host(.small){flex-direction:column-reverse;height:auto;padding:40px 30px}.logo{align-items:center;border-right:1px solid #1a1a1a;display:flex;flex-shrink:0;justify-content:center;padding:20px 40px 20px 0;width:auto}.logo svg{height:18px;width:auto}.logo svg path{fill:#1a1a1a}:host(.large) .logo{width:180px}:host(.large) .logo svg{height:18px}:host(.medium) .logo,:host(.small) .logo{align-items:center;border-right:none;display:flex;flex-direction:column;gap:20px;justify-content:center;padding:20px 0 7px;width:100%}:host(.medium) .logo:before,:host(.small) .logo:before{background-color:#1a1a1a;content:"";height:1px;width:40px}:host(.medium) .logo svg,:host(.small) .logo svg{height:16px}.message{align-items:flex-start;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:16px;gap:5px;justify-content:center;line-height:1.5;max-width:305px;padding:0 0 0 40px;text-align:left}.message a{color:#1a1a1a;display:inline-block;position:relative;text-decoration:underline;z-index:999}:host(.large) .message{font-size:15px}:host(.medium) .message{align-items:center;font-size:16px;gap:2px;padding:0;text-align:center}:host(.small) .message{align-items:center;font-size:15px;gap:2px;padding:0;text-align:center}.message__title{align-items:center;display:flex;font-size:22px;font-weight:400;justify-content:center}.message__title svg{height:25px;margin-right:15px;width:25px}:host(.large) .message__title{font-size:18px}:host(.large) .message__title svg{height:20px;margin-right:10px;width:20px}:host(.medium) .message__title,:host(.small) .message__title{flex-direction:column;font-size:20px;margin-bottom:10px}:host(.medium) .message__title svg,:host(.small) .message__title svg{margin-bottom:7px;margin-right:0}.link{border-radius:40px;height:100%;left:0;position:absolute;top:0;width:100%;z-index:998}.link:focus-visible{box-shadow:inset 0 0 0 3px #4169e1,inset 0 0 0 4px #fff}'.toString()}),this.shadow.beholdReplaceChildren(this.logoEl,this.errorMessageEl,this.linkEl,this.styleEl)}i(e){const t=e?.borderBoxSize?.[0]?.inlineSize||e?.contentRect?.width||0;let s="xlarge";t<600&&(s="large"),t<500&&(s="medium"),t<250&&(s="small"),["small","medium","large","xlarge"].forEach(e=>{const t=`${e}`;i(this,{[t]:e===s})})}static register(e="behold-error-message"){return customElements.get(e)||customElements.define(e,a),e}}export{a as default};
@@ -1 +0,0 @@
1
- import{d as t,c as s,s as e,m as i,f as h,t as a}from"./index-CyQNRHCL.js";import{B as o,a as r,b as l,A as n,c as p,g as d}from"./base-Dt_vAgSJ.js";import{B as g}from"./Branding-BBp9uyYk.js";import"./logo-CAJXYQBc.js";class c extends o{label="GalleryWall";widgetSettings;feedMetadata;posts;previewLoadingColors=null;containerEl;brandingEl;heightRefEl;postEls;popoverGalleryEl;appliedBreakpoint;medianPaletteHSL;constructor(){super(),this.onPropChange(this.t,["widgetSettings","feedMetadata","posts","previewLoadingColors"],["widgetSettings","feedMetadata","posts"],this.setup),r.register(),l.register(),n.register(),g.register(),this.i=this.i.bind(this),this.addEventListener("post-focus-next",this.h),this.addEventListener("post-focus-previous",this.o),this.onConnect(()=>{this.setAttribute("tabindex","0"),this.setAttribute("aria-label","Gallery of Instagram posts. Shift + arrow keys to navigate")})}setup(){if(t("galleryWall: setup"),!this.brandingEl&&this.feedMetadata.showBranding&&(this.brandingEl=s({type:"behold-branding"})),this.containerEl||(this.style.opacity="0",this.heightRefEl=s({classes:"height-ref"}),this.containerEl=s({type:"figure",classes:"posts",contents:[this.heightRefEl,this.feedMetadata.showBranding?this.brandingEl:""]})),this.renderWidget(this.containerEl,[p,".posts{display:block;min-height:100%;position:relative;width:100%}@media (hover:hover){.posts:hover behold-branding a{opacity:1!important;transform:none!important;transition:all .3s ease!important}}.height-ref{position:relative}.post{-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;border:none;color:inherit;display:block;font:inherit;height:100px;left:0;line-height:normal;overflow:hidden;position:absolute;top:0;transform-origin:top left;transition:background .3s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100px}.post--placeholder{background-color:#dedede;position:absolute}"]),this.onResize(this,this.containerEl,this.l),"transparent"!==this.widgetSettings.loadingColor){const t=this.posts.filter(t=>t.colorPalette).map(t=>t.colorPalette);this.medianPaletteHSL=d(t,this.widgetSettings.loadingColor)}const i=this.getMatchingBreakpoint(this.offsetWidth,this.widgetSettings.breakpoints);this.renderBreakpoint(i),this.style.opacity="","openPopupGallery"===this.widgetSettings.onPostClick&&this.enablePopoverGallery(),this.previewLoadingColors&&(this.postEls.forEach(t=>{t.previewLoadingColors=this.previewLoadingColors}),e(this,{"is-previewing-loading-colors":!!this.previewLoadingColors}))}t({changedProp:t,oldValue:s,newValue:i}){switch(t){case"posts":this.p();break;case"widgetSettings":this.u(s,i);break;case"feedMetadata":this.m();break;case"previewLoadingColors":this.postEls.forEach(t=>{t.previewLoadingColors=this.previewLoadingColors}),e(this,{"is-previewing-loading-colors":!!this.previewLoadingColors})}}p(){this.postEls=[],this.renderBreakpoint(this.appliedBreakpoint,!0),this.popoverGalleryEl&&(this.popoverGalleryEl.posts=this.posts)}u(t,s){"openPopupGallery"!==t?.onPostClick&&"openPopupGallery"===s?.onPostClick&&this.enablePopoverGallery(),this.renderBreakpoint(this.getMatchingBreakpoint(this.offsetWidth,this.widgetSettings.breakpoints)),this.postEls.forEach(t=>{t.widgetSettings=this.widgetSettings}),this.popoverGalleryEl&&(this.popoverGalleryEl.widgetSettings=this.widgetSettings)}m(){let t=`from @${this.feedMetadata.username}`;this.feedMetadata.hashtags?.length&&(t=`from hashtag${this.feedMetadata.hashtags.length>1?"s":""} ${this.feedMetadata.hashtags.join(", ")}`),this.setAttribute("aria-label",`Gallery of Instagram posts ${t}. Shift + arrow keys to navigate`),this.postEls.forEach(t=>{t.feedMetadata=this.feedMetadata}),this.popoverGalleryEl&&(this.popoverGalleryEl.feedMetadata=this.feedMetadata)}async enablePopoverGallery(){const{default:t}=await import("./PopoverGallery-CQUBmiu_.js");t.register(),this.popoverGalleryEl=document.createElement("behold-popover-gallery"),Object.assign(this.popoverGalleryEl,{widgetSettings:this.widgetSettings,feedMetadata:this.feedMetadata,posts:this.posts,closeFocusEl:this,onSlideChange:t=>{this.popoverGalleryEl.closeFocusEl=this.postEls[t]}})}l(s){t("galleryWall: handleResize");const e=s.contentBoxSize?.[0]?.inlineSize,i=this.widgetSettings.breakpoints,h=this.getMatchingBreakpoint(e,i);this.renderBreakpoint(h)}o(){if(!this.postEls.length)return;let t=[...this.heightRefEl.children].indexOf(this.shadow.activeElement?.parentElement);t>0?t-=1:t=this.postEls.length-1,this.postEls[t].focus()}h(){if(!this.postEls.length)return;let t=[...this.heightRefEl.children].indexOf(this.shadow.activeElement?.parentElement);t>-1&&t<this.postEls.length-1?t+=1:t=0,this.postEls[t].focus()}i(t){this.popoverGalleryEl.open(this.postEls.indexOf(t),t)}renderPosts(s){t("galleryWall: renderPosts"),this.postEls=this.createPostEls(s),this.raf(()=>{this.heightRefEl.beholdReplaceChildren(...this.postEls),t("galleryWall: renderPosts raf",this.heightRefEl.childElementCount,this.postEls)},"renderPosts")}getMatchingBreakpoint(t,s){const e=Object.entries(s).map(([t,s])=>({width:t,...s})).filter(t=>"default"!==t.width).sort((t,s)=>s.width.localeCompare(t.width)).reduce((s,e)=>t<=parseInt(e.width)?e:s,{...s.default,numPosts:s.default.galleryWallLayout.length});return{...s.default,numPosts:s.default.galleryWallLayout.length,...e}}renderBreakpoint(s,e=!1){t("galleryWall: renderBreakpoint"),this.cancelRaf("setContainerHeight"),this.postEls||(e=!0);const a=this.appliedBreakpoint;this.appliedBreakpoint=s;const{gap:o,borderRadius:r,numPosts:l,galleryWallLayout:n,galleryWallNamedLayout:p}=s;switch(this.widgetSettings.alignment){case"left":this.style.justifyContent="flex-start";break;case"right":this.style.justifyContent="flex-end";break;default:this.style.justifyContent="center"}this.widgetSettings.maxWidth&&this.widgetSettings.constrainWidth&&this.containerEl.style.maxWidth!==`${this.widgetSettings.maxWidth}px`&&(this.containerEl.style.maxWidth=`${this.widgetSettings.maxWidth}px`),this.widgetSettings.constrainWidth||(this.containerEl.style.maxWidth=""),this.containerEl.setAttribute("data-hover-effect",this.widgetSettings.hoverEffect),i(this.containerEl,{"--post-border-radius":`${r}%`}),(a?.numPosts!==l||a?.galleryWallNamedLayout!==p.toString()||e)&&this.renderPosts(s);const d=this.containerEl.offsetWidth,g=o.x/1e3*d,c=o.y/1e3*d;this.postEls.forEach((t,s)=>{const[e,i,h,a]=n?.[s]?n[s].split(",").map(t=>parseInt(t)):[0,0,10,10],o=e*(d/100)+g/2,r=i*(d/100);t.style.transform=`translate(${o}px, ${r}px`,t.style.width=h*(d/100)-g+"px",t.style.height=a*(d/100)-c+"px"}),h(),this.raf(()=>{this.setContainerHeight()},"setContainerHeight")}createPostEls(e){const{gap:i}=e,h=e?.numPosts||this.posts?.length||200,a=this.posts.filter((t,s)=>s<h),o=a.map((t,h)=>{let o="behold-image-post";return"VIDEO"===t.mediaType&&(o="behold-video-post"),"CAROUSEL_ALBUM"===t.mediaType&&(o="behold-album-post"),s({type:o,props:{post:t,widgetSettings:this.widgetSettings,feedMetadata:this.feedMetadata,medianPaletteHSL:this.medianPaletteHSL,onClick:this.i,hasRowGap:"0"!=`${i.y}`,index:h,aspectRatio:[1,1],totalPosts:a?.length||e?.numPosts||this.posts?.length||0}})});return o.length<e.galleryWallLayout.length&&e.galleryWallLayout.filter((t,s)=>s>=o.length).forEach(t=>{const e=s({classes:"post post--placeholder"});o.push(e)}),t("galleryWall: createPostEls",o),o}setContainerHeight=a(()=>{t("galleryWall: setContainerHeight",this.heightRefEl.scrollHeight),this.heightRefEl.isConnected&&(this.heightRefEl.scrollHeight>0?this.style.height=`${this.heightRefEl.scrollHeight}px`:this.raf(this.setContainerHeight,"setContainerHeight"))},10,this);static register(t="behold-gallery-wall"){return customElements.get(t)||customElements.define(t,c),t}}export{c as default};
@@ -1 +0,0 @@
1
- import{d as t,c as s,s as i,f as e,m as h}from"./index-CyQNRHCL.js";import{B as a,a as o,b as r,A as n,c as l,g as d}from"./base-Dt_vAgSJ.js";import{B as p}from"./Branding-BBp9uyYk.js";import"./logo-CAJXYQBc.js";class c extends a{label="Grid";widgetSettings;feedMetadata;posts;previewLoadingColors=null;containerEl;postsContainerEl;brandingEl;postEls;popoverGalleryEl;appliedBreakpoint;medianPaletteHSL;constructor(){super(),this.onPropChange(this.t,["widgetSettings","feedMetadata","posts","previewLoadingColors"],["widgetSettings","feedMetadata","posts"],this.setup),o.register(),r.register(),n.register(),p.register(),this.i=this.i.bind(this),this.addEventListener("post-focus-next",this.h),this.addEventListener("post-focus-previous",this.o),this.onConnect(()=>{t("grid: onConnect"),this.setAttribute("tabindex","0"),this.setAttribute("aria-label","Gallery of Instagram posts. Shift + arrow keys to navigate")})}setup(){if(t("grid: setup"),!this.brandingEl&&this.feedMetadata.showBranding&&(this.brandingEl=s({type:"behold-branding"})),this.postsContainerEl||(this.postsContainerEl=s({type:"div",classes:"posts"})),this.containerEl||(this.containerEl=s({type:"figure",classes:"container",contents:[this.postsContainerEl,this.feedMetadata.showBranding?this.brandingEl:""]})),this.renderWidget(this.containerEl,[l,".container{display:flex;margin:0;max-width:100%;padding:0;position:relative;width:100%}@media (hover:hover){.container:hover behold-branding a{opacity:1!important;transform:none!important;transition:all .3s ease!important}}.post--placeholder{background-color:#dedede;height:0;min-height:100%;padding-bottom:calc(100%/var(--post-aspect-ratio))}"]),this.onResize(this,this,this.l),"transparent"!==this.widgetSettings.loadingColor){const t=this.posts.filter(t=>t.colorPalette).map(t=>t.colorPalette);this.medianPaletteHSL=d(t,this.widgetSettings.loadingColor)}const e=this.getMatchingBreakpoint(this.offsetWidth,this.widgetSettings.breakpoints);this.renderBreakpoint(e),this.postEls&&this.postEls.forEach(t=>{t.widgetSettings=this.widgetSettings,t.feedMetadata=this.feedMetadata}),"openPopupGallery"===this.widgetSettings.onPostClick&&this.enablePopoverGallery(),this.previewLoadingColors&&(this.postEls.forEach(t=>{t.previewLoadingColors=this.previewLoadingColors}),i(this,{"is-previewing-loading-colors":!!this.previewLoadingColors}))}t({changedProp:t,oldValue:s,newValue:e}){switch(t){case"posts":this.p({oldValue:s,newValue:e});break;case"widgetSettings":this.u(s,e);break;case"feedMetadata":this.m();break;case"previewLoadingColors":this.postEls.forEach(t=>{t.previewLoadingColors=this.previewLoadingColors}),i(this,{"is-previewing-loading-colors":!!this.previewLoadingColors})}}p({oldValue:t,newValue:s}){this.postEls=[],this.renderBreakpoint(this.getMatchingBreakpoint(this.offsetWidth,this.widgetSettings.breakpoints),!0),this.popoverGalleryEl&&(this.popoverGalleryEl.posts=this.posts)}u(t,s){"openPopupGallery"!==t?.onPostClick&&"openPopupGallery"===s?.onPostClick&&this.enablePopoverGallery();const i=this.getMatchingBreakpoint(this.offsetWidth,this.widgetSettings.breakpoints);this.renderBreakpoint(i),this.postEls.forEach(t=>{t.widgetSettings=this.widgetSettings}),this.popoverGalleryEl&&(this.popoverGalleryEl.widgetSettings=this.widgetSettings)}m(){let t=`from @${this.feedMetadata.username}`;this.feedMetadata.hashtags?.length&&(t=`from hashtag${this.feedMetadata.hashtags.length>1?"s":""} ${this.feedMetadata.hashtags.join(", ")}`),this.setAttribute("aria-label",`Gallery of Instagram posts ${t}. Shift + arrow keys to navigate`),this.postEls.forEach(t=>{t.feedMetadata=this.feedMetadata}),this.popoverGalleryEl&&(this.popoverGalleryEl.feedMetadata=this.feedMetadata)}async enablePopoverGallery(){if(this.popoverGalleryEl)return;const{default:t}=await import("./PopoverGallery-CQUBmiu_.js");t.register(),this.popoverGalleryEl=document.createElement("behold-popover-gallery"),Object.assign(this.popoverGalleryEl,{widgetSettings:this.widgetSettings,feedMetadata:this.feedMetadata,posts:this.posts,closeFocusEl:this,onSlideChange:t=>{this.popoverGalleryEl.closeFocusEl=this.postEls[t]}})}l(t){const s=t.contentBoxSize?.[0]?.inlineSize,i=this.widgetSettings.breakpoints,e=this.getMatchingBreakpoint(s,i);this.renderBreakpoint(e)}o(){if(!this.postEls.length)return;let t=[...this.postsContainerEl.children].indexOf(this.shadow.activeElement?.parentElement);t>0?t-=1:t=this.postEls.length-1,this.postEls[t].focus()}h(){if(!this.postEls.length)return;let t=[...this.postsContainerEl.children].indexOf(this.shadow.activeElement?.parentElement);t>-1&&t<this.postEls.length-1?t+=1:t=0,this.postEls[t].focus()}i(t){this.popoverGalleryEl.open(this.postEls.indexOf(t),t)}renderPosts(s){t("grid: renderPosts"),this.postEls=this.createPostEls(s),this.raf(()=>{this.postsContainerEl.beholdReplaceChildren(...this.postEls)},"renderPosts")}getMatchingBreakpoint(s,i){t("grid: getMatchingBreakpoint");const e=Object.entries(i).map(([t,s])=>({width:t,...s})).filter(t=>"default"!==t.width).sort((t,s)=>parseInt(s.width)-parseInt(t.width)).reduce((t,i)=>s<=parseInt(i.width)?i:t,{numPosts:this.posts.length,...i.default});return{numPosts:this.posts.length,...i.default,...e}}renderBreakpoint(s,i=!1){if(!this.posts||!this.containerEl)return;this.postEls?.length||(i=!0),t("grid: renderBreakpoint, forceRender: = ",i);const a=this.appliedBreakpoint,{numColumns:o,gap:r,borderRadius:n,numPosts:l,postAspectRatio:d}=s;switch(a?.numPosts>l&&(this.postsContainerEl.beholdReplaceChildren(),e()),this.widgetSettings.alignment){case"left":this.style.justifyContent="flex-start";break;case"right":this.style.justifyContent="flex-end";break;default:this.style.justifyContent="center"}this.widgetSettings.maxWidth&&this.widgetSettings.constrainWidth&&this.containerEl.style.maxWidth!==`${this.widgetSettings.maxWidth}px`&&(this.containerEl.style.maxWidth=`${this.widgetSettings.maxWidth}px`),this.widgetSettings.constrainWidth||(this.containerEl.style.maxWidth=""),this.postsContainerEl.style.gridTemplateColumns=`repeat(${o}, 1fr)`,this.postsContainerEl.style.gap=`${r.y}px ${r.x}px`,this.postsContainerEl.setAttribute("data-hover-effect",this.widgetSettings.hoverEffect);let p=(d||[1,1]).reduce((t,s)=>t/s);h(this.containerEl,{"--post-border-radius":`${n}%`,"--post-aspect-ratio":`${p}`}),(a?.numPosts!==l||i)&&this.renderPosts(s),this.postEls.forEach((t,i)=>{t.hasRowGap="0"!=`${s.gap.y}`}),this.appliedBreakpoint=s}createPostEls(i){t("grid: createPostEls");const{numPosts:e,numColumns:h,gap:a,postAspectRatio:o}=i,r=this.posts.filter((t,s)=>s<(i?.numPosts||this.posts?.length||200)),n=r.map((t,i)=>{const n=Math.ceil((e||this.posts.length)/h);let l="behold-image-post";return"VIDEO"===t.mediaType&&(l="behold-video-post"),"CAROUSEL_ALBUM"===t.mediaType&&(l="behold-album-post"),s({type:l,props:{post:t,widgetSettings:this.widgetSettings,feedMetadata:this.feedMetadata,medianPaletteHSL:this.medianPaletteHSL,onClick:this.i,hasRowGap:"0"!=`${a.y}`,isLastRow:Math.ceil((i+1)/h)===n,index:i,aspectRatio:o||[1,1],totalPosts:r?.length||e||this.posts?.length||0}})});for(;n.length<i.numPosts;){const t=s({classes:"post post--placeholder"});n.push(t)}return n}static register(t="behold-grid"){return customElements.get(t)||customElements.define(t,c),t}}export{c as default};