oasys-lib 3.10.1-rc.0 → 3.11.0

package/fesm2022/oasys-lib.mjs

@@ -1393,7 +1393,7 @@ class TextInputComponent {
     showPassword = signal(false, ...(ngDevMode ? [{ debugName: "showPassword" }] : /* istanbul ignore next */ []));
     inputDidChange = signal(false, ...(ngDevMode ? [{ debugName: "inputDidChange" }] : /* istanbul ignore next */ [])); // only show valdiation after a change event (ie. blur)
     textInputType = signal('text', ...(ngDevMode ? [{ debugName: "textInputType" }] : /* istanbul ignore next */ []));
-    hasBeenFocused = signal(false, ...(ngDevMode ? [{ debugName: "hasBeenFocused" }] : /* istanbul ignore next */ [])); // once the field is focused, the password hint stays visible
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ [])); // track focus state for password hint display
     id = signal('', ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     safariAutocorrect = signal('on', ...(ngDevMode ? [{ debugName: "safariAutocorrect" }] : /* istanbul ignore next */ []));
     // Computed signal for hide_password_aria_label that combines the base label with the current input value for better screen reader context
@@ -1405,10 +1405,9 @@ class TextInputComponent {
         if (!this.hint()) {
             return false;
         }
-        // For password inputs, wait until the field is first focused, then keep the hint showing.
-        // Hiding it again on blur would move everything below it, so a click on the next button could miss.
+        // For password inputs, only show hint when focused
         if (this.type() === 'password') {
-            return this.hasBeenFocused();
+            return this.isFocused();
         }
         // For all other input types, always show hint
         return true;
@@ -1438,9 +1437,10 @@ class TextInputComponent {
         this.inputDidChange.set(false);
     }
     onFocus() {
-        this.hasBeenFocused.set(true);
+        this.isFocused.set(true);
     }
     onBlur() {
+        this.isFocused.set(false);
         // User left the field — reveal validation errors if still invalid.
         this.inputDidChange.set(true);
         // Mark the form control as touched (standard CVA behavior on blur).
@@ -1493,8 +1493,8 @@ class TextInputComponent {
             // Add error if it exists
             describedBy.push('error_' + this.id());
         }
-        // Only point at the hint while it is on the page, so screen readers never look for a missing element
-        if (this.shouldShowHint()) {
+        // Add hint if it exists
+        if (this.hint()) {
             describedBy.push('hint_' + this.id());
         }
         return describedBy.length > 0 ? describedBy.join(' ') : undefined;
@@ -3571,6 +3571,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
                 type: Input
             }] } });
 
