@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
71 lines (67 loc) • 6.35 kB
JavaScript
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import * as i1 from '@angular/router';
import { RouterLinkActive, RouterLink } from '@angular/router';
import { IconComponent } from '@sixbell-telco/sdk/components/icon';
import { cn } from '@sixbell-telco/sdk/utils/cn';
import { cva } from 'class-variance-authority';
const linkComponent = cva(['link', 'font-body', 'font-normal', 'inline-flex', 'items-center', 'leading-normal', 'align-top', 'gap-1', 'no-underline'], {
variants: {
variant: {
primary: ['link-primary'],
secondary: ['link-secondary'],
tertiary: ['link-tertiary'],
accent: ['link-accent'],
success: ['link-success'],
info: ['link-info'],
warning: ['link-warning'],
error: ['link-error'],
},
iconPosition: {
left: [''],
right: ['flex-row-reverse'],
},
},
compoundVariants: [],
defaultVariants: {
variant: 'primary',
iconPosition: 'left',
},
});
class LinkComponent {
router;
// base
variant = input();
icon = input();
iconPosition = input();
label = input('');
// router
routerLink = input(null);
routerLinkOptions = input({ exact: false });
routerLinkActive = input('active');
queryParams = input(null);
queryParamsHandling = input(null);
fragment = input(undefined);
constructor(router) {
this.router = router;
}
componentClass = computed(() => {
return cn(linkComponent({
variant: this.variant(),
iconPosition: this.iconPosition(),
}));
});
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: LinkComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: LinkComponent, isStandalone: true, selector: "st-link", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkOptions: { classPropertyName: "routerLinkOptions", publicName: "routerLinkOptions", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActive: { classPropertyName: "routerLinkActive", publicName: "routerLinkActive", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, queryParamsHandling: { classPropertyName: "queryParamsHandling", publicName: "queryParamsHandling", isSignal: true, isRequired: false, transformFunction: null }, fragment: { classPropertyName: "fragment", publicName: "fragment", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let iconVar = this.icon();\n@let routerLinkVar = this.routerLink();\n@let rotuerLinkActiveVar = this.routerLinkActive();\n@let queryParamsVar = this.queryParams();\n@let queryParamsHandlingVar = this.queryParamsHandling();\n@let routerLinkOptionsVar = routerLinkOptions();\n@let fragmentVar = this.fragment();\n<a\n\t[class]=\"componentClass()\"\n\t[routerLink]=\"routerLinkVar\"\n\t[routerLinkActive]=\"rotuerLinkActiveVar\"\n\t[routerLinkActiveOptions]=\"routerLinkOptionsVar\"\n\t[queryParams]=\"queryParamsVar\"\n\t[queryParamsHandling]=\"queryParamsHandlingVar\"\n\t[fragment]=\"fragmentVar\"\n>\n\t@if (iconVar) {\n\t\t<st-icon [icon]=\"iconVar\" color=\"inherit\" size=\"auto\"></st-icon>\n\t}\n\t<ng-content></ng-content>\n</a>\n", styles: [""], dependencies: [{ kind: "component", type: IconComponent, selector: "st-icon", inputs: ["color", "size", "icon"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: LinkComponent, decorators: [{
type: Component,
args: [{ selector: 'st-link', imports: [IconComponent, RouterLinkActive, RouterLink, FormsModule, CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let iconVar = this.icon();\n@let routerLinkVar = this.routerLink();\n@let rotuerLinkActiveVar = this.routerLinkActive();\n@let queryParamsVar = this.queryParams();\n@let queryParamsHandlingVar = this.queryParamsHandling();\n@let routerLinkOptionsVar = routerLinkOptions();\n@let fragmentVar = this.fragment();\n<a\n\t[class]=\"componentClass()\"\n\t[routerLink]=\"routerLinkVar\"\n\t[routerLinkActive]=\"rotuerLinkActiveVar\"\n\t[routerLinkActiveOptions]=\"routerLinkOptionsVar\"\n\t[queryParams]=\"queryParamsVar\"\n\t[queryParamsHandling]=\"queryParamsHandlingVar\"\n\t[fragment]=\"fragmentVar\"\n>\n\t@if (iconVar) {\n\t\t<st-icon [icon]=\"iconVar\" color=\"inherit\" size=\"auto\"></st-icon>\n\t}\n\t<ng-content></ng-content>\n</a>\n" }]
}], ctorParameters: () => [{ type: i1.Router }] });
/**
* Generated bundle index. Do not edit.
*/
export { LinkComponent, linkComponent };
//# sourceMappingURL=sixbell-telco-sdk-components-link.mjs.map