@underlayerdev/ui 0.21.1 → 0.21.2

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.
@@ -1,5 +1,5 @@
1
1
  import * as i0 from "@angular/core";
2
- import { Component, ViewEncapsulation, contentChildren, effect, input, output, viewChild } from "@angular/core";
2
+ import { Component, ViewEncapsulation, afterNextRender, computed, contentChildren, effect, input, output, viewChild } from "@angular/core";
3
3
  import Splide from "@splidejs/splide";
4
4
  var CarouselItemComponent = class CarouselItemComponent {
5
5
  static ɵfac = i0.ɵɵngDeclareFactory({
@@ -41,6 +41,7 @@ i0.ɵɵngDeclareClassMetadata({
41
41
  var CarouselComponent = class CarouselComponent {
42
42
  options = input({ autoplay: true }, ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
43
43
  autoMount = input(true, ...ngDevMode ? [{ debugName: "autoMount" }] : /* istanbul ignore next */ []);
44
+ onePerPage = computed(() => (this.options().perPage ?? 1) === 1, ...ngDevMode ? [{ debugName: "onePerPage" }] : /* istanbul ignore next */ []);
44
45
  mounted = output();
45
46
  carousel = viewChild("carousel", ...ngDevMode ? [{ debugName: "carousel" }] : /* istanbul ignore next */ []);
46
47
  items = contentChildren(CarouselItemComponent, ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
@@ -50,9 +51,7 @@ var CarouselComponent = class CarouselComponent {
50
51
  this.items();
51
52
  this.updateCarouselOnItemsChange();
52
53
  });
53
- }
54
- ngAfterViewInit() {
55
- this.init();
54
+ afterNextRender(() => this.init());
56
55
  }
57
56
  ngOnDestroy() {
58
57
  this.instance?.destroy();
@@ -132,7 +131,13 @@ var CarouselComponent = class CarouselComponent {
132
131
  }],
133
132
  ngImport: i0,
134
133
  template: `
135
- <div class="splide ul-carousel" #carousel role="region" aria-roledescription="carousel">
134
+ <div
135
+ class="splide ul-carousel"
136
+ [class.ul-carousel--one-per-page]="onePerPage()"
137
+ #carousel
138
+ role="region"
139
+ aria-roledescription="carousel"
140
+ >
136
141
  <div class="splide__track ul-carousel__track">
137
142
  <div class="splide__list">
138
143
  <ng-content />
@@ -141,7 +146,7 @@ var CarouselComponent = class CarouselComponent {
141
146
  </div>
142
147
  `,
143
148
  isInline: true,
144
- styles: ["@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;contain:strict;display:inline-block;height:20px;inset:0;margin:auto;position:absolute;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}.ul-carousel{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;position:relative}.ul-carousel .splide__arrows{position:absolute;inset:0;z-index:1;pointer-events:none}.ul-carousel .splide__arrow{pointer-events:auto;position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:4096px;background-color:#0000004d;color:#fff;cursor:pointer;transition:background-color .25s cubic-bezier(.4,0,.2,1),opacity .25s cubic-bezier(.4,0,.2,1)}.ul-carousel .splide__arrow:hover:not(:disabled){background-color:#000000b3}.ul-carousel .splide__arrow svg{width:20px;height:20px;fill:currentColor}.ul-carousel .splide__arrow:disabled{opacity:.3;cursor:default}.ul-carousel .splide__arrow--prev{left:8px}.ul-carousel .splide__arrow--prev svg{transform:scaleX(-1)}.ul-carousel .splide__arrow--next{right:8px}.ul-carousel__pagination-dot{border:0;border-radius:50%;margin:1rem .2rem 0;padding:0;height:6px;width:6px;background-color:#ffffff80}.ul-carousel__pagination-dot.is-active{background-color:#fff}\n"],
149
+ styles: ["@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;contain:strict;display:inline-block;height:20px;inset:0;margin:auto;position:absolute;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}.ul-carousel{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;position:relative}.ul-carousel .splide__arrows{position:absolute;inset:0;z-index:1;pointer-events:none}.ul-carousel .splide__arrow{pointer-events:auto;position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:4096px;background-color:#0000004d;color:#fff;cursor:pointer;transition:background-color .25s cubic-bezier(.4,0,.2,1),opacity .25s cubic-bezier(.4,0,.2,1)}.ul-carousel .splide__arrow:hover:not(:disabled){background-color:#000000b3}.ul-carousel .splide__arrow svg{width:20px;height:20px;fill:currentColor}.ul-carousel .splide__arrow:disabled{opacity:.3;cursor:default}.ul-carousel .splide__arrow--prev{left:8px}.ul-carousel .splide__arrow--prev svg{transform:scaleX(-1)}.ul-carousel .splide__arrow--next{right:8px}.ul-carousel__pagination-dot{border:0;border-radius:50%;margin:1rem .2rem 0;padding:0;height:6px;width:6px;background-color:#ffffff80}.ul-carousel__pagination-dot.is-active{background-color:#fff}.ul-carousel--one-per-page.splide:not(.is-initialized){visibility:visible}.ul-carousel--one-per-page.splide:not(.is-initialized) .splide__track{overflow:hidden}.ul-carousel--one-per-page.splide:not(.is-initialized) .splide__slide{width:100%}\n"],
145
150
  encapsulation: i0.ViewEncapsulation.None
146
151
  });
147
152
  };
@@ -155,7 +160,13 @@ i0.ɵɵngDeclareClassMetadata({
155
160
  args: [{
156
161
  selector: "ul-carousel",
157
162
  template: `
158
- <div class="splide ul-carousel" #carousel role="region" aria-roledescription="carousel">
163
+ <div
164
+ class="splide ul-carousel"
165
+ [class.ul-carousel--one-per-page]="onePerPage()"
166
+ #carousel
167
+ role="region"
168
+ aria-roledescription="carousel"
169
+ >
159
170
  <div class="splide__track ul-carousel__track">
160
171
  <div class="splide__list">
161
172
  <ng-content />
@@ -164,7 +175,7 @@ i0.ɵɵngDeclareClassMetadata({
164
175
  </div>
165
176
  `,
166
177
  encapsulation: ViewEncapsulation.None,
167
- styles: ["@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;contain:strict;display:inline-block;height:20px;inset:0;margin:auto;position:absolute;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}.ul-carousel{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;position:relative}.ul-carousel .splide__arrows{position:absolute;inset:0;z-index:1;pointer-events:none}.ul-carousel .splide__arrow{pointer-events:auto;position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:4096px;background-color:#0000004d;color:#fff;cursor:pointer;transition:background-color .25s cubic-bezier(.4,0,.2,1),opacity .25s cubic-bezier(.4,0,.2,1)}.ul-carousel .splide__arrow:hover:not(:disabled){background-color:#000000b3}.ul-carousel .splide__arrow svg{width:20px;height:20px;fill:currentColor}.ul-carousel .splide__arrow:disabled{opacity:.3;cursor:default}.ul-carousel .splide__arrow--prev{left:8px}.ul-carousel .splide__arrow--prev svg{transform:scaleX(-1)}.ul-carousel .splide__arrow--next{right:8px}.ul-carousel__pagination-dot{border:0;border-radius:50%;margin:1rem .2rem 0;padding:0;height:6px;width:6px;background-color:#ffffff80}.ul-carousel__pagination-dot.is-active{background-color:#fff}\n"]
178
+ styles: ["@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;contain:strict;display:inline-block;height:20px;inset:0;margin:auto;position:absolute;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}.ul-carousel{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;position:relative}.ul-carousel .splide__arrows{position:absolute;inset:0;z-index:1;pointer-events:none}.ul-carousel .splide__arrow{pointer-events:auto;position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:4096px;background-color:#0000004d;color:#fff;cursor:pointer;transition:background-color .25s cubic-bezier(.4,0,.2,1),opacity .25s cubic-bezier(.4,0,.2,1)}.ul-carousel .splide__arrow:hover:not(:disabled){background-color:#000000b3}.ul-carousel .splide__arrow svg{width:20px;height:20px;fill:currentColor}.ul-carousel .splide__arrow:disabled{opacity:.3;cursor:default}.ul-carousel .splide__arrow--prev{left:8px}.ul-carousel .splide__arrow--prev svg{transform:scaleX(-1)}.ul-carousel .splide__arrow--next{right:8px}.ul-carousel__pagination-dot{border:0;border-radius:50%;margin:1rem .2rem 0;padding:0;height:6px;width:6px;background-color:#ffffff80}.ul-carousel__pagination-dot.is-active{background-color:#fff}.ul-carousel--one-per-page.splide:not(.is-initialized){visibility:visible}.ul-carousel--one-per-page.splide:not(.is-initialized) .splide__track{overflow:hidden}.ul-carousel--one-per-page.splide:not(.is-initialized) .splide__slide{width:100%}\n"]
168
179
  }]
169
180
  }],
170
181
  ctorParameters: () => [],
@@ -1 +1 @@
1
- {"version":3,"file":"underlayerdev-ui-carousel.mjs","names":[],"sources":["../../../ui/angular/carousel/carousel.ts"],"sourcesContent":["import {\n AfterViewInit,\n Component,\n contentChildren,\n effect,\n ElementRef,\n input,\n OnDestroy,\n output,\n viewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport Splide, { Options } from '@splidejs/splide';\n\n@Component({\n selector: 'ul-carousel-item',\n template: ` <ng-content /> `,\n encapsulation: ViewEncapsulation.None,\n host: {\n class: 'splide__slide ul-carousel__item',\n },\n})\nexport class CarouselItemComponent {}\n\n@Component({\n selector: 'ul-carousel',\n template: `\n <div class=\"splide ul-carousel\" #carousel role=\"region\" aria-roledescription=\"carousel\">\n <div class=\"splide__track ul-carousel__track\">\n <div class=\"splide__list\">\n <ng-content />\n </div>\n </div>\n </div>\n `,\n styleUrl: './carousel.scss',\n encapsulation: ViewEncapsulation.None,\n})\nexport class CarouselComponent implements AfterViewInit, OnDestroy {\n options = input<Options>({\n autoplay: true,\n });\n autoMount = input<boolean>(true);\n mounted = output<Splide>();\n\n private carousel = viewChild<ElementRef<HTMLElement>>('carousel');\n private items = contentChildren<CarouselItemComponent>(CarouselItemComponent);\n private instance: Splide | null = null;\n\n constructor() {\n effect(() => {\n this.items(); // trigger change detection\n this.updateCarouselOnItemsChange();\n });\n }\n\n ngAfterViewInit() {\n this.init();\n }\n\n ngOnDestroy() {\n this.instance?.destroy();\n }\n\n // Get the Splide instance\n getInstance() {\n return this.instance;\n }\n\n // Methods to control the carousel\n goNext() {\n this.instance?.go('>');\n }\n\n goPrev() {\n this.instance?.go('<');\n }\n\n goTo(index: number) {\n this.instance?.go(index);\n }\n\n // Mount the carousel\n mount() {\n if (!this.instance) {\n throw new Error('Carousel instance not found');\n }\n this.instance.mount();\n this.mounted.emit(this.instance);\n }\n\n private init() {\n const carousel = this.carousel();\n if (!carousel) {\n throw new Error('Carousel element not found');\n }\n // initialize the carousel\n this.instance = new Splide(carousel.nativeElement, {\n arrows: false,\n classes: {\n page: 'splide__pagination__page ul-carousel__pagination-dot',\n },\n ...this.options(),\n });\n // mount the carousel\n if (this.autoMount()) {\n this.mount();\n }\n }\n\n private updateCarouselOnItemsChange() {\n this.instance?.refresh();\n }\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"underlayerdev-ui-carousel.mjs","names":[],"sources":["../../../ui/angular/carousel/carousel.ts"],"sourcesContent":["import {\n afterNextRender,\n Component,\n computed,\n contentChildren,\n effect,\n ElementRef,\n input,\n OnDestroy,\n output,\n viewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport Splide, { Options } from '@splidejs/splide';\n\n@Component({\n selector: 'ul-carousel-item',\n template: ` <ng-content /> `,\n encapsulation: ViewEncapsulation.None,\n host: {\n class: 'splide__slide ul-carousel__item',\n },\n})\nexport class CarouselItemComponent {}\n\n@Component({\n selector: 'ul-carousel',\n template: `\n <div\n class=\"splide ul-carousel\"\n [class.ul-carousel--one-per-page]=\"onePerPage()\"\n #carousel\n role=\"region\"\n aria-roledescription=\"carousel\"\n >\n <div class=\"splide__track ul-carousel__track\">\n <div class=\"splide__list\">\n <ng-content />\n </div>\n </div>\n </div>\n `,\n styleUrl: './carousel.scss',\n encapsulation: ViewEncapsulation.None,\n})\nexport class CarouselComponent implements OnDestroy {\n options = input<Options>({\n autoplay: true,\n });\n autoMount = input<boolean>(true);\n\n /**\n * One slide at a time, the default. Such a carousel shows its first slide before Splide\n * takes over (see carousel.scss), so a page rendered on the server shows its photo at once.\n */\n protected readonly onePerPage = computed(() => (this.options().perPage ?? 1) === 1);\n mounted = output<Splide>();\n\n private carousel = viewChild<ElementRef<HTMLElement>>('carousel');\n private items = contentChildren<CarouselItemComponent>(CarouselItemComponent);\n private instance: Splide | null = null;\n\n constructor() {\n effect(() => {\n this.items(); // trigger change detection\n this.updateCarouselOnItemsChange();\n });\n // After the first render, in the browser only: Splide measures and moves the DOM, and a\n // page rendered on the server has neither a document nor a layout to measure. There, the\n // slides are sent as plain markup and Splide takes them over once the page is live.\n afterNextRender(() => this.init());\n }\n\n ngOnDestroy() {\n this.instance?.destroy();\n }\n\n // Get the Splide instance\n getInstance() {\n return this.instance;\n }\n\n // Methods to control the carousel\n goNext() {\n this.instance?.go('>');\n }\n\n goPrev() {\n this.instance?.go('<');\n }\n\n goTo(index: number) {\n this.instance?.go(index);\n }\n\n // Mount the carousel\n mount() {\n if (!this.instance) {\n throw new Error('Carousel instance not found');\n }\n this.instance.mount();\n this.mounted.emit(this.instance);\n }\n\n private init() {\n const carousel = this.carousel();\n if (!carousel) {\n throw new Error('Carousel element not found');\n }\n // initialize the carousel\n this.instance = new Splide(carousel.nativeElement, {\n arrows: false,\n classes: {\n page: 'splide__pagination__page ul-carousel__pagination-dot',\n },\n ...this.options(),\n });\n // mount the carousel\n if (this.autoMount()) {\n this.mount();\n }\n }\n\n private updateCarouselOnItemsChange() {\n this.instance?.refresh();\n }\n}\n"],"mappings":"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"}
@@ -1,7 +1,7 @@
1
1
  import * as i1$1 from "@angular/cdk/accordion";
2
2
  import { CdkAccordion, CdkAccordionItem } from "@angular/cdk/accordion";
3
3
  import * as i0 from "@angular/core";
4
- import { Component, DestroyRef, Directive, ElementRef, HostBinding, HostListener, Injectable, PLATFORM_ID, Pipe, SecurityContext, ViewChild, ViewEncapsulation, booleanAttribute, computed, contentChild, contentChildren, effect, inject, input, model, output, signal, untracked, viewChild } from "@angular/core";
4
+ import { Component, DestroyRef, Directive, ElementRef, HostBinding, HostListener, Injectable, PLATFORM_ID, Pipe, SecurityContext, ViewChild, ViewEncapsulation, afterNextRender, booleanAttribute, computed, contentChild, contentChildren, effect, inject, input, model, output, signal, untracked, viewChild } from "@angular/core";
5
5
  import { takeUntilDestroyed, toSignal } from "@angular/core/rxjs-interop";
6
6
  import * as i1 from "@angular/common";
7
7
  import { CommonModule, CurrencyPipe, NgTemplateOutlet, isPlatformBrowser } from "@angular/common";
@@ -5005,10 +5005,12 @@ var CollapseComponent = class CollapseComponent {
5005
5005
  const max = Math.max(0, this.maxHeight());
5006
5006
  return this.fullHeight() > max;
5007
5007
  }, ...ngDevMode ? [{ debugName: "isCollapsible" }] : /* istanbul ignore next */ []);
5008
- ngAfterViewInit() {
5009
- this.updateFullHeight();
5010
- const resizeSubscription = fromEvent(window, "resize").pipe(debounceTime(100)).subscribe(() => this.updateFullHeight());
5011
- this.destroyRef.onDestroy(() => resizeSubscription.unsubscribe());
5008
+ constructor() {
5009
+ afterNextRender(() => {
5010
+ this.updateFullHeight();
5011
+ const resizeSubscription = fromEvent(window, "resize").pipe(debounceTime(100)).subscribe(() => this.updateFullHeight());
5012
+ this.destroyRef.onDestroy(() => resizeSubscription.unsubscribe());
5013
+ });
5012
5014
  }
5013
5015
  updateFullHeight() {
5014
5016
  if (this.content?.nativeElement) this.fullHeight.set(this.content.nativeElement.scrollHeight);
@@ -5204,6 +5206,7 @@ i0.ɵɵngDeclareClassMetadata({
5204
5206
  styles: [".ul-collapse__content{position:relative;overflow:hidden;height:var(--ul-collapse-full-height);transition:height .25s cubic-bezier(.4,0,.2,1)}.ul-collapse__toggle{display:flex;align-items:center;justify-content:center;width:100%;padding:4px 0;gap:8px}.ul-collapse__toggle:before,.ul-collapse__toggle:after{content:\"\";display:block;width:100%;height:1px;border-bottom:1px solid rgba(255,255,255,.1)}.ul-collapse__toggle-button .ul-icon{transition:transform .25s cubic-bezier(.4,0,.2,1)}.ul-collapse--collapsed .ul-collapse__content{-webkit-mask-image:linear-gradient(to bottom,black calc(100% - 48px),transparent 100%);mask-image:linear-gradient(to bottom,black calc(100% - 48px),transparent 100%);height:var(--ul-collapse-max-height)}.ul-collapse--collapsed .ul-collapse__toggle-button .ul-icon{transform:rotate(180deg)}\n"]
5205
5207
  }]
5206
5208
  }],
5209
+ ctorParameters: () => [],
5207
5210
  propDecorators: {
5208
5211
  content: [{
5209
5212
  type: ViewChild,
@@ -7588,7 +7591,13 @@ i0.ɵɵngDeclareClassMetadata({
7588
7591
  var ImageNotFoundDirective = class ImageNotFoundDirective {
7589
7592
  showPlaceholder = input(true, ...ngDevMode ? [{ debugName: "showPlaceholder" }] : /* istanbul ignore next */ []);
7590
7593
  imageNotFound = signal(false, ...ngDevMode ? [{ debugName: "imageNotFound" }] : /* istanbul ignore next */ []);
7591
- visibility = signal("hidden", ...ngDevMode ? [{ debugName: "visibility" }] : /* istanbul ignore next */ []);
7594
+ visibility = signal("visible", ...ngDevMode ? [{ debugName: "visibility" }] : /* istanbul ignore next */ []);
7595
+ constructor() {
7596
+ const image = inject(ElementRef).nativeElement;
7597
+ afterNextRender(() => {
7598
+ if (image.complete && image.naturalWidth === 0 && image.currentSrc) this.handleError();
7599
+ });
7600
+ }
7592
7601
  handleError() {
7593
7602
  this.visibility.set("hidden");
7594
7603
  if (this.showPlaceholder()) this.imageNotFound.set(true);
@@ -7648,6 +7657,7 @@ i0.ɵɵngDeclareClassMetadata({
7648
7657
  }
7649
7658
  }]
7650
7659
  }],
7660
+ ctorParameters: () => [],
7651
7661
  propDecorators: { showPlaceholder: [{
7652
7662
  type: i0.Input,
7653
7663
  args: [{