@frame-kit/ui-ng 0.2.6 → 0.2.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/DEVELOPMENT_GUIDE.md +26 -2
- package/fesm2022/frame-kit-ui-ng-core-link.mjs +2 -2
- package/fesm2022/frame-kit-ui-ng-core-link.mjs.map +1 -1
- package/fesm2022/frame-kit-ui-ng-core-text.mjs +2 -2
- package/fesm2022/frame-kit-ui-ng-core-text.mjs.map +1 -1
- package/fesm2022/frame-kit-ui-ng-ui-badge.mjs +2 -2
- package/fesm2022/frame-kit-ui-ng-ui-badge.mjs.map +1 -1
- package/fesm2022/frame-kit-ui-ng-ui-button.mjs +2 -2
- package/fesm2022/frame-kit-ui-ng-ui-button.mjs.map +1 -1
- package/fesm2022/frame-kit-ui-ng-ui-copyable-field.mjs +2 -2
- package/fesm2022/frame-kit-ui-ng-ui-copyable-field.mjs.map +1 -1
- package/fesm2022/frame-kit-ui-ng-ui-icon-list.mjs +2 -2
- package/fesm2022/frame-kit-ui-ng-ui-icon-list.mjs.map +1 -1
- package/fesm2022/frame-kit-ui-ng-ui-numbered-list.mjs +2 -2
- package/fesm2022/frame-kit-ui-ng-ui-numbered-list.mjs.map +1 -1
- package/package.json +1 -1
package/DEVELOPMENT_GUIDE.md
CHANGED
|
@@ -252,14 +252,38 @@ For named slots, use attribute selectors matching directive selectors:
|
|
|
252
252
|
|
|
253
253
|
### ID and ARIA binding
|
|
254
254
|
|
|
255
|
-
Pass base props through to the appropriate element in the template
|
|
255
|
+
Pass base props through to the appropriate element in the template, and bind
|
|
256
|
+
**every one of them as an attribute**:
|
|
256
257
|
|
|
257
258
|
```html
|
|
258
|
-
<span [id]="id()
|
|
259
|
+
<span [attr.id]="id()" [attr.aria-label]="ariaLabel()">
|
|
259
260
|
<ng-content />
|
|
260
261
|
</span>
|
|
261
262
|
```
|
|
262
263
|
|
|
264
|
+
Attribute binding is required, not stylistic. A property binding assigns the DOM
|
|
265
|
+
property, and both `null` and `undefined` coerce to a string there — `[id]="id()"`
|
|
266
|
+
renders `id="null"` and `[id]="id() ?? undefined"` renders `id="undefined"`. Only
|
|
267
|
+
`[attr.x]` omits the attribute when the value is nullish.
|
|
268
|
+
|
|
269
|
+
Base props default to `null`, so the unset case is the common one. Getting this
|
|
270
|
+
wrong is not cosmetic:
|
|
271
|
+
|
|
272
|
+
- `id="null"` on every instance produces duplicate IDs, breaking `getElementById`
|
|
273
|
+
and any `aria-describedby` or `<label for>` that points at one.
|
|
274
|
+
- `target="null"` on an anchor is not ignored — browsers treat an unrecognised
|
|
275
|
+
target as a _named browsing context_, so a link meant to navigate in place
|
|
276
|
+
opens a new tab instead.
|
|
277
|
+
- `download="null"` makes a same-origin link download rather than navigate.
|
|
278
|
+
|
|
279
|
+
The same rule applies to any nullable native attribute — `target`, `rel`,
|
|
280
|
+
`download`, `name`, `for`, `value`. Bind a component _input_ by property as
|
|
281
|
+
normal; this is only about attributes on native elements.
|
|
282
|
+
|
|
283
|
+
Assert the rendered attribute in tests, not the computed signal. A computed that
|
|
284
|
+
returns `null` correctly still renders `"null"` through a property binding, so a
|
|
285
|
+
test that checks the signal passes while the DOM is wrong.
|
|
286
|
+
|
|
263
287
|
### Self-closing syntax
|
|
264
288
|
|
|
265
289
|
Use self-closing tags for void elements:
|
|
@@ -300,11 +300,11 @@ class LinkComponent {
|
|
|
300
300
|
}
|
|
301
301
|
}
|
|
302
302
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
303
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: LinkComponent, isStandalone: true, selector: "fk-link", inputs: { href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, underline: { classPropertyName: "underline", publicName: "underline", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, external: { classPropertyName: "external", publicName: "external", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, download: { classPropertyName: "download", publicName: "download", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaCurrent: { classPropertyName: "ariaCurrent", publicName: "ariaCurrent", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, trackingId: { classPropertyName: "trackingId", publicName: "trackingId", isSignal: true, isRequired: false, transformFunction: null }, trackingCategory: { classPropertyName: "trackingCategory", publicName: "trackingCategory", isSignal: true, isRequired: false, transformFunction: null }, trackingLabel: { classPropertyName: "trackingLabel", publicName: "trackingLabel", isSignal: true, isRequired: false, transformFunction: null }, dataAttributes: { classPropertyName: "dataAttributes", publicName: "dataAttributes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<!-- Stable projection point for default content + leading/trailing icons -->\n<ng-template #projected>\n <ng-content select=\"[fkLinkIconStart]\" />\n <span class=\"fk-link__text\">\n <ng-content></ng-content>\n </span>\n <ng-content select=\"[fkLinkIconEnd]\" />\n</ng-template>\n\n<!-- Loading indicator template -->\n<ng-template #loadingIndicator>\n <span class=\"fk-link__loading\" aria-hidden=\"true\">\n <span class=\"fk-link__spinner\"></span>\n </span>\n</ng-template>\n\n<!-- External link icon template -->\n<ng-template #externalIcon>\n <span class=\"fk-link__external-icon\" aria-hidden=\"true\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333M10 2H14M14 2V6M14 2L6.66667 9.33333\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n</ng-template>\n\n<!-- Router Link (Internal Navigation) -->\n@if (routerLink() && !href()) {\n <a\n [routerLink]=\"routerLink()\"\n [queryParams]=\"queryParams()\"\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.aria-current]=\"ariaCurrent()\"\n [attr.role]=\"role()\"\n [attr.tabindex]=\"effectiveTabIndex()\"\n [attr.data-tracking-id]=\"\n computedDataAttributes()['data-tracking-id'] || null\n \"\n [attr.data-tracking-category]=\"\n computedDataAttributes()['data-tracking-category'] || null\n \"\n [attr.data-tracking-label]=\"\n computedDataAttributes()['data-tracking-label'] || null\n \"\n (click)=\"handleClick($event)\"\n >\n @if (loading()) {\n <ng-container [ngTemplateOutlet]=\"loadingIndicator\"></ng-container>\n }\n\n <span class=\"fk-link__content\">\n <ng-container [ngTemplateOutlet]=\"projected\"></ng-container>\n </span>\n\n @if (isExternalLink()) {\n <ng-container [ngTemplateOutlet]=\"externalIcon\"></ng-container>\n }\n </a>\n}\n\n<!-- Standard Link (External or href-based) -->\n@if (href() && !routerLink()) {\n <a\n [href]=\"href()\"\n [target]=\"effectiveTarget()\"\n [rel]=\"effectiveRel()\"\n [download]=\"effectiveDownload()\"\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.aria-current]=\"ariaCurrent()\"\n [attr.role]=\"role()\"\n [attr.tabindex]=\"effectiveTabIndex()\"\n [attr.data-tracking-id]=\"\n computedDataAttributes()['data-tracking-id'] || null\n \"\n [attr.data-tracking-category]=\"\n computedDataAttributes()['data-tracking-category'] || null\n \"\n [attr.data-tracking-label]=\"\n computedDataAttributes()['data-tracking-label'] || null\n \"\n (click)=\"handleClick($event)\"\n >\n @if (loading()) {\n <ng-container [ngTemplateOutlet]=\"loadingIndicator\"></ng-container>\n }\n\n <span class=\"fk-link__content\">\n <ng-container [ngTemplateOutlet]=\"projected\"></ng-container>\n </span>\n\n @if (isExternalLink()) {\n <ng-container [ngTemplateOutlet]=\"externalIcon\"></ng-container>\n }\n </a>\n}\n\n<!-- Fallback: Button-style link (when no href or routerLink) -->\n@if (!href() && !routerLink()) {\n <button\n type=\"button\"\n [id]=\"id()\"\n [disabled]=\"disabled() || loading()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.aria-current]=\"ariaCurrent()\"\n [attr.role]=\"role()\"\n [attr.tabindex]=\"effectiveTabIndex()\"\n [attr.data-tracking-id]=\"\n computedDataAttributes()['data-tracking-id'] || null\n \"\n [attr.data-tracking-category]=\"\n computedDataAttributes()['data-tracking-category'] || null\n \"\n [attr.data-tracking-label]=\"\n computedDataAttributes()['data-tracking-label'] || null\n \"\n (click)=\"handleClick($event)\"\n >\n @if (loading()) {\n <ng-container [ngTemplateOutlet]=\"loadingIndicator\"></ng-container>\n }\n\n <span class=\"fk-link__content\">\n <ng-container [ngTemplateOutlet]=\"projected\"></ng-container>\n </span>\n </button>\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--fk-rhythm-1)}:host a,:host button{display:inline-flex;align-items:center;gap:var(--fk-rhythm-1);font-family:inherit;background:none;border:none;padding:0;margin:0;cursor:pointer;text-decoration:none;transition:color .15s ease,text-decoration .15s ease,opacity .15s ease;appearance:none;-webkit-appearance:none;-moz-appearance:none}:host a:focus-visible,:host button:focus-visible{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18));border-radius:var(--fk-link-focus-radius, 2px)}:host.fk-link--small{font-size:var(--fk-link-font-size-small);line-height:var(--fk-link-line-height-small)}:host.fk-link--medium{font-size:var(--fk-link-font-size-medium);line-height:var(--fk-link-line-height-medium)}:host.fk-link--large{font-size:var(--fk-link-font-size-large);line-height:var(--fk-link-line-height-large)}:host.fk-link--default a,:host.fk-link--default button{color:var(--fk-link-color-default)}:host.fk-link--default a:hover,:host.fk-link--default button:hover{color:var(--fk-link-color-default-hover)}:host.fk-link--primary a,:host.fk-link--primary button{color:var(--fk-link-color-primary)}:host.fk-link--primary a:hover,:host.fk-link--primary button:hover{color:var(--fk-link-color-primary-hover)}:host.fk-link--primary a:active,:host.fk-link--primary button:active{color:var(--fk-link-color-primary-active)}:host.fk-link--muted a,:host.fk-link--muted button{color:var(--fk-link-color-muted)}:host.fk-link--muted a:hover,:host.fk-link--muted button:hover{color:var(--fk-link-color-muted-hover)}:host.fk-link--danger a,:host.fk-link--danger button{color:var(--fk-link-color-danger)}:host.fk-link--danger a:hover,:host.fk-link--danger button:hover{color:var(--fk-link-color-danger-hover)}:host.fk-link--underline-none a,:host.fk-link--underline-none button{text-decoration:none}:host.fk-link--underline-hover a,:host.fk-link--underline-hover button{text-decoration:none}:host.fk-link--underline-hover a:hover,:host.fk-link--underline-hover button:hover{text-decoration:underline}:host.fk-link--underline-always a,:host.fk-link--underline-always button{text-decoration:underline}:host.fk-link--disabled{pointer-events:none}:host.fk-link--disabled a,:host.fk-link--disabled button{color:var(--fk-link-color-disabled);cursor:not-allowed;opacity:var(--fk-link-opacity-disabled, .6)}:host.fk-link--loading{pointer-events:none}:host.fk-link--loading a,:host.fk-link--loading button{opacity:var(--fk-link-opacity-loading, .7)}.fk-link__content{display:inline-flex;align-items:center;gap:var(--fk-link-icon-gap, .375rem)}.fk-link__text{display:inline}.fk-link__external-icon{display:inline-flex;align-items:center;flex-shrink:0;margin-left:var(--fk-rhythm-1)}.fk-link__external-icon svg{width:1em;height:1em}.fk-link__loading{display:inline-flex;align-items:center;margin-right:var(--fk-rhythm-1)}.fk-link__spinner{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:fk-link-spin .75s linear infinite}@keyframes fk-link-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
303
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: LinkComponent, isStandalone: true, selector: "fk-link", inputs: { href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, underline: { classPropertyName: "underline", publicName: "underline", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, external: { classPropertyName: "external", publicName: "external", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, download: { classPropertyName: "download", publicName: "download", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaCurrent: { classPropertyName: "ariaCurrent", publicName: "ariaCurrent", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, trackingId: { classPropertyName: "trackingId", publicName: "trackingId", isSignal: true, isRequired: false, transformFunction: null }, trackingCategory: { classPropertyName: "trackingCategory", publicName: "trackingCategory", isSignal: true, isRequired: false, transformFunction: null }, trackingLabel: { classPropertyName: "trackingLabel", publicName: "trackingLabel", isSignal: true, isRequired: false, transformFunction: null }, dataAttributes: { classPropertyName: "dataAttributes", publicName: "dataAttributes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<!-- Stable projection point for default content + leading/trailing icons -->\n<ng-template #projected>\n <ng-content select=\"[fkLinkIconStart]\" />\n <span class=\"fk-link__text\">\n <ng-content></ng-content>\n </span>\n <ng-content select=\"[fkLinkIconEnd]\" />\n</ng-template>\n\n<!-- Loading indicator template -->\n<ng-template #loadingIndicator>\n <span class=\"fk-link__loading\" aria-hidden=\"true\">\n <span class=\"fk-link__spinner\"></span>\n </span>\n</ng-template>\n\n<!-- External link icon template -->\n<ng-template #externalIcon>\n <span class=\"fk-link__external-icon\" aria-hidden=\"true\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333M10 2H14M14 2V6M14 2L6.66667 9.33333\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n</ng-template>\n\n<!-- Router Link (Internal Navigation) -->\n@if (routerLink() && !href()) {\n <a\n [routerLink]=\"routerLink()\"\n [queryParams]=\"queryParams()\"\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.aria-current]=\"ariaCurrent()\"\n [attr.role]=\"role()\"\n [attr.tabindex]=\"effectiveTabIndex()\"\n [attr.data-tracking-id]=\"\n computedDataAttributes()['data-tracking-id'] || null\n \"\n [attr.data-tracking-category]=\"\n computedDataAttributes()['data-tracking-category'] || null\n \"\n [attr.data-tracking-label]=\"\n computedDataAttributes()['data-tracking-label'] || null\n \"\n (click)=\"handleClick($event)\"\n >\n @if (loading()) {\n <ng-container [ngTemplateOutlet]=\"loadingIndicator\"></ng-container>\n }\n\n <span class=\"fk-link__content\">\n <ng-container [ngTemplateOutlet]=\"projected\"></ng-container>\n </span>\n\n @if (isExternalLink()) {\n <ng-container [ngTemplateOutlet]=\"externalIcon\"></ng-container>\n }\n </a>\n}\n\n<!-- Standard Link (External or href-based) -->\n@if (href() && !routerLink()) {\n <a\n [href]=\"href()\"\n [attr.target]=\"effectiveTarget()\"\n [attr.rel]=\"effectiveRel()\"\n [attr.download]=\"effectiveDownload()\"\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.aria-current]=\"ariaCurrent()\"\n [attr.role]=\"role()\"\n [attr.tabindex]=\"effectiveTabIndex()\"\n [attr.data-tracking-id]=\"\n computedDataAttributes()['data-tracking-id'] || null\n \"\n [attr.data-tracking-category]=\"\n computedDataAttributes()['data-tracking-category'] || null\n \"\n [attr.data-tracking-label]=\"\n computedDataAttributes()['data-tracking-label'] || null\n \"\n (click)=\"handleClick($event)\"\n >\n @if (loading()) {\n <ng-container [ngTemplateOutlet]=\"loadingIndicator\"></ng-container>\n }\n\n <span class=\"fk-link__content\">\n <ng-container [ngTemplateOutlet]=\"projected\"></ng-container>\n </span>\n\n @if (isExternalLink()) {\n <ng-container [ngTemplateOutlet]=\"externalIcon\"></ng-container>\n }\n </a>\n}\n\n<!-- Fallback: Button-style link (when no href or routerLink) -->\n@if (!href() && !routerLink()) {\n <button\n type=\"button\"\n [attr.id]=\"id()\"\n [disabled]=\"disabled() || loading()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.aria-current]=\"ariaCurrent()\"\n [attr.role]=\"role()\"\n [attr.tabindex]=\"effectiveTabIndex()\"\n [attr.data-tracking-id]=\"\n computedDataAttributes()['data-tracking-id'] || null\n \"\n [attr.data-tracking-category]=\"\n computedDataAttributes()['data-tracking-category'] || null\n \"\n [attr.data-tracking-label]=\"\n computedDataAttributes()['data-tracking-label'] || null\n \"\n (click)=\"handleClick($event)\"\n >\n @if (loading()) {\n <ng-container [ngTemplateOutlet]=\"loadingIndicator\"></ng-container>\n }\n\n <span class=\"fk-link__content\">\n <ng-container [ngTemplateOutlet]=\"projected\"></ng-container>\n </span>\n </button>\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--fk-rhythm-1)}:host a,:host button{display:inline-flex;align-items:center;gap:var(--fk-rhythm-1);font-family:inherit;background:none;border:none;padding:0;margin:0;cursor:pointer;text-decoration:none;transition:color .15s ease,text-decoration .15s ease,opacity .15s ease;appearance:none;-webkit-appearance:none;-moz-appearance:none}:host a:focus-visible,:host button:focus-visible{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18));border-radius:var(--fk-link-focus-radius, 2px)}:host.fk-link--small{font-size:var(--fk-link-font-size-small);line-height:var(--fk-link-line-height-small)}:host.fk-link--medium{font-size:var(--fk-link-font-size-medium);line-height:var(--fk-link-line-height-medium)}:host.fk-link--large{font-size:var(--fk-link-font-size-large);line-height:var(--fk-link-line-height-large)}:host.fk-link--default a,:host.fk-link--default button{color:var(--fk-link-color-default)}:host.fk-link--default a:hover,:host.fk-link--default button:hover{color:var(--fk-link-color-default-hover)}:host.fk-link--primary a,:host.fk-link--primary button{color:var(--fk-link-color-primary)}:host.fk-link--primary a:hover,:host.fk-link--primary button:hover{color:var(--fk-link-color-primary-hover)}:host.fk-link--primary a:active,:host.fk-link--primary button:active{color:var(--fk-link-color-primary-active)}:host.fk-link--muted a,:host.fk-link--muted button{color:var(--fk-link-color-muted)}:host.fk-link--muted a:hover,:host.fk-link--muted button:hover{color:var(--fk-link-color-muted-hover)}:host.fk-link--danger a,:host.fk-link--danger button{color:var(--fk-link-color-danger)}:host.fk-link--danger a:hover,:host.fk-link--danger button:hover{color:var(--fk-link-color-danger-hover)}:host.fk-link--underline-none a,:host.fk-link--underline-none button{text-decoration:none}:host.fk-link--underline-hover a,:host.fk-link--underline-hover button{text-decoration:none}:host.fk-link--underline-hover a:hover,:host.fk-link--underline-hover button:hover{text-decoration:underline}:host.fk-link--underline-always a,:host.fk-link--underline-always button{text-decoration:underline}:host.fk-link--disabled{pointer-events:none}:host.fk-link--disabled a,:host.fk-link--disabled button{color:var(--fk-link-color-disabled);cursor:not-allowed;opacity:var(--fk-link-opacity-disabled, .6)}:host.fk-link--loading{pointer-events:none}:host.fk-link--loading a,:host.fk-link--loading button{opacity:var(--fk-link-opacity-loading, .7)}.fk-link__content{display:inline-flex;align-items:center;gap:var(--fk-link-icon-gap, .375rem)}.fk-link__text{display:inline}.fk-link__external-icon{display:inline-flex;align-items:center;flex-shrink:0;margin-left:var(--fk-rhythm-1)}.fk-link__external-icon svg{width:1em;height:1em}.fk-link__loading{display:inline-flex;align-items:center;margin-right:var(--fk-rhythm-1)}.fk-link__spinner{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:fk-link-spin .75s linear infinite}@keyframes fk-link-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
304
304
|
}
|
|
305
305
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LinkComponent, decorators: [{
|
|
306
306
|
type: Component,
|
|
307
|
-
args: [{ selector: 'fk-link', standalone: true, imports: [RouterLink, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Stable projection point for default content + leading/trailing icons -->\n<ng-template #projected>\n <ng-content select=\"[fkLinkIconStart]\" />\n <span class=\"fk-link__text\">\n <ng-content></ng-content>\n </span>\n <ng-content select=\"[fkLinkIconEnd]\" />\n</ng-template>\n\n<!-- Loading indicator template -->\n<ng-template #loadingIndicator>\n <span class=\"fk-link__loading\" aria-hidden=\"true\">\n <span class=\"fk-link__spinner\"></span>\n </span>\n</ng-template>\n\n<!-- External link icon template -->\n<ng-template #externalIcon>\n <span class=\"fk-link__external-icon\" aria-hidden=\"true\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333M10 2H14M14 2V6M14 2L6.66667 9.33333\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n</ng-template>\n\n<!-- Router Link (Internal Navigation) -->\n@if (routerLink() && !href()) {\n <a\n [routerLink]=\"routerLink()\"\n [queryParams]=\"queryParams()\"\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.aria-current]=\"ariaCurrent()\"\n [attr.role]=\"role()\"\n [attr.tabindex]=\"effectiveTabIndex()\"\n [attr.data-tracking-id]=\"\n computedDataAttributes()['data-tracking-id'] || null\n \"\n [attr.data-tracking-category]=\"\n computedDataAttributes()['data-tracking-category'] || null\n \"\n [attr.data-tracking-label]=\"\n computedDataAttributes()['data-tracking-label'] || null\n \"\n (click)=\"handleClick($event)\"\n >\n @if (loading()) {\n <ng-container [ngTemplateOutlet]=\"loadingIndicator\"></ng-container>\n }\n\n <span class=\"fk-link__content\">\n <ng-container [ngTemplateOutlet]=\"projected\"></ng-container>\n </span>\n\n @if (isExternalLink()) {\n <ng-container [ngTemplateOutlet]=\"externalIcon\"></ng-container>\n }\n </a>\n}\n\n<!-- Standard Link (External or href-based) -->\n@if (href() && !routerLink()) {\n <a\n [href]=\"href()\"\n [target]=\"effectiveTarget()\"\n [rel]=\"effectiveRel()\"\n [download]=\"effectiveDownload()\"\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.aria-current]=\"ariaCurrent()\"\n [attr.role]=\"role()\"\n [attr.tabindex]=\"effectiveTabIndex()\"\n [attr.data-tracking-id]=\"\n computedDataAttributes()['data-tracking-id'] || null\n \"\n [attr.data-tracking-category]=\"\n computedDataAttributes()['data-tracking-category'] || null\n \"\n [attr.data-tracking-label]=\"\n computedDataAttributes()['data-tracking-label'] || null\n \"\n (click)=\"handleClick($event)\"\n >\n @if (loading()) {\n <ng-container [ngTemplateOutlet]=\"loadingIndicator\"></ng-container>\n }\n\n <span class=\"fk-link__content\">\n <ng-container [ngTemplateOutlet]=\"projected\"></ng-container>\n </span>\n\n @if (isExternalLink()) {\n <ng-container [ngTemplateOutlet]=\"externalIcon\"></ng-container>\n }\n </a>\n}\n\n<!-- Fallback: Button-style link (when no href or routerLink) -->\n@if (!href() && !routerLink()) {\n <button\n type=\"button\"\n [id]=\"id()\"\n [disabled]=\"disabled() || loading()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.aria-current]=\"ariaCurrent()\"\n [attr.role]=\"role()\"\n [attr.tabindex]=\"effectiveTabIndex()\"\n [attr.data-tracking-id]=\"\n computedDataAttributes()['data-tracking-id'] || null\n \"\n [attr.data-tracking-category]=\"\n computedDataAttributes()['data-tracking-category'] || null\n \"\n [attr.data-tracking-label]=\"\n computedDataAttributes()['data-tracking-label'] || null\n \"\n (click)=\"handleClick($event)\"\n >\n @if (loading()) {\n <ng-container [ngTemplateOutlet]=\"loadingIndicator\"></ng-container>\n }\n\n <span class=\"fk-link__content\">\n <ng-container [ngTemplateOutlet]=\"projected\"></ng-container>\n </span>\n </button>\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--fk-rhythm-1)}:host a,:host button{display:inline-flex;align-items:center;gap:var(--fk-rhythm-1);font-family:inherit;background:none;border:none;padding:0;margin:0;cursor:pointer;text-decoration:none;transition:color .15s ease,text-decoration .15s ease,opacity .15s ease;appearance:none;-webkit-appearance:none;-moz-appearance:none}:host a:focus-visible,:host button:focus-visible{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18));border-radius:var(--fk-link-focus-radius, 2px)}:host.fk-link--small{font-size:var(--fk-link-font-size-small);line-height:var(--fk-link-line-height-small)}:host.fk-link--medium{font-size:var(--fk-link-font-size-medium);line-height:var(--fk-link-line-height-medium)}:host.fk-link--large{font-size:var(--fk-link-font-size-large);line-height:var(--fk-link-line-height-large)}:host.fk-link--default a,:host.fk-link--default button{color:var(--fk-link-color-default)}:host.fk-link--default a:hover,:host.fk-link--default button:hover{color:var(--fk-link-color-default-hover)}:host.fk-link--primary a,:host.fk-link--primary button{color:var(--fk-link-color-primary)}:host.fk-link--primary a:hover,:host.fk-link--primary button:hover{color:var(--fk-link-color-primary-hover)}:host.fk-link--primary a:active,:host.fk-link--primary button:active{color:var(--fk-link-color-primary-active)}:host.fk-link--muted a,:host.fk-link--muted button{color:var(--fk-link-color-muted)}:host.fk-link--muted a:hover,:host.fk-link--muted button:hover{color:var(--fk-link-color-muted-hover)}:host.fk-link--danger a,:host.fk-link--danger button{color:var(--fk-link-color-danger)}:host.fk-link--danger a:hover,:host.fk-link--danger button:hover{color:var(--fk-link-color-danger-hover)}:host.fk-link--underline-none a,:host.fk-link--underline-none button{text-decoration:none}:host.fk-link--underline-hover a,:host.fk-link--underline-hover button{text-decoration:none}:host.fk-link--underline-hover a:hover,:host.fk-link--underline-hover button:hover{text-decoration:underline}:host.fk-link--underline-always a,:host.fk-link--underline-always button{text-decoration:underline}:host.fk-link--disabled{pointer-events:none}:host.fk-link--disabled a,:host.fk-link--disabled button{color:var(--fk-link-color-disabled);cursor:not-allowed;opacity:var(--fk-link-opacity-disabled, .6)}:host.fk-link--loading{pointer-events:none}:host.fk-link--loading a,:host.fk-link--loading button{opacity:var(--fk-link-opacity-loading, .7)}.fk-link__content{display:inline-flex;align-items:center;gap:var(--fk-link-icon-gap, .375rem)}.fk-link__text{display:inline}.fk-link__external-icon{display:inline-flex;align-items:center;flex-shrink:0;margin-left:var(--fk-rhythm-1)}.fk-link__external-icon svg{width:1em;height:1em}.fk-link__loading{display:inline-flex;align-items:center;margin-right:var(--fk-rhythm-1)}.fk-link__spinner{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:fk-link-spin .75s linear infinite}@keyframes fk-link-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
307
|
+
args: [{ selector: 'fk-link', standalone: true, imports: [RouterLink, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Stable projection point for default content + leading/trailing icons -->\n<ng-template #projected>\n <ng-content select=\"[fkLinkIconStart]\" />\n <span class=\"fk-link__text\">\n <ng-content></ng-content>\n </span>\n <ng-content select=\"[fkLinkIconEnd]\" />\n</ng-template>\n\n<!-- Loading indicator template -->\n<ng-template #loadingIndicator>\n <span class=\"fk-link__loading\" aria-hidden=\"true\">\n <span class=\"fk-link__spinner\"></span>\n </span>\n</ng-template>\n\n<!-- External link icon template -->\n<ng-template #externalIcon>\n <span class=\"fk-link__external-icon\" aria-hidden=\"true\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333M10 2H14M14 2V6M14 2L6.66667 9.33333\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n</ng-template>\n\n<!-- Router Link (Internal Navigation) -->\n@if (routerLink() && !href()) {\n <a\n [routerLink]=\"routerLink()\"\n [queryParams]=\"queryParams()\"\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.aria-current]=\"ariaCurrent()\"\n [attr.role]=\"role()\"\n [attr.tabindex]=\"effectiveTabIndex()\"\n [attr.data-tracking-id]=\"\n computedDataAttributes()['data-tracking-id'] || null\n \"\n [attr.data-tracking-category]=\"\n computedDataAttributes()['data-tracking-category'] || null\n \"\n [attr.data-tracking-label]=\"\n computedDataAttributes()['data-tracking-label'] || null\n \"\n (click)=\"handleClick($event)\"\n >\n @if (loading()) {\n <ng-container [ngTemplateOutlet]=\"loadingIndicator\"></ng-container>\n }\n\n <span class=\"fk-link__content\">\n <ng-container [ngTemplateOutlet]=\"projected\"></ng-container>\n </span>\n\n @if (isExternalLink()) {\n <ng-container [ngTemplateOutlet]=\"externalIcon\"></ng-container>\n }\n </a>\n}\n\n<!-- Standard Link (External or href-based) -->\n@if (href() && !routerLink()) {\n <a\n [href]=\"href()\"\n [attr.target]=\"effectiveTarget()\"\n [attr.rel]=\"effectiveRel()\"\n [attr.download]=\"effectiveDownload()\"\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.aria-current]=\"ariaCurrent()\"\n [attr.role]=\"role()\"\n [attr.tabindex]=\"effectiveTabIndex()\"\n [attr.data-tracking-id]=\"\n computedDataAttributes()['data-tracking-id'] || null\n \"\n [attr.data-tracking-category]=\"\n computedDataAttributes()['data-tracking-category'] || null\n \"\n [attr.data-tracking-label]=\"\n computedDataAttributes()['data-tracking-label'] || null\n \"\n (click)=\"handleClick($event)\"\n >\n @if (loading()) {\n <ng-container [ngTemplateOutlet]=\"loadingIndicator\"></ng-container>\n }\n\n <span class=\"fk-link__content\">\n <ng-container [ngTemplateOutlet]=\"projected\"></ng-container>\n </span>\n\n @if (isExternalLink()) {\n <ng-container [ngTemplateOutlet]=\"externalIcon\"></ng-container>\n }\n </a>\n}\n\n<!-- Fallback: Button-style link (when no href or routerLink) -->\n@if (!href() && !routerLink()) {\n <button\n type=\"button\"\n [attr.id]=\"id()\"\n [disabled]=\"disabled() || loading()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.aria-current]=\"ariaCurrent()\"\n [attr.role]=\"role()\"\n [attr.tabindex]=\"effectiveTabIndex()\"\n [attr.data-tracking-id]=\"\n computedDataAttributes()['data-tracking-id'] || null\n \"\n [attr.data-tracking-category]=\"\n computedDataAttributes()['data-tracking-category'] || null\n \"\n [attr.data-tracking-label]=\"\n computedDataAttributes()['data-tracking-label'] || null\n \"\n (click)=\"handleClick($event)\"\n >\n @if (loading()) {\n <ng-container [ngTemplateOutlet]=\"loadingIndicator\"></ng-container>\n }\n\n <span class=\"fk-link__content\">\n <ng-container [ngTemplateOutlet]=\"projected\"></ng-container>\n </span>\n </button>\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--fk-rhythm-1)}:host a,:host button{display:inline-flex;align-items:center;gap:var(--fk-rhythm-1);font-family:inherit;background:none;border:none;padding:0;margin:0;cursor:pointer;text-decoration:none;transition:color .15s ease,text-decoration .15s ease,opacity .15s ease;appearance:none;-webkit-appearance:none;-moz-appearance:none}:host a:focus-visible,:host button:focus-visible{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18));border-radius:var(--fk-link-focus-radius, 2px)}:host.fk-link--small{font-size:var(--fk-link-font-size-small);line-height:var(--fk-link-line-height-small)}:host.fk-link--medium{font-size:var(--fk-link-font-size-medium);line-height:var(--fk-link-line-height-medium)}:host.fk-link--large{font-size:var(--fk-link-font-size-large);line-height:var(--fk-link-line-height-large)}:host.fk-link--default a,:host.fk-link--default button{color:var(--fk-link-color-default)}:host.fk-link--default a:hover,:host.fk-link--default button:hover{color:var(--fk-link-color-default-hover)}:host.fk-link--primary a,:host.fk-link--primary button{color:var(--fk-link-color-primary)}:host.fk-link--primary a:hover,:host.fk-link--primary button:hover{color:var(--fk-link-color-primary-hover)}:host.fk-link--primary a:active,:host.fk-link--primary button:active{color:var(--fk-link-color-primary-active)}:host.fk-link--muted a,:host.fk-link--muted button{color:var(--fk-link-color-muted)}:host.fk-link--muted a:hover,:host.fk-link--muted button:hover{color:var(--fk-link-color-muted-hover)}:host.fk-link--danger a,:host.fk-link--danger button{color:var(--fk-link-color-danger)}:host.fk-link--danger a:hover,:host.fk-link--danger button:hover{color:var(--fk-link-color-danger-hover)}:host.fk-link--underline-none a,:host.fk-link--underline-none button{text-decoration:none}:host.fk-link--underline-hover a,:host.fk-link--underline-hover button{text-decoration:none}:host.fk-link--underline-hover a:hover,:host.fk-link--underline-hover button:hover{text-decoration:underline}:host.fk-link--underline-always a,:host.fk-link--underline-always button{text-decoration:underline}:host.fk-link--disabled{pointer-events:none}:host.fk-link--disabled a,:host.fk-link--disabled button{color:var(--fk-link-color-disabled);cursor:not-allowed;opacity:var(--fk-link-opacity-disabled, .6)}:host.fk-link--loading{pointer-events:none}:host.fk-link--loading a,:host.fk-link--loading button{opacity:var(--fk-link-opacity-loading, .7)}.fk-link__content{display:inline-flex;align-items:center;gap:var(--fk-link-icon-gap, .375rem)}.fk-link__text{display:inline}.fk-link__external-icon{display:inline-flex;align-items:center;flex-shrink:0;margin-left:var(--fk-rhythm-1)}.fk-link__external-icon svg{width:1em;height:1em}.fk-link__loading{display:inline-flex;align-items:center;margin-right:var(--fk-rhythm-1)}.fk-link__spinner{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:fk-link-spin .75s linear infinite}@keyframes fk-link-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
308
308
|
}], propDecorators: { href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], queryParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParams", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], underline: [{ type: i0.Input, args: [{ isSignal: true, alias: "underline", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], rel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rel", required: false }] }], external: [{ type: i0.Input, args: [{ isSignal: true, alias: "external", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], download: [{ type: i0.Input, args: [{ isSignal: true, alias: "download", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], ariaCurrent: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaCurrent", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], trackingId: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackingId", required: false }] }], trackingCategory: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackingCategory", required: false }] }], trackingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackingLabel", required: false }] }], dataAttributes: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataAttributes", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], hostClass: [{
|
|
309
309
|
type: HostBinding,
|
|
310
310
|
args: ['class']
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"frame-kit-ui-ng-core-link.mjs","sources":["../../../../packages/ui-ng/core/link/link.component.ts","../../../../packages/ui-ng/core/link/link.component.html","../../../../packages/ui-ng/core/link/link-icon.directive.ts","../../../../packages/ui-ng/core/link/frame-kit-ui-ng-core-link.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n computed,\n HostBinding,\n input,\n output,\n} from '@angular/core';\nimport { RouterLink } from '@angular/router';\n\nimport type { LinkSize, LinkUnderline, LinkVariant } from './link.types';\n\n/**\n * Link Component\n *\n * A flexible, accessible link component that supports:\n * - External and internal links\n * - Angular Router integration\n * - Variants, sizes, and underline styles\n * - Analytics tracking via data attributes\n * - Accessibility features (aria-label, keyboard navigation)\n * - Icon support (leading/trailing)\n * - Disabled and loading states\n * - External link indicators\n *\n * @example\n * ```html\n * <!-- Internal router link -->\n * <fk-link routerLink=\"/dashboard\">Dashboard</fk-link>\n *\n * <!-- External link with icon -->\n * <fk-link href=\"https://example.com\" [external]=\"true\">\n * Visit Site\n * </fk-link>\n *\n * <!-- With analytics tracking -->\n * <fk-link\n * href=\"/products\"\n * trackingId=\"nav-products\"\n * trackingCategory=\"navigation\"\n * >\n * Products\n * </fk-link>\n *\n * <!-- Variants -->\n * <fk-link variant=\"primary\" href=\"/signup\">Sign Up</fk-link>\n * <fk-link variant=\"muted\" href=\"/help\">Help</fk-link>\n * <fk-link variant=\"danger\" href=\"/delete\">Delete</fk-link>\n * ```\n */\n@Component({\n selector: 'fk-link',\n standalone: true,\n imports: [RouterLink, NgTemplateOutlet],\n changeDetection: ChangeDetectionStrategy.OnPush,\n styleUrl: './link.component.scss',\n templateUrl: './link.component.html',\n})\nexport class LinkComponent {\n // ===== INPUTS =====\n\n /**\n * External href (for standard <a> tags)\n * Use this for external links or when not using Angular Router\n */\n readonly href = input<string | null>(null);\n\n /**\n * Angular Router link (for internal navigation)\n * Use this for internal app navigation\n */\n readonly routerLink = input<string | string[] | null>(null);\n\n /**\n * Query parameters object passed through to the underlying\n * `routerLink` directive. Only meaningful when `routerLink` is set.\n * Equivalent to `<a [routerLink]=\"...\" [queryParams]=\"...\">`.\n */\n readonly queryParams = input<Record<\n string,\n string | number | boolean | null | undefined\n > | null>(null);\n\n /**\n * Link variant (visual style)\n * @default 'default'\n */\n readonly variant = input<LinkVariant>('default');\n\n /**\n * Link size\n * @default 'medium'\n */\n readonly size = input<LinkSize>('medium');\n\n /**\n * Underline behavior\n * @default 'hover'\n */\n readonly underline = input<LinkUnderline>('hover');\n\n /**\n * Target attribute (e.g., '_blank', '_self')\n * Automatically set to '_blank' if external is true\n */\n readonly target = input<string | null>(null);\n\n /**\n * Rel attribute (e.g., 'noopener noreferrer')\n * Automatically set to 'noopener noreferrer' for external links with target=\"_blank\"\n */\n readonly rel = input<string | null>(null);\n\n /**\n * Authoritative override for whether this is an external link (external icon\n * + `target=\"_blank\"`).\n *\n * - `undefined` (default): auto-detect from the href — absolute `http(s)://`,\n * protocol-relative, `mailto:`, and `tel:` hrefs are treated as external.\n * - `true`: force external (icon + new tab) regardless of the href.\n * - `false`: force internal (no icon, same tab) even for an absolute href —\n * use this for a same-brand sibling app (e.g. a subdomain) that is external\n * by origin but should not read as \"leaving the site\".\n *\n * @default undefined\n */\n readonly external = input<boolean | undefined>(undefined);\n\n /**\n * Disable the link (prevents navigation, changes appearance)\n * @default false\n */\n readonly disabled = input<boolean>(false);\n\n /**\n * Loading state (shows loading indicator, prevents navigation)\n * @default false\n */\n readonly loading = input<boolean>(false);\n\n /**\n * Download attribute (for file downloads)\n */\n readonly download = input<string | boolean | null>(null);\n\n /**\n * Additional CSS classes\n */\n readonly className = input<string>('');\n\n /**\n * ID attribute\n */\n readonly id = input<string | null>(null);\n\n /**\n * ARIA label (for accessibility)\n */\n readonly ariaLabel = input<string | null>(null);\n\n /**\n * ARIA described-by (for accessibility)\n */\n readonly ariaDescribedBy = input<string | null>(null);\n\n /**\n * ARIA current (for indicating current page/location)\n */\n readonly ariaCurrent = input<\n 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | null\n >(null);\n\n /**\n * Role attribute (usually not needed for <a> tags)\n */\n readonly role = input<string | null>(null);\n\n /**\n * Tab index (for keyboard navigation control)\n */\n readonly tabIndex = input<number | null>(null);\n\n /**\n * Analytics tracking ID\n */\n readonly trackingId = input<string | null>(null);\n\n /**\n * Analytics tracking category\n */\n readonly trackingCategory = input<string | null>(null);\n\n /**\n * Analytics tracking label\n */\n readonly trackingLabel = input<string | null>(null);\n\n /**\n * Custom data attributes (for analytics or other purposes)\n */\n readonly dataAttributes = input<Record<string, string>>({});\n\n // ===== OUTPUTS =====\n\n /**\n * Click event (emitted when link is clicked)\n * Note: Not emitted if disabled or loading\n */\n readonly clicked = output<MouseEvent>();\n\n // ===== COMPUTED PROPERTIES =====\n\n /**\n * Computed: is this an external link?\n */\n readonly isExternalLink = computed(() => {\n // An explicit `external` value is authoritative — it lets a caller force a\n // same-brand absolute URL to be treated as internal (no icon, same tab).\n const explicit = this.external();\n\n if (explicit !== undefined) return explicit;\n\n const href = this.href();\n\n if (!href) return false;\n\n // Auto-detect: href starts with http://, https://, //, or mailto:, tel:, etc.\n return /^(https?:)?\\/\\/|^mailto:|^tel:/i.test(href);\n });\n\n /**\n * Computed: effective target attribute\n */\n readonly effectiveTarget = computed(() => {\n if (this.target()) return this.target();\n if (this.isExternalLink()) return '_blank';\n\n return null;\n });\n\n /**\n * Computed: effective rel attribute\n */\n readonly effectiveRel = computed(() => {\n if (this.rel()) return this.rel();\n\n if (this.isExternalLink() && this.effectiveTarget() === '_blank') {\n return 'noopener noreferrer';\n }\n\n return null;\n });\n\n /**\n * Computed: effective download attribute\n */\n readonly effectiveDownload = computed(() => {\n const download = this.download();\n\n if (download === null) return null;\n if (download === true) return '';\n\n return download;\n });\n\n /**\n * Computed: effective tab index\n */\n readonly effectiveTabIndex = computed(() => {\n if (this.tabIndex() !== null) return this.tabIndex();\n if (this.disabled()) return -1;\n\n return null;\n });\n\n /**\n * Host classes — single source of truth\n */\n readonly classes = computed(() => {\n return [\n 'fk-link',\n `fk-link--${this.variant()}`,\n `fk-link--${this.size()}`,\n `fk-link--underline-${this.underline()}`,\n this.disabled() ? 'fk-link--disabled' : '',\n this.loading() ? 'fk-link--loading' : '',\n this.isExternalLink() ? 'fk-link--external' : '',\n this.className(),\n ]\n .filter(Boolean)\n .join(' ');\n });\n\n @HostBinding('class')\n get hostClass() {\n return this.classes();\n }\n\n /**\n * Computed: data attributes for analytics\n */\n readonly computedDataAttributes = computed(() => {\n const attrs: Record<string, string> = { ...this.dataAttributes() };\n\n const trackingId = this.trackingId();\n\n if (trackingId) {\n attrs['data-tracking-id'] = trackingId;\n }\n\n const trackingCategory = this.trackingCategory();\n\n if (trackingCategory) {\n attrs['data-tracking-category'] = trackingCategory;\n }\n\n const trackingLabel = this.trackingLabel();\n\n if (trackingLabel) {\n attrs['data-tracking-label'] = trackingLabel;\n }\n\n return attrs;\n });\n\n /**\n * Handle click events\n */\n handleClick(event: MouseEvent): void {\n // Prevent navigation if disabled or loading\n if (this.disabled() || this.loading()) {\n event.preventDefault();\n event.stopPropagation();\n\n return;\n }\n\n // Emit click event\n this.clicked.emit(event);\n\n // Track analytics (if tracking service is available)\n this.trackClick();\n }\n\n /**\n * Track click for analytics\n * Override this method or connect to your analytics service\n */\n private trackClick(): void {\n const trackingId = this.trackingId();\n\n if (!trackingId) return;\n\n // Example: integrate with your analytics service\n // this.analytics.track('link_click', {\n // id: trackingId,\n // category: this.trackingCategory(),\n // label: this.trackingLabel(),\n // });\n\n // For now, log to console in dev mode\n if (\n typeof window !== 'undefined' &&\n typeof console !== 'undefined' &&\n console.debug\n ) {\n console.debug('[fk-link] Analytics:', {\n id: trackingId,\n category: this.trackingCategory(),\n label: this.trackingLabel(),\n });\n }\n }\n}\n","<!-- Stable projection point for default content + leading/trailing icons -->\n<ng-template #projected>\n <ng-content select=\"[fkLinkIconStart]\" />\n <span class=\"fk-link__text\">\n <ng-content></ng-content>\n </span>\n <ng-content select=\"[fkLinkIconEnd]\" />\n</ng-template>\n\n<!-- Loading indicator template -->\n<ng-template #loadingIndicator>\n <span class=\"fk-link__loading\" aria-hidden=\"true\">\n <span class=\"fk-link__spinner\"></span>\n </span>\n</ng-template>\n\n<!-- External link icon template -->\n<ng-template #externalIcon>\n <span class=\"fk-link__external-icon\" aria-hidden=\"true\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333M10 2H14M14 2V6M14 2L6.66667 9.33333\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n</ng-template>\n\n<!-- Router Link (Internal Navigation) -->\n@if (routerLink() && !href()) {\n <a\n [routerLink]=\"routerLink()\"\n [queryParams]=\"queryParams()\"\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.aria-current]=\"ariaCurrent()\"\n [attr.role]=\"role()\"\n [attr.tabindex]=\"effectiveTabIndex()\"\n [attr.data-tracking-id]=\"\n computedDataAttributes()['data-tracking-id'] || null\n \"\n [attr.data-tracking-category]=\"\n computedDataAttributes()['data-tracking-category'] || null\n \"\n [attr.data-tracking-label]=\"\n computedDataAttributes()['data-tracking-label'] || null\n \"\n (click)=\"handleClick($event)\"\n >\n @if (loading()) {\n <ng-container [ngTemplateOutlet]=\"loadingIndicator\"></ng-container>\n }\n\n <span class=\"fk-link__content\">\n <ng-container [ngTemplateOutlet]=\"projected\"></ng-container>\n </span>\n\n @if (isExternalLink()) {\n <ng-container [ngTemplateOutlet]=\"externalIcon\"></ng-container>\n }\n </a>\n}\n\n<!-- Standard Link (External or href-based) -->\n@if (href() && !routerLink()) {\n <a\n [href]=\"href()\"\n [target]=\"effectiveTarget()\"\n [rel]=\"effectiveRel()\"\n [download]=\"effectiveDownload()\"\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.aria-current]=\"ariaCurrent()\"\n [attr.role]=\"role()\"\n [attr.tabindex]=\"effectiveTabIndex()\"\n [attr.data-tracking-id]=\"\n computedDataAttributes()['data-tracking-id'] || null\n \"\n [attr.data-tracking-category]=\"\n computedDataAttributes()['data-tracking-category'] || null\n \"\n [attr.data-tracking-label]=\"\n computedDataAttributes()['data-tracking-label'] || null\n \"\n (click)=\"handleClick($event)\"\n >\n @if (loading()) {\n <ng-container [ngTemplateOutlet]=\"loadingIndicator\"></ng-container>\n }\n\n <span class=\"fk-link__content\">\n <ng-container [ngTemplateOutlet]=\"projected\"></ng-container>\n </span>\n\n @if (isExternalLink()) {\n <ng-container [ngTemplateOutlet]=\"externalIcon\"></ng-container>\n }\n </a>\n}\n\n<!-- Fallback: Button-style link (when no href or routerLink) -->\n@if (!href() && !routerLink()) {\n <button\n type=\"button\"\n [id]=\"id()\"\n [disabled]=\"disabled() || loading()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.aria-current]=\"ariaCurrent()\"\n [attr.role]=\"role()\"\n [attr.tabindex]=\"effectiveTabIndex()\"\n [attr.data-tracking-id]=\"\n computedDataAttributes()['data-tracking-id'] || null\n \"\n [attr.data-tracking-category]=\"\n computedDataAttributes()['data-tracking-category'] || null\n \"\n [attr.data-tracking-label]=\"\n computedDataAttributes()['data-tracking-label'] || null\n \"\n (click)=\"handleClick($event)\"\n >\n @if (loading()) {\n <ng-container [ngTemplateOutlet]=\"loadingIndicator\"></ng-container>\n }\n\n <span class=\"fk-link__content\">\n <ng-container [ngTemplateOutlet]=\"projected\"></ng-container>\n </span>\n </button>\n}\n","import { Directive, InjectionToken } from '@angular/core';\n\nexport const FK_LINK_ICON_START = new InjectionToken<FkLinkIconStartDirective>(\n 'FK_LINK_ICON_START',\n);\n\nexport const FK_LINK_ICON_END = new InjectionToken<FkLinkIconEndDirective>(\n 'FK_LINK_ICON_END',\n);\n\n/**\n * Marker directive for the leading icon slot inside `<fk-link>`.\n * Mirrors the `[fkButtonIconStart]` pattern on `<fk-button>`.\n *\n * Apply to an `<fk-icon>` (or any element) projected as a child:\n *\n * ```html\n * <fk-link variant=\"primary\" (clicked)=\"download()\">\n * <fk-icon name=\"download\" fkLinkIconStart />\n * Download sample CSV\n * </fk-link>\n * ```\n *\n * The directive itself only marks the projection slot and applies\n * `aria-hidden=\"true\"` so screen readers don't announce decorative\n * icons twice.\n */\n@Directive({\n selector: '[fkLinkIconStart]',\n standalone: true,\n providers: [\n { provide: FK_LINK_ICON_START, useExisting: FkLinkIconStartDirective },\n ],\n host: {\n 'aria-hidden': 'true',\n },\n})\nexport class FkLinkIconStartDirective {}\n\n/**\n * Marker directive for the trailing icon slot inside `<fk-link>`.\n * Note: the auto-shown external-link icon (when `href` points\n * off-site) renders separately and is not affected by this slot.\n */\n@Directive({\n selector: '[fkLinkIconEnd]',\n standalone: true,\n providers: [\n { provide: FK_LINK_ICON_END, useExisting: FkLinkIconEndDirective },\n ],\n host: {\n 'aria-hidden': 'true',\n },\n})\nexport class FkLinkIconEndDirective {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"frame-kit-ui-ng-core-link.mjs","sources":["../../../../packages/ui-ng/core/link/link.component.ts","../../../../packages/ui-ng/core/link/link.component.html","../../../../packages/ui-ng/core/link/link-icon.directive.ts","../../../../packages/ui-ng/core/link/frame-kit-ui-ng-core-link.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n computed,\n HostBinding,\n input,\n output,\n} from '@angular/core';\nimport { RouterLink } from '@angular/router';\n\nimport type { LinkSize, LinkUnderline, LinkVariant } from './link.types';\n\n/**\n * Link Component\n *\n * A flexible, accessible link component that supports:\n * - External and internal links\n * - Angular Router integration\n * - Variants, sizes, and underline styles\n * - Analytics tracking via data attributes\n * - Accessibility features (aria-label, keyboard navigation)\n * - Icon support (leading/trailing)\n * - Disabled and loading states\n * - External link indicators\n *\n * @example\n * ```html\n * <!-- Internal router link -->\n * <fk-link routerLink=\"/dashboard\">Dashboard</fk-link>\n *\n * <!-- External link with icon -->\n * <fk-link href=\"https://example.com\" [external]=\"true\">\n * Visit Site\n * </fk-link>\n *\n * <!-- With analytics tracking -->\n * <fk-link\n * href=\"/products\"\n * trackingId=\"nav-products\"\n * trackingCategory=\"navigation\"\n * >\n * Products\n * </fk-link>\n *\n * <!-- Variants -->\n * <fk-link variant=\"primary\" href=\"/signup\">Sign Up</fk-link>\n * <fk-link variant=\"muted\" href=\"/help\">Help</fk-link>\n * <fk-link variant=\"danger\" href=\"/delete\">Delete</fk-link>\n * ```\n */\n@Component({\n selector: 'fk-link',\n standalone: true,\n imports: [RouterLink, NgTemplateOutlet],\n changeDetection: ChangeDetectionStrategy.OnPush,\n styleUrl: './link.component.scss',\n templateUrl: './link.component.html',\n})\nexport class LinkComponent {\n // ===== INPUTS =====\n\n /**\n * External href (for standard <a> tags)\n * Use this for external links or when not using Angular Router\n */\n readonly href = input<string | null>(null);\n\n /**\n * Angular Router link (for internal navigation)\n * Use this for internal app navigation\n */\n readonly routerLink = input<string | string[] | null>(null);\n\n /**\n * Query parameters object passed through to the underlying\n * `routerLink` directive. Only meaningful when `routerLink` is set.\n * Equivalent to `<a [routerLink]=\"...\" [queryParams]=\"...\">`.\n */\n readonly queryParams = input<Record<\n string,\n string | number | boolean | null | undefined\n > | null>(null);\n\n /**\n * Link variant (visual style)\n * @default 'default'\n */\n readonly variant = input<LinkVariant>('default');\n\n /**\n * Link size\n * @default 'medium'\n */\n readonly size = input<LinkSize>('medium');\n\n /**\n * Underline behavior\n * @default 'hover'\n */\n readonly underline = input<LinkUnderline>('hover');\n\n /**\n * Target attribute (e.g., '_blank', '_self')\n * Automatically set to '_blank' if external is true\n */\n readonly target = input<string | null>(null);\n\n /**\n * Rel attribute (e.g., 'noopener noreferrer')\n * Automatically set to 'noopener noreferrer' for external links with target=\"_blank\"\n */\n readonly rel = input<string | null>(null);\n\n /**\n * Authoritative override for whether this is an external link (external icon\n * + `target=\"_blank\"`).\n *\n * - `undefined` (default): auto-detect from the href — absolute `http(s)://`,\n * protocol-relative, `mailto:`, and `tel:` hrefs are treated as external.\n * - `true`: force external (icon + new tab) regardless of the href.\n * - `false`: force internal (no icon, same tab) even for an absolute href —\n * use this for a same-brand sibling app (e.g. a subdomain) that is external\n * by origin but should not read as \"leaving the site\".\n *\n * @default undefined\n */\n readonly external = input<boolean | undefined>(undefined);\n\n /**\n * Disable the link (prevents navigation, changes appearance)\n * @default false\n */\n readonly disabled = input<boolean>(false);\n\n /**\n * Loading state (shows loading indicator, prevents navigation)\n * @default false\n */\n readonly loading = input<boolean>(false);\n\n /**\n * Download attribute (for file downloads)\n */\n readonly download = input<string | boolean | null>(null);\n\n /**\n * Additional CSS classes\n */\n readonly className = input<string>('');\n\n /**\n * ID attribute\n */\n readonly id = input<string | null>(null);\n\n /**\n * ARIA label (for accessibility)\n */\n readonly ariaLabel = input<string | null>(null);\n\n /**\n * ARIA described-by (for accessibility)\n */\n readonly ariaDescribedBy = input<string | null>(null);\n\n /**\n * ARIA current (for indicating current page/location)\n */\n readonly ariaCurrent = input<\n 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | null\n >(null);\n\n /**\n * Role attribute (usually not needed for <a> tags)\n */\n readonly role = input<string | null>(null);\n\n /**\n * Tab index (for keyboard navigation control)\n */\n readonly tabIndex = input<number | null>(null);\n\n /**\n * Analytics tracking ID\n */\n readonly trackingId = input<string | null>(null);\n\n /**\n * Analytics tracking category\n */\n readonly trackingCategory = input<string | null>(null);\n\n /**\n * Analytics tracking label\n */\n readonly trackingLabel = input<string | null>(null);\n\n /**\n * Custom data attributes (for analytics or other purposes)\n */\n readonly dataAttributes = input<Record<string, string>>({});\n\n // ===== OUTPUTS =====\n\n /**\n * Click event (emitted when link is clicked)\n * Note: Not emitted if disabled or loading\n */\n readonly clicked = output<MouseEvent>();\n\n // ===== COMPUTED PROPERTIES =====\n\n /**\n * Computed: is this an external link?\n */\n readonly isExternalLink = computed(() => {\n // An explicit `external` value is authoritative — it lets a caller force a\n // same-brand absolute URL to be treated as internal (no icon, same tab).\n const explicit = this.external();\n\n if (explicit !== undefined) return explicit;\n\n const href = this.href();\n\n if (!href) return false;\n\n // Auto-detect: href starts with http://, https://, //, or mailto:, tel:, etc.\n return /^(https?:)?\\/\\/|^mailto:|^tel:/i.test(href);\n });\n\n /**\n * Computed: effective target attribute\n */\n readonly effectiveTarget = computed(() => {\n if (this.target()) return this.target();\n if (this.isExternalLink()) return '_blank';\n\n return null;\n });\n\n /**\n * Computed: effective rel attribute\n */\n readonly effectiveRel = computed(() => {\n if (this.rel()) return this.rel();\n\n if (this.isExternalLink() && this.effectiveTarget() === '_blank') {\n return 'noopener noreferrer';\n }\n\n return null;\n });\n\n /**\n * Computed: effective download attribute\n */\n readonly effectiveDownload = computed(() => {\n const download = this.download();\n\n if (download === null) return null;\n if (download === true) return '';\n\n return download;\n });\n\n /**\n * Computed: effective tab index\n */\n readonly effectiveTabIndex = computed(() => {\n if (this.tabIndex() !== null) return this.tabIndex();\n if (this.disabled()) return -1;\n\n return null;\n });\n\n /**\n * Host classes — single source of truth\n */\n readonly classes = computed(() => {\n return [\n 'fk-link',\n `fk-link--${this.variant()}`,\n `fk-link--${this.size()}`,\n `fk-link--underline-${this.underline()}`,\n this.disabled() ? 'fk-link--disabled' : '',\n this.loading() ? 'fk-link--loading' : '',\n this.isExternalLink() ? 'fk-link--external' : '',\n this.className(),\n ]\n .filter(Boolean)\n .join(' ');\n });\n\n @HostBinding('class')\n get hostClass() {\n return this.classes();\n }\n\n /**\n * Computed: data attributes for analytics\n */\n readonly computedDataAttributes = computed(() => {\n const attrs: Record<string, string> = { ...this.dataAttributes() };\n\n const trackingId = this.trackingId();\n\n if (trackingId) {\n attrs['data-tracking-id'] = trackingId;\n }\n\n const trackingCategory = this.trackingCategory();\n\n if (trackingCategory) {\n attrs['data-tracking-category'] = trackingCategory;\n }\n\n const trackingLabel = this.trackingLabel();\n\n if (trackingLabel) {\n attrs['data-tracking-label'] = trackingLabel;\n }\n\n return attrs;\n });\n\n /**\n * Handle click events\n */\n handleClick(event: MouseEvent): void {\n // Prevent navigation if disabled or loading\n if (this.disabled() || this.loading()) {\n event.preventDefault();\n event.stopPropagation();\n\n return;\n }\n\n // Emit click event\n this.clicked.emit(event);\n\n // Track analytics (if tracking service is available)\n this.trackClick();\n }\n\n /**\n * Track click for analytics\n * Override this method or connect to your analytics service\n */\n private trackClick(): void {\n const trackingId = this.trackingId();\n\n if (!trackingId) return;\n\n // Example: integrate with your analytics service\n // this.analytics.track('link_click', {\n // id: trackingId,\n // category: this.trackingCategory(),\n // label: this.trackingLabel(),\n // });\n\n // For now, log to console in dev mode\n if (\n typeof window !== 'undefined' &&\n typeof console !== 'undefined' &&\n console.debug\n ) {\n console.debug('[fk-link] Analytics:', {\n id: trackingId,\n category: this.trackingCategory(),\n label: this.trackingLabel(),\n });\n }\n }\n}\n","<!-- Stable projection point for default content + leading/trailing icons -->\n<ng-template #projected>\n <ng-content select=\"[fkLinkIconStart]\" />\n <span class=\"fk-link__text\">\n <ng-content></ng-content>\n </span>\n <ng-content select=\"[fkLinkIconEnd]\" />\n</ng-template>\n\n<!-- Loading indicator template -->\n<ng-template #loadingIndicator>\n <span class=\"fk-link__loading\" aria-hidden=\"true\">\n <span class=\"fk-link__spinner\"></span>\n </span>\n</ng-template>\n\n<!-- External link icon template -->\n<ng-template #externalIcon>\n <span class=\"fk-link__external-icon\" aria-hidden=\"true\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333M10 2H14M14 2V6M14 2L6.66667 9.33333\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n</ng-template>\n\n<!-- Router Link (Internal Navigation) -->\n@if (routerLink() && !href()) {\n <a\n [routerLink]=\"routerLink()\"\n [queryParams]=\"queryParams()\"\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.aria-current]=\"ariaCurrent()\"\n [attr.role]=\"role()\"\n [attr.tabindex]=\"effectiveTabIndex()\"\n [attr.data-tracking-id]=\"\n computedDataAttributes()['data-tracking-id'] || null\n \"\n [attr.data-tracking-category]=\"\n computedDataAttributes()['data-tracking-category'] || null\n \"\n [attr.data-tracking-label]=\"\n computedDataAttributes()['data-tracking-label'] || null\n \"\n (click)=\"handleClick($event)\"\n >\n @if (loading()) {\n <ng-container [ngTemplateOutlet]=\"loadingIndicator\"></ng-container>\n }\n\n <span class=\"fk-link__content\">\n <ng-container [ngTemplateOutlet]=\"projected\"></ng-container>\n </span>\n\n @if (isExternalLink()) {\n <ng-container [ngTemplateOutlet]=\"externalIcon\"></ng-container>\n }\n </a>\n}\n\n<!-- Standard Link (External or href-based) -->\n@if (href() && !routerLink()) {\n <a\n [href]=\"href()\"\n [attr.target]=\"effectiveTarget()\"\n [attr.rel]=\"effectiveRel()\"\n [attr.download]=\"effectiveDownload()\"\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.aria-current]=\"ariaCurrent()\"\n [attr.role]=\"role()\"\n [attr.tabindex]=\"effectiveTabIndex()\"\n [attr.data-tracking-id]=\"\n computedDataAttributes()['data-tracking-id'] || null\n \"\n [attr.data-tracking-category]=\"\n computedDataAttributes()['data-tracking-category'] || null\n \"\n [attr.data-tracking-label]=\"\n computedDataAttributes()['data-tracking-label'] || null\n \"\n (click)=\"handleClick($event)\"\n >\n @if (loading()) {\n <ng-container [ngTemplateOutlet]=\"loadingIndicator\"></ng-container>\n }\n\n <span class=\"fk-link__content\">\n <ng-container [ngTemplateOutlet]=\"projected\"></ng-container>\n </span>\n\n @if (isExternalLink()) {\n <ng-container [ngTemplateOutlet]=\"externalIcon\"></ng-container>\n }\n </a>\n}\n\n<!-- Fallback: Button-style link (when no href or routerLink) -->\n@if (!href() && !routerLink()) {\n <button\n type=\"button\"\n [attr.id]=\"id()\"\n [disabled]=\"disabled() || loading()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.aria-current]=\"ariaCurrent()\"\n [attr.role]=\"role()\"\n [attr.tabindex]=\"effectiveTabIndex()\"\n [attr.data-tracking-id]=\"\n computedDataAttributes()['data-tracking-id'] || null\n \"\n [attr.data-tracking-category]=\"\n computedDataAttributes()['data-tracking-category'] || null\n \"\n [attr.data-tracking-label]=\"\n computedDataAttributes()['data-tracking-label'] || null\n \"\n (click)=\"handleClick($event)\"\n >\n @if (loading()) {\n <ng-container [ngTemplateOutlet]=\"loadingIndicator\"></ng-container>\n }\n\n <span class=\"fk-link__content\">\n <ng-container [ngTemplateOutlet]=\"projected\"></ng-container>\n </span>\n </button>\n}\n","import { Directive, InjectionToken } from '@angular/core';\n\nexport const FK_LINK_ICON_START = new InjectionToken<FkLinkIconStartDirective>(\n 'FK_LINK_ICON_START',\n);\n\nexport const FK_LINK_ICON_END = new InjectionToken<FkLinkIconEndDirective>(\n 'FK_LINK_ICON_END',\n);\n\n/**\n * Marker directive for the leading icon slot inside `<fk-link>`.\n * Mirrors the `[fkButtonIconStart]` pattern on `<fk-button>`.\n *\n * Apply to an `<fk-icon>` (or any element) projected as a child:\n *\n * ```html\n * <fk-link variant=\"primary\" (clicked)=\"download()\">\n * <fk-icon name=\"download\" fkLinkIconStart />\n * Download sample CSV\n * </fk-link>\n * ```\n *\n * The directive itself only marks the projection slot and applies\n * `aria-hidden=\"true\"` so screen readers don't announce decorative\n * icons twice.\n */\n@Directive({\n selector: '[fkLinkIconStart]',\n standalone: true,\n providers: [\n { provide: FK_LINK_ICON_START, useExisting: FkLinkIconStartDirective },\n ],\n host: {\n 'aria-hidden': 'true',\n },\n})\nexport class FkLinkIconStartDirective {}\n\n/**\n * Marker directive for the trailing icon slot inside `<fk-link>`.\n * Note: the auto-shown external-link icon (when `href` points\n * off-site) renders separately and is not affected by this slot.\n */\n@Directive({\n selector: '[fkLinkIconEnd]',\n standalone: true,\n providers: [\n { provide: FK_LINK_ICON_END, useExisting: FkLinkIconEndDirective },\n ],\n host: {\n 'aria-hidden': 'true',\n },\n})\nexport class FkLinkIconEndDirective {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -186,11 +186,11 @@ class TextComponent {
|
|
|
186
186
|
}
|
|
187
187
|
}, ...(ngDevMode ? [{ debugName: "template" }] : /* istanbul ignore next */ []));
|
|
188
188
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
189
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: TextComponent, isStandalone: true, selector: "fk-text", inputs: { as: { classPropertyName: "as", publicName: "as", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, truncate: { classPropertyName: "truncate", publicName: "truncate", isSignal: true, isRequired: false, transformFunction: null }, maxLines: { classPropertyName: "maxLines", publicName: "maxLines", isSignal: true, isRequired: false, transformFunction: null }, gutterBottom: { classPropertyName: "gutterBottom", publicName: "gutterBottom", isSignal: true, isRequired: false, transformFunction: null }, italic: { classPropertyName: "italic", publicName: "italic", isSignal: true, isRequired: false, transformFunction: null }, visuallyHidden: { classPropertyName: "visuallyHidden", publicName: "visuallyHidden", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, htmlFor: { classPropertyName: "htmlFor", publicName: "htmlFor", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, viewQueries: [{ propertyName: "pTemplate", first: true, predicate: ["p"], descendants: true, isSignal: true }, { propertyName: "spanTemplate", first: true, predicate: ["span"], descendants: true, isSignal: true }, { propertyName: "divTemplate", first: true, predicate: ["div"], descendants: true, isSignal: true }, { propertyName: "labelTemplate", first: true, predicate: ["label"], descendants: true, isSignal: true }, { propertyName: "smallTemplate", first: true, predicate: ["small"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Stable projection point -->\n<ng-template #projected>\n <ng-content></ng-content>\n</ng-template>\n\n<!-- Render chosen element template -->\n<ng-container\n [ngTemplateOutlet]=\"template()\"\n [ngTemplateOutletContext]=\"{ $implicit: projected }\"\n></ng-container>\n\n<!-- Element templates -->\n<ng-template #p let-content>\n <p\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.role]=\"role()\"\n [ngStyle]=\"lineClampStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </p>\n</ng-template>\n\n<ng-template #span let-content>\n <span\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.role]=\"role()\"\n [ngStyle]=\"lineClampStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </span>\n</ng-template>\n\n<ng-template #div let-content>\n <div\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.role]=\"role()\"\n [ngStyle]=\"lineClampStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #label let-content>\n <label\n [id]=\"id()\"\n [attr.for]=\"htmlFor()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.role]=\"role()\"\n [ngStyle]=\"lineClampStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </label>\n</ng-template>\n\n<ng-template #small let-content>\n <small\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.role]=\"role()\"\n [ngStyle]=\"lineClampStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </small>\n</ng-template>\n", styles: [":host p,:host span,:host div,:host label,:host small{margin:0;padding:0;font-size:inherit;font-weight:inherit;line-height:inherit;color:inherit}:host{display:block;margin-block:var(--fk-text-margin-block-start, var(--fk-rhythm-4, 1rem)) var(--fk-text-margin-block-end, 0)}:host(:first-child){margin-block-start:0}:host.fk-text--body{font-size:var(--fk-typography-body-font-size, .9375rem);font-weight:var(--fk-typography-body-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-typography-body-line-height, 1.5);letter-spacing:var(--fk-typography-body-letter-spacing, .01em)}:host.fk-text--lead{font-size:var(--fk-typography-lead-font-size, 1rem);font-weight:var(--fk-typography-lead-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-typography-lead-line-height, 1.4);letter-spacing:var(--fk-typography-lead-letter-spacing, 0em)}:host.fk-text--small{font-size:var(--fk-typography-small-font-size, .8125rem);font-weight:var(--fk-typography-small-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-typography-small-line-height, 1.4);letter-spacing:var(--fk-typography-small-letter-spacing, .01em)}:host.fk-text--caption{font-size:var(--fk-typography-caption-font-size, .6875rem);font-weight:var(--fk-typography-caption-font-weight, var(--fk-font-weight-medium, 500));line-height:var(--fk-typography-caption-line-height, 1.3);letter-spacing:var(--fk-typography-caption-letter-spacing, .02em)}:host.fk-text--label{font-size:var(--fk-typography-label-font-size, .8125rem);font-weight:var(--fk-typography-label-font-weight, var(--fk-font-weight-semibold, 600));line-height:var(--fk-typography-label-line-height, 1.25);letter-spacing:var(--fk-typography-label-letter-spacing, .01em)}:host.fk-text--code{font-family:var(--fk-typography-code-font-family, ui-monospace, \"SFMono-Regular\", \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace);font-size:var(--fk-typography-code-font-size, .8125rem);font-weight:var(--fk-typography-code-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-typography-code-line-height, 1.45);letter-spacing:var(--fk-typography-code-letter-spacing, 0em)}:host.fk-text--default{color:var(--fk-text-color-default, var(--fk-color-text, #1f2d3d))}:host.fk-text--muted{color:var(--fk-text-color-muted, var(--fk-color-muted, #8a98a8))}:host.fk-text--subtle{color:var(--fk-text-color-subtle, #9ca3af)}:host.fk-text--danger{color:var(--fk-text-color-danger, var(--fk-color-danger, #e02424))}:host.fk-text--success{color:var(--fk-text-color-success, var(--fk-color-success, #10b981))}:host.fk-text--align-inherit{text-align:inherit}:host.fk-text--align-start{text-align:start}:host.fk-text--align-center{text-align:center}:host.fk-text--align-end{text-align:end}:host.fk-text--align-justify{text-align:justify}:host.fk-text--weight-normal{font-weight:var(--fk-font-weight-normal, 400)}:host.fk-text--weight-medium{font-weight:var(--fk-font-weight-medium, 500)}:host.fk-text--weight-semibold{font-weight:var(--fk-font-weight-semibold, 600)}:host.fk-text--weight-bold{font-weight:var(--fk-font-weight-bold, 700)}:host.fk-text--truncate p,:host.fk-text--truncate span,:host.fk-text--truncate div,:host.fk-text--truncate label,:host.fk-text--truncate small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host.fk-text--line-clamp p,:host.fk-text--line-clamp span,:host.fk-text--line-clamp div,:host.fk-text--line-clamp label,:host.fk-text--line-clamp small{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}:host.fk-text--gutter-bottom{margin-bottom:var(--fk-typography-gutter-bottom, 1rem)}:host.fk-text--italic{font-style:italic}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
189
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: TextComponent, isStandalone: true, selector: "fk-text", inputs: { as: { classPropertyName: "as", publicName: "as", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, truncate: { classPropertyName: "truncate", publicName: "truncate", isSignal: true, isRequired: false, transformFunction: null }, maxLines: { classPropertyName: "maxLines", publicName: "maxLines", isSignal: true, isRequired: false, transformFunction: null }, gutterBottom: { classPropertyName: "gutterBottom", publicName: "gutterBottom", isSignal: true, isRequired: false, transformFunction: null }, italic: { classPropertyName: "italic", publicName: "italic", isSignal: true, isRequired: false, transformFunction: null }, visuallyHidden: { classPropertyName: "visuallyHidden", publicName: "visuallyHidden", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, htmlFor: { classPropertyName: "htmlFor", publicName: "htmlFor", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, viewQueries: [{ propertyName: "pTemplate", first: true, predicate: ["p"], descendants: true, isSignal: true }, { propertyName: "spanTemplate", first: true, predicate: ["span"], descendants: true, isSignal: true }, { propertyName: "divTemplate", first: true, predicate: ["div"], descendants: true, isSignal: true }, { propertyName: "labelTemplate", first: true, predicate: ["label"], descendants: true, isSignal: true }, { propertyName: "smallTemplate", first: true, predicate: ["small"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Stable projection point -->\n<ng-template #projected>\n <ng-content></ng-content>\n</ng-template>\n\n<!-- Render chosen element template -->\n<ng-container\n [ngTemplateOutlet]=\"template()\"\n [ngTemplateOutletContext]=\"{ $implicit: projected }\"\n></ng-container>\n\n<!-- Element templates -->\n<ng-template #p let-content>\n <p\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.role]=\"role()\"\n [ngStyle]=\"lineClampStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </p>\n</ng-template>\n\n<ng-template #span let-content>\n <span\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.role]=\"role()\"\n [ngStyle]=\"lineClampStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </span>\n</ng-template>\n\n<ng-template #div let-content>\n <div\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.role]=\"role()\"\n [ngStyle]=\"lineClampStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #label let-content>\n <label\n [attr.id]=\"id()\"\n [attr.for]=\"htmlFor()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.role]=\"role()\"\n [ngStyle]=\"lineClampStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </label>\n</ng-template>\n\n<ng-template #small let-content>\n <small\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.role]=\"role()\"\n [ngStyle]=\"lineClampStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </small>\n</ng-template>\n", styles: [":host p,:host span,:host div,:host label,:host small{margin:0;padding:0;font-size:inherit;font-weight:inherit;line-height:inherit;color:inherit}:host{display:block;margin-block:var(--fk-text-margin-block-start, var(--fk-rhythm-4, 1rem)) var(--fk-text-margin-block-end, 0)}:host(:first-child){margin-block-start:0}:host.fk-text--body{font-size:var(--fk-typography-body-font-size, .9375rem);font-weight:var(--fk-typography-body-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-typography-body-line-height, 1.5);letter-spacing:var(--fk-typography-body-letter-spacing, .01em)}:host.fk-text--lead{font-size:var(--fk-typography-lead-font-size, 1rem);font-weight:var(--fk-typography-lead-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-typography-lead-line-height, 1.4);letter-spacing:var(--fk-typography-lead-letter-spacing, 0em)}:host.fk-text--small{font-size:var(--fk-typography-small-font-size, .8125rem);font-weight:var(--fk-typography-small-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-typography-small-line-height, 1.4);letter-spacing:var(--fk-typography-small-letter-spacing, .01em)}:host.fk-text--caption{font-size:var(--fk-typography-caption-font-size, .6875rem);font-weight:var(--fk-typography-caption-font-weight, var(--fk-font-weight-medium, 500));line-height:var(--fk-typography-caption-line-height, 1.3);letter-spacing:var(--fk-typography-caption-letter-spacing, .02em)}:host.fk-text--label{font-size:var(--fk-typography-label-font-size, .8125rem);font-weight:var(--fk-typography-label-font-weight, var(--fk-font-weight-semibold, 600));line-height:var(--fk-typography-label-line-height, 1.25);letter-spacing:var(--fk-typography-label-letter-spacing, .01em)}:host.fk-text--code{font-family:var(--fk-typography-code-font-family, ui-monospace, \"SFMono-Regular\", \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace);font-size:var(--fk-typography-code-font-size, .8125rem);font-weight:var(--fk-typography-code-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-typography-code-line-height, 1.45);letter-spacing:var(--fk-typography-code-letter-spacing, 0em)}:host.fk-text--default{color:var(--fk-text-color-default, var(--fk-color-text, #1f2d3d))}:host.fk-text--muted{color:var(--fk-text-color-muted, var(--fk-color-muted, #8a98a8))}:host.fk-text--subtle{color:var(--fk-text-color-subtle, #9ca3af)}:host.fk-text--danger{color:var(--fk-text-color-danger, var(--fk-color-danger, #e02424))}:host.fk-text--success{color:var(--fk-text-color-success, var(--fk-color-success, #10b981))}:host.fk-text--align-inherit{text-align:inherit}:host.fk-text--align-start{text-align:start}:host.fk-text--align-center{text-align:center}:host.fk-text--align-end{text-align:end}:host.fk-text--align-justify{text-align:justify}:host.fk-text--weight-normal{font-weight:var(--fk-font-weight-normal, 400)}:host.fk-text--weight-medium{font-weight:var(--fk-font-weight-medium, 500)}:host.fk-text--weight-semibold{font-weight:var(--fk-font-weight-semibold, 600)}:host.fk-text--weight-bold{font-weight:var(--fk-font-weight-bold, 700)}:host.fk-text--truncate p,:host.fk-text--truncate span,:host.fk-text--truncate div,:host.fk-text--truncate label,:host.fk-text--truncate small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host.fk-text--line-clamp p,:host.fk-text--line-clamp span,:host.fk-text--line-clamp div,:host.fk-text--line-clamp label,:host.fk-text--line-clamp small{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}:host.fk-text--gutter-bottom{margin-bottom:var(--fk-typography-gutter-bottom, 1rem)}:host.fk-text--italic{font-style:italic}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
190
190
|
}
|
|
191
191
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TextComponent, decorators: [{
|
|
192
192
|
type: Component,
|
|
193
|
-
args: [{ selector: 'fk-text', standalone: true, imports: [NgStyle, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Stable projection point -->\n<ng-template #projected>\n <ng-content></ng-content>\n</ng-template>\n\n<!-- Render chosen element template -->\n<ng-container\n [ngTemplateOutlet]=\"template()\"\n [ngTemplateOutletContext]=\"{ $implicit: projected }\"\n></ng-container>\n\n<!-- Element templates -->\n<ng-template #p let-content>\n <p\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.role]=\"role()\"\n [ngStyle]=\"lineClampStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </p>\n</ng-template>\n\n<ng-template #span let-content>\n <span\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.role]=\"role()\"\n [ngStyle]=\"lineClampStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </span>\n</ng-template>\n\n<ng-template #div let-content>\n <div\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.role]=\"role()\"\n [ngStyle]=\"lineClampStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #label let-content>\n <label\n [id]=\"id()\"\n [attr.for]=\"htmlFor()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.role]=\"role()\"\n [ngStyle]=\"lineClampStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </label>\n</ng-template>\n\n<ng-template #small let-content>\n <small\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.role]=\"role()\"\n [ngStyle]=\"lineClampStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </small>\n</ng-template>\n", styles: [":host p,:host span,:host div,:host label,:host small{margin:0;padding:0;font-size:inherit;font-weight:inherit;line-height:inherit;color:inherit}:host{display:block;margin-block:var(--fk-text-margin-block-start, var(--fk-rhythm-4, 1rem)) var(--fk-text-margin-block-end, 0)}:host(:first-child){margin-block-start:0}:host.fk-text--body{font-size:var(--fk-typography-body-font-size, .9375rem);font-weight:var(--fk-typography-body-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-typography-body-line-height, 1.5);letter-spacing:var(--fk-typography-body-letter-spacing, .01em)}:host.fk-text--lead{font-size:var(--fk-typography-lead-font-size, 1rem);font-weight:var(--fk-typography-lead-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-typography-lead-line-height, 1.4);letter-spacing:var(--fk-typography-lead-letter-spacing, 0em)}:host.fk-text--small{font-size:var(--fk-typography-small-font-size, .8125rem);font-weight:var(--fk-typography-small-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-typography-small-line-height, 1.4);letter-spacing:var(--fk-typography-small-letter-spacing, .01em)}:host.fk-text--caption{font-size:var(--fk-typography-caption-font-size, .6875rem);font-weight:var(--fk-typography-caption-font-weight, var(--fk-font-weight-medium, 500));line-height:var(--fk-typography-caption-line-height, 1.3);letter-spacing:var(--fk-typography-caption-letter-spacing, .02em)}:host.fk-text--label{font-size:var(--fk-typography-label-font-size, .8125rem);font-weight:var(--fk-typography-label-font-weight, var(--fk-font-weight-semibold, 600));line-height:var(--fk-typography-label-line-height, 1.25);letter-spacing:var(--fk-typography-label-letter-spacing, .01em)}:host.fk-text--code{font-family:var(--fk-typography-code-font-family, ui-monospace, \"SFMono-Regular\", \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace);font-size:var(--fk-typography-code-font-size, .8125rem);font-weight:var(--fk-typography-code-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-typography-code-line-height, 1.45);letter-spacing:var(--fk-typography-code-letter-spacing, 0em)}:host.fk-text--default{color:var(--fk-text-color-default, var(--fk-color-text, #1f2d3d))}:host.fk-text--muted{color:var(--fk-text-color-muted, var(--fk-color-muted, #8a98a8))}:host.fk-text--subtle{color:var(--fk-text-color-subtle, #9ca3af)}:host.fk-text--danger{color:var(--fk-text-color-danger, var(--fk-color-danger, #e02424))}:host.fk-text--success{color:var(--fk-text-color-success, var(--fk-color-success, #10b981))}:host.fk-text--align-inherit{text-align:inherit}:host.fk-text--align-start{text-align:start}:host.fk-text--align-center{text-align:center}:host.fk-text--align-end{text-align:end}:host.fk-text--align-justify{text-align:justify}:host.fk-text--weight-normal{font-weight:var(--fk-font-weight-normal, 400)}:host.fk-text--weight-medium{font-weight:var(--fk-font-weight-medium, 500)}:host.fk-text--weight-semibold{font-weight:var(--fk-font-weight-semibold, 600)}:host.fk-text--weight-bold{font-weight:var(--fk-font-weight-bold, 700)}:host.fk-text--truncate p,:host.fk-text--truncate span,:host.fk-text--truncate div,:host.fk-text--truncate label,:host.fk-text--truncate small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host.fk-text--line-clamp p,:host.fk-text--line-clamp span,:host.fk-text--line-clamp div,:host.fk-text--line-clamp label,:host.fk-text--line-clamp small{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}:host.fk-text--gutter-bottom{margin-bottom:var(--fk-typography-gutter-bottom, 1rem)}:host.fk-text--italic{font-style:italic}\n"] }]
|
|
193
|
+
args: [{ selector: 'fk-text', standalone: true, imports: [NgStyle, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Stable projection point -->\n<ng-template #projected>\n <ng-content></ng-content>\n</ng-template>\n\n<!-- Render chosen element template -->\n<ng-container\n [ngTemplateOutlet]=\"template()\"\n [ngTemplateOutletContext]=\"{ $implicit: projected }\"\n></ng-container>\n\n<!-- Element templates -->\n<ng-template #p let-content>\n <p\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.role]=\"role()\"\n [ngStyle]=\"lineClampStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </p>\n</ng-template>\n\n<ng-template #span let-content>\n <span\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.role]=\"role()\"\n [ngStyle]=\"lineClampStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </span>\n</ng-template>\n\n<ng-template #div let-content>\n <div\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.role]=\"role()\"\n [ngStyle]=\"lineClampStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #label let-content>\n <label\n [attr.id]=\"id()\"\n [attr.for]=\"htmlFor()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.role]=\"role()\"\n [ngStyle]=\"lineClampStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </label>\n</ng-template>\n\n<ng-template #small let-content>\n <small\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.role]=\"role()\"\n [ngStyle]=\"lineClampStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </small>\n</ng-template>\n", styles: [":host p,:host span,:host div,:host label,:host small{margin:0;padding:0;font-size:inherit;font-weight:inherit;line-height:inherit;color:inherit}:host{display:block;margin-block:var(--fk-text-margin-block-start, var(--fk-rhythm-4, 1rem)) var(--fk-text-margin-block-end, 0)}:host(:first-child){margin-block-start:0}:host.fk-text--body{font-size:var(--fk-typography-body-font-size, .9375rem);font-weight:var(--fk-typography-body-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-typography-body-line-height, 1.5);letter-spacing:var(--fk-typography-body-letter-spacing, .01em)}:host.fk-text--lead{font-size:var(--fk-typography-lead-font-size, 1rem);font-weight:var(--fk-typography-lead-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-typography-lead-line-height, 1.4);letter-spacing:var(--fk-typography-lead-letter-spacing, 0em)}:host.fk-text--small{font-size:var(--fk-typography-small-font-size, .8125rem);font-weight:var(--fk-typography-small-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-typography-small-line-height, 1.4);letter-spacing:var(--fk-typography-small-letter-spacing, .01em)}:host.fk-text--caption{font-size:var(--fk-typography-caption-font-size, .6875rem);font-weight:var(--fk-typography-caption-font-weight, var(--fk-font-weight-medium, 500));line-height:var(--fk-typography-caption-line-height, 1.3);letter-spacing:var(--fk-typography-caption-letter-spacing, .02em)}:host.fk-text--label{font-size:var(--fk-typography-label-font-size, .8125rem);font-weight:var(--fk-typography-label-font-weight, var(--fk-font-weight-semibold, 600));line-height:var(--fk-typography-label-line-height, 1.25);letter-spacing:var(--fk-typography-label-letter-spacing, .01em)}:host.fk-text--code{font-family:var(--fk-typography-code-font-family, ui-monospace, \"SFMono-Regular\", \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace);font-size:var(--fk-typography-code-font-size, .8125rem);font-weight:var(--fk-typography-code-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-typography-code-line-height, 1.45);letter-spacing:var(--fk-typography-code-letter-spacing, 0em)}:host.fk-text--default{color:var(--fk-text-color-default, var(--fk-color-text, #1f2d3d))}:host.fk-text--muted{color:var(--fk-text-color-muted, var(--fk-color-muted, #8a98a8))}:host.fk-text--subtle{color:var(--fk-text-color-subtle, #9ca3af)}:host.fk-text--danger{color:var(--fk-text-color-danger, var(--fk-color-danger, #e02424))}:host.fk-text--success{color:var(--fk-text-color-success, var(--fk-color-success, #10b981))}:host.fk-text--align-inherit{text-align:inherit}:host.fk-text--align-start{text-align:start}:host.fk-text--align-center{text-align:center}:host.fk-text--align-end{text-align:end}:host.fk-text--align-justify{text-align:justify}:host.fk-text--weight-normal{font-weight:var(--fk-font-weight-normal, 400)}:host.fk-text--weight-medium{font-weight:var(--fk-font-weight-medium, 500)}:host.fk-text--weight-semibold{font-weight:var(--fk-font-weight-semibold, 600)}:host.fk-text--weight-bold{font-weight:var(--fk-font-weight-bold, 700)}:host.fk-text--truncate p,:host.fk-text--truncate span,:host.fk-text--truncate div,:host.fk-text--truncate label,:host.fk-text--truncate small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host.fk-text--line-clamp p,:host.fk-text--line-clamp span,:host.fk-text--line-clamp div,:host.fk-text--line-clamp label,:host.fk-text--line-clamp small{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}:host.fk-text--gutter-bottom{margin-bottom:var(--fk-typography-gutter-bottom, 1rem)}:host.fk-text--italic{font-style:italic}\n"] }]
|
|
194
194
|
}], propDecorators: { as: [{ type: i0.Input, args: [{ isSignal: true, alias: "as", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], weight: [{ type: i0.Input, args: [{ isSignal: true, alias: "weight", required: false }] }], truncate: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncate", required: false }] }], maxLines: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLines", required: false }] }], gutterBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutterBottom", required: false }] }], italic: [{ type: i0.Input, args: [{ isSignal: true, alias: "italic", required: false }] }], visuallyHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "visuallyHidden", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], htmlFor: [{ type: i0.Input, args: [{ isSignal: true, alias: "htmlFor", required: false }] }], pTemplate: [{ type: i0.ViewChild, args: ['p', { isSignal: true }] }], spanTemplate: [{ type: i0.ViewChild, args: ['span', { isSignal: true }] }], divTemplate: [{ type: i0.ViewChild, args: ['div', { isSignal: true }] }], labelTemplate: [{ type: i0.ViewChild, args: ['label', { isSignal: true }] }], smallTemplate: [{ type: i0.ViewChild, args: ['small', { isSignal: true }] }], hostClass: [{
|
|
195
195
|
type: HostBinding,
|
|
196
196
|
args: ['class']
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"frame-kit-ui-ng-core-text.mjs","sources":["../../../../packages/ui-ng/core/text/text.component.ts","../../../../packages/ui-ng/core/text/text.component.html","../../../../packages/ui-ng/core/text/frame-kit-ui-ng-core-text.ts"],"sourcesContent":["import { NgStyle, NgTemplateOutlet } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n computed,\n HostBinding,\n input,\n TemplateRef,\n viewChild,\n} from '@angular/core';\n\nimport type {\n TextAlign,\n TextTone,\n TextVariant,\n TextWeight,\n} from './text.types';\n\n/**\n * Text Component\n *\n * A flexible typography component that supports:\n * - Semantic HTML elements (p, span, div, label, small)\n * - Design token-based variants (type scale)\n * - Tone/color variants\n * - Text truncation (single-line and multi-line)\n * - Text alignment\n * - Font weight control\n * - Accessibility features (visually hidden, ARIA)\n * - Responsive typography\n *\n * @example\n * ```html\n * <!-- Basic paragraph -->\n * <fk-text>This is body text</fk-text>\n *\n * <!-- Small caption -->\n * <fk-text variant=\"caption\" tone=\"muted\">\n * Last updated: 2 hours ago\n * </fk-text>\n *\n * <!-- Truncated text -->\n * <fk-text [truncate]=\"true\">\n * This is a very long text that will be truncated...\n * </fk-text>\n *\n * <!-- Multi-line clamp -->\n * <fk-text [maxLines]=\"3\">\n * Long description that will be clamped to 3 lines with ellipsis\n * </fk-text>\n *\n * <!-- Inline span -->\n * <fk-text as=\"span\" variant=\"small\" tone=\"muted\">\n * Inline text\n * </fk-text>\n *\n * <!-- Form label -->\n * <fk-text as=\"label\" variant=\"label\" weight=\"semibold\" htmlFor=\"email-input\">\n * Email Address\n * </fk-text>\n * <input id=\"email-input\" type=\"email\" />\n * ```\n */\n@Component({\n selector: 'fk-text',\n standalone: true,\n imports: [NgStyle, NgTemplateOutlet],\n changeDetection: ChangeDetectionStrategy.OnPush,\n styleUrl: './text.component.scss',\n templateUrl: './text.component.html',\n})\nexport class TextComponent {\n // ===== INPUTS =====\n\n /**\n * Semantic HTML element to render\n * @default 'p'\n */\n readonly as = input<'p' | 'span' | 'div' | 'label' | 'small'>('p');\n\n /**\n * Typography variant (type scale)\n * @default 'body'\n */\n readonly variant = input<TextVariant>('body');\n\n /**\n * Text tone/color\n * @default 'default'\n */\n readonly tone = input<TextTone>('default');\n\n /**\n * Text alignment\n * @default 'inherit'\n */\n readonly align = input<TextAlign>('inherit');\n\n /**\n * Font weight\n * @default null (uses variant default)\n */\n readonly weight = input<TextWeight | null>(null);\n\n /**\n * Enable single-line truncation with ellipsis\n * @default false\n */\n readonly truncate = input<boolean>(false);\n\n /**\n * Maximum number of lines (multi-line clamp)\n * @default null (no clamping)\n */\n readonly maxLines = input<number | null>(null);\n\n /**\n * Add bottom margin/gutter\n * @default false\n */\n readonly gutterBottom = input<boolean>(false);\n\n /**\n * Italic text style\n * @default false\n */\n readonly italic = input<boolean>(false);\n\n /**\n * Visually hide the text (screen reader only)\n * @default false\n */\n readonly visuallyHidden = input<boolean>(false);\n\n /**\n * Additional CSS classes\n */\n readonly className = input<string>('');\n\n /**\n * ID attribute\n */\n readonly id = input<string | null>(null);\n\n /**\n * ARIA label (for accessibility)\n */\n readonly ariaLabel = input<string | null>(null);\n\n /**\n * ARIA described-by (for accessibility)\n */\n readonly ariaDescribedBy = input<string | null>(null);\n\n /**\n * Role attribute (usually not needed)\n */\n readonly role = input<string | null>(null);\n\n /**\n * For attribute (when using as=\"label\" to associate with an input)\n */\n readonly htmlFor = input<string | null>(null);\n\n // ===== TEMPLATE REFS =====\n\n private readonly pTemplate = viewChild.required<TemplateRef<unknown>>('p');\n private readonly spanTemplate =\n viewChild.required<TemplateRef<unknown>>('span');\n private readonly divTemplate =\n viewChild.required<TemplateRef<unknown>>('div');\n private readonly labelTemplate =\n viewChild.required<TemplateRef<unknown>>('label');\n private readonly smallTemplate =\n viewChild.required<TemplateRef<unknown>>('small');\n\n // ===== COMPUTED PROPERTIES =====\n\n /**\n * Host classes — single source of truth\n */\n readonly classes = computed(() => {\n const weight = this.weight();\n\n return [\n 'fk-text',\n `fk-text--${this.variant()}`,\n `fk-text--${this.tone()}`,\n `fk-text--align-${this.align()}`,\n weight ? `fk-text--weight-${weight}` : '',\n this.truncate() ? 'fk-text--truncate' : '',\n this.maxLines() !== null ? 'fk-text--line-clamp' : '',\n this.gutterBottom() ? 'fk-text--gutter-bottom' : '',\n this.italic() ? 'fk-text--italic' : '',\n this.visuallyHidden() ? 'sr-only' : '',\n this.className(),\n ]\n .filter(Boolean)\n .join(' ');\n });\n\n @HostBinding('class')\n get hostClass() {\n return this.classes();\n }\n\n /**\n * Computed: inline styles for line clamping\n */\n readonly lineClampStyle = computed(() => {\n const maxLines = this.maxLines();\n\n if (maxLines === null) {\n return null;\n }\n\n return {\n '-webkit-line-clamp': maxLines.toString(),\n };\n });\n\n /**\n * Computed: choose the correct element template\n */\n readonly template = computed(() => {\n switch (this.as()) {\n case 'p':\n return this.pTemplate();\n case 'span':\n return this.spanTemplate();\n case 'div':\n return this.divTemplate();\n case 'label':\n return this.labelTemplate();\n case 'small':\n return this.smallTemplate();\n default:\n return this.pTemplate();\n }\n });\n}\n","<!-- Stable projection point -->\n<ng-template #projected>\n <ng-content></ng-content>\n</ng-template>\n\n<!-- Render chosen element template -->\n<ng-container\n [ngTemplateOutlet]=\"template()\"\n [ngTemplateOutletContext]=\"{ $implicit: projected }\"\n></ng-container>\n\n<!-- Element templates -->\n<ng-template #p let-content>\n <p\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.role]=\"role()\"\n [ngStyle]=\"lineClampStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </p>\n</ng-template>\n\n<ng-template #span let-content>\n <span\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.role]=\"role()\"\n [ngStyle]=\"lineClampStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </span>\n</ng-template>\n\n<ng-template #div let-content>\n <div\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.role]=\"role()\"\n [ngStyle]=\"lineClampStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #label let-content>\n <label\n [id]=\"id()\"\n [attr.for]=\"htmlFor()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.role]=\"role()\"\n [ngStyle]=\"lineClampStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </label>\n</ng-template>\n\n<ng-template #small let-content>\n <small\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.role]=\"role()\"\n [ngStyle]=\"lineClampStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </small>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"frame-kit-ui-ng-core-text.mjs","sources":["../../../../packages/ui-ng/core/text/text.component.ts","../../../../packages/ui-ng/core/text/text.component.html","../../../../packages/ui-ng/core/text/frame-kit-ui-ng-core-text.ts"],"sourcesContent":["import { NgStyle, NgTemplateOutlet } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n computed,\n HostBinding,\n input,\n TemplateRef,\n viewChild,\n} from '@angular/core';\n\nimport type {\n TextAlign,\n TextTone,\n TextVariant,\n TextWeight,\n} from './text.types';\n\n/**\n * Text Component\n *\n * A flexible typography component that supports:\n * - Semantic HTML elements (p, span, div, label, small)\n * - Design token-based variants (type scale)\n * - Tone/color variants\n * - Text truncation (single-line and multi-line)\n * - Text alignment\n * - Font weight control\n * - Accessibility features (visually hidden, ARIA)\n * - Responsive typography\n *\n * @example\n * ```html\n * <!-- Basic paragraph -->\n * <fk-text>This is body text</fk-text>\n *\n * <!-- Small caption -->\n * <fk-text variant=\"caption\" tone=\"muted\">\n * Last updated: 2 hours ago\n * </fk-text>\n *\n * <!-- Truncated text -->\n * <fk-text [truncate]=\"true\">\n * This is a very long text that will be truncated...\n * </fk-text>\n *\n * <!-- Multi-line clamp -->\n * <fk-text [maxLines]=\"3\">\n * Long description that will be clamped to 3 lines with ellipsis\n * </fk-text>\n *\n * <!-- Inline span -->\n * <fk-text as=\"span\" variant=\"small\" tone=\"muted\">\n * Inline text\n * </fk-text>\n *\n * <!-- Form label -->\n * <fk-text as=\"label\" variant=\"label\" weight=\"semibold\" htmlFor=\"email-input\">\n * Email Address\n * </fk-text>\n * <input id=\"email-input\" type=\"email\" />\n * ```\n */\n@Component({\n selector: 'fk-text',\n standalone: true,\n imports: [NgStyle, NgTemplateOutlet],\n changeDetection: ChangeDetectionStrategy.OnPush,\n styleUrl: './text.component.scss',\n templateUrl: './text.component.html',\n})\nexport class TextComponent {\n // ===== INPUTS =====\n\n /**\n * Semantic HTML element to render\n * @default 'p'\n */\n readonly as = input<'p' | 'span' | 'div' | 'label' | 'small'>('p');\n\n /**\n * Typography variant (type scale)\n * @default 'body'\n */\n readonly variant = input<TextVariant>('body');\n\n /**\n * Text tone/color\n * @default 'default'\n */\n readonly tone = input<TextTone>('default');\n\n /**\n * Text alignment\n * @default 'inherit'\n */\n readonly align = input<TextAlign>('inherit');\n\n /**\n * Font weight\n * @default null (uses variant default)\n */\n readonly weight = input<TextWeight | null>(null);\n\n /**\n * Enable single-line truncation with ellipsis\n * @default false\n */\n readonly truncate = input<boolean>(false);\n\n /**\n * Maximum number of lines (multi-line clamp)\n * @default null (no clamping)\n */\n readonly maxLines = input<number | null>(null);\n\n /**\n * Add bottom margin/gutter\n * @default false\n */\n readonly gutterBottom = input<boolean>(false);\n\n /**\n * Italic text style\n * @default false\n */\n readonly italic = input<boolean>(false);\n\n /**\n * Visually hide the text (screen reader only)\n * @default false\n */\n readonly visuallyHidden = input<boolean>(false);\n\n /**\n * Additional CSS classes\n */\n readonly className = input<string>('');\n\n /**\n * ID attribute\n */\n readonly id = input<string | null>(null);\n\n /**\n * ARIA label (for accessibility)\n */\n readonly ariaLabel = input<string | null>(null);\n\n /**\n * ARIA described-by (for accessibility)\n */\n readonly ariaDescribedBy = input<string | null>(null);\n\n /**\n * Role attribute (usually not needed)\n */\n readonly role = input<string | null>(null);\n\n /**\n * For attribute (when using as=\"label\" to associate with an input)\n */\n readonly htmlFor = input<string | null>(null);\n\n // ===== TEMPLATE REFS =====\n\n private readonly pTemplate = viewChild.required<TemplateRef<unknown>>('p');\n private readonly spanTemplate =\n viewChild.required<TemplateRef<unknown>>('span');\n private readonly divTemplate =\n viewChild.required<TemplateRef<unknown>>('div');\n private readonly labelTemplate =\n viewChild.required<TemplateRef<unknown>>('label');\n private readonly smallTemplate =\n viewChild.required<TemplateRef<unknown>>('small');\n\n // ===== COMPUTED PROPERTIES =====\n\n /**\n * Host classes — single source of truth\n */\n readonly classes = computed(() => {\n const weight = this.weight();\n\n return [\n 'fk-text',\n `fk-text--${this.variant()}`,\n `fk-text--${this.tone()}`,\n `fk-text--align-${this.align()}`,\n weight ? `fk-text--weight-${weight}` : '',\n this.truncate() ? 'fk-text--truncate' : '',\n this.maxLines() !== null ? 'fk-text--line-clamp' : '',\n this.gutterBottom() ? 'fk-text--gutter-bottom' : '',\n this.italic() ? 'fk-text--italic' : '',\n this.visuallyHidden() ? 'sr-only' : '',\n this.className(),\n ]\n .filter(Boolean)\n .join(' ');\n });\n\n @HostBinding('class')\n get hostClass() {\n return this.classes();\n }\n\n /**\n * Computed: inline styles for line clamping\n */\n readonly lineClampStyle = computed(() => {\n const maxLines = this.maxLines();\n\n if (maxLines === null) {\n return null;\n }\n\n return {\n '-webkit-line-clamp': maxLines.toString(),\n };\n });\n\n /**\n * Computed: choose the correct element template\n */\n readonly template = computed(() => {\n switch (this.as()) {\n case 'p':\n return this.pTemplate();\n case 'span':\n return this.spanTemplate();\n case 'div':\n return this.divTemplate();\n case 'label':\n return this.labelTemplate();\n case 'small':\n return this.smallTemplate();\n default:\n return this.pTemplate();\n }\n });\n}\n","<!-- Stable projection point -->\n<ng-template #projected>\n <ng-content></ng-content>\n</ng-template>\n\n<!-- Render chosen element template -->\n<ng-container\n [ngTemplateOutlet]=\"template()\"\n [ngTemplateOutletContext]=\"{ $implicit: projected }\"\n></ng-container>\n\n<!-- Element templates -->\n<ng-template #p let-content>\n <p\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.role]=\"role()\"\n [ngStyle]=\"lineClampStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </p>\n</ng-template>\n\n<ng-template #span let-content>\n <span\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.role]=\"role()\"\n [ngStyle]=\"lineClampStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </span>\n</ng-template>\n\n<ng-template #div let-content>\n <div\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.role]=\"role()\"\n [ngStyle]=\"lineClampStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #label let-content>\n <label\n [attr.id]=\"id()\"\n [attr.for]=\"htmlFor()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.role]=\"role()\"\n [ngStyle]=\"lineClampStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </label>\n</ng-template>\n\n<ng-template #small let-content>\n <small\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.role]=\"role()\"\n [ngStyle]=\"lineClampStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </small>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -48,11 +48,11 @@ class BadgeComponent {
|
|
|
48
48
|
return this.paddingInline();
|
|
49
49
|
}
|
|
50
50
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
51
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: BadgeComponent, isStandalone: true, selector: "fk-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, paddingInline: { classPropertyName: "paddingInline", publicName: "paddingInline", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "style.color": "this.hostColor", "style.background-color": "this.hostBackgroundColor", "style.border": "this.hostBorder", "style.padding": "this.hostPadding", "style.padding-inline": "this.hostPaddingInline" } }, ngImport: i0, template: "<span [id]=\"id()
|
|
51
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: BadgeComponent, isStandalone: true, selector: "fk-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, paddingInline: { classPropertyName: "paddingInline", publicName: "paddingInline", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "style.color": "this.hostColor", "style.background-color": "this.hostBackgroundColor", "style.border": "this.hostBorder", "style.padding": "this.hostPadding", "style.padding-inline": "this.hostPaddingInline" } }, ngImport: i0, template: "<span [attr.id]=\"id()\" [attr.aria-label]=\"ariaLabel()\"><ng-content /></span>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;height:var(--fk-badge-height, 1.5rem);border-radius:var(--fk-badge-border-radius, 999px);padding-inline:var(--fk-badge-padding-inline, .5rem);font-family:var(--fk-badge-font-family, inherit);font-size:var(--fk-badge-font-size, .75rem);font-weight:var(--fk-badge-font-weight, var(--fk-font-weight-medium, 500));letter-spacing:var(--fk-badge-letter-spacing, normal);line-height:1;white-space:nowrap;vertical-align:middle}:host.fk-badge--default{background-color:var(--fk-badge-default-bg, var(--fk-color-surface-muted, #f7f9fb));color:var(--fk-badge-default-color, var(--fk-color-text, #1f2d3d))}:host.fk-badge--primary{background-color:var(--fk-badge-primary-bg, var(--fk-color-primary-subtle, #e8f4ff));color:var(--fk-badge-primary-color, var(--fk-color-primary, #0a84ff))}:host.fk-badge--success{background-color:var(--fk-badge-success-bg, var(--fk-color-success-subtle, #e6f9ed));color:var(--fk-badge-success-color, var(--fk-color-success, #16a34a))}:host.fk-badge--warning{background-color:var(--fk-badge-warning-bg, var(--fk-color-warning-subtle, #fff8e6));color:var(--fk-badge-warning-color, var(--fk-color-warning, #d97706))}:host.fk-badge--danger{background-color:var(--fk-badge-danger-bg, var(--fk-color-danger-subtle, #fde8e8));color:var(--fk-badge-danger-color, var(--fk-color-danger, #e02424))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
52
52
|
}
|
|
53
53
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
54
54
|
type: Component,
|
|
55
|
-
args: [{ selector: 'fk-badge', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [id]=\"id()
|
|
55
|
+
args: [{ selector: 'fk-badge', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [attr.id]=\"id()\" [attr.aria-label]=\"ariaLabel()\"><ng-content /></span>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;height:var(--fk-badge-height, 1.5rem);border-radius:var(--fk-badge-border-radius, 999px);padding-inline:var(--fk-badge-padding-inline, .5rem);font-family:var(--fk-badge-font-family, inherit);font-size:var(--fk-badge-font-size, .75rem);font-weight:var(--fk-badge-font-weight, var(--fk-font-weight-medium, 500));letter-spacing:var(--fk-badge-letter-spacing, normal);line-height:1;white-space:nowrap;vertical-align:middle}:host.fk-badge--default{background-color:var(--fk-badge-default-bg, var(--fk-color-surface-muted, #f7f9fb));color:var(--fk-badge-default-color, var(--fk-color-text, #1f2d3d))}:host.fk-badge--primary{background-color:var(--fk-badge-primary-bg, var(--fk-color-primary-subtle, #e8f4ff));color:var(--fk-badge-primary-color, var(--fk-color-primary, #0a84ff))}:host.fk-badge--success{background-color:var(--fk-badge-success-bg, var(--fk-color-success-subtle, #e6f9ed));color:var(--fk-badge-success-color, var(--fk-color-success, #16a34a))}:host.fk-badge--warning{background-color:var(--fk-badge-warning-bg, var(--fk-color-warning-subtle, #fff8e6));color:var(--fk-badge-warning-color, var(--fk-color-warning, #d97706))}:host.fk-badge--danger{background-color:var(--fk-badge-danger-bg, var(--fk-color-danger-subtle, #fde8e8));color:var(--fk-badge-danger-color, var(--fk-color-danger, #e02424))}\n"] }]
|
|
56
56
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], borderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColor", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], paddingInline: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingInline", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hostClass: [{
|
|
57
57
|
type: HostBinding,
|
|
58
58
|
args: ['class']
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"frame-kit-ui-ng-ui-badge.mjs","sources":["../../../../packages/ui-ng/ui/badge/badge.component.ts","../../../../packages/ui-ng/ui/badge/badge.component.html","../../../../packages/ui-ng/ui/badge/frame-kit-ui-ng-ui-badge.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n computed,\n HostBinding,\n input,\n} from '@angular/core';\n\nimport type { BadgeVariant } from './badge.types';\n\n@Component({\n selector: 'fk-badge',\n standalone: true,\n imports: [],\n changeDetection: ChangeDetectionStrategy.OnPush,\n styleUrl: './badge.component.scss',\n templateUrl: './badge.component.html',\n})\nexport class BadgeComponent {\n // ===== INPUTS =====\n /** Visual style variant that drives the badge color scheme. */\n readonly variant = input<BadgeVariant>('default');\n /** Override the text color as a CSS value. */\n readonly color = input<string | null>(null);\n /** Override the background color as a CSS value. */\n readonly backgroundColor = input<string | null>(null);\n /** Override the border color as a CSS value; renders as a 1px solid border. */\n readonly borderColor = input<string | null>(null);\n /** Custom padding shorthand applied to all sides. */\n readonly padding = input<string | null>(null);\n /** Custom inline (left/right) padding applied independently. */\n readonly paddingInline = input<string | null>(null);\n\n // ===== BASE PROPS =====\n readonly className = input<string>('');\n readonly id = input<string | null>(null);\n readonly ariaLabel = input<string | null>(null);\n\n // ===== COMPUTED =====\n readonly classes = computed(() => {\n return ['fk-badge', `fk-badge--${this.variant()}`, this.className()]\n .filter(Boolean)\n .join(' ');\n });\n\n @HostBinding('class')\n get hostClass() {\n return this.classes();\n }\n\n @HostBinding('style.color')\n get hostColor() {\n return this.color();\n }\n\n @HostBinding('style.background-color')\n get hostBackgroundColor() {\n return this.backgroundColor();\n }\n\n @HostBinding('style.border')\n get hostBorder() {\n const bc = this.borderColor();\n\n if (!bc) {\n return null;\n }\n\n return `1px solid ${bc}`;\n }\n\n @HostBinding('style.padding')\n get hostPadding() {\n return this.padding();\n }\n\n @HostBinding('style.padding-inline')\n get hostPaddingInline() {\n return this.paddingInline();\n }\n}\n","<span [id]=\"id()
|
|
1
|
+
{"version":3,"file":"frame-kit-ui-ng-ui-badge.mjs","sources":["../../../../packages/ui-ng/ui/badge/badge.component.ts","../../../../packages/ui-ng/ui/badge/badge.component.html","../../../../packages/ui-ng/ui/badge/frame-kit-ui-ng-ui-badge.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n computed,\n HostBinding,\n input,\n} from '@angular/core';\n\nimport type { BadgeVariant } from './badge.types';\n\n@Component({\n selector: 'fk-badge',\n standalone: true,\n imports: [],\n changeDetection: ChangeDetectionStrategy.OnPush,\n styleUrl: './badge.component.scss',\n templateUrl: './badge.component.html',\n})\nexport class BadgeComponent {\n // ===== INPUTS =====\n /** Visual style variant that drives the badge color scheme. */\n readonly variant = input<BadgeVariant>('default');\n /** Override the text color as a CSS value. */\n readonly color = input<string | null>(null);\n /** Override the background color as a CSS value. */\n readonly backgroundColor = input<string | null>(null);\n /** Override the border color as a CSS value; renders as a 1px solid border. */\n readonly borderColor = input<string | null>(null);\n /** Custom padding shorthand applied to all sides. */\n readonly padding = input<string | null>(null);\n /** Custom inline (left/right) padding applied independently. */\n readonly paddingInline = input<string | null>(null);\n\n // ===== BASE PROPS =====\n readonly className = input<string>('');\n readonly id = input<string | null>(null);\n readonly ariaLabel = input<string | null>(null);\n\n // ===== COMPUTED =====\n readonly classes = computed(() => {\n return ['fk-badge', `fk-badge--${this.variant()}`, this.className()]\n .filter(Boolean)\n .join(' ');\n });\n\n @HostBinding('class')\n get hostClass() {\n return this.classes();\n }\n\n @HostBinding('style.color')\n get hostColor() {\n return this.color();\n }\n\n @HostBinding('style.background-color')\n get hostBackgroundColor() {\n return this.backgroundColor();\n }\n\n @HostBinding('style.border')\n get hostBorder() {\n const bc = this.borderColor();\n\n if (!bc) {\n return null;\n }\n\n return `1px solid ${bc}`;\n }\n\n @HostBinding('style.padding')\n get hostPadding() {\n return this.padding();\n }\n\n @HostBinding('style.padding-inline')\n get hostPaddingInline() {\n return this.paddingInline();\n }\n}\n","<span [attr.id]=\"id()\" [attr.aria-label]=\"ariaLabel()\"><ng-content /></span>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAkBa,cAAc,CAAA;;;AAGhB,IAAA,OAAO,GAAG,KAAK,CAAe,SAAS,8EAAC;;AAExC,IAAA,KAAK,GAAG,KAAK,CAAgB,IAAI,4EAAC;;AAElC,IAAA,eAAe,GAAG,KAAK,CAAgB,IAAI,sFAAC;;AAE5C,IAAA,WAAW,GAAG,KAAK,CAAgB,IAAI,kFAAC;;AAExC,IAAA,OAAO,GAAG,KAAK,CAAgB,IAAI,8EAAC;;AAEpC,IAAA,aAAa,GAAG,KAAK,CAAgB,IAAI,oFAAC;;AAG1C,IAAA,SAAS,GAAG,KAAK,CAAS,EAAE,gFAAC;AAC7B,IAAA,EAAE,GAAG,KAAK,CAAgB,IAAI,yEAAC;AAC/B,IAAA,SAAS,GAAG,KAAK,CAAgB,IAAI,gFAAC;;AAGtC,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AAC/B,QAAA,OAAO,CAAC,UAAU,EAAE,CAAA,UAAA,EAAa,IAAI,CAAC,OAAO,EAAE,CAAA,CAAE,EAAE,IAAI,CAAC,SAAS,EAAE;aAChE,MAAM,CAAC,OAAO;aACd,IAAI,CAAC,GAAG,CAAC;AACd,IAAA,CAAC,8EAAC;AAEF,IAAA,IACI,SAAS,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,OAAO,EAAE;IACvB;AAEA,IAAA,IACI,SAAS,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,KAAK,EAAE;IACrB;AAEA,IAAA,IACI,mBAAmB,GAAA;AACrB,QAAA,OAAO,IAAI,CAAC,eAAe,EAAE;IAC/B;AAEA,IAAA,IACI,UAAU,GAAA;AACZ,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,WAAW,EAAE;QAE7B,IAAI,CAAC,EAAE,EAAE;AACP,YAAA,OAAO,IAAI;QACb;QAEA,OAAO,CAAA,UAAA,EAAa,EAAE,CAAA,CAAE;IAC1B;AAEA,IAAA,IACI,WAAW,GAAA;AACb,QAAA,OAAO,IAAI,CAAC,OAAO,EAAE;IACvB;AAEA,IAAA,IACI,iBAAiB,GAAA;AACnB,QAAA,OAAO,IAAI,CAAC,aAAa,EAAE;IAC7B;uGA7DW,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAd,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,cAAc,i/CClB3B,oFACA,EAAA,MAAA,EAAA,CAAA,i2CAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDiBa,cAAc,EAAA,UAAA,EAAA,CAAA;kBAR1B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,UAAU,cACR,IAAI,EAAA,OAAA,EACP,EAAE,EAAA,eAAA,EACM,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,oFAAA,EAAA,MAAA,EAAA,CAAA,i2CAAA,CAAA,EAAA;;sBA+B9C,WAAW;uBAAC,OAAO;;sBAKnB,WAAW;uBAAC,aAAa;;sBAKzB,WAAW;uBAAC,wBAAwB;;sBAKpC,WAAW;uBAAC,cAAc;;sBAW1B,WAAW;uBAAC,eAAe;;sBAK3B,WAAW;uBAAC,sBAAsB;;;AE5ErC;;AAEG;;;;"}
|
|
@@ -87,11 +87,11 @@ class ButtonComponent {
|
|
|
87
87
|
return this.isDisabled() ? 'true' : null;
|
|
88
88
|
}
|
|
89
89
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
90
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ButtonComponent, isStandalone: true, selector: "fk-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "attr.aria-disabled": "this.ariaDisabledAttr" } }, queries: [{ propertyName: "iconStartRef", first: true, predicate: FK_BUTTON_ICON_START, descendants: true, isSignal: true }, { propertyName: "iconEndRef", first: true, predicate: FK_BUTTON_ICON_END, descendants: true, isSignal: true }], ngImport: i0, template: "<button\n class=\"fk-button__native\"\n [type]=\"type()\"\n [disabled]=\"isDisabled()\"\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n>\n @if (loading()) {\n <fk-loader\n className=\"fk-button__loader\"\n size=\"sm\"\n color=\"inherit\"\n ariaLabel=\"Loading\"\n ></fk-loader>\n }\n <span\n class=\"fk-button__content\"\n [class.fk-button__content--hidden]=\"loading()\"\n >\n <ng-content select=\"[fkButtonIconStart]\" />\n <ng-content />\n <ng-content select=\"[fkButtonIconEnd]\" />\n </span>\n</button>\n", styles: [":host{display:inline-block}:host.fk-button--full-width{display:block;width:100%}.fk-button__native{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--fk-button-icon-gap, .5rem);border:var(--fk-button-border-width, 1px) solid transparent;border-radius:var(--fk-button-border-radius, .5rem);font-weight:var(--fk-button-font-weight, var(--fk-typography-button-font-weight, 400));line-height:var(--fk-button-line-height, var(--fk-typography-button-line-height, 1.5));cursor:var(--fk-button-cursor, pointer);transition:var(--fk-button-transition, background-color .15s ease, border-color .15s ease, color .15s ease);text-decoration:none;white-space:nowrap;width:100%}.fk-button__native:focus-visible{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-button__content{display:inline-flex;align-items:center;gap:var(--fk-button-icon-gap, .5rem)}.fk-button__content--hidden{visibility:hidden}.fk-button__loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}:host.fk-button--xxsm .fk-button__native{padding:var(--fk-button-padding-xxsm, .125rem .375rem);font-size:var(--fk-button-font-size-xxsm, .6875rem)}:host.fk-button--xsm .fk-button__native{padding:var(--fk-button-padding-xsm, .25rem .625rem);font-size:var(--fk-button-font-size-xsm, .75rem)}:host.fk-button--sm .fk-button__native{padding:var(--fk-button-padding-sm, .375rem .75rem);font-size:var(--fk-button-font-size-sm, .875rem)}:host.fk-button--md .fk-button__native{padding:var(--fk-button-padding-md, .5rem 1rem);font-size:var(--fk-button-font-size-md, 1rem)}:host.fk-button--lg .fk-button__native{padding:var(--fk-button-padding-lg, .625rem 1.25rem);font-size:var(--fk-button-font-size-lg, 1.125rem)}:host.fk-button--xlg .fk-button__native{padding:var(--fk-button-padding-xlg, .75rem 1.5rem);font-size:var(--fk-button-font-size-xlg, 1.25rem)}:host.fk-button--xxlg .fk-button__native{padding:var(--fk-button-padding-xxlg, .875rem 1.75rem);font-size:var(--fk-button-font-size-xxlg, 1.375rem)}:host.fk-button--primary .fk-button__native{background-color:var(--fk-button-primary-bg, var(--fk-color-primary, #0a84ff));color:var(--fk-button-primary-color, var(--fk-color-surface, #ffffff));border-color:var(--fk-button-primary-border-color, transparent)}:host.fk-button--primary:not(.fk-button--disabled) .fk-button__native:hover{background-color:var(--fk-button-primary-bg-hover, var(--fk-color-primary-hover, #0670e0))}:host.fk-button--primary:not(.fk-button--disabled) .fk-button__native:active{background-color:var(--fk-button-primary-bg-active, var(--fk-color-primary-active, #055fc3))}:host.fk-button--secondary .fk-button__native{background-color:var(--fk-button-secondary-bg, transparent);color:var(--fk-button-secondary-color, var(--fk-color-primary, #0a84ff));border-color:var(--fk-button-secondary-border-color, var(--fk-color-border, #d9e2ee))}:host.fk-button--secondary:not(.fk-button--disabled) .fk-button__native:hover{background-color:var(--fk-button-secondary-bg-hover, var(--fk-color-surface-muted, #f7f9fb))}:host.fk-button--secondary:not(.fk-button--disabled) .fk-button__native:active{background-color:var(--fk-button-secondary-bg-active, var(--fk-color-border, #d9e2ee))}:host.fk-button--outline .fk-button__native{background-color:var(--fk-button-outline-bg, transparent);color:var(--fk-button-outline-color, var(--fk-color-primary, #0a84ff));border-color:var(--fk-button-outline-border-color, var(--fk-color-border, #d9e2ee))}:host.fk-button--outline:not(.fk-button--disabled) .fk-button__native:hover{background-color:var(--fk-button-outline-bg-hover, var(--fk-color-surface-muted, #f7f9fb))}:host.fk-button--outline:not(.fk-button--disabled) .fk-button__native:active{background-color:var(--fk-button-outline-bg-active, var(--fk-color-border, #d9e2ee))}:host.fk-button--danger .fk-button__native{background-color:var(--fk-button-danger-bg, var(--fk-color-danger, #e02424));color:var(--fk-button-danger-color, var(--fk-color-surface, #ffffff));border-color:var(--fk-button-danger-border-color, transparent)}:host.fk-button--danger:not(.fk-button--disabled) .fk-button__native:hover{background-color:var(--fk-button-danger-bg-hover, #b91c1c)}:host.fk-button--danger:not(.fk-button--disabled) .fk-button__native:active{background-color:var(--fk-button-danger-bg-active, #991b1b)}:host.fk-button--disabled .fk-button__native{opacity:var(--fk-button-opacity-disabled, .6);cursor:var(--fk-button-cursor-disabled, not-allowed)}\n"], dependencies: [{ kind: "component", type: LoaderComponent, selector: "fk-loader", inputs: ["size", "color", "className", "id", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
90
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ButtonComponent, isStandalone: true, selector: "fk-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "attr.aria-disabled": "this.ariaDisabledAttr" } }, queries: [{ propertyName: "iconStartRef", first: true, predicate: FK_BUTTON_ICON_START, descendants: true, isSignal: true }, { propertyName: "iconEndRef", first: true, predicate: FK_BUTTON_ICON_END, descendants: true, isSignal: true }], ngImport: i0, template: "<button\n class=\"fk-button__native\"\n [type]=\"type()\"\n [disabled]=\"isDisabled()\"\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n>\n @if (loading()) {\n <fk-loader\n className=\"fk-button__loader\"\n size=\"sm\"\n color=\"inherit\"\n ariaLabel=\"Loading\"\n ></fk-loader>\n }\n <span\n class=\"fk-button__content\"\n [class.fk-button__content--hidden]=\"loading()\"\n >\n <ng-content select=\"[fkButtonIconStart]\" />\n <ng-content />\n <ng-content select=\"[fkButtonIconEnd]\" />\n </span>\n</button>\n", styles: [":host{display:inline-block}:host.fk-button--full-width{display:block;width:100%}.fk-button__native{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--fk-button-icon-gap, .5rem);border:var(--fk-button-border-width, 1px) solid transparent;border-radius:var(--fk-button-border-radius, .5rem);font-weight:var(--fk-button-font-weight, var(--fk-typography-button-font-weight, 400));line-height:var(--fk-button-line-height, var(--fk-typography-button-line-height, 1.5));cursor:var(--fk-button-cursor, pointer);transition:var(--fk-button-transition, background-color .15s ease, border-color .15s ease, color .15s ease);text-decoration:none;white-space:nowrap;width:100%}.fk-button__native:focus-visible{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-button__content{display:inline-flex;align-items:center;gap:var(--fk-button-icon-gap, .5rem)}.fk-button__content--hidden{visibility:hidden}.fk-button__loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}:host.fk-button--xxsm .fk-button__native{padding:var(--fk-button-padding-xxsm, .125rem .375rem);font-size:var(--fk-button-font-size-xxsm, .6875rem)}:host.fk-button--xsm .fk-button__native{padding:var(--fk-button-padding-xsm, .25rem .625rem);font-size:var(--fk-button-font-size-xsm, .75rem)}:host.fk-button--sm .fk-button__native{padding:var(--fk-button-padding-sm, .375rem .75rem);font-size:var(--fk-button-font-size-sm, .875rem)}:host.fk-button--md .fk-button__native{padding:var(--fk-button-padding-md, .5rem 1rem);font-size:var(--fk-button-font-size-md, 1rem)}:host.fk-button--lg .fk-button__native{padding:var(--fk-button-padding-lg, .625rem 1.25rem);font-size:var(--fk-button-font-size-lg, 1.125rem)}:host.fk-button--xlg .fk-button__native{padding:var(--fk-button-padding-xlg, .75rem 1.5rem);font-size:var(--fk-button-font-size-xlg, 1.25rem)}:host.fk-button--xxlg .fk-button__native{padding:var(--fk-button-padding-xxlg, .875rem 1.75rem);font-size:var(--fk-button-font-size-xxlg, 1.375rem)}:host.fk-button--primary .fk-button__native{background-color:var(--fk-button-primary-bg, var(--fk-color-primary, #0a84ff));color:var(--fk-button-primary-color, var(--fk-color-surface, #ffffff));border-color:var(--fk-button-primary-border-color, transparent)}:host.fk-button--primary:not(.fk-button--disabled) .fk-button__native:hover{background-color:var(--fk-button-primary-bg-hover, var(--fk-color-primary-hover, #0670e0))}:host.fk-button--primary:not(.fk-button--disabled) .fk-button__native:active{background-color:var(--fk-button-primary-bg-active, var(--fk-color-primary-active, #055fc3))}:host.fk-button--secondary .fk-button__native{background-color:var(--fk-button-secondary-bg, transparent);color:var(--fk-button-secondary-color, var(--fk-color-primary, #0a84ff));border-color:var(--fk-button-secondary-border-color, var(--fk-color-border, #d9e2ee))}:host.fk-button--secondary:not(.fk-button--disabled) .fk-button__native:hover{background-color:var(--fk-button-secondary-bg-hover, var(--fk-color-surface-muted, #f7f9fb))}:host.fk-button--secondary:not(.fk-button--disabled) .fk-button__native:active{background-color:var(--fk-button-secondary-bg-active, var(--fk-color-border, #d9e2ee))}:host.fk-button--outline .fk-button__native{background-color:var(--fk-button-outline-bg, transparent);color:var(--fk-button-outline-color, var(--fk-color-primary, #0a84ff));border-color:var(--fk-button-outline-border-color, var(--fk-color-border, #d9e2ee))}:host.fk-button--outline:not(.fk-button--disabled) .fk-button__native:hover{background-color:var(--fk-button-outline-bg-hover, var(--fk-color-surface-muted, #f7f9fb))}:host.fk-button--outline:not(.fk-button--disabled) .fk-button__native:active{background-color:var(--fk-button-outline-bg-active, var(--fk-color-border, #d9e2ee))}:host.fk-button--danger .fk-button__native{background-color:var(--fk-button-danger-bg, var(--fk-color-danger, #e02424));color:var(--fk-button-danger-color, var(--fk-color-surface, #ffffff));border-color:var(--fk-button-danger-border-color, transparent)}:host.fk-button--danger:not(.fk-button--disabled) .fk-button__native:hover{background-color:var(--fk-button-danger-bg-hover, #b91c1c)}:host.fk-button--danger:not(.fk-button--disabled) .fk-button__native:active{background-color:var(--fk-button-danger-bg-active, #991b1b)}:host.fk-button--disabled .fk-button__native{opacity:var(--fk-button-opacity-disabled, .6);cursor:var(--fk-button-cursor-disabled, not-allowed)}\n"], dependencies: [{ kind: "component", type: LoaderComponent, selector: "fk-loader", inputs: ["size", "color", "className", "id", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
91
91
|
}
|
|
92
92
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
93
93
|
type: Component,
|
|
94
|
-
args: [{ selector: 'fk-button', standalone: true, imports: [LoaderComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n class=\"fk-button__native\"\n [type]=\"type()\"\n [disabled]=\"isDisabled()\"\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n>\n @if (loading()) {\n <fk-loader\n className=\"fk-button__loader\"\n size=\"sm\"\n color=\"inherit\"\n ariaLabel=\"Loading\"\n ></fk-loader>\n }\n <span\n class=\"fk-button__content\"\n [class.fk-button__content--hidden]=\"loading()\"\n >\n <ng-content select=\"[fkButtonIconStart]\" />\n <ng-content />\n <ng-content select=\"[fkButtonIconEnd]\" />\n </span>\n</button>\n", styles: [":host{display:inline-block}:host.fk-button--full-width{display:block;width:100%}.fk-button__native{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--fk-button-icon-gap, .5rem);border:var(--fk-button-border-width, 1px) solid transparent;border-radius:var(--fk-button-border-radius, .5rem);font-weight:var(--fk-button-font-weight, var(--fk-typography-button-font-weight, 400));line-height:var(--fk-button-line-height, var(--fk-typography-button-line-height, 1.5));cursor:var(--fk-button-cursor, pointer);transition:var(--fk-button-transition, background-color .15s ease, border-color .15s ease, color .15s ease);text-decoration:none;white-space:nowrap;width:100%}.fk-button__native:focus-visible{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-button__content{display:inline-flex;align-items:center;gap:var(--fk-button-icon-gap, .5rem)}.fk-button__content--hidden{visibility:hidden}.fk-button__loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}:host.fk-button--xxsm .fk-button__native{padding:var(--fk-button-padding-xxsm, .125rem .375rem);font-size:var(--fk-button-font-size-xxsm, .6875rem)}:host.fk-button--xsm .fk-button__native{padding:var(--fk-button-padding-xsm, .25rem .625rem);font-size:var(--fk-button-font-size-xsm, .75rem)}:host.fk-button--sm .fk-button__native{padding:var(--fk-button-padding-sm, .375rem .75rem);font-size:var(--fk-button-font-size-sm, .875rem)}:host.fk-button--md .fk-button__native{padding:var(--fk-button-padding-md, .5rem 1rem);font-size:var(--fk-button-font-size-md, 1rem)}:host.fk-button--lg .fk-button__native{padding:var(--fk-button-padding-lg, .625rem 1.25rem);font-size:var(--fk-button-font-size-lg, 1.125rem)}:host.fk-button--xlg .fk-button__native{padding:var(--fk-button-padding-xlg, .75rem 1.5rem);font-size:var(--fk-button-font-size-xlg, 1.25rem)}:host.fk-button--xxlg .fk-button__native{padding:var(--fk-button-padding-xxlg, .875rem 1.75rem);font-size:var(--fk-button-font-size-xxlg, 1.375rem)}:host.fk-button--primary .fk-button__native{background-color:var(--fk-button-primary-bg, var(--fk-color-primary, #0a84ff));color:var(--fk-button-primary-color, var(--fk-color-surface, #ffffff));border-color:var(--fk-button-primary-border-color, transparent)}:host.fk-button--primary:not(.fk-button--disabled) .fk-button__native:hover{background-color:var(--fk-button-primary-bg-hover, var(--fk-color-primary-hover, #0670e0))}:host.fk-button--primary:not(.fk-button--disabled) .fk-button__native:active{background-color:var(--fk-button-primary-bg-active, var(--fk-color-primary-active, #055fc3))}:host.fk-button--secondary .fk-button__native{background-color:var(--fk-button-secondary-bg, transparent);color:var(--fk-button-secondary-color, var(--fk-color-primary, #0a84ff));border-color:var(--fk-button-secondary-border-color, var(--fk-color-border, #d9e2ee))}:host.fk-button--secondary:not(.fk-button--disabled) .fk-button__native:hover{background-color:var(--fk-button-secondary-bg-hover, var(--fk-color-surface-muted, #f7f9fb))}:host.fk-button--secondary:not(.fk-button--disabled) .fk-button__native:active{background-color:var(--fk-button-secondary-bg-active, var(--fk-color-border, #d9e2ee))}:host.fk-button--outline .fk-button__native{background-color:var(--fk-button-outline-bg, transparent);color:var(--fk-button-outline-color, var(--fk-color-primary, #0a84ff));border-color:var(--fk-button-outline-border-color, var(--fk-color-border, #d9e2ee))}:host.fk-button--outline:not(.fk-button--disabled) .fk-button__native:hover{background-color:var(--fk-button-outline-bg-hover, var(--fk-color-surface-muted, #f7f9fb))}:host.fk-button--outline:not(.fk-button--disabled) .fk-button__native:active{background-color:var(--fk-button-outline-bg-active, var(--fk-color-border, #d9e2ee))}:host.fk-button--danger .fk-button__native{background-color:var(--fk-button-danger-bg, var(--fk-color-danger, #e02424));color:var(--fk-button-danger-color, var(--fk-color-surface, #ffffff));border-color:var(--fk-button-danger-border-color, transparent)}:host.fk-button--danger:not(.fk-button--disabled) .fk-button__native:hover{background-color:var(--fk-button-danger-bg-hover, #b91c1c)}:host.fk-button--danger:not(.fk-button--disabled) .fk-button__native:active{background-color:var(--fk-button-danger-bg-active, #991b1b)}:host.fk-button--disabled .fk-button__native{opacity:var(--fk-button-opacity-disabled, .6);cursor:var(--fk-button-cursor-disabled, not-allowed)}\n"] }]
|
|
94
|
+
args: [{ selector: 'fk-button', standalone: true, imports: [LoaderComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n class=\"fk-button__native\"\n [type]=\"type()\"\n [disabled]=\"isDisabled()\"\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n>\n @if (loading()) {\n <fk-loader\n className=\"fk-button__loader\"\n size=\"sm\"\n color=\"inherit\"\n ariaLabel=\"Loading\"\n ></fk-loader>\n }\n <span\n class=\"fk-button__content\"\n [class.fk-button__content--hidden]=\"loading()\"\n >\n <ng-content select=\"[fkButtonIconStart]\" />\n <ng-content />\n <ng-content select=\"[fkButtonIconEnd]\" />\n </span>\n</button>\n", styles: [":host{display:inline-block}:host.fk-button--full-width{display:block;width:100%}.fk-button__native{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--fk-button-icon-gap, .5rem);border:var(--fk-button-border-width, 1px) solid transparent;border-radius:var(--fk-button-border-radius, .5rem);font-weight:var(--fk-button-font-weight, var(--fk-typography-button-font-weight, 400));line-height:var(--fk-button-line-height, var(--fk-typography-button-line-height, 1.5));cursor:var(--fk-button-cursor, pointer);transition:var(--fk-button-transition, background-color .15s ease, border-color .15s ease, color .15s ease);text-decoration:none;white-space:nowrap;width:100%}.fk-button__native:focus-visible{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-button__content{display:inline-flex;align-items:center;gap:var(--fk-button-icon-gap, .5rem)}.fk-button__content--hidden{visibility:hidden}.fk-button__loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}:host.fk-button--xxsm .fk-button__native{padding:var(--fk-button-padding-xxsm, .125rem .375rem);font-size:var(--fk-button-font-size-xxsm, .6875rem)}:host.fk-button--xsm .fk-button__native{padding:var(--fk-button-padding-xsm, .25rem .625rem);font-size:var(--fk-button-font-size-xsm, .75rem)}:host.fk-button--sm .fk-button__native{padding:var(--fk-button-padding-sm, .375rem .75rem);font-size:var(--fk-button-font-size-sm, .875rem)}:host.fk-button--md .fk-button__native{padding:var(--fk-button-padding-md, .5rem 1rem);font-size:var(--fk-button-font-size-md, 1rem)}:host.fk-button--lg .fk-button__native{padding:var(--fk-button-padding-lg, .625rem 1.25rem);font-size:var(--fk-button-font-size-lg, 1.125rem)}:host.fk-button--xlg .fk-button__native{padding:var(--fk-button-padding-xlg, .75rem 1.5rem);font-size:var(--fk-button-font-size-xlg, 1.25rem)}:host.fk-button--xxlg .fk-button__native{padding:var(--fk-button-padding-xxlg, .875rem 1.75rem);font-size:var(--fk-button-font-size-xxlg, 1.375rem)}:host.fk-button--primary .fk-button__native{background-color:var(--fk-button-primary-bg, var(--fk-color-primary, #0a84ff));color:var(--fk-button-primary-color, var(--fk-color-surface, #ffffff));border-color:var(--fk-button-primary-border-color, transparent)}:host.fk-button--primary:not(.fk-button--disabled) .fk-button__native:hover{background-color:var(--fk-button-primary-bg-hover, var(--fk-color-primary-hover, #0670e0))}:host.fk-button--primary:not(.fk-button--disabled) .fk-button__native:active{background-color:var(--fk-button-primary-bg-active, var(--fk-color-primary-active, #055fc3))}:host.fk-button--secondary .fk-button__native{background-color:var(--fk-button-secondary-bg, transparent);color:var(--fk-button-secondary-color, var(--fk-color-primary, #0a84ff));border-color:var(--fk-button-secondary-border-color, var(--fk-color-border, #d9e2ee))}:host.fk-button--secondary:not(.fk-button--disabled) .fk-button__native:hover{background-color:var(--fk-button-secondary-bg-hover, var(--fk-color-surface-muted, #f7f9fb))}:host.fk-button--secondary:not(.fk-button--disabled) .fk-button__native:active{background-color:var(--fk-button-secondary-bg-active, var(--fk-color-border, #d9e2ee))}:host.fk-button--outline .fk-button__native{background-color:var(--fk-button-outline-bg, transparent);color:var(--fk-button-outline-color, var(--fk-color-primary, #0a84ff));border-color:var(--fk-button-outline-border-color, var(--fk-color-border, #d9e2ee))}:host.fk-button--outline:not(.fk-button--disabled) .fk-button__native:hover{background-color:var(--fk-button-outline-bg-hover, var(--fk-color-surface-muted, #f7f9fb))}:host.fk-button--outline:not(.fk-button--disabled) .fk-button__native:active{background-color:var(--fk-button-outline-bg-active, var(--fk-color-border, #d9e2ee))}:host.fk-button--danger .fk-button__native{background-color:var(--fk-button-danger-bg, var(--fk-color-danger, #e02424));color:var(--fk-button-danger-color, var(--fk-color-surface, #ffffff));border-color:var(--fk-button-danger-border-color, transparent)}:host.fk-button--danger:not(.fk-button--disabled) .fk-button__native:hover{background-color:var(--fk-button-danger-bg-hover, #b91c1c)}:host.fk-button--danger:not(.fk-button--disabled) .fk-button__native:active{background-color:var(--fk-button-danger-bg-active, #991b1b)}:host.fk-button--disabled .fk-button__native{opacity:var(--fk-button-opacity-disabled, .6);cursor:var(--fk-button-cursor-disabled, not-allowed)}\n"] }]
|
|
95
95
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], iconStartRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FK_BUTTON_ICON_START), { isSignal: true }] }], iconEndRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FK_BUTTON_ICON_END), { isSignal: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], hostClass: [{
|
|
96
96
|
type: HostBinding,
|
|
97
97
|
args: ['class']
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"frame-kit-ui-ng-ui-button.mjs","sources":["../../../../packages/ui-ng/ui/button/button-icon.directive.ts","../../../../packages/ui-ng/ui/button/button.component.ts","../../../../packages/ui-ng/ui/button/button.component.html","../../../../packages/ui-ng/ui/button/frame-kit-ui-ng-ui-button.ts"],"sourcesContent":["import { Directive, InjectionToken } from '@angular/core';\n\nexport const FK_BUTTON_ICON_START =\n new InjectionToken<FkButtonIconStartDirective>('FK_BUTTON_ICON_START');\n\nexport const FK_BUTTON_ICON_END = new InjectionToken<FkButtonIconEndDirective>(\n 'FK_BUTTON_ICON_END',\n);\n\n@Directive({\n selector: '[fkButtonIconStart]',\n standalone: true,\n providers: [\n { provide: FK_BUTTON_ICON_START, useExisting: FkButtonIconStartDirective },\n ],\n host: {\n 'aria-hidden': 'true',\n },\n})\nexport class FkButtonIconStartDirective {}\n\n@Directive({\n selector: '[fkButtonIconEnd]',\n standalone: true,\n providers: [\n { provide: FK_BUTTON_ICON_END, useExisting: FkButtonIconEndDirective },\n ],\n host: {\n 'aria-hidden': 'true',\n },\n})\nexport class FkButtonIconEndDirective {}\n","import {\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChild,\n HostBinding,\n input,\n} from '@angular/core';\n\nimport { LoaderComponent } from '@frame-kit/ui-ng/ui/loader';\nimport type { ButtonSize, ButtonType, ButtonVariant } from './button.types';\nimport {\n FK_BUTTON_ICON_END,\n FK_BUTTON_ICON_START,\n} from './button-icon.directive';\n\n@Component({\n selector: 'fk-button',\n standalone: true,\n imports: [LoaderComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './button.component.html',\n styleUrl: './button.component.scss',\n})\nexport class ButtonComponent {\n // ===== BEHAVIOR =====\n /** Visual style variant of the button (primary, secondary, ghost, etc.). */\n readonly variant = input<ButtonVariant>('primary');\n /** Size of the button, affecting padding and font size. */\n readonly size = input<ButtonSize>('md');\n /** When true, shows a spinner and disables interaction. */\n readonly loading = input<boolean>(false);\n /** When true, prevents interaction and applies disabled styling. */\n readonly disabled = input<boolean>(false);\n /** HTML type attribute forwarded to the inner `<button>` element. */\n readonly type = input<ButtonType>('button');\n /** When true, the button stretches to fill its container width. */\n readonly fullWidth = input<boolean>(false);\n\n // ===== CONTENT CHILDREN =====\n readonly iconStartRef = contentChild(FK_BUTTON_ICON_START);\n readonly iconEndRef = contentChild(FK_BUTTON_ICON_END);\n\n // ===== BASE PROPS =====\n readonly id = input<string | null>(null);\n readonly className = input<string>('');\n readonly ariaLabel = input<string | null>(null);\n readonly ariaDescribedBy = input<string | null>(null);\n\n // ===== COMPUTED =====\n readonly isDisabled = computed(() => this.disabled() || this.loading());\n\n readonly classes = computed(() => {\n return [\n 'fk-button',\n `fk-button--${this.variant()}`,\n `fk-button--${this.size()}`,\n this.isDisabled() ? 'fk-button--disabled' : '',\n this.loading() ? 'fk-button--loading' : '',\n this.fullWidth() ? 'fk-button--full-width' : '',\n this.className(),\n ]\n .filter(Boolean)\n .join(' ');\n });\n\n @HostBinding('class')\n get hostClass() {\n return this.classes();\n }\n\n @HostBinding('attr.aria-disabled')\n get ariaDisabledAttr(): string | null {\n return this.isDisabled() ? 'true' : null;\n }\n}\n","<button\n class=\"fk-button__native\"\n [type]=\"type()\"\n [disabled]=\"isDisabled()\"\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n>\n @if (loading()) {\n <fk-loader\n className=\"fk-button__loader\"\n size=\"sm\"\n color=\"inherit\"\n ariaLabel=\"Loading\"\n ></fk-loader>\n }\n <span\n class=\"fk-button__content\"\n [class.fk-button__content--hidden]=\"loading()\"\n >\n <ng-content select=\"[fkButtonIconStart]\" />\n <ng-content />\n <ng-content select=\"[fkButtonIconEnd]\" />\n </span>\n</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"frame-kit-ui-ng-ui-button.mjs","sources":["../../../../packages/ui-ng/ui/button/button-icon.directive.ts","../../../../packages/ui-ng/ui/button/button.component.ts","../../../../packages/ui-ng/ui/button/button.component.html","../../../../packages/ui-ng/ui/button/frame-kit-ui-ng-ui-button.ts"],"sourcesContent":["import { Directive, InjectionToken } from '@angular/core';\n\nexport const FK_BUTTON_ICON_START =\n new InjectionToken<FkButtonIconStartDirective>('FK_BUTTON_ICON_START');\n\nexport const FK_BUTTON_ICON_END = new InjectionToken<FkButtonIconEndDirective>(\n 'FK_BUTTON_ICON_END',\n);\n\n@Directive({\n selector: '[fkButtonIconStart]',\n standalone: true,\n providers: [\n { provide: FK_BUTTON_ICON_START, useExisting: FkButtonIconStartDirective },\n ],\n host: {\n 'aria-hidden': 'true',\n },\n})\nexport class FkButtonIconStartDirective {}\n\n@Directive({\n selector: '[fkButtonIconEnd]',\n standalone: true,\n providers: [\n { provide: FK_BUTTON_ICON_END, useExisting: FkButtonIconEndDirective },\n ],\n host: {\n 'aria-hidden': 'true',\n },\n})\nexport class FkButtonIconEndDirective {}\n","import {\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChild,\n HostBinding,\n input,\n} from '@angular/core';\n\nimport { LoaderComponent } from '@frame-kit/ui-ng/ui/loader';\nimport type { ButtonSize, ButtonType, ButtonVariant } from './button.types';\nimport {\n FK_BUTTON_ICON_END,\n FK_BUTTON_ICON_START,\n} from './button-icon.directive';\n\n@Component({\n selector: 'fk-button',\n standalone: true,\n imports: [LoaderComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './button.component.html',\n styleUrl: './button.component.scss',\n})\nexport class ButtonComponent {\n // ===== BEHAVIOR =====\n /** Visual style variant of the button (primary, secondary, ghost, etc.). */\n readonly variant = input<ButtonVariant>('primary');\n /** Size of the button, affecting padding and font size. */\n readonly size = input<ButtonSize>('md');\n /** When true, shows a spinner and disables interaction. */\n readonly loading = input<boolean>(false);\n /** When true, prevents interaction and applies disabled styling. */\n readonly disabled = input<boolean>(false);\n /** HTML type attribute forwarded to the inner `<button>` element. */\n readonly type = input<ButtonType>('button');\n /** When true, the button stretches to fill its container width. */\n readonly fullWidth = input<boolean>(false);\n\n // ===== CONTENT CHILDREN =====\n readonly iconStartRef = contentChild(FK_BUTTON_ICON_START);\n readonly iconEndRef = contentChild(FK_BUTTON_ICON_END);\n\n // ===== BASE PROPS =====\n readonly id = input<string | null>(null);\n readonly className = input<string>('');\n readonly ariaLabel = input<string | null>(null);\n readonly ariaDescribedBy = input<string | null>(null);\n\n // ===== COMPUTED =====\n readonly isDisabled = computed(() => this.disabled() || this.loading());\n\n readonly classes = computed(() => {\n return [\n 'fk-button',\n `fk-button--${this.variant()}`,\n `fk-button--${this.size()}`,\n this.isDisabled() ? 'fk-button--disabled' : '',\n this.loading() ? 'fk-button--loading' : '',\n this.fullWidth() ? 'fk-button--full-width' : '',\n this.className(),\n ]\n .filter(Boolean)\n .join(' ');\n });\n\n @HostBinding('class')\n get hostClass() {\n return this.classes();\n }\n\n @HostBinding('attr.aria-disabled')\n get ariaDisabledAttr(): string | null {\n return this.isDisabled() ? 'true' : null;\n }\n}\n","<button\n class=\"fk-button__native\"\n [type]=\"type()\"\n [disabled]=\"isDisabled()\"\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n>\n @if (loading()) {\n <fk-loader\n className=\"fk-button__loader\"\n size=\"sm\"\n color=\"inherit\"\n ariaLabel=\"Loading\"\n ></fk-loader>\n }\n <span\n class=\"fk-button__content\"\n [class.fk-button__content--hidden]=\"loading()\"\n >\n <ng-content select=\"[fkButtonIconStart]\" />\n <ng-content />\n <ng-content select=\"[fkButtonIconEnd]\" />\n </span>\n</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -95,11 +95,11 @@ class CopyableFieldComponent {
|
|
|
95
95
|
}
|
|
96
96
|
}
|
|
97
97
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CopyableFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
98
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CopyableFieldComponent, isStandalone: true, selector: "fk-copyable-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, mono: { classPropertyName: "mono", publicName: "mono", isSignal: true, isRequired: false, transformFunction: null }, copyAriaLabel: { classPropertyName: "copyAriaLabel", publicName: "copyAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, copiedAnnouncement: { classPropertyName: "copiedAnnouncement", publicName: "copiedAnnouncement", isSignal: true, isRequired: false, transformFunction: null }, copiedDuration: { classPropertyName: "copiedDuration", publicName: "copiedDuration", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { copied: "copied", copyFailed: "copyFailed" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "@if (label()) {\n <span class=\"fk-copyable-field__label\">{{ label() }}</span>\n}\n\n<div class=\"fk-copyable-field__row\">\n <span\n class=\"fk-copyable-field__value\"\n [id]=\"id()
|
|
98
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CopyableFieldComponent, isStandalone: true, selector: "fk-copyable-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, mono: { classPropertyName: "mono", publicName: "mono", isSignal: true, isRequired: false, transformFunction: null }, copyAriaLabel: { classPropertyName: "copyAriaLabel", publicName: "copyAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, copiedAnnouncement: { classPropertyName: "copiedAnnouncement", publicName: "copiedAnnouncement", isSignal: true, isRequired: false, transformFunction: null }, copiedDuration: { classPropertyName: "copiedDuration", publicName: "copiedDuration", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { copied: "copied", copyFailed: "copyFailed" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "@if (label()) {\n <span class=\"fk-copyable-field__label\">{{ label() }}</span>\n}\n\n<div class=\"fk-copyable-field__row\">\n <span\n class=\"fk-copyable-field__value\"\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n {{ value() }}\n </span>\n\n <button\n type=\"button\"\n class=\"fk-copyable-field__action\"\n [attr.aria-label]=\"copyAriaLabel()\"\n (click)=\"copy()\"\n >\n @if (isCopied()) {\n <ng-content select=\"[fkCopiedIcon]\">\n <svg\n class=\"fk-copyable-field__icon\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M3 8.5l3 3L13 4.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </ng-content>\n } @else {\n <ng-content select=\"[fkCopyIcon]\">\n <svg\n class=\"fk-copyable-field__icon\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <rect\n x=\"5.25\"\n y=\"5.25\"\n width=\"8.5\"\n height=\"8.5\"\n rx=\"1.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.25\"\n />\n <path\n d=\"M10 5.25V3.75A1.5 1.5 0 0 0 8.5 2.25h-5A1.5 1.5 0 0 0 2 3.75v5A1.5 1.5 0 0 0 3.5 10.25H5\"\n stroke=\"currentColor\"\n stroke-width=\"1.25\"\n stroke-linecap=\"round\"\n />\n </svg>\n </ng-content>\n }\n </button>\n</div>\n\n<span class=\"fk-copyable-field__sr-only\" role=\"status\" aria-live=\"polite\">\n @if (isCopied()) {\n {{ copiedAnnouncement() }}\n }\n</span>\n", styles: [":host{display:block}.fk-copyable-field__label{display:block;margin-bottom:var(--fk-copyable-field-label-gap, var(--fk-rhythm-1, .25rem));font-size:var(--fk-copyable-field-label-font-size, var(--fk-typography-small-font-size, .8125rem));font-weight:var(--fk-copyable-field-label-font-weight, var(--fk-font-weight-medium, 500));color:var(--fk-copyable-field-label-color, var(--fk-color-muted, #8a98a8))}.fk-copyable-field__row{display:flex;align-items:center;gap:var(--fk-copyable-field-gap, var(--fk-rhythm-2, .5rem));background:var(--fk-copyable-field-bg, var(--fk-color-surface-muted, #f7f9fb));border:1px solid var(--fk-copyable-field-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-copyable-field-radius, var(--fk-radius-md, .5rem))}.fk-copyable-field__value{flex:1;min-width:0;color:var(--fk-copyable-field-value-color, var(--fk-color-text, #1f2d3d));word-break:break-all}.fk-copyable-field__action{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:var(--fk-copyable-field-action-padding, var(--fk-rhythm-1, .25rem));color:var(--fk-copyable-field-action-color, var(--fk-color-muted, #8a98a8));background:transparent;border:none;border-radius:var(--fk-copyable-field-action-radius, var(--fk-radius-sm, .25rem));cursor:pointer;transition:color .15s,background-color .15s}.fk-copyable-field__action:hover{color:var(--fk-copyable-field-action-color-hover, var(--fk-color-text, #1f2d3d));background:var(--fk-copyable-field-action-bg-hover, var(--fk-color-surface-dim, #f1f4f8))}.fk-copyable-field__action:focus-visible{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-copyable-field__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host.fk-copyable-field--sm .fk-copyable-field__row{padding:var(--fk-copyable-field-padding-sm, var(--fk-rhythm-1, .25rem) var(--fk-rhythm-2, .5rem))}:host.fk-copyable-field--sm .fk-copyable-field__value{font-size:var(--fk-copyable-field-font-size-sm, var(--fk-typography-caption-font-size, .75rem))}:host.fk-copyable-field--md .fk-copyable-field__row{padding:var(--fk-copyable-field-padding-md, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem))}:host.fk-copyable-field--md .fk-copyable-field__value{font-size:var(--fk-copyable-field-font-size-md, var(--fk-typography-small-font-size, .8125rem))}:host.fk-copyable-field--lg .fk-copyable-field__row{padding:var(--fk-copyable-field-padding-lg, var(--fk-rhythm-3, .75rem) var(--fk-rhythm-4, 1rem))}:host.fk-copyable-field--lg .fk-copyable-field__value{font-size:var(--fk-copyable-field-font-size-lg, var(--fk-typography-body-font-size, .9375rem))}:host.fk-copyable-field--mono .fk-copyable-field__value{font-family:var(--fk-copyable-field-mono-font-family, var(--fk-font-family-mono, ui-monospace, SFMono-Regular, Menlo, monospace))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
99
99
|
}
|
|
100
100
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CopyableFieldComponent, decorators: [{
|
|
101
101
|
type: Component,
|
|
102
|
-
args: [{ selector: 'fk-copyable-field', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (label()) {\n <span class=\"fk-copyable-field__label\">{{ label() }}</span>\n}\n\n<div class=\"fk-copyable-field__row\">\n <span\n class=\"fk-copyable-field__value\"\n [id]=\"id()
|
|
102
|
+
args: [{ selector: 'fk-copyable-field', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (label()) {\n <span class=\"fk-copyable-field__label\">{{ label() }}</span>\n}\n\n<div class=\"fk-copyable-field__row\">\n <span\n class=\"fk-copyable-field__value\"\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n {{ value() }}\n </span>\n\n <button\n type=\"button\"\n class=\"fk-copyable-field__action\"\n [attr.aria-label]=\"copyAriaLabel()\"\n (click)=\"copy()\"\n >\n @if (isCopied()) {\n <ng-content select=\"[fkCopiedIcon]\">\n <svg\n class=\"fk-copyable-field__icon\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M3 8.5l3 3L13 4.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </ng-content>\n } @else {\n <ng-content select=\"[fkCopyIcon]\">\n <svg\n class=\"fk-copyable-field__icon\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <rect\n x=\"5.25\"\n y=\"5.25\"\n width=\"8.5\"\n height=\"8.5\"\n rx=\"1.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.25\"\n />\n <path\n d=\"M10 5.25V3.75A1.5 1.5 0 0 0 8.5 2.25h-5A1.5 1.5 0 0 0 2 3.75v5A1.5 1.5 0 0 0 3.5 10.25H5\"\n stroke=\"currentColor\"\n stroke-width=\"1.25\"\n stroke-linecap=\"round\"\n />\n </svg>\n </ng-content>\n }\n </button>\n</div>\n\n<span class=\"fk-copyable-field__sr-only\" role=\"status\" aria-live=\"polite\">\n @if (isCopied()) {\n {{ copiedAnnouncement() }}\n }\n</span>\n", styles: [":host{display:block}.fk-copyable-field__label{display:block;margin-bottom:var(--fk-copyable-field-label-gap, var(--fk-rhythm-1, .25rem));font-size:var(--fk-copyable-field-label-font-size, var(--fk-typography-small-font-size, .8125rem));font-weight:var(--fk-copyable-field-label-font-weight, var(--fk-font-weight-medium, 500));color:var(--fk-copyable-field-label-color, var(--fk-color-muted, #8a98a8))}.fk-copyable-field__row{display:flex;align-items:center;gap:var(--fk-copyable-field-gap, var(--fk-rhythm-2, .5rem));background:var(--fk-copyable-field-bg, var(--fk-color-surface-muted, #f7f9fb));border:1px solid var(--fk-copyable-field-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-copyable-field-radius, var(--fk-radius-md, .5rem))}.fk-copyable-field__value{flex:1;min-width:0;color:var(--fk-copyable-field-value-color, var(--fk-color-text, #1f2d3d));word-break:break-all}.fk-copyable-field__action{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:var(--fk-copyable-field-action-padding, var(--fk-rhythm-1, .25rem));color:var(--fk-copyable-field-action-color, var(--fk-color-muted, #8a98a8));background:transparent;border:none;border-radius:var(--fk-copyable-field-action-radius, var(--fk-radius-sm, .25rem));cursor:pointer;transition:color .15s,background-color .15s}.fk-copyable-field__action:hover{color:var(--fk-copyable-field-action-color-hover, var(--fk-color-text, #1f2d3d));background:var(--fk-copyable-field-action-bg-hover, var(--fk-color-surface-dim, #f1f4f8))}.fk-copyable-field__action:focus-visible{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-copyable-field__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host.fk-copyable-field--sm .fk-copyable-field__row{padding:var(--fk-copyable-field-padding-sm, var(--fk-rhythm-1, .25rem) var(--fk-rhythm-2, .5rem))}:host.fk-copyable-field--sm .fk-copyable-field__value{font-size:var(--fk-copyable-field-font-size-sm, var(--fk-typography-caption-font-size, .75rem))}:host.fk-copyable-field--md .fk-copyable-field__row{padding:var(--fk-copyable-field-padding-md, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem))}:host.fk-copyable-field--md .fk-copyable-field__value{font-size:var(--fk-copyable-field-font-size-md, var(--fk-typography-small-font-size, .8125rem))}:host.fk-copyable-field--lg .fk-copyable-field__row{padding:var(--fk-copyable-field-padding-lg, var(--fk-rhythm-3, .75rem) var(--fk-rhythm-4, 1rem))}:host.fk-copyable-field--lg .fk-copyable-field__value{font-size:var(--fk-copyable-field-font-size-lg, var(--fk-typography-body-font-size, .9375rem))}:host.fk-copyable-field--mono .fk-copyable-field__value{font-family:var(--fk-copyable-field-mono-font-family, var(--fk-font-family-mono, ui-monospace, SFMono-Regular, Menlo, monospace))}\n"] }]
|
|
103
103
|
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], mono: [{ type: i0.Input, args: [{ isSignal: true, alias: "mono", required: false }] }], copyAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyAriaLabel", required: false }] }], copiedAnnouncement: [{ type: i0.Input, args: [{ isSignal: true, alias: "copiedAnnouncement", required: false }] }], copiedDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "copiedDuration", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], copied: [{ type: i0.Output, args: ["copied"] }], copyFailed: [{ type: i0.Output, args: ["copyFailed"] }], hostClass: [{
|
|
104
104
|
type: HostBinding,
|
|
105
105
|
args: ['class']
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"frame-kit-ui-ng-ui-copyable-field.mjs","sources":["../../../../packages/ui-ng/ui/copyable-field/copyable-field.component.ts","../../../../packages/ui-ng/ui/copyable-field/copyable-field.component.html","../../../../packages/ui-ng/ui/copyable-field/frame-kit-ui-ng-ui-copyable-field.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n computed,\n DestroyRef,\n HostBinding,\n inject,\n input,\n output,\n signal,\n} from '@angular/core';\n\nimport type { CopyableFieldSize } from './copyable-field.types';\n\n/**\n * Displays a read-only value next to a copy-to-clipboard button.\n *\n * Use for showing secrets (API keys, tokens), IDs, URLs, and any value the\n * user will want to copy rather than re-type. After a successful copy the\n * copy-button icon swaps to a confirmation for `copiedDuration` ms and a\n * screen-reader announcement fires.\n *\n * The copy button ships with inline SVG icons for both states so the\n * component works standalone. Consumers can override either icon by\n * projecting their own element with the `fkCopyIcon` or `fkCopiedIcon`\n * attribute selector — for example an `fk-icon` wired to their own icon\n * registry:\n *\n * ```html\n * <fk-copyable-field [value]=\"apiKey\">\n * <fk-icon fkCopyIcon name=\"clipboard-outline\" size=\"sm\" />\n * <fk-icon fkCopiedIcon name=\"check-outline\" size=\"sm\" />\n * </fk-copyable-field>\n * ```\n */\n@Component({\n selector: 'fk-copyable-field',\n standalone: true,\n imports: [],\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './copyable-field.component.html',\n styleUrl: './copyable-field.component.scss',\n})\nexport class CopyableFieldComponent {\n // ===== INPUTS =====\n /** The string value displayed and written to the clipboard when the user copies. */\n readonly value = input.required<string>();\n /** Optional visible label rendered above the value field. */\n readonly label = input<string | null>(null);\n /** Controls the size variant of the field. */\n readonly size = input<CopyableFieldSize>('md');\n /** When true, the value is rendered in a monospace font. */\n readonly mono = input<boolean>(true);\n /** Accessible label for the copy button read by screen readers. */\n readonly copyAriaLabel = input<string>('Copy to clipboard');\n /** Screen-reader announcement text emitted after a successful copy. */\n readonly copiedAnnouncement = input<string>('Copied to clipboard');\n /** How long in milliseconds the \"copied\" confirmation state is shown. */\n readonly copiedDuration = input<number>(2000);\n\n // ===== BASE PROPS =====\n readonly className = input<string>('');\n readonly id = input<string | null>(null);\n readonly ariaLabel = input<string | null>(null);\n\n // ===== OUTPUTS =====\n /** Fires after a successful clipboard write, emitting the copied value. */\n readonly copied = output<string>();\n /** Fires when the clipboard write fails, emitting the underlying error. */\n readonly copyFailed = output<unknown>();\n\n // ===== STATE =====\n private readonly _isCopied = signal(false);\n private copyTimer: ReturnType<typeof setTimeout> | null = null;\n\n readonly isCopied = this._isCopied.asReadonly();\n\n // ===== COMPUTED =====\n readonly classes = computed(() => {\n return [\n 'fk-copyable-field',\n `fk-copyable-field--${this.size()}`,\n this.mono() ? 'fk-copyable-field--mono' : '',\n this.className(),\n ]\n .filter(Boolean)\n .join(' ');\n });\n\n @HostBinding('class')\n get hostClass() {\n return this.classes();\n }\n\n constructor() {\n const destroyRef = inject(DestroyRef);\n\n destroyRef.onDestroy(() => {\n this.clearCopyTimer();\n });\n }\n\n /** Writes the current value to the clipboard and shows the copied confirmation state. */\n async copy(): Promise<void> {\n try {\n await navigator.clipboard.writeText(this.value());\n } catch (error) {\n this.copyFailed.emit(error);\n\n return;\n }\n\n this._isCopied.set(true);\n this.copied.emit(this.value());\n\n this.clearCopyTimer();\n\n this.copyTimer = setTimeout(() => {\n this._isCopied.set(false);\n this.copyTimer = null;\n }, this.copiedDuration());\n }\n\n private clearCopyTimer(): void {\n if (this.copyTimer) {\n clearTimeout(this.copyTimer);\n this.copyTimer = null;\n }\n }\n}\n","@if (label()) {\n <span class=\"fk-copyable-field__label\">{{ label() }}</span>\n}\n\n<div class=\"fk-copyable-field__row\">\n <span\n class=\"fk-copyable-field__value\"\n [id]=\"id()
|
|
1
|
+
{"version":3,"file":"frame-kit-ui-ng-ui-copyable-field.mjs","sources":["../../../../packages/ui-ng/ui/copyable-field/copyable-field.component.ts","../../../../packages/ui-ng/ui/copyable-field/copyable-field.component.html","../../../../packages/ui-ng/ui/copyable-field/frame-kit-ui-ng-ui-copyable-field.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n computed,\n DestroyRef,\n HostBinding,\n inject,\n input,\n output,\n signal,\n} from '@angular/core';\n\nimport type { CopyableFieldSize } from './copyable-field.types';\n\n/**\n * Displays a read-only value next to a copy-to-clipboard button.\n *\n * Use for showing secrets (API keys, tokens), IDs, URLs, and any value the\n * user will want to copy rather than re-type. After a successful copy the\n * copy-button icon swaps to a confirmation for `copiedDuration` ms and a\n * screen-reader announcement fires.\n *\n * The copy button ships with inline SVG icons for both states so the\n * component works standalone. Consumers can override either icon by\n * projecting their own element with the `fkCopyIcon` or `fkCopiedIcon`\n * attribute selector — for example an `fk-icon` wired to their own icon\n * registry:\n *\n * ```html\n * <fk-copyable-field [value]=\"apiKey\">\n * <fk-icon fkCopyIcon name=\"clipboard-outline\" size=\"sm\" />\n * <fk-icon fkCopiedIcon name=\"check-outline\" size=\"sm\" />\n * </fk-copyable-field>\n * ```\n */\n@Component({\n selector: 'fk-copyable-field',\n standalone: true,\n imports: [],\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './copyable-field.component.html',\n styleUrl: './copyable-field.component.scss',\n})\nexport class CopyableFieldComponent {\n // ===== INPUTS =====\n /** The string value displayed and written to the clipboard when the user copies. */\n readonly value = input.required<string>();\n /** Optional visible label rendered above the value field. */\n readonly label = input<string | null>(null);\n /** Controls the size variant of the field. */\n readonly size = input<CopyableFieldSize>('md');\n /** When true, the value is rendered in a monospace font. */\n readonly mono = input<boolean>(true);\n /** Accessible label for the copy button read by screen readers. */\n readonly copyAriaLabel = input<string>('Copy to clipboard');\n /** Screen-reader announcement text emitted after a successful copy. */\n readonly copiedAnnouncement = input<string>('Copied to clipboard');\n /** How long in milliseconds the \"copied\" confirmation state is shown. */\n readonly copiedDuration = input<number>(2000);\n\n // ===== BASE PROPS =====\n readonly className = input<string>('');\n readonly id = input<string | null>(null);\n readonly ariaLabel = input<string | null>(null);\n\n // ===== OUTPUTS =====\n /** Fires after a successful clipboard write, emitting the copied value. */\n readonly copied = output<string>();\n /** Fires when the clipboard write fails, emitting the underlying error. */\n readonly copyFailed = output<unknown>();\n\n // ===== STATE =====\n private readonly _isCopied = signal(false);\n private copyTimer: ReturnType<typeof setTimeout> | null = null;\n\n readonly isCopied = this._isCopied.asReadonly();\n\n // ===== COMPUTED =====\n readonly classes = computed(() => {\n return [\n 'fk-copyable-field',\n `fk-copyable-field--${this.size()}`,\n this.mono() ? 'fk-copyable-field--mono' : '',\n this.className(),\n ]\n .filter(Boolean)\n .join(' ');\n });\n\n @HostBinding('class')\n get hostClass() {\n return this.classes();\n }\n\n constructor() {\n const destroyRef = inject(DestroyRef);\n\n destroyRef.onDestroy(() => {\n this.clearCopyTimer();\n });\n }\n\n /** Writes the current value to the clipboard and shows the copied confirmation state. */\n async copy(): Promise<void> {\n try {\n await navigator.clipboard.writeText(this.value());\n } catch (error) {\n this.copyFailed.emit(error);\n\n return;\n }\n\n this._isCopied.set(true);\n this.copied.emit(this.value());\n\n this.clearCopyTimer();\n\n this.copyTimer = setTimeout(() => {\n this._isCopied.set(false);\n this.copyTimer = null;\n }, this.copiedDuration());\n }\n\n private clearCopyTimer(): void {\n if (this.copyTimer) {\n clearTimeout(this.copyTimer);\n this.copyTimer = null;\n }\n }\n}\n","@if (label()) {\n <span class=\"fk-copyable-field__label\">{{ label() }}</span>\n}\n\n<div class=\"fk-copyable-field__row\">\n <span\n class=\"fk-copyable-field__value\"\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n {{ value() }}\n </span>\n\n <button\n type=\"button\"\n class=\"fk-copyable-field__action\"\n [attr.aria-label]=\"copyAriaLabel()\"\n (click)=\"copy()\"\n >\n @if (isCopied()) {\n <ng-content select=\"[fkCopiedIcon]\">\n <svg\n class=\"fk-copyable-field__icon\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M3 8.5l3 3L13 4.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </ng-content>\n } @else {\n <ng-content select=\"[fkCopyIcon]\">\n <svg\n class=\"fk-copyable-field__icon\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <rect\n x=\"5.25\"\n y=\"5.25\"\n width=\"8.5\"\n height=\"8.5\"\n rx=\"1.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.25\"\n />\n <path\n d=\"M10 5.25V3.75A1.5 1.5 0 0 0 8.5 2.25h-5A1.5 1.5 0 0 0 2 3.75v5A1.5 1.5 0 0 0 3.5 10.25H5\"\n stroke=\"currentColor\"\n stroke-width=\"1.25\"\n stroke-linecap=\"round\"\n />\n </svg>\n </ng-content>\n }\n </button>\n</div>\n\n<span class=\"fk-copyable-field__sr-only\" role=\"status\" aria-live=\"polite\">\n @if (isCopied()) {\n {{ copiedAnnouncement() }}\n }\n</span>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -93,11 +93,11 @@ class IconListComponent {
|
|
|
93
93
|
return this.classes();
|
|
94
94
|
}
|
|
95
95
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IconListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
96
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: IconListComponent, isStandalone: true, selector: "fk-icon-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, providers: [{ provide: ICON_LIST_PARENT, useExisting: IconListComponent }], ngImport: i0, template: "<div\n class=\"fk-icon-list__list\"\n role=\"list\"\n [id]=\"id()
|
|
96
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: IconListComponent, isStandalone: true, selector: "fk-icon-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, providers: [{ provide: ICON_LIST_PARENT, useExisting: IconListComponent }], ngImport: i0, template: "<div\n class=\"fk-icon-list__list\"\n role=\"list\"\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n>\n @if (items(); as rows) {\n @for (row of rows; track $index) {\n <fk-icon-list-item [icon]=\"row.icon ?? null\">\n {{ row.label }}\n </fk-icon-list-item>\n }\n } @else {\n <ng-content />\n }\n</div>\n", styles: [":host{display:block;margin-top:var(--fk-icon-list-margin-top, var(--fk-rhythm-4, 1rem))}.fk-icon-list__list{display:flex;flex-direction:column;gap:var(--fk-icon-list-row-gap, var(--fk-rhythm-2, .5rem))}\n"], dependencies: [{ kind: "component", type: IconListItemComponent, selector: "fk-icon-list-item", inputs: ["icon", "variant", "size", "className", "id", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
97
97
|
}
|
|
98
98
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IconListComponent, decorators: [{
|
|
99
99
|
type: Component,
|
|
100
|
-
args: [{ selector: 'fk-icon-list', standalone: true, imports: [IconListItemComponent], providers: [{ provide: ICON_LIST_PARENT, useExisting: IconListComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"fk-icon-list__list\"\n role=\"list\"\n [id]=\"id()
|
|
100
|
+
args: [{ selector: 'fk-icon-list', standalone: true, imports: [IconListItemComponent], providers: [{ provide: ICON_LIST_PARENT, useExisting: IconListComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"fk-icon-list__list\"\n role=\"list\"\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n>\n @if (items(); as rows) {\n @for (row of rows; track $index) {\n <fk-icon-list-item [icon]=\"row.icon ?? null\">\n {{ row.label }}\n </fk-icon-list-item>\n }\n } @else {\n <ng-content />\n }\n</div>\n", styles: [":host{display:block;margin-top:var(--fk-icon-list-margin-top, var(--fk-rhythm-4, 1rem))}.fk-icon-list__list{display:flex;flex-direction:column;gap:var(--fk-icon-list-row-gap, var(--fk-rhythm-2, .5rem))}\n"] }]
|
|
101
101
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hostClass: [{
|
|
102
102
|
type: HostBinding,
|
|
103
103
|
args: ['class']
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"frame-kit-ui-ng-ui-icon-list.mjs","sources":["../../../../packages/ui-ng/ui/icon-list/icon-list.token.ts","../../../../packages/ui-ng/ui/icon-list/icon-list-item.component.ts","../../../../packages/ui-ng/ui/icon-list/icon-list-item.component.html","../../../../packages/ui-ng/ui/icon-list/icon-list.component.ts","../../../../packages/ui-ng/ui/icon-list/icon-list.component.html","../../../../packages/ui-ng/ui/icon-list/frame-kit-ui-ng-ui-icon-list.ts"],"sourcesContent":["import { InjectionToken, type Signal } from '@angular/core';\n\nimport type { IconListSize, IconListVariant } from './icon-list.types';\n\n/**\n * Parent contract exposed by `fk-icon-list` to `fk-icon-list-item` children.\n * Lives in its own file so the two components can reference it without the\n * circular ES-module import that a direct `IconListComponent` type import\n * would create (item -> list -> item).\n */\nexport interface IconListParent {\n readonly icon: Signal<string | null>;\n readonly variant: Signal<IconListVariant>;\n readonly size: Signal<IconListSize>;\n}\n\nexport const ICON_LIST_PARENT = new InjectionToken<IconListParent>(\n 'ICON_LIST_PARENT',\n);\n","import {\n ChangeDetectionStrategy,\n Component,\n computed,\n HostBinding,\n inject,\n input,\n} from '@angular/core';\n\nimport { IconComponent } from '@frame-kit/ui-ng/core/icon';\nimport { ICON_LIST_PARENT } from './icon-list.token';\nimport type { IconListSize, IconListVariant } from './icon-list.types';\n\n@Component({\n selector: 'fk-icon-list-item',\n standalone: true,\n imports: [IconComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './icon-list-item.component.html',\n styleUrl: './icon-list-item.component.scss',\n})\nexport class IconListItemComponent {\n // When rendered inside an `fk-icon-list`, we look up the parent via its\n // `ICON_LIST_PARENT` token and treat its inputs as defaults for items that\n // don't override them. Outside a list, the item stands alone with its own\n // defaults. The token indirection is what breaks the circular ES-module\n // import that a direct `IconListComponent` type reference would create.\n private readonly parent = inject(ICON_LIST_PARENT, { optional: true });\n\n // ===== INPUTS =====\n /** Icon name for this item; falls back to the parent list's `icon` when null. */\n readonly icon = input<string | null>(null);\n /** Color variant for this item's icon; falls back to the parent list's `variant` when null. */\n readonly variant = input<IconListVariant | null>(null);\n /** Size for this item; falls back to the parent list's `size` when null. */\n readonly size = input<IconListSize | null>(null);\n\n // ===== BASE PROPS =====\n readonly className = input<string>('');\n readonly id = input<string | null>(null);\n readonly ariaLabel = input<string | null>(null);\n\n // ===== COMPUTED =====\n protected readonly resolvedIcon = computed<string | null>(\n () => this.icon() ?? this.parent?.icon() ?? null,\n );\n\n protected readonly resolvedVariant = computed<IconListVariant>(\n () => this.variant() ?? this.parent?.variant() ?? 'default',\n );\n\n protected readonly resolvedSize = computed<IconListSize>(\n () => this.size() ?? this.parent?.size() ?? 'md',\n );\n\n readonly classes = computed(() => {\n return [\n 'fk-icon-list-item',\n `fk-icon-list-item--${this.resolvedVariant()}`,\n `fk-icon-list-item--${this.resolvedSize()}`,\n this.className(),\n ]\n .filter(Boolean)\n .join(' ');\n });\n\n @HostBinding('class')\n get hostClass() {\n return this.classes();\n }\n\n // Only carry `role=\"listitem\"` when we're actually inside a list container.\n // Outside a list the item is presentational and should not advertise list\n // semantics — screen readers would otherwise announce an orphan listitem.\n @HostBinding('attr.role')\n get hostRole(): string | null {\n return this.parent ? 'listitem' : null;\n }\n\n @HostBinding('attr.id')\n get hostId(): string | null {\n return this.id();\n }\n\n @HostBinding('attr.aria-label')\n get hostAriaLabel(): string | null {\n return this.ariaLabel();\n }\n}\n","@if (resolvedIcon(); as iconName) {\n <fk-icon\n class=\"fk-icon-list-item__icon\"\n [name]=\"iconName\"\n [size]=\"resolvedSize()\"\n />\n}\n\n<span class=\"fk-icon-list-item__label\">\n <ng-content />\n</span>\n","import {\n ChangeDetectionStrategy,\n Component,\n computed,\n HostBinding,\n input,\n} from '@angular/core';\n\nimport { ICON_LIST_PARENT, type IconListParent } from './icon-list.token';\nimport type {\n IconListItem,\n IconListSize,\n IconListVariant,\n} from './icon-list.types';\nimport { IconListItemComponent } from './icon-list-item.component';\n\n@Component({\n selector: 'fk-icon-list',\n standalone: true,\n imports: [IconListItemComponent],\n providers: [{ provide: ICON_LIST_PARENT, useExisting: IconListComponent }],\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './icon-list.component.html',\n styleUrl: './icon-list.component.scss',\n})\nexport class IconListComponent implements IconListParent {\n // ===== INPUTS =====\n /** Optional array of items to render declaratively; when null, projected `fk-icon-list-item` elements are used. */\n readonly items = input<readonly IconListItem[] | null>(null);\n /** Default icon name inherited by all child items that don't specify their own. */\n readonly icon = input<string | null>(null);\n /** Color variant applied to the icon in each list item. */\n readonly variant = input<IconListVariant>('default');\n /** Size applied to the icon and text in each list item. */\n readonly size = input<IconListSize>('md');\n\n // ===== BASE PROPS =====\n readonly className = input<string>('');\n readonly id = input<string | null>(null);\n readonly ariaLabel = input<string | null>(null);\n\n // ===== COMPUTED =====\n readonly classes = computed(() => {\n return ['fk-icon-list', this.className()].filter(Boolean).join(' ');\n });\n\n @HostBinding('class')\n get hostClass() {\n return this.classes();\n }\n}\n","<div\n class=\"fk-icon-list__list\"\n role=\"list\"\n [id]=\"id() ?? undefined\"\n [attr.aria-label]=\"ariaLabel()\"\n>\n @if (items(); as rows) {\n @for (row of rows; track $index) {\n <fk-icon-list-item [icon]=\"row.icon ?? null\">\n {{ row.label }}\n </fk-icon-list-item>\n }\n } @else {\n <ng-content />\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"frame-kit-ui-ng-ui-icon-list.mjs","sources":["../../../../packages/ui-ng/ui/icon-list/icon-list.token.ts","../../../../packages/ui-ng/ui/icon-list/icon-list-item.component.ts","../../../../packages/ui-ng/ui/icon-list/icon-list-item.component.html","../../../../packages/ui-ng/ui/icon-list/icon-list.component.ts","../../../../packages/ui-ng/ui/icon-list/icon-list.component.html","../../../../packages/ui-ng/ui/icon-list/frame-kit-ui-ng-ui-icon-list.ts"],"sourcesContent":["import { InjectionToken, type Signal } from '@angular/core';\n\nimport type { IconListSize, IconListVariant } from './icon-list.types';\n\n/**\n * Parent contract exposed by `fk-icon-list` to `fk-icon-list-item` children.\n * Lives in its own file so the two components can reference it without the\n * circular ES-module import that a direct `IconListComponent` type import\n * would create (item -> list -> item).\n */\nexport interface IconListParent {\n readonly icon: Signal<string | null>;\n readonly variant: Signal<IconListVariant>;\n readonly size: Signal<IconListSize>;\n}\n\nexport const ICON_LIST_PARENT = new InjectionToken<IconListParent>(\n 'ICON_LIST_PARENT',\n);\n","import {\n ChangeDetectionStrategy,\n Component,\n computed,\n HostBinding,\n inject,\n input,\n} from '@angular/core';\n\nimport { IconComponent } from '@frame-kit/ui-ng/core/icon';\nimport { ICON_LIST_PARENT } from './icon-list.token';\nimport type { IconListSize, IconListVariant } from './icon-list.types';\n\n@Component({\n selector: 'fk-icon-list-item',\n standalone: true,\n imports: [IconComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './icon-list-item.component.html',\n styleUrl: './icon-list-item.component.scss',\n})\nexport class IconListItemComponent {\n // When rendered inside an `fk-icon-list`, we look up the parent via its\n // `ICON_LIST_PARENT` token and treat its inputs as defaults for items that\n // don't override them. Outside a list, the item stands alone with its own\n // defaults. The token indirection is what breaks the circular ES-module\n // import that a direct `IconListComponent` type reference would create.\n private readonly parent = inject(ICON_LIST_PARENT, { optional: true });\n\n // ===== INPUTS =====\n /** Icon name for this item; falls back to the parent list's `icon` when null. */\n readonly icon = input<string | null>(null);\n /** Color variant for this item's icon; falls back to the parent list's `variant` when null. */\n readonly variant = input<IconListVariant | null>(null);\n /** Size for this item; falls back to the parent list's `size` when null. */\n readonly size = input<IconListSize | null>(null);\n\n // ===== BASE PROPS =====\n readonly className = input<string>('');\n readonly id = input<string | null>(null);\n readonly ariaLabel = input<string | null>(null);\n\n // ===== COMPUTED =====\n protected readonly resolvedIcon = computed<string | null>(\n () => this.icon() ?? this.parent?.icon() ?? null,\n );\n\n protected readonly resolvedVariant = computed<IconListVariant>(\n () => this.variant() ?? this.parent?.variant() ?? 'default',\n );\n\n protected readonly resolvedSize = computed<IconListSize>(\n () => this.size() ?? this.parent?.size() ?? 'md',\n );\n\n readonly classes = computed(() => {\n return [\n 'fk-icon-list-item',\n `fk-icon-list-item--${this.resolvedVariant()}`,\n `fk-icon-list-item--${this.resolvedSize()}`,\n this.className(),\n ]\n .filter(Boolean)\n .join(' ');\n });\n\n @HostBinding('class')\n get hostClass() {\n return this.classes();\n }\n\n // Only carry `role=\"listitem\"` when we're actually inside a list container.\n // Outside a list the item is presentational and should not advertise list\n // semantics — screen readers would otherwise announce an orphan listitem.\n @HostBinding('attr.role')\n get hostRole(): string | null {\n return this.parent ? 'listitem' : null;\n }\n\n @HostBinding('attr.id')\n get hostId(): string | null {\n return this.id();\n }\n\n @HostBinding('attr.aria-label')\n get hostAriaLabel(): string | null {\n return this.ariaLabel();\n }\n}\n","@if (resolvedIcon(); as iconName) {\n <fk-icon\n class=\"fk-icon-list-item__icon\"\n [name]=\"iconName\"\n [size]=\"resolvedSize()\"\n />\n}\n\n<span class=\"fk-icon-list-item__label\">\n <ng-content />\n</span>\n","import {\n ChangeDetectionStrategy,\n Component,\n computed,\n HostBinding,\n input,\n} from '@angular/core';\n\nimport { ICON_LIST_PARENT, type IconListParent } from './icon-list.token';\nimport type {\n IconListItem,\n IconListSize,\n IconListVariant,\n} from './icon-list.types';\nimport { IconListItemComponent } from './icon-list-item.component';\n\n@Component({\n selector: 'fk-icon-list',\n standalone: true,\n imports: [IconListItemComponent],\n providers: [{ provide: ICON_LIST_PARENT, useExisting: IconListComponent }],\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './icon-list.component.html',\n styleUrl: './icon-list.component.scss',\n})\nexport class IconListComponent implements IconListParent {\n // ===== INPUTS =====\n /** Optional array of items to render declaratively; when null, projected `fk-icon-list-item` elements are used. */\n readonly items = input<readonly IconListItem[] | null>(null);\n /** Default icon name inherited by all child items that don't specify their own. */\n readonly icon = input<string | null>(null);\n /** Color variant applied to the icon in each list item. */\n readonly variant = input<IconListVariant>('default');\n /** Size applied to the icon and text in each list item. */\n readonly size = input<IconListSize>('md');\n\n // ===== BASE PROPS =====\n readonly className = input<string>('');\n readonly id = input<string | null>(null);\n readonly ariaLabel = input<string | null>(null);\n\n // ===== COMPUTED =====\n readonly classes = computed(() => {\n return ['fk-icon-list', this.className()].filter(Boolean).join(' ');\n });\n\n @HostBinding('class')\n get hostClass() {\n return this.classes();\n }\n}\n","<div\n class=\"fk-icon-list__list\"\n role=\"list\"\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n>\n @if (items(); as rows) {\n @for (row of rows; track $index) {\n <fk-icon-list-item [icon]=\"row.icon ?? null\">\n {{ row.label }}\n </fk-icon-list-item>\n }\n } @else {\n <ng-content />\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -85,13 +85,13 @@ class NumberedListComponent {
|
|
|
85
85
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NumberedListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
86
86
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: NumberedListComponent, isStandalone: true, selector: "fk-numbered-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, providers: [
|
|
87
87
|
{ provide: NUMBERED_LIST_PARENT, useExisting: NumberedListComponent },
|
|
88
|
-
], ngImport: i0, template: "<div\n class=\"fk-numbered-list__list\"\n role=\"list\"\n [id]=\"id()
|
|
88
|
+
], ngImport: i0, template: "<div\n class=\"fk-numbered-list__list\"\n role=\"list\"\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n>\n @if (items(); as rows) {\n @for (row of rows; track $index) {\n <fk-numbered-list-item>\n {{ row.label }}\n </fk-numbered-list-item>\n }\n } @else {\n <ng-content />\n }\n</div>\n", styles: [":host{display:block;margin-top:var(--fk-numbered-list-margin-top, var(--fk-rhythm-4, 1rem))}.fk-numbered-list__list{counter-reset:fk-numbered-list-counter;display:flex;flex-direction:column;gap:var(--fk-numbered-list-row-gap, var(--fk-rhythm-3, .75rem))}\n"], dependencies: [{ kind: "component", type: NumberedListItemComponent, selector: "fk-numbered-list-item", inputs: ["size", "className", "id", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
89
89
|
}
|
|
90
90
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NumberedListComponent, decorators: [{
|
|
91
91
|
type: Component,
|
|
92
92
|
args: [{ selector: 'fk-numbered-list', standalone: true, imports: [NumberedListItemComponent], providers: [
|
|
93
93
|
{ provide: NUMBERED_LIST_PARENT, useExisting: NumberedListComponent },
|
|
94
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"fk-numbered-list__list\"\n role=\"list\"\n [id]=\"id()
|
|
94
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"fk-numbered-list__list\"\n role=\"list\"\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n>\n @if (items(); as rows) {\n @for (row of rows; track $index) {\n <fk-numbered-list-item>\n {{ row.label }}\n </fk-numbered-list-item>\n }\n } @else {\n <ng-content />\n }\n</div>\n", styles: [":host{display:block;margin-top:var(--fk-numbered-list-margin-top, var(--fk-rhythm-4, 1rem))}.fk-numbered-list__list{counter-reset:fk-numbered-list-counter;display:flex;flex-direction:column;gap:var(--fk-numbered-list-row-gap, var(--fk-rhythm-3, .75rem))}\n"] }]
|
|
95
95
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hostClass: [{
|
|
96
96
|
type: HostBinding,
|
|
97
97
|
args: ['class']
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"frame-kit-ui-ng-ui-numbered-list.mjs","sources":["../../../../packages/ui-ng/ui/numbered-list/numbered-list.token.ts","../../../../packages/ui-ng/ui/numbered-list/numbered-list-item.component.ts","../../../../packages/ui-ng/ui/numbered-list/numbered-list-item.component.html","../../../../packages/ui-ng/ui/numbered-list/numbered-list.component.ts","../../../../packages/ui-ng/ui/numbered-list/numbered-list.component.html","../../../../packages/ui-ng/ui/numbered-list/frame-kit-ui-ng-ui-numbered-list.ts"],"sourcesContent":["import { InjectionToken, type Signal } from '@angular/core';\n\nimport type { NumberedListSize } from './numbered-list.types';\n\n/**\n * Parent contract exposed by `fk-numbered-list` to `fk-numbered-list-item`\n * children. Lives in its own file so the two components can reference it\n * without the circular ES-module import that a direct\n * `NumberedListComponent` type import would create (item -> list -> item).\n */\nexport interface NumberedListParent {\n readonly size: Signal<NumberedListSize>;\n}\n\nexport const NUMBERED_LIST_PARENT = new InjectionToken<NumberedListParent>(\n 'NUMBERED_LIST_PARENT',\n);\n","import {\n ChangeDetectionStrategy,\n Component,\n computed,\n HostBinding,\n inject,\n input,\n} from '@angular/core';\n\nimport { NUMBERED_LIST_PARENT } from './numbered-list.token';\nimport type { NumberedListSize } from './numbered-list.types';\n\n@Component({\n selector: 'fk-numbered-list-item',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './numbered-list-item.component.html',\n styleUrl: './numbered-list-item.component.scss',\n})\nexport class NumberedListItemComponent {\n // When rendered inside an `fk-numbered-list`, we look up the parent\n // via its `NUMBERED_LIST_PARENT` token and treat its inputs as\n // defaults for items that don't override them. Outside a list, the\n // item stands alone with its own defaults. The token indirection\n // breaks the circular ES-module import that a direct\n // `NumberedListComponent` type reference would create.\n private readonly parent = inject(NUMBERED_LIST_PARENT, { optional: true });\n\n // ===== INPUTS =====\n /** Size for this item; falls back to the parent numbered-list's `size` when null. */\n readonly size = input<NumberedListSize | null>(null);\n\n // ===== BASE PROPS =====\n readonly className = input<string>('');\n readonly id = input<string | null>(null);\n readonly ariaLabel = input<string | null>(null);\n\n // ===== COMPUTED =====\n protected readonly resolvedSize = computed<NumberedListSize>(\n () => this.size() ?? this.parent?.size() ?? 'md',\n );\n\n readonly classes = computed(() => {\n return [\n 'fk-numbered-list-item',\n `fk-numbered-list-item--${this.resolvedSize()}`,\n this.className(),\n ]\n .filter(Boolean)\n .join(' ');\n });\n\n @HostBinding('class')\n get hostClass() {\n return this.classes();\n }\n\n // Only carry `role=\"listitem\"` when we're actually inside a list\n // container. Outside a list the item is presentational and should\n // not advertise list semantics — screen readers would otherwise\n // announce an orphan listitem.\n @HostBinding('attr.role')\n get hostRole(): string | null {\n return this.parent ? 'listitem' : null;\n }\n\n @HostBinding('attr.id')\n get hostId(): string | null {\n return this.id();\n }\n\n @HostBinding('attr.aria-label')\n get hostAriaLabel(): string | null {\n return this.ariaLabel();\n }\n}\n","<span class=\"fk-numbered-list-item__badge\" aria-hidden=\"true\"></span>\n<span class=\"fk-numbered-list-item__label\">\n <ng-content />\n</span>\n","import {\n ChangeDetectionStrategy,\n Component,\n computed,\n HostBinding,\n input,\n} from '@angular/core';\n\nimport {\n NUMBERED_LIST_PARENT,\n type NumberedListParent,\n} from './numbered-list.token';\nimport type { NumberedListItem, NumberedListSize } from './numbered-list.types';\nimport { NumberedListItemComponent } from './numbered-list-item.component';\n\n@Component({\n selector: 'fk-numbered-list',\n standalone: true,\n imports: [NumberedListItemComponent],\n providers: [\n { provide: NUMBERED_LIST_PARENT, useExisting: NumberedListComponent },\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './numbered-list.component.html',\n styleUrl: './numbered-list.component.scss',\n})\nexport class NumberedListComponent implements NumberedListParent {\n // ===== INPUTS =====\n /** Optional array of items to render declaratively; when null, projected `fk-numbered-list-item` elements are used. */\n readonly items = input<readonly NumberedListItem[] | null>(null);\n /** Size applied to every item in the list. */\n readonly size = input<NumberedListSize>('md');\n\n // ===== BASE PROPS =====\n readonly className = input<string>('');\n readonly id = input<string | null>(null);\n readonly ariaLabel = input<string | null>(null);\n\n // ===== COMPUTED =====\n readonly classes = computed(() => {\n return ['fk-numbered-list', this.className()].filter(Boolean).join(' ');\n });\n\n @HostBinding('class')\n get hostClass() {\n return this.classes();\n }\n}\n","<div\n class=\"fk-numbered-list__list\"\n role=\"list\"\n [id]=\"id()
|
|
1
|
+
{"version":3,"file":"frame-kit-ui-ng-ui-numbered-list.mjs","sources":["../../../../packages/ui-ng/ui/numbered-list/numbered-list.token.ts","../../../../packages/ui-ng/ui/numbered-list/numbered-list-item.component.ts","../../../../packages/ui-ng/ui/numbered-list/numbered-list-item.component.html","../../../../packages/ui-ng/ui/numbered-list/numbered-list.component.ts","../../../../packages/ui-ng/ui/numbered-list/numbered-list.component.html","../../../../packages/ui-ng/ui/numbered-list/frame-kit-ui-ng-ui-numbered-list.ts"],"sourcesContent":["import { InjectionToken, type Signal } from '@angular/core';\n\nimport type { NumberedListSize } from './numbered-list.types';\n\n/**\n * Parent contract exposed by `fk-numbered-list` to `fk-numbered-list-item`\n * children. Lives in its own file so the two components can reference it\n * without the circular ES-module import that a direct\n * `NumberedListComponent` type import would create (item -> list -> item).\n */\nexport interface NumberedListParent {\n readonly size: Signal<NumberedListSize>;\n}\n\nexport const NUMBERED_LIST_PARENT = new InjectionToken<NumberedListParent>(\n 'NUMBERED_LIST_PARENT',\n);\n","import {\n ChangeDetectionStrategy,\n Component,\n computed,\n HostBinding,\n inject,\n input,\n} from '@angular/core';\n\nimport { NUMBERED_LIST_PARENT } from './numbered-list.token';\nimport type { NumberedListSize } from './numbered-list.types';\n\n@Component({\n selector: 'fk-numbered-list-item',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './numbered-list-item.component.html',\n styleUrl: './numbered-list-item.component.scss',\n})\nexport class NumberedListItemComponent {\n // When rendered inside an `fk-numbered-list`, we look up the parent\n // via its `NUMBERED_LIST_PARENT` token and treat its inputs as\n // defaults for items that don't override them. Outside a list, the\n // item stands alone with its own defaults. The token indirection\n // breaks the circular ES-module import that a direct\n // `NumberedListComponent` type reference would create.\n private readonly parent = inject(NUMBERED_LIST_PARENT, { optional: true });\n\n // ===== INPUTS =====\n /** Size for this item; falls back to the parent numbered-list's `size` when null. */\n readonly size = input<NumberedListSize | null>(null);\n\n // ===== BASE PROPS =====\n readonly className = input<string>('');\n readonly id = input<string | null>(null);\n readonly ariaLabel = input<string | null>(null);\n\n // ===== COMPUTED =====\n protected readonly resolvedSize = computed<NumberedListSize>(\n () => this.size() ?? this.parent?.size() ?? 'md',\n );\n\n readonly classes = computed(() => {\n return [\n 'fk-numbered-list-item',\n `fk-numbered-list-item--${this.resolvedSize()}`,\n this.className(),\n ]\n .filter(Boolean)\n .join(' ');\n });\n\n @HostBinding('class')\n get hostClass() {\n return this.classes();\n }\n\n // Only carry `role=\"listitem\"` when we're actually inside a list\n // container. Outside a list the item is presentational and should\n // not advertise list semantics — screen readers would otherwise\n // announce an orphan listitem.\n @HostBinding('attr.role')\n get hostRole(): string | null {\n return this.parent ? 'listitem' : null;\n }\n\n @HostBinding('attr.id')\n get hostId(): string | null {\n return this.id();\n }\n\n @HostBinding('attr.aria-label')\n get hostAriaLabel(): string | null {\n return this.ariaLabel();\n }\n}\n","<span class=\"fk-numbered-list-item__badge\" aria-hidden=\"true\"></span>\n<span class=\"fk-numbered-list-item__label\">\n <ng-content />\n</span>\n","import {\n ChangeDetectionStrategy,\n Component,\n computed,\n HostBinding,\n input,\n} from '@angular/core';\n\nimport {\n NUMBERED_LIST_PARENT,\n type NumberedListParent,\n} from './numbered-list.token';\nimport type { NumberedListItem, NumberedListSize } from './numbered-list.types';\nimport { NumberedListItemComponent } from './numbered-list-item.component';\n\n@Component({\n selector: 'fk-numbered-list',\n standalone: true,\n imports: [NumberedListItemComponent],\n providers: [\n { provide: NUMBERED_LIST_PARENT, useExisting: NumberedListComponent },\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './numbered-list.component.html',\n styleUrl: './numbered-list.component.scss',\n})\nexport class NumberedListComponent implements NumberedListParent {\n // ===== INPUTS =====\n /** Optional array of items to render declaratively; when null, projected `fk-numbered-list-item` elements are used. */\n readonly items = input<readonly NumberedListItem[] | null>(null);\n /** Size applied to every item in the list. */\n readonly size = input<NumberedListSize>('md');\n\n // ===== BASE PROPS =====\n readonly className = input<string>('');\n readonly id = input<string | null>(null);\n readonly ariaLabel = input<string | null>(null);\n\n // ===== COMPUTED =====\n readonly classes = computed(() => {\n return ['fk-numbered-list', this.className()].filter(Boolean).join(' ');\n });\n\n @HostBinding('class')\n get hostClass() {\n return this.classes();\n }\n}\n","<div\n class=\"fk-numbered-list__list\"\n role=\"list\"\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n>\n @if (items(); as rows) {\n @for (row of rows; track $index) {\n <fk-numbered-list-item>\n {{ row.label }}\n </fk-numbered-list-item>\n }\n } @else {\n <ng-content />\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|