s4y-ui 5.3.2 → 5.4.2

package/fesm2022/s4y-ui.mjs

@@ -5167,6 +5167,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 }]
         }] });
 
+class InformationBannerComponent {
+    sanitize = inject(DomSanitizer);
+    severity = input('neutral');
+    props = input({
+        closable: false,
+        iconShow: true,
+        iconSize: 22,
+    });
+    headerTpl = contentChild('headerTpl');
+    contentTpl = contentChild('contentTpl');
+    footerTpl = contentChild('footerTpl');
+    onClosable = output();
+    icon = computed(() => {
+        const p = this.props();
+        if (p.iconShow === false)
+            return '';
+        const rawSvg = p.iconUri?.trim()
+            ? p.iconUri
+            : this.remixSvgBySeverity[this.severity()];
+        return this.sanitize.bypassSecurityTrustHtml(rawSvg);
+    });
+    bannerClass = computed(() => `s4y-information-banner--${this.severity()}`);
+    // --- Remix Icon SVGs (line) ---
+    remixSvgBySeverity = {
+        neutral: `
+      <svg viewBox="0 0 24 24" width="100%" height="100%" fill="currentColor" aria-hidden="true">
+        <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm-1-9h2v6h-2v-6Zm0-4h2v2h-2V7Z"/>
+      </svg>
+    `,
+        info: `
+      <svg viewBox="0 0 24 24" width="100%" height="100%" fill="currentColor" aria-hidden="true">
+        <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm-1-9h2v6h-2v-6Zm0-4h2v2h-2V7Z"/>
+      </svg>
+    `,
+        success: `
+      <svg viewBox="0 0 24 24" width="100%" height="100%" fill="currentColor" aria-hidden="true">
+        <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm3.535-10.95 1.414 1.414-5.657 5.657L7.05 11.879l1.414-1.414 2.828 2.828 4.243-4.243Z"/>
+      </svg>
+    `,
+        warning: `
+      <svg viewBox="0 0 24 24" width="100%" height="100%" fill="currentColor" aria-hidden="true">
+        <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm-1-5h2v2h-2v-2Zm0-10h2v8h-2V5Z"/>
+      </svg>
+    `,
+        error: `
+      <svg viewBox="0 0 24 24" width="100%" height="100%" fill="currentColor" aria-hidden="true">
+        <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm2.828-11.657L13.414 9.757 12 8.343 10.586 9.757 9.172 8.343 7.757 9.757 9.172 11.17 7.757 12.586 9.172 14 10.586 12.586 12 14 13.414 12.586 14.828 14l1.415-1.414-1.415-1.415 1.415-1.414-1.415-1.414Z"/>
+      </svg>
+    `,
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InformationBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: InformationBannerComponent, isStandalone: true, selector: "s4y-information-banner", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClosable: "onClosable" }, queries: [{ propertyName: "headerTpl", first: true, predicate: ["headerTpl"], descendants: true, isSignal: true }, { propertyName: "contentTpl", first: true, predicate: ["contentTpl"], descendants: true, isSignal: true }, { propertyName: "footerTpl", first: true, predicate: ["footerTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "@let model = props();\r\n\r\n<div class=\"s4y-information-banner-container\" [class]=\"bannerClass()\">\r\n  <span\r\n    class=\"info-banner__icon\"\r\n    [style.width.px]=\"model.iconSize ?? 22\"\r\n    [style.height.px]=\"model.iconSize ?? 22\"\r\n    [innerHTML]=\"icon()\">\r\n  </span>\r\n  <div class=\"s4y-information-banner__content\">\r\n    @let headerTemplate = headerTpl();\r\n\r\n    @if (headerTemplate) {\r\n      <ng-template *ngTemplateOutlet=\"headerTemplate\"></ng-template>\r\n    } @else {\r\n      <div class=\"flex align-center justify-between\">\r\n        <p class=\"fw-600 small-text-regular\">{{ model.title }}</p>\r\n\r\n        @if (model.closable) {\r\n          <button type=\"button\" (click)=\"onClosable.emit()\">&times;</button>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @let contentTemplate = contentTpl();\r\n\r\n    @if (contentTemplate) {\r\n      <ng-template *ngTemplateOutlet=\"contentTemplate\"></ng-template>\r\n    } @else {\r\n      <p class=\"small-text-regular gray-7 fw-400\">\r\n        {{ model.description }}\r\n      </p>\r\n    }\r\n\r\n    @let footerTemplate = footerTpl();\r\n\r\n    @if (footerTemplate) {\r\n      <div class=\"s4y-information-banner__footer\">\r\n        <ng-template *ngTemplateOutlet=\"footerTemplate\"></ng-template>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".s4y-information-banner-container{border-radius:var(--radius);padding:1.6rem;background-color:#f5f7f9;display:flex;gap:1.4rem;border:1px solid transparent}.s4y-information-banner-container .info-banner__icon{display:grid;place-items:center;flex-shrink:0;color:var(--info-banner-icon);line-height:0}.s4y-information-banner-container .info-banner__icon svg{display:block}.s4y-information-banner-container .s4y-information-banner__content{flex-grow:1;display:flex;flex-direction:column;gap:.6rem}.s4y-information-banner-container .s4y-information-banner__content .fw-400{font-weight:400;margin-right:1rem}.s4y-information-banner-container .s4y-information-banner__content .fw-600{font-weight:600}.s4y-information-banner-container .s4y-information-banner__footer{margin-top:1rem}.s4y-information-banner-container.s4y-information-banner--neutral{background:#f5f7f9;border-color:#d7dde3;--info-banner-icon: #6b7280}.s4y-information-banner-container.s4y-information-banner--info{background:#f5f9ff;border-color:#bcd7ff;--info-banner-icon: #2563eb}.s4y-information-banner-container.s4y-information-banner--success{background:#f2fbf5;border-color:#bfe8cd;--info-banner-icon: #16a34a}.s4y-information-banner-container.s4y-information-banner--warning{background:#fff6eb;border-color:#ffd3a6;--info-banner-icon: #f59e0b}.s4y-information-banner-container.s4y-information-banner--error{background:#fff1f1;border-color:#ffb4b4;--info-banner-icon: #dc2626}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InformationBannerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's4y-information-banner', imports: [NgTemplateOutlet], template: "@let model = props();\r\n\r\n<div class=\"s4y-information-banner-container\" [class]=\"bannerClass()\">\r\n  <span\r\n    class=\"info-banner__icon\"\r\n    [style.width.px]=\"model.iconSize ?? 22\"\r\n    [style.height.px]=\"model.iconSize ?? 22\"\r\n    [innerHTML]=\"icon()\">\r\n  </span>\r\n  <div class=\"s4y-information-banner__content\">\r\n    @let headerTemplate = headerTpl();\r\n\r\n    @if (headerTemplate) {\r\n      <ng-template *ngTemplateOutlet=\"headerTemplate\"></ng-template>\r\n    } @else {\r\n      <div class=\"flex align-center justify-between\">\r\n        <p class=\"fw-600 small-text-regular\">{{ model.title }}</p>\r\n\r\n        @if (model.closable) {\r\n          <button type=\"button\" (click)=\"onClosable.emit()\">&times;</button>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @let contentTemplate = contentTpl();\r\n\r\n    @if (contentTemplate) {\r\n      <ng-template *ngTemplateOutlet=\"contentTemplate\"></ng-template>\r\n    } @else {\r\n      <p class=\"small-text-regular gray-7 fw-400\">\r\n        {{ model.description }}\r\n      </p>\r\n    }\r\n\r\n    @let footerTemplate = footerTpl();\r\n\r\n    @if (footerTemplate) {\r\n      <div class=\"s4y-information-banner__footer\">\r\n        <ng-template *ngTemplateOutlet=\"footerTemplate\"></ng-template>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".s4y-information-banner-container{border-radius:var(--radius);padding:1.6rem;background-color:#f5f7f9;display:flex;gap:1.4rem;border:1px solid transparent}.s4y-information-banner-container .info-banner__icon{display:grid;place-items:center;flex-shrink:0;color:var(--info-banner-icon);line-height:0}.s4y-information-banner-container .info-banner__icon svg{display:block}.s4y-information-banner-container .s4y-information-banner__content{flex-grow:1;display:flex;flex-direction:column;gap:.6rem}.s4y-information-banner-container .s4y-information-banner__content .fw-400{font-weight:400;margin-right:1rem}.s4y-information-banner-container .s4y-information-banner__content .fw-600{font-weight:600}.s4y-information-banner-container .s4y-information-banner__footer{margin-top:1rem}.s4y-information-banner-container.s4y-information-banner--neutral{background:#f5f7f9;border-color:#d7dde3;--info-banner-icon: #6b7280}.s4y-information-banner-container.s4y-information-banner--info{background:#f5f9ff;border-color:#bcd7ff;--info-banner-icon: #2563eb}.s4y-information-banner-container.s4y-information-banner--success{background:#f2fbf5;border-color:#bfe8cd;--info-banner-icon: #16a34a}.s4y-information-banner-container.s4y-information-banner--warning{background:#fff6eb;border-color:#ffd3a6;--info-banner-icon: #f59e0b}.s4y-information-banner-container.s4y-information-banner--error{background:#fff1f1;border-color:#ffb4b4;--info-banner-icon: #dc2626}\n"] }]
+        }] });
+
 /*
  * Public API Surface of s4y-components
  */
@@ -5176,5 +5234,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AsideComponent, AsideService, AvatarComponent, BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbService, ButtonComponent, CheckboxComponent, ClickOutsideDirective, CollapseComponent, CollapseModule, CollapsePanelComponent, ConfirmationService, DYNAMIC_DIALOG_DATA, DYNAMIC_DIALOG_OPTIONS, DashboardContainerComponent, DashboardLayoutComponent, DashboardModule, DashboardRoutesComponent, DrawerComponent, DynamicDialogComponent, DynamicDialogRef, DynamicDialogService, DynamicLoadingGlobalService, DynamicTooltipDirective, ErrorMessageComponent, FormFieldComponent, FormFieldPasswordComponent, FormsKitModule, HintComponent, ImageComponent, ImageService, InputComponent, InputPrefixComponent, InputSufixComponent, LabelComponent, LoadingModalComponent, LoadingModalService, MaskDirective, MenuComponent, MenuItemComponent, ModalComponent, ModalConfirmationComponent, ModalConfirmationService, NavbarComponent, PaginationComponent, PopoverPanelComponent, PopoverTriggerDirective, RadioComponent, RatingComponent, SearchBarComponent, SelectComponent, SelectMultiComponent, SidebarRightComponent, SidebarRightService, SliderComponent, SpinnerComponent, StepComponent, StepPanelComponent, StepperComponent, SummaryCardComponent, SvgComponent, SvgService, TableComponent, TableSortDirective, TagComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipDirective, TooltipModule, TooltipPosition, modalFadeCombined, sidebarRightAnimation };
+export { AsideComponent, AsideService, AvatarComponent, BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbService, ButtonComponent, CheckboxComponent, ClickOutsideDirective, CollapseComponent, CollapseModule, CollapsePanelComponent, ConfirmationService, DYNAMIC_DIALOG_DATA, DYNAMIC_DIALOG_OPTIONS, DashboardContainerComponent, DashboardLayoutComponent, DashboardModule, DashboardRoutesComponent, DrawerComponent, DynamicDialogComponent, DynamicDialogRef, DynamicDialogService, DynamicLoadingGlobalService, DynamicTooltipDirective, ErrorMessageComponent, FormFieldComponent, FormFieldPasswordComponent, FormsKitModule, HintComponent, ImageComponent, ImageService, InformationBannerComponent, InputComponent, InputPrefixComponent, InputSufixComponent, LabelComponent, LoadingModalComponent, LoadingModalService, MaskDirective, MenuComponent, MenuItemComponent, ModalComponent, ModalConfirmationComponent, ModalConfirmationService, NavbarComponent, PaginationComponent, PopoverPanelComponent, PopoverTriggerDirective, RadioComponent, RatingComponent, SearchBarComponent, SelectComponent, SelectMultiComponent, SidebarRightComponent, SidebarRightService, SliderComponent, SpinnerComponent, StepComponent, StepPanelComponent, StepperComponent, SummaryCardComponent, SvgComponent, SvgService, TableComponent, TableSortDirective, TagComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipDirective, TooltipModule, TooltipPosition, modalFadeCombined, sidebarRightAnimation };
 //# sourceMappingURL=s4y-ui.mjs.map