@logo-software/hero/esm2015/lib/hero.component.js

Hero module is a lightweight, flexible component that can optionally extend the first viewable section to showcase key marketing messages on your site.

/**
 * @license
 * Copyright LOGO YAZILIM SANAYİ VE TİCARET A.Ş. All Rights Reserved.
 *
 * Save to the extent permitted by law, you may not use, copy, modify,
 * distribute or create derivative works of this material or any part
 * of it without the prior written consent of LOGO YAZILIM SANAYİ VE TİCARET A.Ş. Limited.
 * Any reproduction of this material must contain this notice.
 */
import { Component, Input } from '@angular/core';
/**
 * Hero areas are key points for marketing and catch the user attentions. With Hero Component you can easily add hero model to your page.
 * Add the below code to your code stack and give initializer parameters.
 *
 * <sub>app.component.html</sub>
 *
 * ```html
 * <logo-hero
 *  [containerStatus]="true"
 *  [bgImage]="'https://cdn-nq.logo.com.tr/assets/images/banners/banner-cover-muhasebe-web.jpg'"
 *  [cssClasses]="'my-hero-area'"
 * >
 *   <!-- Your content goes here. Below code is a sample of usage. -->
 *   <div class="content">
 *     <h1>Welcome to my page</h1>
 *     <p>My description of marketing</p>
 *   </div>
 * </logo-hero>
 * ```
 */
