@underlayerdev/ui 0.21.0 → 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.
Files changed (7) hide show
  1. package/fesm2022/underlayerdev-ui-carousel.mjs +19 -8
  2. package/fesm2022/underlayerdev-ui-carousel.mjs.map +1 -1
  3. package/fesm2022/underlayerdev-ui.mjs +167 -209
  4. package/fesm2022/underlayerdev-ui.mjs.map +1 -1
  5. package/package.json +1 -1
  6. package/types/underlayerdev-ui-carousel.d.ts +7 -3
  7. package/types/underlayerdev-ui.d.ts +3 -2
package/fesm2022/underlayerdev-ui-carousel.mjs CHANGED
@@ -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: () => [],
package/fesm2022/underlayerdev-ui-carousel.mjs.map CHANGED
@@ -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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"}
package/fesm2022/underlayerdev-ui.mjs CHANGED
@@ -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";
@@ -10,7 +10,6 @@ import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from "@angular/cdk/menu";
10
10
  import { CdkTrapFocus } from "@angular/cdk/a11y";
11
11
  import { fromEvent, map } from "rxjs";
12
12
  import { debounceTime } from "rxjs/operators";
13
- import { ImageCropperComponent as ImageCropperComponent$1 } from "ngx-image-cropper";
14
13
  import { DomSanitizer } from "@angular/platform-browser";
15
14
  import { BreakpointObserver } from "@angular/cdk/layout";
16
15
  var AccordionItemComponent = class AccordionItemComponent {
@@ -5006,10 +5005,12 @@ var CollapseComponent = class CollapseComponent {
5006
5005
  const max = Math.max(0, this.maxHeight());
5007
5006
  return this.fullHeight() > max;
5008
5007
  }, ...ngDevMode ? [{ debugName: "isCollapsible" }] : /* istanbul ignore next */ []);
5009
- ngAfterViewInit() {
5010
- this.updateFullHeight();
5011
- const resizeSubscription = fromEvent(window, "resize").pipe(debounceTime(100)).subscribe(() => this.updateFullHeight());
5012
- 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
+ });
5013
5014
  }
5014
5015
  updateFullHeight() {
5015
5016
  if (this.content?.nativeElement) this.fullHeight.set(this.content.nativeElement.scrollHeight);
@@ -5205,6 +5206,7 @@ i0.ɵɵngDeclareClassMetadata({
5205
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"]
5206
5207
  }]
5207
5208
  }],
