@frame-kit/ui-ng 0.2.5 → 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-data-table.mjs +45 -22
- package/fesm2022/frame-kit-ui-ng-ui-data-table.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/types/frame-kit-ui-ng-ui-data-table.d.ts +12 -5
- package/ui/data-table/README.md +3 -0
|
@@ -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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"}
|