@underlayerdev/ui 0.10.1 → 0.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2738,27 +2738,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
2738
2738
|
args: ['document:keydown.escape']
|
|
2739
2739
|
}] } });
|
|
2740
2740
|
|
|
2741
|
-
// Matches $spacing-spacing-60 (240px) — the longer side of the fixed crop
|
|
2742
|
-
// frame used in locked-aspect-ratio mode. Kept as a plain constant since
|
|
2743
|
-
// ngx-image-cropper's inputs take numbers, not Sass tokens.
|
|
2744
|
-
const FRAME_MAX_DIMENSION = 240;
|
|
2745
2741
|
const DEFAULT_MAX_OUTPUT_SIZE = 1024;
|
|
2746
|
-
|
|
2747
|
-
|
|
2748
|
-
const
|
|
2742
|
+
// A floor on the crop frame's resizability — without one, ngx-image-cropper
|
|
2743
|
+
// happily lets it shrink to a few pixels, which is never a useful crop.
|
|
2744
|
+
const MIN_FRAME_DIMENSION = 40;
|
|
2749
2745
|
/**
|
|
2750
2746
|
* Modal flow for cropping/resizing a photo. Wraps ngx-image-cropper so the
|
|
2751
2747
|
* third-party crop mechanics never leak outside the design system —
|
|
2752
2748
|
* consumers only ever see `ul-image-cropper`.
|
|
2753
2749
|
*
|
|
2754
|
-
*
|
|
2755
|
-
* -
|
|
2756
|
-
*
|
|
2757
|
-
*
|
|
2758
|
-
*
|
|
2759
|
-
*
|
|
2760
|
-
*
|
|
2761
|
-
*
|
|
2750
|
+
* The frame is always what moves/resizes, never the photo: ngx-image-cropper
|
|
2751
|
+
* only bounds-checks that path (`checkCropperWithinMaxSizeBounds`) — its
|
|
2752
|
+
* alternative "drag the photo within a fixed frame" mode applies pan
|
|
2753
|
+
* offsets with no clamping at all, so the photo could be dragged clean out
|
|
2754
|
+
* of the frame. `aspectRatio` just decides whether that frame is locked to
|
|
2755
|
+
* a ratio (e.g. `1` for an avatar) or freely resizable (the default — for
|
|
2756
|
+
* listing photos, which keep their own shape today, see `um-image-upload`'s
|
|
2757
|
+
* auto-width carousel).
|
|
2762
2758
|
*
|
|
2763
2759
|
* Emits a resized `File`, ready to hand to any upload call that accepts
|
|
2764
2760
|
* one — this component only produces the file, it never uploads it.
|
|
@@ -2791,11 +2787,7 @@ class ImageCropperComponent {
|
|
|
2791
2787
|
/** Visual shape of the crop mask. */
|
|
2792
2788
|
shape = input('rectangle', /* @ts-ignore */
|
|
2793
2789
|
...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
|
|
2794
|
-
/**
|
|
2795
|
-
* Locks the crop frame to this width/height ratio and switches to
|
|
2796
|
-
* pan-and-zoom mode. Omit (or pass null) for a free-form resizable frame
|
|
2797
|
-
* with no ratio imposed.
|
|
2798
|
-
*/
|
|
2790
|
+
/** Locks the crop frame to this width/height ratio. Omit (or pass null) for a free-form frame. */
|
|
2799
2791
|
aspectRatio = input(null, /* @ts-ignore */
|
|
2800
2792
|
...(ngDevMode ? [{ debugName: "aspectRatio" }] : /* istanbul ignore next */ []));
|
|
2801
2793
|
/** Longest side (px) of the final output image; scales down without distorting. */
|
|
@@ -2807,18 +2799,12 @@ class ImageCropperComponent {
|
|
|
2807
2799
|
/** Label for the confirm button. */
|
|
2808
2800
|
confirmLabel = input('Save', /* @ts-ignore */
|
|
2809
2801
|
...(ngDevMode ? [{ debugName: "confirmLabel" }] : /* istanbul ignore next */ []));
|
|
2810
|
-
/** Label for the cancel button. */
|
|
2811
|
-
cancelLabel = input('Cancel', /* @ts-ignore */
|
|
2812
|
-
...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
|
|
2813
|
-
/** Label next to the zoom slider (locked-aspect mode only). */
|
|
2814
|
-
zoomLabel = input('Zoom', /* @ts-ignore */
|
|
2815
|
-
...(ngDevMode ? [{ debugName: "zoomLabel" }] : /* istanbul ignore next */ []));
|
|
2816
2802
|
/** Accessible label for the crop frame. */
|
|
2817
2803
|
frameAriaLabel = input('Crop frame', /* @ts-ignore */
|
|
2818
2804
|
...(ngDevMode ? [{ debugName: "frameAriaLabel" }] : /* istanbul ignore next */ []));
|
|
2819
2805
|
/** Emitted with the cropped, resized photo once the user confirms. */
|
|
2820
2806
|
cropped = output();
|
|
2821
|
-
/** Emitted when the user
|
|
2807
|
+
/** Emitted when the user dismisses the modal (backdrop, Escape, close button) without cropping. */
|
|
2822
2808
|
cancelled = output();
|
|
2823
2809
|
/** Emitted when the source photo fails to load in the cropper. */
|
|
2824
2810
|
loadFailed = output();
|
|
@@ -2833,45 +2819,17 @@ class ImageCropperComponent {
|
|
|
2833
2819
|
/** ngx-image-cropper always wants a number here; unused while isLocked() is false. */
|
|
2834
2820
|
effectiveAspectRatio = computed(() => this.aspectRatio() ?? 1, /* @ts-ignore */
|
|
2835
2821
|
...(ngDevMode ? [{ debugName: "effectiveAspectRatio" }] : /* istanbul ignore next */ []));
|
|
2836
|
-
|
|
2837
|
-
// the ratio, so non-square locked ratios (e.g. 4:3) get a proportional
|
|
2838
|
-
// frame instead of a squashed 240x240 one.
|
|
2839
|
-
frameWidth = computed(() => {
|
|
2840
|
-
if (!this.isLocked())
|
|
2841
|
-
return undefined;
|
|
2842
|
-
const ratio = this.effectiveAspectRatio();
|
|
2843
|
-
return ratio >= 1 ? FRAME_MAX_DIMENSION : FRAME_MAX_DIMENSION * ratio;
|
|
2844
|
-
}, /* @ts-ignore */
|
|
2845
|
-
...(ngDevMode ? [{ debugName: "frameWidth" }] : /* istanbul ignore next */ []));
|
|
2846
|
-
frameHeight = computed(() => {
|
|
2847
|
-
if (!this.isLocked())
|
|
2848
|
-
return undefined;
|
|
2849
|
-
const ratio = this.effectiveAspectRatio();
|
|
2850
|
-
return ratio >= 1 ? FRAME_MAX_DIMENSION / ratio : FRAME_MAX_DIMENSION;
|
|
2851
|
-
}, /* @ts-ignore */
|
|
2852
|
-
...(ngDevMode ? [{ debugName: "frameHeight" }] : /* istanbul ignore next */ []));
|
|
2853
|
-
minZoom = MIN_ZOOM;
|
|
2854
|
-
maxZoom = MAX_ZOOM;
|
|
2855
|
-
zoomStep = ZOOM_STEP;
|
|
2856
|
-
zoom = signal(MIN_ZOOM, /* @ts-ignore */
|
|
2857
|
-
...(ngDevMode ? [{ debugName: "zoom" }] : /* istanbul ignore next */ []));
|
|
2858
|
-
transform = computed(() => ({ scale: this.zoom() }), /* @ts-ignore */
|
|
2859
|
-
...(ngDevMode ? [{ debugName: "transform" }] : /* istanbul ignore next */ []));
|
|
2822
|
+
minFrameDimension = MIN_FRAME_DIMENSION;
|
|
2860
2823
|
cropperReady = signal(false, /* @ts-ignore */
|
|
2861
2824
|
...(ngDevMode ? [{ debugName: "cropperReady" }] : /* istanbul ignore next */ []));
|
|
2862
2825
|
constructor() {
|
|
2863
|
-
// A fresh file (new selection, or re-opening for a retry)
|
|
2864
|
-
//
|
|
2865
|
-
// and isn't croppable again until ngx-image-cropper reports it loaded.
|
|
2826
|
+
// A fresh file (new selection, or re-opening for a retry) isn't
|
|
2827
|
+
// croppable again until ngx-image-cropper reports it loaded.
|
|
2866
2828
|
effect(() => {
|
|
2867
2829
|
this.imageFile();
|
|
2868
|
-
this.zoom.set(MIN_ZOOM);
|
|
2869
2830
|
this.cropperReady.set(false);
|
|
2870
2831
|
});
|
|
2871
2832
|
}
|
|
2872
|
-
onZoomInput(event) {
|
|
2873
|
-
this.zoom.set(event.target.valueAsNumber);
|
|
2874
|
-
}
|
|
2875
2833
|
async onConfirm() {
|
|
2876
2834
|
const croppedEvent = await this.cropperRef()?.crop('blob');
|
|
2877
2835
|
const blob = croppedEvent?.blob;
|
|
@@ -2880,17 +2838,16 @@ class ImageCropperComponent {
|
|
|
2880
2838
|
this.cropped.emit(new File([blob], 'photo.jpg', { type: blob.type }));
|
|
2881
2839
|
this.open.set(false);
|
|
2882
2840
|
}
|
|
2883
|
-
|
|
2841
|
+
onClosed() {
|
|
2884
2842
|
this.cancelled.emit();
|
|
2885
|
-
this.open.set(false);
|
|
2886
2843
|
}
|
|
2887
2844
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ImageCropperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2888
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ImageCropperComponent, isStandalone: true, selector: "ul-image-cropper", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, imageFile: { classPropertyName: "imageFile", publicName: "imageFile", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, maxOutputSize: { classPropertyName: "maxOutputSize", publicName: "maxOutputSize", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null },
|
|
2845
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ImageCropperComponent, isStandalone: true, selector: "ul-image-cropper", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, imageFile: { classPropertyName: "imageFile", publicName: "imageFile", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, maxOutputSize: { classPropertyName: "maxOutputSize", publicName: "maxOutputSize", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, frameAriaLabel: { classPropertyName: "frameAriaLabel", publicName: "frameAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", cropped: "cropped", cancelled: "cancelled", loadFailed: "loadFailed" }, viewQueries: [{ propertyName: "cropperRef", first: true, predicate: ImageCropperComponent$1, descendants: true, isSignal: true }], ngImport: i0, 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 [cropperMinWidth]=\"minFrameDimension\"\n [cropperMinHeight]=\"minFrameDimension\"\n [resizeToWidth]=\"maxOutputSize()\"\n [resizeToHeight]=\"maxOutputSize()\"\n [cropperFrameAriaLabel]=\"frameAriaLabel()\"\n format=\"jpeg\"\n output=\"blob\"\n (cropperReady)=\"cropperReady.set(true)\"\n (loadImageFailed)=\"loadFailed.emit()\"\n />\n </div>\n }\n\n <div 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", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-image-cropper{display:flex;flex-direction:column;align-items:center}.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}\n"], dependencies: [{ kind: "component", type: ImageCropperComponent$1, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "component", type: ModalComponent, selector: "ul-modal", inputs: ["open", "variant", "title", "closeOnBackdropClick", "showCloseButton", "confirmLabel", "cancelLabel", "customClass", "fullScreenInMobile"], outputs: ["openChange", "closed", "confirmed", "cancelled"] }, { kind: "component", type: ButtonComponent, selector: "ul-button", inputs: ["size", "theme", "iconOnly", "vertical", "disabled", "type", "ariaLabel"], outputs: ["buttonClick"] }] });
|
|
2889
2846
|
}
|
|
2890
2847
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ImageCropperComponent, decorators: [{
|
|
2891
2848
|
type: Component,
|
|
2892
|
-
args: [{ selector: 'ul-image-cropper', imports: [ImageCropperComponent$1, ModalComponent, ButtonComponent], template: "<ul-modal [(open)]=\"open\" variant=\"custom\" [title]=\"title()\" (closed)=\"
|
|
2893
|
-
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], imageFile: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageFile", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], maxOutputSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxOutputSize", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: false }] }],
|
|
2849
|
+
args: [{ selector: 'ul-image-cropper', imports: [ImageCropperComponent$1, ModalComponent, ButtonComponent], 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 [cropperMinWidth]=\"minFrameDimension\"\n [cropperMinHeight]=\"minFrameDimension\"\n [resizeToWidth]=\"maxOutputSize()\"\n [resizeToHeight]=\"maxOutputSize()\"\n [cropperFrameAriaLabel]=\"frameAriaLabel()\"\n format=\"jpeg\"\n output=\"blob\"\n (cropperReady)=\"cropperReady.set(true)\"\n (loadImageFailed)=\"loadFailed.emit()\"\n />\n </div>\n }\n\n <div 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", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-image-cropper{display:flex;flex-direction:column;align-items:center}.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}\n"] }]
|
|
2850
|
+
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], imageFile: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageFile", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], maxOutputSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxOutputSize", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: false }] }], frameAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "frameAriaLabel", required: false }] }], cropped: [{ type: i0.Output, args: ["cropped"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], loadFailed: [{ type: i0.Output, args: ["loadFailed"] }], cropperRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ImageCropperComponent$1), { isSignal: true }] }] } });
|
|
2894
2851
|
|
|
2895
2852
|
/**
|
|
2896
2853
|
* A reusable input component that follows UDS design system guidelines.
|