export class HeroComponent {
    constructor() {
        /**
         * adds custom CSS class to hero area. By this way you can customize area for your theme. Also you can customize overlay section with your custom class.
         */
        this.cssClasses = 'logo-hero';
        /**
         * if sets true, add 'container' CSS class to area. You can use with bootstrap or other css frameworks.
         */
        this.containerStatus = false;
    }
}
HeroComponent.decorators = [
    { type: Component, args: [{
                selector: 'logo-hero',
                template: "<div #pageHero [ngStyle]=\"bgImage ? {'background-image': 'url(' + bgImage + ')'} : ''\" class=\"hero {{cssClasses}}\">\n  <span class=\"overlay\"></span>\n  <div [ngClass]=\"{'container': containerStatus}\" class=\"hero-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n",
                styles: [".dotted{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.logo-tooltip .tip.on-bottom:after,.logo-tooltip .tip.on-top:after{border-left:7px solid transparent;border-right:7px solid transparent}.logo-tooltip .tip.on-left:after,.logo-tooltip .tip.on-right:after{border-top:7px solid transparent;border-bottom:7px solid transparent}.logo-tooltip{position:relative;color:#e94a34;cursor:pointer}.logo-tooltip .tip{position:absolute;width:180px;color:#fff;font-size:14px;font-style:normal;line-height:1.4;text-align:center;border-radius:3px;background:#333;padding:8px 12px;box-sizing:border-box;cursor:auto;z-index:10;opacity:0;visibility:hidden;transition:all .25s ease-in}.logo-tooltip .tip:after{position:absolute;width:0;height:0;content:\"\"}.logo-tooltip .tip.on-top{bottom:25px;left:0}.logo-tooltip .tip.on-top:after{bottom:-7px;left:10px;border-top:7px solid #333}.logo-tooltip .tip.on-right{top:-5px;left:103%}.logo-tooltip .tip.on-right:after{top:37%;left:-7px;border-right:7px solid #333}.logo-tooltip .tip.on-bottom{top:25px;left:0}.logo-tooltip .tip.on-bottom:after{top:-7px;left:10px;border-bottom:7px solid #333}.logo-tooltip .tip.on-left{top:-100%;right:103%}.logo-tooltip .tip.on-left:after{top:37%;right:-7px;border-left:7px solid #333}.logo-tooltip:hover .tip{opacity:1;visibility:visible}.logo-tooltip:hover .tip.on-top{transform:translateY(-15px)}.logo-tooltip:hover .tip.on-right{transform:translateX(15px)}.logo-tooltip:hover .tip.on-bottom{transform:translateY(15px)}.logo-tooltip:hover .tip.on-left{transform:translateX(-15px)}.test{content:\"a\";content:\"ba\";content:\"aa\";content:\"aade\";content:\"abde\"}:root .basic,:root .gray,:root .secondary{color:var(--leds-contrast-90pct)}:root .danger,:root .info,:root .success,:root .warning{color:var(--white)}:root .outline.primary,:root .outline.primary:active,:root .outline.primary:focus,:root .outline.primary:hover{border-color:var(--light-600)}:root .outline.primary:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--primary)}:root .outline.primary:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--primary)}:root .outline.primary:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--primary)}:root .outline.secondary{color:var(--leds-contrast-90pct)}:root .outline.secondary,:root .outline.secondary:active,:root .outline.secondary:focus,:root .outline.secondary:hover{border-color:var(--light-600)}:root .outline.secondary:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--leds-contrast-90pct)}:root .outline.secondary:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--leds-contrast-90pct)}:root .outline.secondary:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--leds-contrast-90pct)}:root .outline.basic{color:var(--leds-contrast-90pct)}:root .outline.basic,:root .outline.basic:active,:root .outline.basic:focus,:root .outline.basic:hover{border-color:var(--light-600)}:root .outline.basic:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--leds-contrast-90pct)}:root .outline.basic:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--leds-contrast-90pct)}:root .outline.basic:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--leds-contrast-90pct)}:root .outline.neutral,:root .outline.neutral:active,:root .outline.neutral:focus,:root .outline.neutral:hover{border-color:var(--light-600)}:root .outline.neutral:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--neutral)}:root .outline.neutral:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--neutral)}:root .outline.neutral:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--neutral)}:root .outline.light{border-color:rgba(var(--light-rgb),.5)}:root .outline.light:active,:root .outline.light:focus,:root .outline.light:hover{border-color:var(--light)}:root .outline.light:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--white)}:root .outline.light:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--white)}:root .outline.light:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--white)}:root .outline.dark,:root .outline.dark:active,:root .outline.dark:focus,:root .outline.dark:hover{border-color:var(--light-600)}:root .outline.dark:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--dark)}:root .outline.dark:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--dark)}:root .outline.dark:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--dark)}:root .outline.gray{color:var(--leds-contrast-90pct)}:root .outline.gray,:root .outline.gray:active,:root .outline.gray:focus,:root .outline.gray:hover{border-color:var(--light-600)}:root .outline.gray:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--leds-contrast-90pct)}:root .outline.gray:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--leds-contrast-90pct)}:root .outline.gray:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--leds-contrast-90pct)}:root .outline.info{color:var(--info)}:root .outline.info,:root .outline.info:active,:root .outline.info:focus,:root .outline.info:hover{border-color:var(--light-600)}:root .outline.info:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--info)}:root .outline.info:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--info)}:root .outline.info:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--info)}:root .outline.danger{color:var(--danger)}:root .outline.danger,:root .outline.danger:active,:root .outline.danger:focus,:root .outline.danger:hover{border-color:var(--light-600)}:root .outline.danger:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--danger)}:root .outline.danger:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--danger)}:root .outline.danger:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--danger)}:root .outline.warning{color:var(--warning)}:root .outline.warning,:root .outline.warning:active,:root .outline.warning:focus,:root .outline.warning:hover{border-color:var(--light-600)}:root .outline.warning:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--warning)}:root .outline.warning:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--warning)}:root .outline.warning:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--warning)}:root .outline.success{color:var(--success)}:root .outline.success,:root .outline.success:active,:root .outline.success:focus,:root .outline.success:hover{border-color:var(--light-600)}:root .outline.success:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--success)}:root .outline.success:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--success)}:root .outline.success:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--success)}:root .ghost.primary:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--primary)}:root .ghost.primary:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--primary)}:root .ghost.primary:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--primary)}:root .ghost.secondary,:root .ghost.secondary:hover{color:var(--leds-contrast-90pct)}:root .ghost.secondary:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover))}:root .ghost.secondary:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--leds-contrast-90pct)}:root .ghost.secondary:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus))}:root .ghost.basic,:root .ghost.basic:hover,:root .ghost.secondary:focus{color:var(--leds-contrast-90pct)}:root .ghost.basic:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover))}:root .ghost.basic:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--leds-contrast-90pct)}:root .ghost.basic:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--leds-contrast-90pct)}:root .ghost.neutral:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--neutral)}:root .ghost.neutral:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--neutral)}:root .ghost.neutral:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--neutral)}:root .ghost.light:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--white)}:root .ghost.light:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--white)}:root .ghost.light:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--white)}:root .ghost.dark:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--dark)}:root .ghost.dark:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--dark)}:root .ghost.dark:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--dark)}:root .ghost.gray,:root .ghost.gray:hover{color:var(--leds-contrast-90pct)}:root .ghost.gray:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover))}:root .ghost.gray:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--leds-contrast-90pct)}:root .ghost.gray:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--leds-contrast-90pct)}:root .ghost.info{color:var(--info)}:root .ghost.info:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--info)}:root .ghost.info:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--info)}:root .ghost.info:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--info)}:root .ghost.danger{color:var(--danger)}:root .ghost.danger:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--danger)}:root .ghost.danger:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--danger)}:root .ghost.danger:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--danger)}:root .ghost.warning{color:var(--warning)}:root .ghost.warning:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--warning)}:root .ghost.warning:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--warning)}:root .ghost.warning:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--warning)}:root .ghost.success{color:var(--success)}:root .ghost.success:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--success)}:root .ghost.success:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--success)}:root .ghost.success:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--success)}:host{position:relative;display:block;background-color:var(--basic-300)}:host .hero{min-height:100px;position:relative;background-size:cover}:host .hero .overlay{display:inline-block;position:absolute;width:100%;height:100%;top:0;left:0;z-index:1}:host .hero .hero-content{display:flex;height:100%;align-items:flex-start;box-sizing:border-box;padding:15px;position:relative;z-index:2;flex-wrap:wrap}"]
            },] }
];
HeroComponent.propDecorators = {
    cssClasses: [{ type: Input }],
    containerStatus: [{ type: Input }],
    bgImage: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVyby5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9sb2dvLXNvZnR3YXJlL2hlcm8vc3JjL2xpYi9oZXJvLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7R0FRRztBQUVILE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRWpEOzs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBbUJHO0FBTUgsTUFBTSxPQUFPLGFBQWE7SUFMMUI7UUFNRTs7V0FFRztRQUNNLGVBQVUsR0FBVyxXQUFXLENBQUM7UUFDMUM7O1dBRUc7UUFDTSxvQkFBZSxHQUFZLEtBQUssQ0FBQztJQUs1QyxDQUFDOzs7WUFsQkEsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxXQUFXO2dCQUNyQixzU0FBb0M7O2FBRXJDOzs7eUJBS0UsS0FBSzs4QkFJTCxLQUFLO3NCQUlMLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEBsaWNlbnNlXG4gKiBDb3B5cmlnaHQgTE9HTyBZQVpJTElNIFNBTkFZxLAgVkUgVMSwQ0FSRVQgQS7Fni4gQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqXG4gKiBTYXZlIHRvIHRoZSBleHRlbnQgcGVybWl0dGVkIGJ5IGxhdywgeW91IG1heSBub3QgdXNlLCBjb3B5LCBtb2RpZnksXG4gKiBkaXN0cmlidXRlIG9yIGNyZWF0ZSBkZXJpdmF0aXZlIHdvcmtzIG9mIHRoaXMgbWF0ZXJpYWwgb3IgYW55IHBhcnRcbiAqIG9mIGl0IHdpdGhvdXQgdGhlIHByaW9yIHdyaXR0ZW4gY29uc2VudCBvZiBMT0dPIFlBWklMSU0gU0FOQVnEsCBWRSBUxLBDQVJFVCBBLsWeLiBMaW1pdGVkLlxuICogQW55IHJlcHJvZHVjdGlvbiBvZiB0aGlzIG1hdGVyaWFsIG11c3QgY29udGFpbiB0aGlzIG5vdGljZS5cbiAqL1xuXG5pbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbi8qKlxuICogSGVybyBhcmVhcyBhcmUga2V5IHBvaW50cyBmb3IgbWFya2V0aW5nIGFuZCBjYXRjaCB0aGUgdXNlciBhdHRlbnRpb25zLiBXaXRoIEhlcm8gQ29tcG9uZW50IHlvdSBjYW4gZWFzaWx5IGFkZCBoZXJvIG1vZGVsIHRvIHlvdXIgcGFnZS5cbiAqIEFkZCB0aGUgYmVsb3cgY29kZSB0byB5b3VyIGNvZGUgc3RhY2sgYW5kIGdpdmUgaW5pdGlhbGl6ZXIgcGFyYW1ldGVycy5cbiAqXG4gKiA8c3ViPmFwcC5jb21wb25lbnQuaHRtbDwvc3ViPlxuICpcbiAqIGBgYGh0bWxcbiAqIDxsb2dvLWhlcm9cbiAqICBbY29udGFpbmVyU3RhdHVzXT1cInRydWVcIlxuICogIFtiZ0ltYWdlXT1cIidodHRwczovL2Nkbi1ucS5sb2dvLmNvbS50ci9hc3NldHMvaW1hZ2VzL2Jhbm5lcnMvYmFubmVyLWNvdmVyLW11aGFzZWJlLXdlYi5qcGcnXCJcbiAqICBbY3NzQ2xhc3Nlc109XCInbXktaGVyby1hcmVhJ1wiXG4gKiA+XG4gKiAgIDwhLS0gWW91ciBjb250ZW50IGdvZXMgaGVyZS4gQmVsb3cgY29kZSBpcyBhIHNhbXBsZSBvZiB1c2FnZS4gLS0+XG4gKiAgIDxkaXYgY2xhc3M9XCJjb250ZW50XCI+XG4gKiAgICAgPGgxPldlbGNvbWUgdG8gbXkgcGFnZTwvaDE+XG4gKiAgICAgPHA+TXkgZGVzY3JpcHRpb24gb2YgbWFya2V0aW5nPC9wPlxuICogICA8L2Rpdj5cbiAqIDwvbG9nby1oZXJvPlxuICogYGBgXG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2xvZ28taGVybycsXG4gIHRlbXBsYXRlVXJsOiAnLi9oZXJvLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vaGVyby5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBIZXJvQ29tcG9uZW50IHtcbiAgLyoqXG4gICAqIGFkZHMgY3VzdG9tIENTUyBjbGFzcyB0byBoZXJvIGFyZWEuIEJ5IHRoaXMgd2F5IHlvdSBjYW4gY3VzdG9taXplIGFyZWEgZm9yIHlvdXIgdGhlbWUuIEFsc28geW91IGNhbiBjdXN0b21pemUgb3ZlcmxheSBzZWN0aW9uIHdpdGggeW91ciBjdXN0b20gY2xhc3MuXG4gICAqL1xuICBASW5wdXQoKSBjc3NDbGFzc2VzOiBzdHJpbmcgPSAnbG9nby1oZXJvJztcbiAgLyoqXG4gICAqIGlmIHNldHMgdHJ1ZSwgYWRkICdjb250YWluZXInIENTUyBjbGFzcyB0byBhcmVhLiBZb3UgY2FuIHVzZSB3aXRoIGJvb3RzdHJhcCBvciBvdGhlciBjc3MgZnJhbWV3b3Jrcy5cbiAgICovXG4gIEBJbnB1dCgpIGNvbnRhaW5lclN0YXR1czogYm9vbGVhbiA9IGZhbHNlO1xuICAvKipcbiAgICogRHluYW1pY2FsbHkgYWRkIGJhY2tncm91bmQgaW1hZ2Ugb2YgdGhlIGhlcm8gYXJlYS5cbiAgICovXG4gIEBJbnB1dCgpIGJnSW1hZ2U/OiBzdHJpbmc7XG59XG4iXX0=