@sixbell-telco/sdk/fesm2022/sixbell-telco-sdk-components-tab.mjs

A collection of reusable components designed for use in Sixbell Telco Angular projects

import * as i0 from '@angular/core';
import { input, computed, Component, inject, ElementRef, Renderer2, effect, Host, Directive } from '@angular/core';
import { cn } from '@sixbell-telco/sdk/utils/cn';
import { cva } from 'class-variance-authority';

const tabComponent = cva(['tabs'], {
    variants: {
        variant: {
            box: ['tabs-box'],
            border: ['tabs-boder'],
            lift: ['tabs-lift'],
        },
        size: {
            xs: ['tabs-xs'],
            sm: ['tabs-sm'],
            md: ['tabs-md'],
            lg: ['tabs-lg'],
        },
    },
    defaultVariants: {
        variant: 'box',
        size: 'md',
    },
});
class TabComponent {
    variant = input('box');
    size = input();
    disabled = input(false);
    active = input(false);
    componentClass = computed(() => cn(tabComponent({
        variant: this.variant(),
        size: this.size(),
    })));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.0", type: TabComponent, isStandalone: true, selector: "st-tab", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div role=\"tablist\" [class]=\"componentClass()\">\n\t<ng-content></ng-content>\n</div>\n", styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: TabComponent, decorators: [{
            type: Component,
            args: [{ selector: 'st-tab', imports: [], template: "<div role=\"tablist\" [class]=\"componentClass()\">\n\t<ng-content></ng-content>\n</div>\n" }]
        }] });

const tabContentDirective = cva(['tab-content', 'border-base-300', 'bg-base-100'], {
    variants: {
        padding: {
            xs: 'p-2',
            sm: 'p-5',
            md: 'p-10',
            lg: 'p-20',
        },
    },
    defaultVariants: {
        padding: 'md',
    },
});
class TabContentDirective {
    tabComponent;
    padding = input();
    label = input('');
    element = inject(ElementRef);
    renderer = inject(Renderer2);
    constructor(tabComponent) {
        this.tabComponent = tabComponent;
    }
    componentClass = computed(() => {
        return cn(tabContentDirective({
            padding: this.padding(),
        }), { 'bg-base-100': this.tabComponent.variant() === 'lift' });
    });
    classListEffect = effect(() => {
        const classList = this.componentClass();
        this.renderer.setAttribute(this.element.nativeElement, 'class', classList);
        this.renderer.setAttribute(this.element.nativeElement, 'role', 'tabpanel');
    });
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: TabContentDirective, deps: [{ token: TabComponent, host: true }], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.0", type: TabContentDirective, isStandalone: true, selector: "div[tab-content]", inputs: { padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: TabContentDirective, decorators: [{
            type: Directive,
            args: [{
                    // eslint-disable-next-line @angular-eslint/directive-selector
                    selector: 'div[tab-content]',
                    standalone: true,
                }]
        }], ctorParameters: () => [{ type: TabComponent, decorators: [{
                    type: Host
                }] }] });

const tabHeaderDirective = cva(['tab'], {
    variants: {
        variant: {
            default: '',
            active: 'tab-active',
            disabled: 'tab-disabled',
        },
    },
    defaultVariants: {
        variant: 'default',
    },
});
class TabHeaderDirective {
    variant = input();
    classes = input('');
    status = input();
    label = input('');
    element = inject(ElementRef);
    renderer = inject(Renderer2);
    componentClass = computed(() => {
        if (this.status()) {
            return cn(tabHeaderDirective({
                variant: this.status(),
                class: this.classes(),
            }));
        }
        else {
            return cn(tabHeaderDirective({
                variant: this.variant(),
                class: this.classes(),
            }));
        }
    });
    classListEffect = effect(() => {
        const classList = this.componentClass();
        this.renderer.setAttribute(this.element.nativeElement, 'class', classList);
        this.renderer.setAttribute(this.element.nativeElement, 'aria-label', this.label());
        this.renderer.setAttribute(this.element.nativeElement, 'role', 'tab');
        this.renderer.setAttribute(this.element.nativeElement, 'tabindex', '0');
    });
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: TabHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.0", type: TabHeaderDirective, isStandalone: true, selector: "a[tab-header]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: TabHeaderDirective, decorators: [{
            type: Directive,
            args: [{
                    // eslint-disable-next-line @angular-eslint/directive-selector
                    selector: 'a[tab-header]',
                    standalone: true,
                }]
        }] });

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

export { TabComponent, TabContentDirective, TabHeaderDirective, tabComponent };
//# sourceMappingURL=sixbell-telco-sdk-components-tab.mjs.map