5209
+ ctorParameters: () => [],
5208
5210
  propDecorators: {
5209
5211
  content: [{
5210
5212
  type: ViewChild,
@@ -7589,7 +7591,13 @@ i0.ɵɵngDeclareClassMetadata({
7589
7591
  var ImageNotFoundDirective = class ImageNotFoundDirective {
7590
7592
  showPlaceholder = input(true, ...ngDevMode ? [{ debugName: "showPlaceholder" }] : /* istanbul ignore next */ []);
7591
7593
  imageNotFound = signal(false, ...ngDevMode ? [{ debugName: "imageNotFound" }] : /* istanbul ignore next */ []);
7592
- 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
+ }
7593
7601
  handleError() {
7594
7602
  this.visibility.set("hidden");
7595
7603
  if (this.showPlaceholder()) this.imageNotFound.set(true);
@@ -7649,6 +7657,7 @@ i0.ɵɵngDeclareClassMetadata({
7649
7657
  }
7650
7658
  }]
7651
7659
  }],
7660
+ ctorParameters: () => [],
7652
7661
  propDecorators: { showPlaceholder: [{
7653
7662
  type: i0.Input,
7654
7663
  args: [{
@@ -7741,7 +7750,7 @@ var ImageCropperComponent = class ImageCropperComponent {
7741
7750
  cropped = output();
7742
7751
  cancelled = output();
7743
7752
  loadFailed = output();
7744
- cropperRef = viewChild(ImageCropperComponent$1, ...ngDevMode ? [{ debugName: "cropperRef" }] : /* istanbul ignore next */ []);
7753
+ cropperRef = viewChild("cropper", ...ngDevMode ? [{ debugName: "cropperRef" }] : /* istanbul ignore next */ []);
7745
7754
  cropperImageFile = computed(() => this.imageFile() ?? void 0, ...ngDevMode ? [{ debugName: "cropperImageFile" }] : /* istanbul ignore next */ []);
7746
7755
  isRound = computed(() => this.shape() === "round", ...ngDevMode ? [{ debugName: "isRound" }] : /* istanbul ignore next */ []);
7747
7756
  isLocked = computed(() => this.aspectRatio() != null, ...ngDevMode ? [{ debugName: "isLocked" }] : /* istanbul ignore next */ []);
@@ -7924,218 +7933,167 @@ var ImageCropperComponent = class ImageCropperComponent {
7924
7933
  viewQueries: [{
7925
7934
  propertyName: "cropperRef",
7926
7935
  first: true,
7927
- predicate: ImageCropperComponent$1,
7936
+ predicate: ["cropper"],
7928
7937
  descendants: true,
7929
7938
  isSignal: true
7930
7939
  }],
7931
7940
  ngImport: i0,
7932
- template: "<ul-modal [(open)]=\"open\" variant=\"custom\" [title]=\"title()\" (closed)=\"onClosed()\">\n @if (imageFile()) {\n <div class=\"ul-image-cropper\">\n <image-cropper\n class=\"ul-image-cropper__frame\"\n [imageFile]=\"cropperImageFile()\"\n [maintainAspectRatio]=\"isLocked()\"\n [aspectRatio]=\"effectiveAspectRatio()\"\n [roundCropper]=\"isRound()\"\n [cropperStaticWidth]=\"frameWidth()\"\n [cropperStaticHeight]=\"frameHeight()\"\n [allowMoveImage]=\"isLocked()\"\n [transform]=\"transform()\"\n [resizeToWidth]=\"maxOutputSize()\"\n [resizeToHeight]=\"maxOutputSize()\"\n [onlyScaleDown]=\"true\"\n [cropperFrameAriaLabel]=\"frameAriaLabel()\"\n format=\"jpeg\"\n output=\"blob\"\n (cropperReady)=\"onCropperReady($event)\"\n (transformChange)=\"onTransformChange($event)\"\n (loadImageFailed)=\"loadFailed.emit()\"\n />\n\n @if (isLocked()) {\n <label class=\"ul-image-cropper__zoom\">\n <span class=\"ul-image-cropper__zoom-label\">{{ zoomLabel() }}</span>\n <input\n type=\"range\"\n class=\"ul-image-cropper__zoom-input\"\n [min]=\"minZoom\"\n [max]=\"maxZoom\"\n [step]=\"zoomStep\"\n [value]=\"zoom()\"\n (input)=\"onZoomInput($event)\"\n />\n </label>\n }\n </div>\n }\n\n <div class=\"ul-modal__foter-content\" ul-modal-footer>\n <ul-button\n theme=\"fill-purple\"\n size=\"md\"\n [disabled]=\"!cropperReady()\"\n (buttonClick)=\"onConfirm()\"\n >\n {{ confirmLabel() }}\n </ul-button>\n </div>\n</ul-modal>\n",
7941
+ template: "<ul-modal [(open)]=\"open\" variant=\"custom\" [title]=\"title()\" (closed)=\"onClosed()\">\n @if (imageFile()) {\n <div class=\"ul-image-cropper\">\n <!-- Loaded when a photo is picked, not with the app: see the import in image-cropper.ts.\n Until it is in, the frame's box holds the space it will take. -->\n @defer (on immediate) {\n <image-cropper\n #cropper\n class=\"ul-image-cropper__frame\"\n [imageFile]=\"cropperImageFile()\"\n [maintainAspectRatio]=\"isLocked()\"\n [aspectRatio]=\"effectiveAspectRatio()\"\n [roundCropper]=\"isRound()\"\n [cropperStaticWidth]=\"frameWidth()\"\n [cropperStaticHeight]=\"frameHeight()\"\n [allowMoveImage]=\"isLocked()\"\n [transform]=\"transform()\"\n [resizeToWidth]=\"maxOutputSize()\"\n [resizeToHeight]=\"maxOutputSize()\"\n [onlyScaleDown]=\"true\"\n [cropperFrameAriaLabel]=\"frameAriaLabel()\"\n format=\"jpeg\"\n output=\"blob\"\n (cropperReady)=\"onCropperReady($event)\"\n (transformChange)=\"onTransformChange($event)\"\n (loadImageFailed)=\"loadFailed.emit()\"\n />\n } @placeholder {\n <div class=\"ul-image-cropper__frame\"></div>\n }\n\n @if (isLocked()) {\n <label class=\"ul-image-cropper__zoom\">\n <span class=\"ul-image-cropper__zoom-label\">{{ zoomLabel() }}</span>\n <input\n type=\"range\"\n class=\"ul-image-cropper__zoom-input\"\n [min]=\"minZoom\"\n [max]=\"maxZoom\"\n [step]=\"zoomStep\"\n [value]=\"zoom()\"\n (input)=\"onZoomInput($event)\"\n />\n </label>\n }\n </div>\n }\n\n <div class=\"ul-modal__foter-content\" ul-modal-footer>\n <ul-button\n theme=\"fill-purple\"\n size=\"md\"\n [disabled]=\"!cropperReady()\"\n (buttonClick)=\"onConfirm()\"\n >\n {{ confirmLabel() }}\n </ul-button>\n </div>\n</ul-modal>\n",
7933
7942
  styles: [".ul-image-cropper{display:flex;flex-direction:column;align-items:center;gap:16px}.ul-image-cropper__frame{display:block;width:100%;height:320px;--cropper-overlay-color: rgba(10, 10, 10, .85);--cropper-outline-color: rgba(10, 10, 10, .85);--cropper-color: #6f3de0;--cropper-border: 2px solid #6f3de0;--cropper-hover-border: 2px solid #6f3de0;--cropper-focus-border: 2px solid #6f3de0;--cropper-resize-square-bg: #6f3de0;--cropper-resize-square-border: 1px solid #0a0a0a}.ul-image-cropper__zoom{display:flex;align-items:center;gap:12px;width:100%}.ul-image-cropper__zoom-label{font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400;color:#ffffffb3;flex-shrink:0}.ul-image-cropper__zoom-input{flex:1;accent-color:#6f3de0}.ul-modal__foter-content{width:100%;margin-top:32px}\n"],
7934
- dependencies: [
7935
- {
7936
- kind: "component",
7937
- type: ImageCropperComponent$1,
7938
- selector: "image-cropper",
7939
- inputs: [
7940
- "imageChangedEvent",
7941
- "imageURL",
7942
- "imageBase64",
7943
- "imageFile",
7944
- "imageAltText",
7945
- "options",
7946
- "cropperFrameAriaLabel",
7947
- "output",
7948
- "format",
7949
- "autoCrop",
7950
- "cropper",
7951
- "transform",
7952
- "maintainAspectRatio",
7953
- "aspectRatio",
7954
- "resetCropOnAspectRatioChange",
7955
- "resizeToWidth",
7956
- "resizeToHeight",
7957
- "cropperMinWidth",
7958
- "cropperMinHeight",
7959
- "cropperMaxHeight",
7960
- "cropperMaxWidth",
7961
- "cropperStaticWidth",
7962
- "cropperStaticHeight",
7963
- "canvasRotation",
7964
- "initialStepSize",
7965
- "roundCropper",
7966
- "onlyScaleDown",
7967
- "imageQuality",
7968
- "backgroundColor",
7969
- "containWithinAspectRatio",
7970
- "hideResizeSquares",
7971
- "allowMoveImage",
7972
- "checkImageType",
7973
- "alignImage",
7974
- "disabled",
7975
- "hidden"
7976
- ],
7977
- outputs: [
7978
- "imageCropped",
7979
- "startCropImage",
7980
- "imageLoaded",
7981
- "cropperReady",
7982
- "loadImageFailed",
7983
- "transformChange",
7984
- "cropperChange"
7985
- ]
7986
- },
7987
- {
7988
- kind: "component",
7989
- type: ModalComponent,
7990
- selector: "ul-modal",
7991
- inputs: [
7992
- "open",
7993
- "variant",
7994
- "title",
7995
- "closeOnBackdropClick",
7996
- "showCloseButton",
7997
- "confirmLabel",
7998
- "cancelLabel",
7999
- "customClass",
8000
- "fullScreenInMobile"
8001
- ],
8002
- outputs: [
8003
- "openChange",
8004
- "closed",
8005
- "confirmed",
8006
- "cancelled"
8007
- ]
8008
- },
8009
- {
8010
- kind: "component",
8011
- type: ButtonComponent,
8012
- selector: "ul-button",
8013
- inputs: [
8014
- "size",
8015
- "theme",
8016
- "iconOnly",
8017
- "vertical",
8018
- "disabled",
8019
- "type",
8020
- "ariaLabel"
8021
- ],
8022
- outputs: ["buttonClick"]
8023
- }
8024
- ]
7943
+ dependencies: [{
7944
+ kind: "component",
7945
+ type: ModalComponent,
7946
+ selector: "ul-modal",
7947
+ inputs: [
7948
+ "open",
7949
+ "variant",
7950
+ "title",
7951
+ "closeOnBackdropClick",
7952
+ "showCloseButton",
7953
+ "confirmLabel",
7954
+ "cancelLabel",
7955
+ "customClass",
7956
+ "fullScreenInMobile"
7957
+ ],
7958
+ outputs: [
7959
+ "openChange",
7960
+ "closed",
7961
+ "confirmed",
7962
+ "cancelled"
7963
+ ]
7964
+ }, {
7965
+ kind: "component",
7966
+ type: ButtonComponent,
7967
+ selector: "ul-button",
7968
+ inputs: [
7969
+ "size",
7970
+ "theme",
7971
+ "iconOnly",
7972
+ "vertical",
7973
+ "disabled",
7974
+ "type",
7975
+ "ariaLabel"
7976
+ ],
7977
+ outputs: ["buttonClick"]
7978
+ }],
7979
+ deferBlockDependencies: [() => [import("ngx-image-cropper").then((m) => m.ImageCropperComponent)]]
8025
7980
  });
8026
7981
  };
8027
- i0.ɵɵngDeclareClassMetadata({
8028
- minVersion: "12.0.0",
7982
+ i0.ɵɵngDeclareClassMetadataAsync({
7983
+ minVersion: "18.0.0",
8029
7984
  version: "22.2.2",
8030
7985
  ngImport: i0,
8031
7986
  type: ImageCropperComponent,
8032
- decorators: [{
8033
- type: Component,
8034
- args: [{
8035
- selector: "ul-image-cropper",
8036
- imports: [
8037
- ImageCropperComponent$1,
8038
- ModalComponent,
8039
- ButtonComponent
8040
- ],
8041
- template: "<ul-modal [(open)]=\"open\" variant=\"custom\" [title]=\"title()\" (closed)=\"onClosed()\">\n @if (imageFile()) {\n <div class=\"ul-image-cropper\">\n <image-cropper\n class=\"ul-image-cropper__frame\"\n [imageFile]=\"cropperImageFile()\"\n [maintainAspectRatio]=\"isLocked()\"\n [aspectRatio]=\"effectiveAspectRatio()\"\n [roundCropper]=\"isRound()\"\n [cropperStaticWidth]=\"frameWidth()\"\n [cropperStaticHeight]=\"frameHeight()\"\n [allowMoveImage]=\"isLocked()\"\n [transform]=\"transform()\"\n [resizeToWidth]=\"maxOutputSize()\"\n [resizeToHeight]=\"maxOutputSize()\"\n [onlyScaleDown]=\"true\"\n [cropperFrameAriaLabel]=\"frameAriaLabel()\"\n format=\"jpeg\"\n output=\"blob\"\n (cropperReady)=\"onCropperReady($event)\"\n (transformChange)=\"onTransformChange($event)\"\n (loadImageFailed)=\"loadFailed.emit()\"\n />\n\n @if (isLocked()) {\n <label class=\"ul-image-cropper__zoom\">\n <span class=\"ul-image-cropper__zoom-label\">{{ zoomLabel() }}</span>\n <input\n type=\"range\"\n class=\"ul-image-cropper__zoom-input\"\n [min]=\"minZoom\"\n [max]=\"maxZoom\"\n [step]=\"zoomStep\"\n [value]=\"zoom()\"\n (input)=\"onZoomInput($event)\"\n />\n </label>\n }\n </div>\n }\n\n <div class=\"ul-modal__foter-content\" ul-modal-footer>\n <ul-button\n theme=\"fill-purple\"\n size=\"md\"\n [disabled]=\"!cropperReady()\"\n (buttonClick)=\"onConfirm()\"\n >\n {{ confirmLabel() }}\n </ul-button>\n </div>\n</ul-modal>\n",
8042
- styles: [".ul-image-cropper{display:flex;flex-direction:column;align-items:center;gap:16px}.ul-image-cropper__frame{display:block;width:100%;height:320px;--cropper-overlay-color: rgba(10, 10, 10, .85);--cropper-outline-color: rgba(10, 10, 10, .85);--cropper-color: #6f3de0;--cropper-border: 2px solid #6f3de0;--cropper-hover-border: 2px solid #6f3de0;--cropper-focus-border: 2px solid #6f3de0;--cropper-resize-square-bg: #6f3de0;--cropper-resize-square-border: 1px solid #0a0a0a}.ul-image-cropper__zoom{display:flex;align-items:center;gap:12px;width:100%}.ul-image-cropper__zoom-label{font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400;color:#ffffffb3;flex-shrink:0}.ul-image-cropper__zoom-input{flex:1;accent-color:#6f3de0}.ul-modal__foter-content{width:100%;margin-top:32px}\n"]
8043
- }]
8044
- }],
8045
- ctorParameters: () => [],
8046
- propDecorators: {
8047
- open: [{
8048
- type: i0.Input,
8049
- args: [{
8050
- isSignal: true,
8051
- alias: "open",
8052
- required: false
8053
- }]
8054
- }, {
8055
- type: i0.Output,
8056
- args: ["openChange"]
8057
- }],
8058
- imageFile: [{
8059
- type: i0.Input,
8060
- args: [{
8061
- isSignal: true,
8062
- alias: "imageFile",
8063
- required: false
8064
- }]
8065
- }],
8066
- shape: [{
8067
- type: i0.Input,
8068
- args: [{
8069
- isSignal: true,
8070
- alias: "shape",
8071
- required: false
8072
- }]
8073
- }],
8074
- aspectRatio: [{
8075
- type: i0.Input,
8076
- args: [{
8077
- isSignal: true,
8078
- alias: "aspectRatio",
8079
- required: false
8080
- }]
8081
- }],
8082
- maxOutputSize: [{
8083
- type: i0.Input,
8084
- args: [{
8085
- isSignal: true,
8086
- alias: "maxOutputSize",
8087
- required: false
8088
- }]
8089
- }],
8090
- title: [{
8091
- type: i0.Input,
8092
- args: [{
8093
- isSignal: true,
8094
- alias: "title",
8095
- required: false
8096
- }]
8097
- }],
8098
- confirmLabel: [{
8099
- type: i0.Input,
8100
- args: [{
8101
- isSignal: true,
8102
- alias: "confirmLabel",
8103
- required: false
8104
- }]
8105
- }],
8106
- zoomLabel: [{
8107
- type: i0.Input,
8108
- args: [{
8109
- isSignal: true,
8110
- alias: "zoomLabel",
8111
- required: false
8112
- }]
8113
- }],
8114
- frameAriaLabel: [{
8115
- type: i0.Input,
8116
- args: [{
8117
- isSignal: true,
8118
- alias: "frameAriaLabel",
8119
- required: false
7987
+ resolveDeferredDeps: () => [import("ngx-image-cropper").then((m) => m.ImageCropperComponent)],
7988
+ resolveMetadata: (ImageCropperComponent) => ({
7989
+ decorators: [{
7990
+ type: Component,
7991
+ args: [{
7992
+ selector: "ul-image-cropper",
7993
+ imports: [
7994
+ NgxImageCropperComponent,
7995
+ ModalComponent,
7996
+ ButtonComponent
7997
+ ],
7998
+ template: "<ul-modal [(open)]=\"open\" variant=\"custom\" [title]=\"title()\" (closed)=\"onClosed()\">\n @if (imageFile()) {\n <div class=\"ul-image-cropper\">\n <!-- Loaded when a photo is picked, not with the app: see the import in image-cropper.ts.\n Until it is in, the frame's box holds the space it will take. -->\n @defer (on immediate) {\n <image-cropper\n #cropper\n class=\"ul-image-cropper__frame\"\n [imageFile]=\"cropperImageFile()\"\n [maintainAspectRatio]=\"isLocked()\"\n [aspectRatio]=\"effectiveAspectRatio()\"\n [roundCropper]=\"isRound()\"\n [cropperStaticWidth]=\"frameWidth()\"\n [cropperStaticHeight]=\"frameHeight()\"\n [allowMoveImage]=\"isLocked()\"\n [transform]=\"transform()\"\n [resizeToWidth]=\"maxOutputSize()\"\n [resizeToHeight]=\"maxOutputSize()\"\n [onlyScaleDown]=\"true\"\n [cropperFrameAriaLabel]=\"frameAriaLabel()\"\n format=\"jpeg\"\n output=\"blob\"\n (cropperReady)=\"onCropperReady($event)\"\n (transformChange)=\"onTransformChange($event)\"\n (loadImageFailed)=\"loadFailed.emit()\"\n />\n } @placeholder {\n <div class=\"ul-image-cropper__frame\"></div>\n }\n\n @if (isLocked()) {\n <label class=\"ul-image-cropper__zoom\">\n <span class=\"ul-image-cropper__zoom-label\">{{ zoomLabel() }}</span>\n <input\n type=\"range\"\n class=\"ul-image-cropper__zoom-input\"\n [min]=\"minZoom\"\n [max]=\"maxZoom\"\n [step]=\"zoomStep\"\n [value]=\"zoom()\"\n (input)=\"onZoomInput($event)\"\n />\n </label>\n }\n </div>\n }\n\n <div class=\"ul-modal__foter-content\" ul-modal-footer>\n <ul-button\n theme=\"fill-purple\"\n size=\"md\"\n [disabled]=\"!cropperReady()\"\n (buttonClick)=\"onConfirm()\"\n >\n {{ confirmLabel() }}\n </ul-button>\n </div>\n</ul-modal>\n",
7999
+ styles: [".ul-image-cropper{display:flex;flex-direction:column;align-items:center;gap:16px}.ul-image-cropper__frame{display:block;width:100%;height:320px;--cropper-overlay-color: rgba(10, 10, 10, .85);--cropper-outline-color: rgba(10, 10, 10, .85);--cropper-color: #6f3de0;--cropper-border: 2px solid #6f3de0;--cropper-hover-border: 2px solid #6f3de0;--cropper-focus-border: 2px solid #6f3de0;--cropper-resize-square-bg: #6f3de0;--cropper-resize-square-border: 1px solid #0a0a0a}.ul-image-cropper__zoom{display:flex;align-items:center;gap:12px;width:100%}.ul-image-cropper__zoom-label{font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400;color:#ffffffb3;flex-shrink:0}.ul-image-cropper__zoom-input{flex:1;accent-color:#6f3de0}.ul-modal__foter-content{width:100%;margin-top:32px}\n"]
8000
+ }]
8001
+ }],
8002
+ ctorParameters: () => [],
8003
+ propDecorators: {
8004
+ open: [{
8005
+ type: i0.Input,
8006
+ args: [{
8007
+ isSignal: true,
8008
+ alias: "open",
8009
+ required: false
8010
+ }]
8011
+ }, {
8012
+ type: i0.Output,
8013
+ args: ["openChange"]
8014
+ }],
8015
+ imageFile: [{
8016
+ type: i0.Input,
8017
+ args: [{
8018
+ isSignal: true,
8019
+ alias: "imageFile",
8020
+ required: false
8021
+ }]
8022
+ }],
8023
+ shape: [{
8024
+ type: i0.Input,
8025
+ args: [{
8026
+ isSignal: true,
8027
+ alias: "shape",
8028
+ required: false
8029
+ }]
8030
+ }],
8031
+ aspectRatio: [{
8032
+ type: i0.Input,
8033
+ args: [{
8034
+ isSignal: true,
8035
+ alias: "aspectRatio",
8036
+ required: false
8037
+ }]
8038
+ }],
8039
+ maxOutputSize: [{
8040
+ type: i0.Input,
8041
+ args: [{
8042
+ isSignal: true,
8043
+ alias: "maxOutputSize",
8044
+ required: false
8045
+ }]
8046
+ }],
8047
+ title: [{
8048
+ type: i0.Input,
8049
+ args: [{
8050
+ isSignal: true,
8051
+ alias: "title",
8052
+ required: false
8053
+ }]
8054
+ }],
8055
+ confirmLabel: [{
8056
+ type: i0.Input,
8057
+ args: [{
8058
+ isSignal: true,
8059
+ alias: "confirmLabel",
8060
+ required: false
8061
+ }]
8062
+ }],
8063
+ zoomLabel: [{
8064
+ type: i0.Input,
8065
+ args: [{
8066
+ isSignal: true,
8067
+ alias: "zoomLabel",
8068
+ required: false
8069
+ }]
8070
+ }],
8071
+ frameAriaLabel: [{
8072
+ type: i0.Input,
8073
+ args: [{
8074
+ isSignal: true,
8075
+ alias: "frameAriaLabel",
8076
+ required: false
8077
+ }]
8078
+ }],
8079
+ cropped: [{
8080
+ type: i0.Output,
8081
+ args: ["cropped"]
8082
+ }],
8083
+ cancelled: [{
8084
+ type: i0.Output,
8085
+ args: ["cancelled"]
8086
+ }],
8087
+ loadFailed: [{
8088
+ type: i0.Output,
8089
+ args: ["loadFailed"]
8090
+ }],
8091
+ cropperRef: [{
8092
+ type: i0.ViewChild,
8093
+ args: ["cropper", { isSignal: true }]
8120
8094
  }]
8121
- }],
8122
- cropped: [{
8123
- type: i0.Output,
8124
- args: ["cropped"]
8125
- }],
8126
- cancelled: [{
8127
- type: i0.Output,
8128
- args: ["cancelled"]
8129
- }],
8130
- loadFailed: [{
8131
- type: i0.Output,
8132
- args: ["loadFailed"]
8133
- }],
8134
- cropperRef: [{
8135
- type: i0.ViewChild,
8136
- args: [i0.forwardRef(() => ImageCropperComponent$1), { isSignal: true }]
8137
- }]
8138
- }
8095
+ }
8096
+ })
8139
8097
  });
8140
8098
  const DEFAULT_DURATION_MS = 500;
8141
8099
  const MOVE_CANCEL_THRESHOLD_PX = 10;