import { SymbolComponent, withSymbols, apClose } from '@agorapulse/ui-symbol';
import * as i0 from '@angular/core';
import { input, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';

class CloseButtonComponent {
    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
    ariaLabel = input('close', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
    /** @deprecated Use ariaLabel instead */
    dataTest = input('close-button', ...(ngDevMode ? [{ debugName: "dataTest" }] : []));
    closed = output();
    onClick(event) {
        this.closed.emit(event);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CloseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.18", type: CloseButtonComponent, isStandalone: true, selector: "ap-close-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, dataTest: { classPropertyName: "dataTest", publicName: "dataTest", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, providers: [withSymbols(apClose)], ngImport: i0, template: "<button\n    class=\"close-button\"\n    type=\"button\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.data-test]=\"dataTest()\"\n    [disabled]=\"disabled()\"\n    (click)=\"onClick($event)\">\n    <ap-symbol\n        symbolId=\"close\"\n        size=\"xs\"\n        color=\"#344563\" />\n</button>\n", styles: ["ap-close-button{display:flex;width:var(--comp-close-button-size);max-width:var(--comp-close-button-size);height:var(--comp-close-button-size);max-height:var(--comp-close-button-size)}ap-close-button[disabled]{pointer-events:none}ap-close-button button.close-button{margin:0;display:flex;justify-content:center;align-items:center;width:var(--comp-close-button-size);max-width:var(--comp-close-button-size);height:var(--comp-close-button-size);max-height:var(--comp-close-button-size);border-radius:50%;background:transparent;border:none;position:relative;transition:border .25s;padding:var(--comp-close-button-padding);outline:none}@media (hover: hover){ap-close-button button.close-button:focus:not(.disabled):not(:active){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-close-button button.close-button:hover{cursor:pointer;background:var(--comp-close-button-hover-background)}ap-close-button button.close-button:active{background:var(--comp-close-button-active-background);outline:none}ap-close-button button.close-button:focus:active{outline:none}ap-close-button button.close-button:disabled{cursor:default;pointer-events:none}ap-close-button button.close-button:disabled ap-symbol{color:var(--ref-color-grey-20)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CloseButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ap-close-button', imports: [SymbolComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [withSymbols(apClose)], template: "<button\n    class=\"close-button\"\n    type=\"button\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.data-test]=\"dataTest()\"\n    [disabled]=\"disabled()\"\n    (click)=\"onClick($event)\">\n    <ap-symbol\n        symbolId=\"close\"\n        size=\"xs\"\n        color=\"#344563\" />\n</button>\n", styles: ["ap-close-button{display:flex;width:var(--comp-close-button-size);max-width:var(--comp-close-button-size);height:var(--comp-close-button-size);max-height:var(--comp-close-button-size)}ap-close-button[disabled]{pointer-events:none}ap-close-button button.close-button{margin:0;display:flex;justify-content:center;align-items:center;width:var(--comp-close-button-size);max-width:var(--comp-close-button-size);height:var(--comp-close-button-size);max-height:var(--comp-close-button-size);border-radius:50%;background:transparent;border:none;position:relative;transition:border .25s;padding:var(--comp-close-button-padding);outline:none}@media (hover: hover){ap-close-button button.close-button:focus:not(.disabled):not(:active){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-close-button button.close-button:hover{cursor:pointer;background:var(--comp-close-button-hover-background)}ap-close-button button.close-button:active{background:var(--comp-close-button-active-background);outline:none}ap-close-button button.close-button:focus:active{outline:none}ap-close-button button.close-button:disabled{cursor:default;pointer-events:none}ap-close-button button.close-button:disabled ap-symbol{color:var(--ref-color-grey-20)}\n"] }]
        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], dataTest: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataTest", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });

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

export { CloseButtonComponent };
//# sourceMappingURL=agorapulse-ui-components-close-button.mjs.map
