/*
 * Copyright 2015-2024 Ritense BV, the Netherlands.
 *
 * Licensed under EUPL, Version 1.2 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" basis,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import { ChangeDetectionStrategy, Component, Input, signal, ViewChild, } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@ngx-translate/core";
export class CarbonNoResultsComponent {
    constructor() {
        this.illustration = 'valtimo-layout/img/no-results.svg';
        this.smallPadding = false;
        this.collapseVertically = false;
        this.alwaysRenderVertically = false;
        this.renderVertically = signal(false);
    }
    ngAfterViewInit() {
        if (this.collapseVertically)
            this.openWidthObserver();
    }
    ngOnDestroy() {
        this._observer?.disconnect();
    }
    openWidthObserver() {
        this._observer = new ResizeObserver(event => {
            this.observerMutation(event);
        });
        this._observer.observe(this._noResultsRef.nativeElement);
    }
    observerMutation(event) {
        const elementWidth = event[0]?.borderBoxSize[0]?.inlineSize;
        if (typeof elementWidth === 'number' && elementWidth !== 0) {
            this.renderVertically.set(elementWidth < 480);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CarbonNoResultsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: { action: "action", description: "description", illustration: "illustration", title: "title", smallPadding: "smallPadding", collapseVertically: "collapseVertically", alwaysRenderVertically: "alwaysRenderVertically" }, viewQueries: [{ propertyName: "_noResultsRef", first: true, predicate: ["noResults"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  #noResults\n  class=\"valtimo-no-results\"\n  [ngClass]=\"{\n    'valtimo-no-results--small-padding': smallPadding,\n    'valtimo-no-results--render-vertically': renderVertically() || alwaysRenderVertically,\n  }\"\n>\n  <img [src]=\"illustration\" alt=\"{{ 'interface.noResults' | translate }}\" />\n\n  <div class=\"valtimo-no-results__content\">\n    <h4 class=\"valtimo-no-results__title\">\n      {{ title }}\n    </h4>\n\n    <span class=\"valtimo-no-results__description\" [innerHtml]=\"description\"></span>\n\n    <ng-container [ngTemplateOutlet]=\"action\"></ng-container>\n  </div>\n</div>\n", styles: [".valtimo-no-results{display:flex;justify-content:center;padding:100px 0;gap:64px}.valtimo-no-results--small-padding{padding:24px 0}.valtimo-no-results img{height:150px;padding-left:calc(40% - 214px);object-fit:contain}.valtimo-no-results__content{display:flex;flex-direction:column;justify-content:center;color:var(--cds-text-primary);gap:8px;width:60%}.valtimo-no-results__content:has(button){justify-content:space-between}.valtimo-no-results__title{font-size:28px}.valtimo-no-results span{font-size:16px;line-height:24px;width:75%}.valtimo-no-results h4{width:75%}.valtimo-no-results--render-vertically{flex-direction:column;gap:24px}.valtimo-no-results--render-vertically .valtimo-no-results__content{align-items:center;width:100%}.valtimo-no-results--render-vertically .valtimo-no-results__title,.valtimo-no-results--render-vertically .valtimo-no-results__description{text-align:center}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CarbonNoResultsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'valtimo-no-results', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  #noResults\n  class=\"valtimo-no-results\"\n  [ngClass]=\"{\n    'valtimo-no-results--small-padding': smallPadding,\n    'valtimo-no-results--render-vertically': renderVertically() || alwaysRenderVertically,\n  }\"\n>\n  <img [src]=\"illustration\" alt=\"{{ 'interface.noResults' | translate }}\" />\n\n  <div class=\"valtimo-no-results__content\">\n    <h4 class=\"valtimo-no-results__title\">\n      {{ title }}\n    </h4>\n\n    <span class=\"valtimo-no-results__description\" [innerHtml]=\"description\"></span>\n\n    <ng-container [ngTemplateOutlet]=\"action\"></ng-container>\n  </div>\n</div>\n", styles: [".valtimo-no-results{display:flex;justify-content:center;padding:100px 0;gap:64px}.valtimo-no-results--small-padding{padding:24px 0}.valtimo-no-results img{height:150px;padding-left:calc(40% - 214px);object-fit:contain}.valtimo-no-results__content{display:flex;flex-direction:column;justify-content:center;color:var(--cds-text-primary);gap:8px;width:60%}.valtimo-no-results__content:has(button){justify-content:space-between}.valtimo-no-results__title{font-size:28px}.valtimo-no-results span{font-size:16px;line-height:24px;width:75%}.valtimo-no-results h4{width:75%}.valtimo-no-results--render-vertically{flex-direction:column;gap:24px}.valtimo-no-results--render-vertically .valtimo-no-results__content{align-items:center;width:100%}.valtimo-no-results--render-vertically .valtimo-no-results__title,.valtimo-no-results--render-vertically .valtimo-no-results__description{text-align:center}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
        }], propDecorators: { _noResultsRef: [{
                type: ViewChild,
                args: ['noResults']
            }], action: [{
                type: Input
            }], description: [{
                type: Input
            }], illustration: [{
                type: Input
            }], title: [{
                type: Input
            }], smallPadding: [{
                type: Input
            }], collapseVertically: [{
                type: Input
            }], alwaysRenderVertically: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 