@blackbaud/skyux-lib-media/fesm2022/blackbaud-skyux-lib-media.mjs

This library was generated with [Nx](https://nx.dev).

import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Input, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import * as i2 from '@skyux/i18n';
import { SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
import * as i1$1 from '@angular/platform-browser';

class SkyHeroHeadingComponent {
    constructor() {
        this.heroTextColor = '#fff';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SkyHeroHeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: SkyHeroHeadingComponent, isStandalone: false, selector: "sky-hero-heading", inputs: { heroTextColor: "heroTextColor" }, ngImport: i0, template: "<h1\n  class=\"sky-hero-heading sky-page-heading\"\n  [ngStyle]=\"{ color: heroTextColor }\"\n>\n  <ng-content></ng-content>\n</h1>\n", styles: [".sky-hero-heading{font-size:3.5em;margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SkyHeroHeadingComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sky-hero-heading', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<h1\n  class=\"sky-hero-heading sky-page-heading\"\n  [ngStyle]=\"{ color: heroTextColor }\"\n>\n  <ng-content></ng-content>\n</h1>\n", styles: [".sky-hero-heading{font-size:3.5em;margin:0}\n"] }]
        }], propDecorators: { heroTextColor: [{
                type: Input
            }] } });

class SkyHeroSubheadingComponent {
    constructor() {
        this.heroTextColor = '#fff';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SkyHeroSubheadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: SkyHeroSubheadingComponent, isStandalone: false, selector: "sky-hero-subheading", inputs: { heroTextColor: "heroTextColor" }, ngImport: i0, template: "<h2\n  class=\"sky-hero-subheading sky-subsection-heading\"\n  [ngStyle]=\"{ color: heroTextColor }\"\n>\n  <ng-content></ng-content>\n</h2>\n", styles: [".sky-hero-subheading{font-size:1.3em;margin:1em 0 0}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SkyHeroSubheadingComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sky-hero-subheading', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<h2\n  class=\"sky-hero-subheading sky-subsection-heading\"\n  [ngStyle]=\"{ color: heroTextColor }\"\n>\n  <ng-content></ng-content>\n</h2>\n", styles: [".sky-hero-subheading{font-size:1.3em;margin:1em 0 0}\n"] }]
        }], propDecorators: { heroTextColor: [{
                type: Input
            }] } });

const DEFAULT_OPACITY = '0.4';
class SkyHeroComponent {
    set overlayOpacity(value) {
        const overlayOpacity = value || DEFAULT_OPACITY;
        const sanitized = overlayOpacity.replace(/[^\d.-]/g, '');
        const newValue = this.#parseInterval(sanitized).toString();
        this.#_overlayOpacity = newValue;
        this.#changeDetector.markForCheck();
    }
    get overlayOpacity() {
        return this.#_overlayOpacity;
    }
    #changeDetector;
    #_overlayOpacity = DEFAULT_OPACITY;
    constructor(changeDetector) {
        this.#changeDetector = changeDetector;
    }
    #parseInterval(value) {
        const interval = parseFloat(value);
        if (isNaN(interval)) {
            return 0.4;
        }
        if (interval > 100) {
            return 1;
        }
        if (interval < 0) {
            return 0;
        }
        if (interval % 1 > 0) {
            return interval;
        }
        return interval / 100;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SkyHeroComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: SkyHeroComponent, isStandalone: false, selector: "sky-hero", inputs: { backgroundImageUrl: "backgroundImageUrl", overlayOpacity: "overlayOpacity" }, ngImport: i0, template: "<div\n  class=\"sky-hero\"\n  [ngStyle]=\"{\n    'background-image': 'url(' + backgroundImageUrl + ')',\n  }\"\n>\n  <div class=\"sky-hero-body sky-max-width-container\">\n    <ng-content></ng-content>\n  </div>\n  <div\n    class=\"sky-hero-overlay\"\n    [ngStyle]=\"{\n      opacity: overlayOpacity,\n    }\"\n  ></div>\n</div>\n", styles: [".sky-hero{background-color:#000;display:flex;justify-content:center;background-repeat:no-repeat;background-position:center;background-size:cover;position:relative;box-shadow:0 1px 8px #00000073 inset}.sky-hero-body{display:flex;flex-direction:column;justify-content:center;margin:100px 0 80px;text-align:center;z-index:1;padding:0 15px}@media (min-width: 992px){.sky-hero-body{padding:0 10px}}@media (min-width: 1200px){.sky-hero-body{padding:0}}.sky-hero-overlay{background-color:#000;position:absolute;inset:0;height:100%;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SkyHeroComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sky-hero', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  class=\"sky-hero\"\n  [ngStyle]=\"{\n    'background-image': 'url(' + backgroundImageUrl + ')',\n  }\"\n>\n  <div class=\"sky-hero-body sky-max-width-container\">\n    <ng-content></ng-content>\n  </div>\n  <div\n    class=\"sky-hero-overlay\"\n    [ngStyle]=\"{\n      opacity: overlayOpacity,\n    }\"\n  ></div>\n</div>\n", styles: [".sky-hero{background-color:#000;display:flex;justify-content:center;background-repeat:no-repeat;background-position:center;background-size:cover;position:relative;box-shadow:0 1px 8px #00000073 inset}.sky-hero-body{display:flex;flex-direction:column;justify-content:center;margin:100px 0 80px;text-align:center;z-index:1;padding:0 15px}@media (min-width: 992px){.sky-hero-body{padding:0 10px}}@media (min-width: 1200px){.sky-hero-body{padding:0}}.sky-hero-overlay{background-color:#000;position:absolute;inset:0;height:100%;width:100%}\n"] }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { backgroundImageUrl: [{
                type: Input
            }], overlayOpacity: [{
                type: Input
            }] } });

class SkyHeroModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SkyHeroModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.4", ngImport: i0, type: SkyHeroModule, declarations: [SkyHeroComponent,
            SkyHeroHeadingComponent,
            SkyHeroSubheadingComponent], imports: [CommonModule], exports: [SkyHeroComponent,
            SkyHeroHeadingComponent,
            SkyHeroSubheadingComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SkyHeroModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SkyHeroModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        SkyHeroComponent,
                        SkyHeroHeadingComponent,
                        SkyHeroSubheadingComponent,
                    ],
                    imports: [CommonModule],
                    exports: [
                        SkyHeroComponent,
                        SkyHeroHeadingComponent,
                        SkyHeroSubheadingComponent,
                    ],
                }]
        }] });

/* istanbul ignore file */
/**
 * NOTICE: DO NOT MODIFY THIS FILE!
 * The contents of this file were automatically generated by
 * the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-media' schematic.
 * To update this file, simply rerun the command.
 */
const RESOURCES = {
    'EN-US': {
        skyux_image_do_text: { message: 'Do' },
        skyux_image_dont_text: { message: "Don't" },
    },
};
SkyLibResourcesService.addResources(RESOURCES);
/**
 * Import into any component library module that needs to use resource strings.
 */
class SkyMediaResourcesModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SkyMediaResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.4", ngImport: i0, type: SkyMediaResourcesModule, exports: [SkyI18nModule] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SkyMediaResourcesModule, imports: [SkyI18nModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SkyMediaResourcesModule, decorators: [{
            type: NgModule,
            args: [{
                    exports: [SkyI18nModule],
                }]
        }] });

class SkyImageComponent {
    constructor() {
        this.captionType = 'default';
        this.imageAlt = 'image';
        this.showBorder = false;
        this.#_showCaptionPrefix = true;
    }
    set showCaptionPrefix(value) {
        this.#_showCaptionPrefix = value !== false;
    }
    get showCaptionPrefix() {
        return this.#_showCaptionPrefix;
    }
    #_showCaptionPrefix;
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SkyImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: SkyImageComponent, isStandalone: false, selector: "sky-image", inputs: { caption: "caption", captionType: "captionType", imageAlt: "imageAlt", imageSource: "imageSource", showBorder: "showBorder", showCaptionPrefix: "showCaptionPrefix" }, ngImport: i0, template: "<figure class=\"sky-image-wrapper\">\n  <img\n    class=\"sky-image\"\n    [alt]=\"imageAlt\"\n    [ngClass]=\"{\n      'sky-image-border': showBorder,\n    }\"\n    [src]=\"imageSource\"\n  />\n  <figcaption\n    *ngIf=\"caption\"\n    class=\"sky-image-caption\"\n    [ngClass]=\"{\n      'sky-image-caption-default': captionType === 'default',\n      'sky-image-caption-info sky-text-info': captionType === 'info',\n      'sky-image-caption-success sky-text-success': captionType === 'success',\n      'sky-image-caption-warning sky-text-warning': captionType === 'warning',\n      'sky-image-caption-danger sky-text-danger': captionType === 'danger',\n    }\"\n  >\n    <ng-container [ngSwitch]=\"captionType\">\n      <ng-container *ngSwitchCase=\"'success'\">\n        <ng-container *ngIf=\"showCaptionPrefix\">\n          <strong>{{ 'skyux_image_do_text' | skyLibResources }}</strong>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'danger'\">\n        <ng-container *ngIf=\"showCaptionPrefix\">\n          <strong>{{ 'skyux_image_dont_text' | skyLibResources }}</strong>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n    {{ caption }}\n  </figcaption>\n</figure>\n", styles: [".sky-image-wrapper{display:table;margin:0;padding:0}.sky-image{display:block;max-width:100%;height:auto;width:auto}.sky-image-border{border:1px solid #cdcfd2}.sky-image-caption{border-top:5px solid #cdcfd2;display:table-caption;caption-side:bottom;margin:10px 0;padding:5px 0 0}.sky-image-caption-success{border-color:#72bf44}.sky-image-caption-danger{border-color:#ef4044}.sky-image-caption-warning{border-color:#fbb034}.sky-image-caption-info{border-color:#00b4f1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SkyImageComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sky-image', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<figure class=\"sky-image-wrapper\">\n  <img\n    class=\"sky-image\"\n    [alt]=\"imageAlt\"\n    [ngClass]=\"{\n      'sky-image-border': showBorder,\n    }\"\n    [src]=\"imageSource\"\n  />\n  <figcaption\n    *ngIf=\"caption\"\n    class=\"sky-image-caption\"\n    [ngClass]=\"{\n      'sky-image-caption-default': captionType === 'default',\n      'sky-image-caption-info sky-text-info': captionType === 'info',\n      'sky-image-caption-success sky-text-success': captionType === 'success',\n      'sky-image-caption-warning sky-text-warning': captionType === 'warning',\n      'sky-image-caption-danger sky-text-danger': captionType === 'danger',\n    }\"\n  >\n    <ng-container [ngSwitch]=\"captionType\">\n      <ng-container *ngSwitchCase=\"'success'\">\n        <ng-container *ngIf=\"showCaptionPrefix\">\n          <strong>{{ 'skyux_image_do_text' | skyLibResources }}</strong>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'danger'\">\n        <ng-container *ngIf=\"showCaptionPrefix\">\n          <strong>{{ 'skyux_image_dont_text' | skyLibResources }}</strong>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n    {{ caption }}\n  </figcaption>\n</figure>\n", styles: [".sky-image-wrapper{display:table;margin:0;padding:0}.sky-image{display:block;max-width:100%;height:auto;width:auto}.sky-image-border{border:1px solid #cdcfd2}.sky-image-caption{border-top:5px solid #cdcfd2;display:table-caption;caption-side:bottom;margin:10px 0;padding:5px 0 0}.sky-image-caption-success{border-color:#72bf44}.sky-image-caption-danger{border-color:#ef4044}.sky-image-caption-warning{border-color:#fbb034}.sky-image-caption-info{border-color:#00b4f1}\n"] }]
        }], propDecorators: { caption: [{
                type: Input
            }], captionType: [{
                type: Input
            }], imageAlt: [{
                type: Input
            }], imageSource: [{
                type: Input
            }], showBorder: [{
                type: Input
            }], showCaptionPrefix: [{
                type: Input
            }] } });

class SkyImageModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SkyImageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.4", ngImport: i0, type: SkyImageModule, declarations: [SkyImageComponent], imports: [CommonModule, SkyMediaResourcesModule], exports: [SkyImageComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SkyImageModule, imports: [CommonModule, SkyMediaResourcesModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SkyImageModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [SkyImageComponent],
                    imports: [CommonModule, SkyMediaResourcesModule],
                    exports: [SkyImageComponent],
                }]
        }] });

class SkyVideoComponent {
    set videoSource(value) {
        this.src = value
            ? this.#sanitizer.bypassSecurityTrustResourceUrl(value)
            : undefined;
        this.#changeDetector.markForCheck();
    }
    #changeDetector;
    #sanitizer;
    constructor(changeDetector, sanitizer) {
        this.#changeDetector = changeDetector;
        this.#sanitizer = sanitizer;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SkyVideoComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: SkyVideoComponent, isStandalone: false, selector: "sky-video", inputs: { videoSource: "videoSource" }, ngImport: i0, template: "<div class=\"sky-video\">\n  <iframe\n    *ngIf=\"src\"\n    allowfullscreen\n    class=\"sky-video-object\"\n    frameborder=\"0\"\n    [src]=\"src\"\n  >\n  </iframe>\n</div>\n", styles: [".sky-video{position:relative;display:block;width:100%;overflow:hidden;margin:10px 0}.sky-video:before{content:\"\";display:block;padding-top:56.25%}.sky-video:after{content:\"\";display:block;clear:both}.sky-video .sky-video-object{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SkyVideoComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sky-video', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"sky-video\">\n  <iframe\n    *ngIf=\"src\"\n    allowfullscreen\n    class=\"sky-video-object\"\n    frameborder=\"0\"\n    [src]=\"src\"\n  >\n  </iframe>\n</div>\n", styles: [".sky-video{position:relative;display:block;width:100%;overflow:hidden;margin:10px 0}.sky-video:before{content:\"\";display:block;padding-top:56.25%}.sky-video:after{content:\"\";display:block;clear:both}.sky-video .sky-video-object{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}\n"] }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.DomSanitizer }], propDecorators: { videoSource: [{
                type: Input
            }] } });

class SkyVideoModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SkyVideoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.4", ngImport: i0, type: SkyVideoModule, declarations: [SkyVideoComponent], imports: [CommonModule], exports: [SkyVideoComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SkyVideoModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SkyVideoModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [SkyVideoComponent],
                    imports: [CommonModule],
                    exports: [SkyVideoComponent],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { SkyHeroModule, SkyImageModule, SkyVideoModule, SkyHeroHeadingComponent as λ1, SkyHeroSubheadingComponent as λ2, SkyHeroComponent as λ3, SkyImageComponent as λ4, SkyVideoComponent as λ5 };
//# sourceMappingURL=blackbaud-skyux-lib-media.mjs.map