codexly-ui 0.13.1 → 0.13.3

package/fesm2022/codexly-ui.mjs

@@ -1349,13 +1349,28 @@ class ClxAvatarComponent {
     shape = input('circle', ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
     alt = input('Avatar', ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
     _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    /** Set by (error) on the <img> when src() fails to load (404, expired/broken URL, CORS, wrong
+     *  host, ...) — without this, _contentType() would keep returning 'image' forever since it only
+     *  checks whether src() is truthy, never whether it actually loaded, and the browser renders the
+     *  alt() text raw inside the small circular avatar container ("Avatar" clipped into "Avata").
+     *  Reset by the effect below whenever src() itself changes, so a later successful URL (e.g. after
+     *  uploading a new profile photo) gets a fresh chance to load instead of staying stuck on the
+     *  fallback from a previous broken one. */
+    _imgFailed = signal(false, ...(ngDevMode ? [{ debugName: "_imgFailed" }] : /* istanbul ignore next */ []));
+    _resetImgFailedOnSrcChange = effect(() => {
+        this.src();
+        this._imgFailed.set(false);
+    }, ...(ngDevMode ? [{ debugName: "_resetImgFailedOnSrcChange" }] : /* istanbul ignore next */ []));
     _contentType = computed(() => {
-        if (this.src())
+        if (this.src() && !this._imgFailed())
             return 'image';
         if (this.initials())
             return 'text';
         return 'icon';
     }, ...(ngDevMode ? [{ debugName: "_contentType" }] : /* istanbul ignore next */ []));
+    _onImgError() {
+        this._imgFailed.set(true);
+    }
     _initials = computed(() => (this.initials() ?? '').slice(0, 3).toUpperCase(), ...(ngDevMode ? [{ debugName: "_initials" }] : /* istanbul ignore next */ []));
     _iconSize = computed(() => AVATAR_ICON_SIZE_MAP[this.size()], ...(ngDevMode ? [{ debugName: "_iconSize" }] : /* istanbul ignore next */ []));
     _shapeClass = computed(() => {
@@ -1386,7 +1401,7 @@ class ClxAvatarComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxAvatarComponent, isStandalone: true, selector: "clx-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "img" }, properties: { "class": "_hostClass()", "attr.aria-label": "alt()" } }, ngImport: i0, template: `
     @switch (_contentType()) {
       @case ('image') {
-        <img [src]="src()" [alt]="alt()" class="w-full h-full object-cover" />
+        <img [src]="src()" [alt]="alt()" class="w-full h-full object-cover" (error)="_onImgError()" />
       }
       @case ('text') {
         <span [class]="_textClass()">{{ _initials() }}</span>
@@ -1406,7 +1421,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     template: `
     @switch (_contentType()) {
       @case ('image') {
-        <img [src]="src()" [alt]="alt()" class="w-full h-full object-cover" />
+        <img [src]="src()" [alt]="alt()" class="w-full h-full object-cover" (error)="_onImgError()" />
       }
       @case ('text') {
         <span [class]="_textClass()">{{ _initials() }}</span>
@@ -10446,23 +10461,6 @@ class ClxWizardComponent {
     prevLabel = input('Anterior', ...(ngDevMode ? [{ debugName: "prevLabel" }] : /* istanbul ignore next */ []));
     nextLabel = input('Siguiente', ...(ngDevMode ? [{ debugName: "nextLabel" }] : /* istanbul ignore next */ []));
     finishLabel = input('Finalizar', ...(ngDevMode ? [{ debugName: "finishLabel" }] : /* istanbul ignore next */ []));
-    /** Which step to land on when the wizard first renders — for restoring an in-progress flow (e.g.
-     *  a saved draft, or state re-hydrated after an external redirect) rather than always starting
-     *  fresh at step 0. Applied once, in ngAfterContentInit, and clamped to a valid index; deliberately
-     *  bypasses the `linear` guard that goTo()/next() enforce for user-driven navigation — that guard
-     *  exists to stop a customer from skipping ahead of steps they haven't filled in yet, which doesn't
-     *  apply here: the caller is asserting those earlier steps are ALREADY valid (e.g. their own
-     *  signals were just re-prefilled from a backend order), not trying to skip past them. Consumers
-     *  are responsible for that guarantee — this input trusts it rather than re-validating each
-     *  skipped step, since isValid() reflects the CURRENT signal state, which the caller controls. */
-    initialStep = input(undefined, ...(ngDevMode ? [{ debugName: "initialStep" }] : /* istanbul ignore next */ []));
-    /** Hides the built-in "Finalizar" button on the LAST step only (every other step's own "Siguiente"
-     *  button is unaffected) — for a caller that needs its own custom action there instead (e.g. a
-     *  payment gateway's own branded button rendered inside that step's own projected content, which
-     *  must trigger the exact same submit logic the wizard's own (finish) output would have, so the
-     *  step's own isValid still gates whether that custom button is meaningful to show/enable — this
-     *  input only removes the wizard's OWN redundant generic button, nothing about validation). */
-    hideFinishButton = input(false, ...(ngDevMode ? [{ debugName: "hideFinishButton" }] : /* istanbul ignore next */ []));
     // ── Outputs ────────────────────────────────────────────────────────────────
     stepChange = output();
     finish = output();
@@ -10475,20 +10473,12 @@ class ClxWizardComponent {
     // ── Lifecycle ──────────────────────────────────────────────────────────────
     ngAfterContentInit() {
         this._steps = this._stepQuery.toArray();
-        this._applyInitialStep();
         this._syncActiveAttrs();
         this._stepQuery.changes.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
             this._steps = this._stepQuery.toArray();
             this._syncActiveAttrs();
         });
     }
-    _applyInitialStep() {
-        const requested = this.initialStep();
-        if (requested == null)
-            return;
-        const clamped = Math.min(Math.max(requested, 0), this._lastIndex());
-        this._currentIndex.set(clamped);
-    }
     _syncActiveAttrs() {
         this._steps.forEach((step, i) => {
             step.nativeEl.setAttribute('data-active', String(i === this._currentIndex()));
@@ -10579,7 +10569,7 @@ class ClxWizardComponent {
         return `${base} border-2 border-clx-border text-clx-text-subtle bg-clx-surface ${ptr}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxWizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxWizardComponent, isStandalone: true, selector: "clx-wizard", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, activeTextColor: { classPropertyName: "activeTextColor", publicName: "activeTextColor", isSignal: true, isRequired: false, transformFunction: null }, underlineColor: { classPropertyName: "underlineColor", publicName: "underlineColor", isSignal: true, isRequired: false, transformFunction: null }, stepColor: { classPropertyName: "stepColor", publicName: "stepColor", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, prevLabel: { classPropertyName: "prevLabel", publicName: "prevLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, finishLabel: { classPropertyName: "finishLabel", publicName: "finishLabel", isSignal: true, isRequired: false, transformFunction: null }, initialStep: { classPropertyName: "initialStep", publicName: "initialStep", isSignal: true, isRequired: false, transformFunction: null }, hideFinishButton: { classPropertyName: "hideFinishButton", publicName: "hideFinishButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stepChange: "stepChange", finish: "finish" }, queries: [{ propertyName: "_stepQuery", predicate: ClxStepComponent }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxWizardComponent, isStandalone: true, selector: "clx-wizard", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, activeTextColor: { classPropertyName: "activeTextColor", publicName: "activeTextColor", isSignal: true, isRequired: false, transformFunction: null }, underlineColor: { classPropertyName: "underlineColor", publicName: "underlineColor", isSignal: true, isRequired: false, transformFunction: null }, stepColor: { classPropertyName: "stepColor", publicName: "stepColor", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, prevLabel: { classPropertyName: "prevLabel", publicName: "prevLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, finishLabel: { classPropertyName: "finishLabel", publicName: "finishLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stepChange: "stepChange", finish: "finish" }, queries: [{ propertyName: "_stepQuery", predicate: ClxStepComponent }], ngImport: i0, template: `
     <div [class]="_rootClass()">
 
       <!-- ══ HORIZONTAL: clx-tabs indicator ═══════════════════════════════ -->
@@ -10668,7 +10658,7 @@ class ClxWizardComponent {
               [disabled]="!_currentStepValid()"
               (click)="next()"
             >{{ nextLabel() }}</button>
-          } @else if (!hideFinishButton()) {
+          } @else {
             <button
               clx-button
               type="button"
@@ -10777,7 +10767,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
               [disabled]="!_currentStepValid()"
               (click)="next()"
             >{{ nextLabel() }}</button>
-          } @else if (!hideFinishButton()) {
+          } @else {
             <button
               clx-button
               type="button"
@@ -10794,7 +10784,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       </div>
     </div>
   `, styles: ["@keyframes clx-wizard-fade-slide{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:translate(0)}}.clx-wizard-step-enter{animation:clx-wizard-fade-slide .22s cubic-bezier(.4,0,.2,1) both}@keyframes clx-wizard-fill{0%{width:0%}to{width:100%}}.clx-wizard-connector-fill{animation:clx-wizard-fill .3s ease both}clx-step[data-active=false]{display:none}\n"] }]
-        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], activeTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTextColor", required: false }] }], underlineColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "underlineColor", required: false }] }], stepColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepColor", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], prevLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "prevLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], finishLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "finishLabel", required: false }] }], initialStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialStep", required: false }] }], hideFinishButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideFinishButton", required: false }] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }], finish: [{ type: i0.Output, args: ["finish"] }], _stepQuery: [{
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], activeTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTextColor", required: false }] }], underlineColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "underlineColor", required: false }] }], stepColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepColor", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], prevLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "prevLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], finishLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "finishLabel", required: false }] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }], finish: [{ type: i0.Output, args: ["finish"] }], _stepQuery: [{
                 type: ContentChildren,
                 args: [ClxStepComponent]
             }] } });