@logo-software/card-button-group/esm2015/lib/card-button-group.component.js

Buttond Card Group library is a part of Logo Elements Design System which allows developers to group their buttons for charts and graphs.

import { Component, Input, EventEmitter, Output } from '@angular/core';
export class CardButtonGroupComponent {
    constructor() {
        /**
         * function that will run when you click the button.
         */
        this.onButtonClick = new EventEmitter();
    }
    ngOnInit() {
    }
    buttonClicked(data) {
        this.onButtonClick.emit(data);
    }
}
CardButtonGroupComponent.decorators = [
    { type: Component, args: [{
                selector: 'logo-card-button-group',
                template: "<!--\n/**\n * @license\n * Copyright LOGO YAZILIM SANAY\u0130 VE T\u0130CARET A.\u015E. All Rights Reserved.\n *\n * Save to the extent permitted by law, you may not use, copy, modify,\n * distribute or create derivative works of this material or any part\n * of it without the prior written consent of LOGO YAZILIM SANAY\u0130 VE T\u0130CARET A.\u015E. Limited.\n * Any reproduction of this material must contain this notice.\n */\n-->\n<div class=\"logo-button-group\">\n  <button *ngFor=\"let item of buttons\" class=\"button-group-element\" (click)=\"buttonClicked(item.id)\">\n    <img *ngIf=\"item.image\" src=\"{{ item.image }}\" alt=\"{{ item.name }}\">\n    <span *ngIf=\"item.icon\" class=\"{{ item.icon }} icon large\"></span>\n    <h2>{{item.name}}</h2>\n    <p *ngIf=\"item.subtitle\" class=\"small\">{{ item.subtitle }}</p>\n  </button>\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 .button-group-element{width:203.2px;height:190px;margin:10px;padding:20px;background:var(--white);box-shadow:0 0 12px 1px rgba(0,0,0,.04);border:2px solid transparent;border-radius:8px;text-align:left}:host .button-group-element img{width:35px}:host .button-group-element h2{margin-top:20px;font-style:normal;font-weight:700;font-size:20px;line-height:26px;color:var(--neutral-500)}:host .button-group-element p{margin-top:15px;font-style:normal;font-weight:700;font-size:14px;line-height:18px;color:var(--neutral-500)}:host .button-group-element:hover{border:2px solid #0090ff;background-color:#f6f7fb}"]
            },] }
];
CardButtonGroupComponent.ctorParameters = () => [];
CardButtonGroupComponent.propDecorators = {
    buttons: [{ type: Input }],
    onButtonClick: [{ type: Output }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FyZC1idXR0b24tZ3JvdXAuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbG9nby1zb2Z0d2FyZS9jYXJkLWJ1dHRvbi1ncm91cC9zcmMvbGliL2NhcmQtYnV0dG9uLWdyb3VwLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLEtBQUssRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBZ0QvRSxNQUFNLE9BQU8sd0JBQXdCO0lBU25DO1FBSkE7O1dBRUc7UUFDTyxrQkFBYSxHQUF5QixJQUFJLFlBQVksRUFBVSxDQUFDO0lBQzNELENBQUM7SUFFakIsUUFBUTtJQUNSLENBQUM7SUFFTSxhQUFhLENBQUMsSUFBWTtRQUMvQixJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUNoQyxDQUFDOzs7WUFyQkYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSx3QkFBd0I7Z0JBQ2xDLHcyQkFBaUQ7O2FBRWxEOzs7O3NCQUtFLEtBQUs7NEJBSUwsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBJbnB1dCwgRXZlbnRFbWl0dGVyLCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuLyoqXG4gKiBDYXJkIEJ1dHRvbiBHcm91cCBpcyBhIGJ1dHRvbiBjb250YWluZXIgZm9yIHNpbmdsZSBvciBtdWx0aXBsZSBidXR0b25zIHRoYXQgaW5jbHVkZXMgaW1hZ2UvaWNvbiwgdGl0bGUgYW5kIHN1YnRpdGxlLiBJdCBhbGxvd3MgeW91IHRvIGdyb3VwIHlvdXIgYnV0dG9ucyBhbmQgYWxsb3dzIHlvdSB0byBtYWtlIGEgaGlnaGxpZ2h0IGFuaW1hdGlvbiBmb3Igc2VsZWN0ZWQgY2FyZC5cbiAqIEFkZCB0aGUgYmVsb3cgY29kZSB0byB5b3VyIGNvZGUgc3RhY2sgYW5kIGdpdmUgaW5pdGlhbGl6ZXIgcGFyYW1ldGVycy5cbiAqXG4gKiAqIDxzdWI+YXBwLmNvbXBvbmVudC50czwvc3ViPlxuICpcbiAqIGBgYGh0bWxcbiAqIDxsb2dvLWNhcmQtYnV0dG9uLWdyb3VwIFtidXR0b25zXT1cIkNhcmRCdXR0b25EYXRhXCIgPjwvbG9nby1jYXJkLWJ1dHRvbi1ncm91cD5cbiAqIGBgYFxuICovXG5cbi8qKlxuICogRGF0YSBzZXQgZm9yIGNhcmQtYnV0dG9ucy5cbiAqL1xuZXhwb3J0IGludGVyZmFjZSBDYXJkQnV0dG9uRGF0YSB7XG4gIC8qKlxuICAgKiBtYWluIHRpdGxlIG9mIGNhcmQtYnV0dG9uLlxuICAgKi9cbiAgbmFtZTogc3RyaW5nO1xuICAvKipcbiAgICogaWQgb2YgY2FyZC1idXR0b24uXG4gICAqL1xuICBpZDogc3RyaW5nO1xuICAvKipcbiAgICogaXNTZWxlY3RlZCBkZWZhdWx0IHZhbHVlIGlzIGZhbHNlLiBZb3UgY2FuIGNoYW5nZSBieSBlZGl0aW5nIGludG8gY2xpY2sgZnVuY3Rpb24uXG4gICAqL1xuICBpc1NlbGVjdGVkPzpib29sZWFuO1xuICAvKipcbiAgICogYWRkIGljb24gYXMgZm9yIGV4YW1wbGUgJ2xlLXNlYXJjaCcgYW5kIGxvZ28gZWxlbWVudHMgaWNvbiB3aWxsIG9jY3VyLlxuICAgKi9cbiAgaWNvbj86IHN0cmluZztcbiAgLyoqXG4gICAqIGdpdmUgcGF0aCBvZiBpbWFnZS4gRGVmYXVsdCB3aWR0aCBvZiB0aGUgaW1hZ2UgaXMgNTBweC5cbiAgICovXG4gIGltYWdlPzogc3RyaW5nO1xuICAvKipcbiAgICogc3VidGl0bGUgb2YgY2FyZC1idXR0b24uXG4gICAqL1xuICBzdWJ0aXRsZT86IHN0cmluZztcbn1cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbG9nby1jYXJkLWJ1dHRvbi1ncm91cCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9jYXJkLWJ1dHRvbi1ncm91cC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2NhcmQtYnV0dG9uLWdyb3VwLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIENhcmRCdXR0b25Hcm91cENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIC8qKlxuICAgKiBkYXRhIHNldCBmb3IgYnV0dG9ucy4gQWRkIHlvdXIgbGlzdCB0byBjb21wb25lbnQudHMgZmlsZSBhbmQgZ2l2ZSB0aGF0IGxpc3RzIG5hbWUgdG8gW2J1dHRvbnNdIGFzIGFuIGlucHV0LlxuICAgKi9cbiAgQElucHV0KCkgYnV0dG9uczpDYXJkQnV0dG9uRGF0YVtdO1xuICAvKipcbiAgICogZnVuY3Rpb24gdGhhdCB3aWxsIHJ1biB3aGVuIHlvdSBjbGljayB0aGUgYnV0dG9uLlxuICAgKi9cbiAgQE91dHB1dCgpIG9uQnV0dG9uQ2xpY2s6IEV2ZW50RW1pdHRlcjxzdHJpbmc+ID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XG4gIGNvbnN0cnVjdG9yKCkgeyB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gIH1cblxuICBwdWJsaWMgYnV0dG9uQ2xpY2tlZChkYXRhOiBzdHJpbmcpIHtcbiAgICB0aGlzLm9uQnV0dG9uQ2xpY2suZW1pdChkYXRhKTtcbiAgfVxufVxuIl19