+// Generated by logos/generate-logo-sprite.mjs. Do not edit by hand.
+// Add or remove SVGs in logos/ and run `npm run update-logos`.
+const LOGO_NAMES = [
+    'amazon',
+    'amex',
+    'apple-pay',
+    'bancontact',
+    'google-pay',
+    'ideal',
+    'klarna',
+    'maestro',
+    'mastercard',
+    'paypal',
+    'sepa',
+    'sofort',
+    'visa',
+];
+
+/**
+ * Renders full-colour artwork from the shared logo sprite. Unlike ui-icon,
+ * logos keep their own colours, so they look the same on every brand. Only
+ * payment provider badges exist so far; they render at a fixed 45 x 32 px so
+ * rows of payment methods line up.
+ */
+class LogoComponent {
+    logo_name;
+    /** Any CSS length, e.g. '4.8rem'. Sets the height; the width keeps the 45 x 32 ratio. */
+    logo_size_override;
+    /** Accessible name. Leave empty when nearby text already names it. */
+    alt_text = '';
+    get isKnownLogo() {
+        return LOGO_NAMES.includes(this.logo_name);
+    }
+    get logoPath() {
+        return `./shared/assets/logos/logos.svg#logo-${this.logo_name}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: LogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: LogoComponent, isStandalone: true, selector: "ui-logo", inputs: { logo_name: "logo_name", logo_size_override: "logo_size_override", alt_text: "alt_text" }, ngImport: i0, template: "@if (isKnownLogo) {\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    class=\"ui-logo\"\n    viewBox=\"0 0 45 32\"\n    [style.height]=\"logo_size_override\"\n    [attr.role]=\"alt_text.length > 0 ? 'img' : 'presentation'\"\n    [attr.aria-label]=\"alt_text.length > 0 ? alt_text : null\"\n    [attr.aria-hidden]=\"alt_text.length > 0 ? null : 'true'\"\n    focusable=\"false\"\n  >\n    <use [attr.href]=\"logoPath\"></use>\n  </svg>\n}\n", styles: [".ui-logo{display:inline-block;height:var(--oasys-size-unit-32);width:auto;aspect-ratio:45/32;vertical-align:middle}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: LogoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-logo', encapsulation: ViewEncapsulation.None, standalone: true, imports: [], template: "@if (isKnownLogo) {\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    class=\"ui-logo\"\n    viewBox=\"0 0 45 32\"\n    [style.height]=\"logo_size_override\"\n    [attr.role]=\"alt_text.length > 0 ? 'img' : 'presentation'\"\n    [attr.aria-label]=\"alt_text.length > 0 ? alt_text : null\"\n    [attr.aria-hidden]=\"alt_text.length > 0 ? null : 'true'\"\n    focusable=\"false\"\n  >\n    <use [attr.href]=\"logoPath\"></use>\n  </svg>\n}\n", styles: [".ui-logo{display:inline-block;height:var(--oasys-size-unit-32);width:auto;aspect-ratio:45/32;vertical-align:middle}\n"] }]
+        }], propDecorators: { logo_name: [{
+                type: Input,
+                args: [{ required: true }]
+            }], logo_size_override: [{
+                type: Input
+            }], alt_text: [{
+                type: Input
+            }] } });
+
 class OasysFormErrorsSummaryItemComponent {
     elementRef = inject(ElementRef);
     itemId = signal('errors-summary-item', ...(ngDevMode ? [{ debugName: "itemId" }] : /* istanbul ignore next */ []));
@@ -3777,5 +3828,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BannerComponent, BreadcrumbsComponent, CardComponent, CheckboxComponent, ChipComponent, DividerComponent, FormErrorsComponent, FormGroupComponent, HeroComponent, IMAGE_BREAKPOINTS, IMAGE_URL_PROVIDER, IconComponent, ImageComponent, LayoutBoxComponent, LayoutContainerComponent, LayoutGridColumnComponent, LayoutGridComponent, LayoutStackComponent, OasysAlertCancelDirective, OasysAlertComponent, OasysAlertConfirmDirective, OasysAlertContentDirective, OasysAlertModule, OasysAlertTitleDirective, OasysAutofocusDirective, BannerComponent as OasysBannerComponent, OasysBannerModule, OasysBreadcrumbModule, BreadcrumbsComponent as OasysBreadcrumbsComponent, OasysButtonComponent, OasysButtonGroupComponent, OasysButtonGroupModule, OasysButtonModule, CardComponent as OasysCardComponent, OasysCardModule, CheckboxComponent as OasysCheckboxComponent, OasysCheckboxModule, ChipComponent as OasysChipComponent, OasysChipModule, OasysComboboxComponent, OasysDirectivesModule, DividerComponent as OasysDividerComponent, OasysDividerModule, FormErrorsComponent as OasysFormErrorsComponent, OasysFormErrorsModule, OasysFormErrorsSummaryComponent, OasysFormErrorsSummaryItemComponent, OasysFormErrorsSummaryTitleComponent, FormGroupComponent as OasysFormGroupComponent, OasysFormGroupModule, OasysHeadingComponent, OasysHeadingModule, HeroComponent as OasysHeroComponent, OasysHeroModule, OasysHrefDirective, IconComponent as OasysIconComponent, OasysIconModule, ImageComponent as OasysImageComponent, OasysImageModule, LayoutBoxComponent as OasysLayoutBoxComponent, LayoutContainerComponent as OasysLayoutContainerComponent, LayoutGridColumnComponent as OasysLayoutGridColumnComponent, LayoutGridComponent as OasysLayoutGridComponent, OasysLayoutModule, LayoutStackComponent as OasysLayoutStackComponent, OasysPillComponent, OasysPillGroupComponent, OasysPillGroupModule, OasysPillModule, ProgressBarComponent as OasysProgressBarComponent, PromoCardComponent as OasysPromoCardComponent, OasysPromoCardModule, RadioComponent as OasysRadioComponent, OasysRadioModule, SectionComponent as OasysSectionComponent, SelectCardComponent as OasysSelectCardComponent, OasysSelectCardModule, OasysTabComponent, OasysTabGroupComponent, OasysTabsModule, TextComponent as OasysTextComponent, TextInputComponent as OasysTextInputComponent, OasysTextInputModule, OasysTextModule, TextareaComponent as OasysTextareaComponent, OasysThemeDirective, ProgressBarComponent, PromoCardComponent, ROUTING_HANDLER, RadioComponent, SWIPER_PROVIDER_TOKEN, SectionComponent, SectionModule, SelectCardComponent, SwiperProvider, TextComponent, TextareaComponent };
+export { BannerComponent, BreadcrumbsComponent, CardComponent, CheckboxComponent, ChipComponent, DividerComponent, FormErrorsComponent, FormGroupComponent, HeroComponent, IMAGE_BREAKPOINTS, IMAGE_URL_PROVIDER, IconComponent, ImageComponent, LOGO_NAMES, LayoutBoxComponent, LayoutContainerComponent, LayoutGridColumnComponent, LayoutGridComponent, LayoutStackComponent, LogoComponent, OasysAlertCancelDirective, OasysAlertComponent, OasysAlertConfirmDirective, OasysAlertContentDirective, OasysAlertModule, OasysAlertTitleDirective, OasysAutofocusDirective, BannerComponent as OasysBannerComponent, OasysBannerModule, OasysBreadcrumbModule, BreadcrumbsComponent as OasysBreadcrumbsComponent, OasysButtonComponent, OasysButtonGroupComponent, OasysButtonGroupModule, OasysButtonModule, CardComponent as OasysCardComponent, OasysCardModule, CheckboxComponent as OasysCheckboxComponent, OasysCheckboxModule, ChipComponent as OasysChipComponent, OasysChipModule, OasysComboboxComponent, OasysDirectivesModule, DividerComponent as OasysDividerComponent, OasysDividerModule, FormErrorsComponent as OasysFormErrorsComponent, OasysFormErrorsModule, OasysFormErrorsSummaryComponent, OasysFormErrorsSummaryItemComponent, OasysFormErrorsSummaryTitleComponent, FormGroupComponent as OasysFormGroupComponent, OasysFormGroupModule, OasysHeadingComponent, OasysHeadingModule, HeroComponent as OasysHeroComponent, OasysHeroModule, OasysHrefDirective, IconComponent as OasysIconComponent, OasysIconModule, ImageComponent as OasysImageComponent, OasysImageModule, LayoutBoxComponent as OasysLayoutBoxComponent, LayoutContainerComponent as OasysLayoutContainerComponent, LayoutGridColumnComponent as OasysLayoutGridColumnComponent, LayoutGridComponent as OasysLayoutGridComponent, OasysLayoutModule, LayoutStackComponent as OasysLayoutStackComponent, LogoComponent as OasysLogoComponent, OasysPillComponent, OasysPillGroupComponent, OasysPillGroupModule, OasysPillModule, ProgressBarComponent as OasysProgressBarComponent, PromoCardComponent as OasysPromoCardComponent, OasysPromoCardModule, RadioComponent as OasysRadioComponent, OasysRadioModule, SectionComponent as OasysSectionComponent, SelectCardComponent as OasysSelectCardComponent, OasysSelectCardModule, OasysTabComponent, OasysTabGroupComponent, OasysTabsModule, TextComponent as OasysTextComponent, TextInputComponent as OasysTextInputComponent, OasysTextInputModule, OasysTextModule, TextareaComponent as OasysTextareaComponent, OasysThemeDirective, ProgressBarComponent, PromoCardComponent, ROUTING_HANDLER, RadioComponent, SWIPER_PROVIDER_TOKEN, SectionComponent, SectionModule, SelectCardComponent, SwiperProvider, TextComponent, TextareaComponent };
 //# sourceMappingURL=oasys-lib.mjs.map