@raintonic/formaui 0.9.2 → 0.9.3
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/fesm2022/raintonic-formaui-components-alert.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-avatar.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-avatar.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-card.mjs +78 -8
- package/fesm2022/raintonic-formaui-components-card.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-chip.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-chip.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-data-table.mjs +80 -11
- package/fesm2022/raintonic-formaui-components-data-table.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-drawer.mjs +37 -6
- package/fesm2022/raintonic-formaui-components-drawer.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-dual-tier-navigation.mjs +1 -1
- package/fesm2022/raintonic-formaui-components-dual-tier-navigation.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-form-field.mjs +21 -2
- package/fesm2022/raintonic-formaui-components-form-field.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-input.mjs +14 -0
- package/fesm2022/raintonic-formaui-components-input.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-select.mjs +13 -5
- package/fesm2022/raintonic-formaui-components-select.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-side-panel.mjs +40 -6
- package/fesm2022/raintonic-formaui-components-side-panel.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-toggle-group.mjs +16 -5
- package/fesm2022/raintonic-formaui-components-toggle-group.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-toolbar.mjs +10 -4
- package/fesm2022/raintonic-formaui-components-toolbar.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-tooltip.mjs +102 -8
- package/fesm2022/raintonic-formaui-components-tooltip.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-services-dialog.mjs +8 -4
- package/fesm2022/raintonic-formaui-services-dialog.mjs.map +1 -1
- package/fesm2022/raintonic-formaui.mjs +1 -1
- package/fesm2022/raintonic-formaui.mjs.map +1 -1
- package/llms-full.txt +64 -19
- package/package.json +1 -1
- package/styles/generated/_tokens.scss +1 -1
- package/styles/partials/components/_dialog.scss +24 -0
- package/styles/styles.css +16 -1
- package/types/raintonic-formaui-components-card.d.ts +46 -2
- package/types/raintonic-formaui-components-card.d.ts.map +1 -1
- package/types/raintonic-formaui-components-data-table.d.ts +50 -3
- package/types/raintonic-formaui-components-data-table.d.ts.map +1 -1
- package/types/raintonic-formaui-components-drawer.d.ts +20 -2
- package/types/raintonic-formaui-components-drawer.d.ts.map +1 -1
- package/types/raintonic-formaui-components-form-field.d.ts +10 -0
- package/types/raintonic-formaui-components-form-field.d.ts.map +1 -1
- package/types/raintonic-formaui-components-input.d.ts +9 -0
- package/types/raintonic-formaui-components-input.d.ts.map +1 -1
- package/types/raintonic-formaui-components-select.d.ts +8 -1
- package/types/raintonic-formaui-components-select.d.ts.map +1 -1
- package/types/raintonic-formaui-components-side-panel.d.ts +24 -2
- package/types/raintonic-formaui-components-side-panel.d.ts.map +1 -1
- package/types/raintonic-formaui-components-toggle-group.d.ts +1 -1
- package/types/raintonic-formaui-components-toggle-group.d.ts.map +1 -1
- package/types/raintonic-formaui-components-toolbar.d.ts +5 -1
- package/types/raintonic-formaui-components-toolbar.d.ts.map +1 -1
- package/types/raintonic-formaui-components-tooltip.d.ts +55 -4
- package/types/raintonic-formaui-components-tooltip.d.ts.map +1 -1
- package/types/raintonic-formaui-services-dialog.d.ts +12 -1
- package/types/raintonic-formaui-services-dialog.d.ts.map +1 -1
- package/types/raintonic-formaui.d.ts +1 -1
|
@@ -174,7 +174,7 @@ class FuiAlertComponent {
|
|
|
174
174
|
this.closed.emit();
|
|
175
175
|
}
|
|
176
176
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
177
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiAlertComponent, isStandalone: true, selector: "fui-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "class": "computedClasses()", "attr.role": "computedRole()", "attr.aria-live": "computedAriaLive()", "attr.aria-atomic": "\"true\"" } }, ngImport: i0, template: "@if (progress() !== 0) {\r\n <fui-progressbar\r\n [mode]=\"progress() === -1 ? 'indeterminate' : 'determinate'\"\r\n [value]=\"progress() > 0 ? progress() : undefined\"\r\n [color]=\"progressColor()\"\r\n ></fui-progressbar>\r\n}\r\n\r\n<div class=\"fui-alert__container\">\r\n <fui-icon class=\"fui-alert__icon\" weight=\"fill\" [name]=\"computedIcon()\" size=\"md\" />\r\n\r\n <div class=\"fui-alert__content\">\r\n <div class=\"fui-alert__title fui-text-sm fui-font-medium\">{{ title() }}</div>\r\n @if (description()) {\r\n <div class=\"fui-alert__description fui-text-xs\">{{ description() }}</div>\r\n }\r\n <ng-content />\r\n </div>\r\n\r\n @if (closeable()) {\r\n <button type=\"button\" class=\"fui-alert__close\" (click)=\"onClose()\" [attr.aria-label]=\"intl.closeAriaLabel\">\r\n <fui-icon name=\"x\" size=\"sm\" />\r\n </button>\r\n }\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}fui-progressbar{position:absolute;top:0;left:0}:host.fui-alert{--fui-alert-bg: transparent;--fui-alert-color: inherit;--fui-alert-border-color: transparent;--fui-alert-border-radius: var(--fui-radius-sm);--fui-alert-padding: var(--fui-spacing-6);--fui-alert-gap: var(--fui-spacing-6);--fui-alert-close-padding: var(--fui-spacing-2);contain:layout style;position:relative;overflow:hidden;display:flex;font-family:var(--fui-font-sans);background-color:var(--fui-alert-bg);color:var(--fui-alert-color);border:var(--fui-border-width-sm) solid var(--fui-alert-border-color);border-radius:var(--fui-alert-border-radius);padding:var(--fui-alert-padding);transition-property:all;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}:host.fui-alert .fui-alert__container{display:flex;align-items:flex-start;gap:var(--fui-alert-gap);width:100%}:host.fui-alert .fui-alert__content{flex:1;min-width:0;font-size:var(--fui-text-sm)}:host.fui-alert .fui-alert__title{margin:0;font-weight:var(--fui-weight-medium)}:host.fui-alert .fui-alert__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;background:transparent;border:none;padding:var(--fui-spacing-2);margin:-2px -2px 0 0;cursor:pointer;border-radius:var(--fui-radius-sm);transition-property:all;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}:host.fui-alert .fui-alert__close:hover{background-color:#0000001a}:host.fui-alert .fui-alert__close:focus-visible{outline:var(--fui-state-focus-ring-width) solid currentColor;outline-offset:var(--fui-state-focus-ring-offset)}:host.fui-alert .fui-alert__close:active{transform:scale(.95)}:host.fui-alert--primary{--fui-alert-bg: var(--fui-primary-20);--fui-alert-color: var(--fui-primary-70)}:host.fui-alert--primary .fui-alert__icon{color:var(--fui-primary-70)}:host.fui-alert--success{--fui-alert-bg: var(--fui-success-20);--fui-alert-color: var(--fui-success-100)}:host.fui-alert--success .fui-alert__icon{color:var(--fui-success-100)}:host.fui-alert--info{--fui-alert-bg: var(--fui-info-
|
|
177
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiAlertComponent, isStandalone: true, selector: "fui-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "class": "computedClasses()", "attr.role": "computedRole()", "attr.aria-live": "computedAriaLive()", "attr.aria-atomic": "\"true\"" } }, ngImport: i0, template: "@if (progress() !== 0) {\r\n <fui-progressbar\r\n [mode]=\"progress() === -1 ? 'indeterminate' : 'determinate'\"\r\n [value]=\"progress() > 0 ? progress() : undefined\"\r\n [color]=\"progressColor()\"\r\n ></fui-progressbar>\r\n}\r\n\r\n<div class=\"fui-alert__container\">\r\n <fui-icon class=\"fui-alert__icon\" weight=\"fill\" [name]=\"computedIcon()\" size=\"md\" />\r\n\r\n <div class=\"fui-alert__content\">\r\n <div class=\"fui-alert__title fui-text-sm fui-font-medium\">{{ title() }}</div>\r\n @if (description()) {\r\n <div class=\"fui-alert__description fui-text-xs\">{{ description() }}</div>\r\n }\r\n <ng-content />\r\n </div>\r\n\r\n @if (closeable()) {\r\n <button type=\"button\" class=\"fui-alert__close\" (click)=\"onClose()\" [attr.aria-label]=\"intl.closeAriaLabel\">\r\n <fui-icon name=\"x\" size=\"sm\" />\r\n </button>\r\n }\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}fui-progressbar{position:absolute;top:0;left:0}:host.fui-alert{--fui-alert-bg: transparent;--fui-alert-color: inherit;--fui-alert-border-color: transparent;--fui-alert-border-radius: var(--fui-radius-sm);--fui-alert-padding: var(--fui-spacing-6);--fui-alert-gap: var(--fui-spacing-6);--fui-alert-close-padding: var(--fui-spacing-2);contain:layout style;position:relative;overflow:hidden;display:flex;font-family:var(--fui-font-sans);background-color:var(--fui-alert-bg);color:var(--fui-alert-color);border:var(--fui-border-width-sm) solid var(--fui-alert-border-color);border-radius:var(--fui-alert-border-radius);padding:var(--fui-alert-padding);transition-property:all;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}:host.fui-alert .fui-alert__container{display:flex;align-items:flex-start;gap:var(--fui-alert-gap);width:100%}:host.fui-alert .fui-alert__content{flex:1;min-width:0;font-size:var(--fui-text-sm)}:host.fui-alert .fui-alert__title{margin:0;font-weight:var(--fui-weight-medium)}:host.fui-alert .fui-alert__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;background:transparent;border:none;padding:var(--fui-spacing-2);margin:-2px -2px 0 0;cursor:pointer;border-radius:var(--fui-radius-sm);transition-property:all;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}:host.fui-alert .fui-alert__close:hover{background-color:#0000001a}:host.fui-alert .fui-alert__close:focus-visible{outline:var(--fui-state-focus-ring-width) solid currentColor;outline-offset:var(--fui-state-focus-ring-offset)}:host.fui-alert .fui-alert__close:active{transform:scale(.95)}:host.fui-alert--primary{--fui-alert-bg: var(--fui-primary-20);--fui-alert-color: var(--fui-primary-70)}:host.fui-alert--primary .fui-alert__icon{color:var(--fui-primary-70)}:host.fui-alert--success{--fui-alert-bg: var(--fui-success-20);--fui-alert-color: var(--fui-success-100)}:host.fui-alert--success .fui-alert__icon{color:var(--fui-success-100)}:host.fui-alert--info{--fui-alert-bg: var(--fui-info-20);--fui-alert-color: var(--fui-info-100)}:host.fui-alert--info .fui-alert__icon{color:var(--fui-info-100)}:host.fui-alert--warning{--fui-alert-bg: var(--fui-warning-20);--fui-alert-color: var(--fui-warning-100)}:host.fui-alert--warning .fui-alert__icon{color:var(--fui-warning-100)}:host.fui-alert--error{--fui-alert-bg: var(--fui-error-20);--fui-alert-color: var(--fui-error-100)}:host.fui-alert--error .fui-alert__icon{color:var(--fui-error-100)}:host.fui-alert--generic{--fui-alert-bg: var(--fui-neutral-20);--fui-alert-color: var(--fui-text-primary)}:host.fui-alert--generic .fui-alert__icon{color:var(--fui-primary-70)}@media(prefers-reduced-motion:reduce){:host.fui-alert{transition:none}:host.fui-alert .fui-alert__close{transition:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "component", type: FuiProgressbarComponent, selector: "fui-progressbar", inputs: ["mode", "value", "bufferValue", "color", "aria-label", "aria-labelledby"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
178
178
|
}
|
|
179
179
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiAlertComponent, decorators: [{
|
|
180
180
|
type: Component,
|
|
@@ -183,7 +183,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
183
183
|
'[attr.role]': 'computedRole()',
|
|
184
184
|
'[attr.aria-live]': 'computedAriaLive()',
|
|
185
185
|
'[attr.aria-atomic]': '"true"',
|
|
186
|
-
}, template: "@if (progress() !== 0) {\r\n <fui-progressbar\r\n [mode]=\"progress() === -1 ? 'indeterminate' : 'determinate'\"\r\n [value]=\"progress() > 0 ? progress() : undefined\"\r\n [color]=\"progressColor()\"\r\n ></fui-progressbar>\r\n}\r\n\r\n<div class=\"fui-alert__container\">\r\n <fui-icon class=\"fui-alert__icon\" weight=\"fill\" [name]=\"computedIcon()\" size=\"md\" />\r\n\r\n <div class=\"fui-alert__content\">\r\n <div class=\"fui-alert__title fui-text-sm fui-font-medium\">{{ title() }}</div>\r\n @if (description()) {\r\n <div class=\"fui-alert__description fui-text-xs\">{{ description() }}</div>\r\n }\r\n <ng-content />\r\n </div>\r\n\r\n @if (closeable()) {\r\n <button type=\"button\" class=\"fui-alert__close\" (click)=\"onClose()\" [attr.aria-label]=\"intl.closeAriaLabel\">\r\n <fui-icon name=\"x\" size=\"sm\" />\r\n </button>\r\n }\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}fui-progressbar{position:absolute;top:0;left:0}:host.fui-alert{--fui-alert-bg: transparent;--fui-alert-color: inherit;--fui-alert-border-color: transparent;--fui-alert-border-radius: var(--fui-radius-sm);--fui-alert-padding: var(--fui-spacing-6);--fui-alert-gap: var(--fui-spacing-6);--fui-alert-close-padding: var(--fui-spacing-2);contain:layout style;position:relative;overflow:hidden;display:flex;font-family:var(--fui-font-sans);background-color:var(--fui-alert-bg);color:var(--fui-alert-color);border:var(--fui-border-width-sm) solid var(--fui-alert-border-color);border-radius:var(--fui-alert-border-radius);padding:var(--fui-alert-padding);transition-property:all;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}:host.fui-alert .fui-alert__container{display:flex;align-items:flex-start;gap:var(--fui-alert-gap);width:100%}:host.fui-alert .fui-alert__content{flex:1;min-width:0;font-size:var(--fui-text-sm)}:host.fui-alert .fui-alert__title{margin:0;font-weight:var(--fui-weight-medium)}:host.fui-alert .fui-alert__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;background:transparent;border:none;padding:var(--fui-spacing-2);margin:-2px -2px 0 0;cursor:pointer;border-radius:var(--fui-radius-sm);transition-property:all;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}:host.fui-alert .fui-alert__close:hover{background-color:#0000001a}:host.fui-alert .fui-alert__close:focus-visible{outline:var(--fui-state-focus-ring-width) solid currentColor;outline-offset:var(--fui-state-focus-ring-offset)}:host.fui-alert .fui-alert__close:active{transform:scale(.95)}:host.fui-alert--primary{--fui-alert-bg: var(--fui-primary-20);--fui-alert-color: var(--fui-primary-70)}:host.fui-alert--primary .fui-alert__icon{color:var(--fui-primary-70)}:host.fui-alert--success{--fui-alert-bg: var(--fui-success-20);--fui-alert-color: var(--fui-success-100)}:host.fui-alert--success .fui-alert__icon{color:var(--fui-success-100)}:host.fui-alert--info{--fui-alert-bg: var(--fui-info-
|
|
186
|
+
}, template: "@if (progress() !== 0) {\r\n <fui-progressbar\r\n [mode]=\"progress() === -1 ? 'indeterminate' : 'determinate'\"\r\n [value]=\"progress() > 0 ? progress() : undefined\"\r\n [color]=\"progressColor()\"\r\n ></fui-progressbar>\r\n}\r\n\r\n<div class=\"fui-alert__container\">\r\n <fui-icon class=\"fui-alert__icon\" weight=\"fill\" [name]=\"computedIcon()\" size=\"md\" />\r\n\r\n <div class=\"fui-alert__content\">\r\n <div class=\"fui-alert__title fui-text-sm fui-font-medium\">{{ title() }}</div>\r\n @if (description()) {\r\n <div class=\"fui-alert__description fui-text-xs\">{{ description() }}</div>\r\n }\r\n <ng-content />\r\n </div>\r\n\r\n @if (closeable()) {\r\n <button type=\"button\" class=\"fui-alert__close\" (click)=\"onClose()\" [attr.aria-label]=\"intl.closeAriaLabel\">\r\n <fui-icon name=\"x\" size=\"sm\" />\r\n </button>\r\n }\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}fui-progressbar{position:absolute;top:0;left:0}:host.fui-alert{--fui-alert-bg: transparent;--fui-alert-color: inherit;--fui-alert-border-color: transparent;--fui-alert-border-radius: var(--fui-radius-sm);--fui-alert-padding: var(--fui-spacing-6);--fui-alert-gap: var(--fui-spacing-6);--fui-alert-close-padding: var(--fui-spacing-2);contain:layout style;position:relative;overflow:hidden;display:flex;font-family:var(--fui-font-sans);background-color:var(--fui-alert-bg);color:var(--fui-alert-color);border:var(--fui-border-width-sm) solid var(--fui-alert-border-color);border-radius:var(--fui-alert-border-radius);padding:var(--fui-alert-padding);transition-property:all;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}:host.fui-alert .fui-alert__container{display:flex;align-items:flex-start;gap:var(--fui-alert-gap);width:100%}:host.fui-alert .fui-alert__content{flex:1;min-width:0;font-size:var(--fui-text-sm)}:host.fui-alert .fui-alert__title{margin:0;font-weight:var(--fui-weight-medium)}:host.fui-alert .fui-alert__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;background:transparent;border:none;padding:var(--fui-spacing-2);margin:-2px -2px 0 0;cursor:pointer;border-radius:var(--fui-radius-sm);transition-property:all;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}:host.fui-alert .fui-alert__close:hover{background-color:#0000001a}:host.fui-alert .fui-alert__close:focus-visible{outline:var(--fui-state-focus-ring-width) solid currentColor;outline-offset:var(--fui-state-focus-ring-offset)}:host.fui-alert .fui-alert__close:active{transform:scale(.95)}:host.fui-alert--primary{--fui-alert-bg: var(--fui-primary-20);--fui-alert-color: var(--fui-primary-70)}:host.fui-alert--primary .fui-alert__icon{color:var(--fui-primary-70)}:host.fui-alert--success{--fui-alert-bg: var(--fui-success-20);--fui-alert-color: var(--fui-success-100)}:host.fui-alert--success .fui-alert__icon{color:var(--fui-success-100)}:host.fui-alert--info{--fui-alert-bg: var(--fui-info-20);--fui-alert-color: var(--fui-info-100)}:host.fui-alert--info .fui-alert__icon{color:var(--fui-info-100)}:host.fui-alert--warning{--fui-alert-bg: var(--fui-warning-20);--fui-alert-color: var(--fui-warning-100)}:host.fui-alert--warning .fui-alert__icon{color:var(--fui-warning-100)}:host.fui-alert--error{--fui-alert-bg: var(--fui-error-20);--fui-alert-color: var(--fui-error-100)}:host.fui-alert--error .fui-alert__icon{color:var(--fui-error-100)}:host.fui-alert--generic{--fui-alert-bg: var(--fui-neutral-20);--fui-alert-color: var(--fui-text-primary)}:host.fui-alert--generic .fui-alert__icon{color:var(--fui-primary-70)}@media(prefers-reduced-motion:reduce){:host.fui-alert{transition:none}:host.fui-alert .fui-alert__close{transition:none}}\n"] }]
|
|
187
187
|
}], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], closeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeable", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
188
188
|
|
|
189
189
|
/**
|
|
@@ -45,14 +45,14 @@ class FuiAvatarComponent {
|
|
|
45
45
|
fontSize = computed(() => {
|
|
46
46
|
const s = this.size();
|
|
47
47
|
if (typeof s === 'number')
|
|
48
|
-
return s;
|
|
48
|
+
return Math.round(s * 0.4);
|
|
49
49
|
return { xs: 10, sm: 12, md: 14, lg: 16, xl: 20, '2xl': 24 }[s];
|
|
50
50
|
}, ...(ngDevMode ? [{ debugName: "fontSize" }] : /* istanbul ignore next */ []));
|
|
51
51
|
ariaLabel = computed(() => {
|
|
52
52
|
return this.alt() ?? (this.fullName() ? `Avatar for ${this.fullName()}` : 'User avatar');
|
|
53
53
|
}, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
54
54
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
55
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", type: FuiAvatarComponent, isStandalone: true, selector: "fui-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullName: { classPropertyName: "fullName", publicName: "fullName", isSignal: true, isRequired: true, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"fui-avatar\" [style.--fui-avatar-size.px]=\"pixelSize()\" [style.font-size.px]=\"fontSize()\">\r\n <div class=\"fui-avatar__initials\" role=\"img\" [attr.aria-label]=\"ariaLabel()\" [fuiTooltip]=\"fullName()\">\r\n {{ _initials() }}\r\n </div>\r\n\r\n <ng-content select=\"[avatar-badge]\"></ng-content>\r\n</div>\r\n", styles: [":host{display:flex}.fui-avatar{--fui-avatar-size: 40px;--fui-avatar-border-radius: var(--fui-radius-pill);--fui-avatar-border-color: var(--fui-border-default);contain:content;inline-size:var(--fui-avatar-size);block-size:var(--fui-avatar-size);position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--fui-avatar-border-radius);overflow:hidden;flex-shrink:0}.fui-avatar__initials{inline-size:100%;block-size:100%;display:grid;place-items:center;color:var(--fui-text-primary);font-weight:var(--fui-weight-medium);text-transform:uppercase;background-color:var(--fui-primary-muted)}.fui-avatar ::ng-deep [avatar-badge]{position:absolute;inset-inline-end:-2px;inset-block-end:-2px;transform:translate(0)}\n"], dependencies: [{ kind: "directive", type: FuiTooltipDirective, selector: "[fuiTooltip]", inputs: ["fuiTooltip", "fuiTooltipPosition", "fuiTooltipSize", "fuiTooltipTrigger", "fuiTooltipShowDelay", "fuiTooltipHideDelay", "fuiTooltipDisabled", "fuiTooltipMaxWidth", "fuiTooltipOffset", "fuiTooltipArrow", "fuiTooltipShow"], exportAs: ["fuiTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
55
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", type: FuiAvatarComponent, isStandalone: true, selector: "fui-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullName: { classPropertyName: "fullName", publicName: "fullName", isSignal: true, isRequired: true, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"fui-avatar\" [style.--fui-avatar-size.px]=\"pixelSize()\" [style.font-size.px]=\"fontSize()\">\r\n <div class=\"fui-avatar__initials\" role=\"img\" [attr.aria-label]=\"ariaLabel()\" [fuiTooltip]=\"fullName()\">\r\n {{ _initials() }}\r\n </div>\r\n\r\n <ng-content select=\"[avatar-badge]\"></ng-content>\r\n</div>\r\n", styles: [":host{display:flex}.fui-avatar{--fui-avatar-size: 40px;--fui-avatar-border-radius: var(--fui-radius-pill);--fui-avatar-border-color: var(--fui-border-default);contain:content;inline-size:var(--fui-avatar-size);block-size:var(--fui-avatar-size);position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--fui-avatar-border-radius);overflow:hidden;flex-shrink:0}.fui-avatar__initials{inline-size:100%;block-size:100%;display:grid;place-items:center;color:var(--fui-text-primary);font-weight:var(--fui-weight-medium);text-transform:uppercase;background-color:var(--fui-primary-muted)}.fui-avatar ::ng-deep [avatar-badge]{position:absolute;inset-inline-end:-2px;inset-block-end:-2px;transform:translate(0)}\n"], dependencies: [{ kind: "directive", type: FuiTooltipDirective, selector: "[fuiTooltip]", inputs: ["fuiTooltip", "fuiTooltipPosition", "fuiTooltipSize", "fuiTooltipTextAlign", "fuiTooltipTrigger", "fuiTooltipShowDelay", "fuiTooltipHideDelay", "fuiTooltipDisabled", "fuiTooltipMaxWidth", "fuiTooltipOffset", "fuiTooltipArrow", "fuiTooltipShow"], exportAs: ["fuiTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
56
56
|
}
|
|
57
57
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiAvatarComponent, decorators: [{
|
|
58
58
|
type: Component,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"raintonic-formaui-components-avatar.mjs","sources":["../../../lib/components/avatar/avatar.component.ts","../../../lib/components/avatar/avatar.component.html","../../../lib/components/avatar/raintonic-formaui-components-avatar.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, Signal } from '@angular/core';\r\nimport { FuiTooltipDirective } from '@raintonic/formaui/components/tooltip';\r\n\r\nexport type FuiAvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\r\n\r\n/**\r\n * @component FuiAvatarComponent\r\n * @selector fui-avatar\r\n * @description Displays a user avatar with initials-only fallback (no image tag).\r\n * Shows computed initials from fullName with a tooltip on hover.\r\n *\r\n * @input size - Avatar size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' or a numeric pixel value. Default 'md'.\r\n * @input fullName - Required. Full name used to compute initials and tooltip.\r\n * @input initials - Optional override for the computed initials string.\r\n * @input alt - Custom aria-label override. Defaults to \"Avatar for {fullName}\".\r\n *\r\n * @example\r\n * <fui-avatar fullName=\"Jane Doe\" size=\"md\"></fui-avatar>\r\n */\r\n@Component({\r\n selector: 'fui-avatar',\r\n standalone: true,\r\n imports: [FuiTooltipDirective],\r\n templateUrl: './avatar.component.html',\r\n styleUrls: ['./avatar.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class FuiAvatarComponent {\r\n // Inputs (signals)\r\n readonly size = input<FuiAvatarSize | number>('md');\r\n readonly fullName = input.required<string>();\r\n readonly initials = input<string | undefined>();\r\n readonly alt = input<string | null>(null);\r\n\r\n // Derived values\r\n\r\n readonly _initials: Signal<string> = computed(() => {\r\n const override = this.initials();\r\n if (override) return override;\r\n\r\n const parts = this.fullName().split(' ').filter(Boolean);\r\n const name = parts[0];\r\n const surname = parts[1];\r\n if (!name) return '?';\r\n if (!surname) return name.slice(0, 2).toUpperCase();\r\n return (name[0] + surname[0]).toUpperCase();\r\n });\r\n\r\n readonly pixelSize: Signal<number> = computed(() => {\r\n const s = this.size();\r\n if (typeof s === 'number') return s;\r\n return { xs: 24, sm: 32, md: 40, lg: 48, xl: 56, '2xl': 64 }[s];\r\n });\r\n\r\n readonly fontSize: Signal<number> = computed(() => {\r\n const s = this.size();\r\n if (typeof s === 'number') return s;\r\n return { xs: 10, sm: 12, md: 14, lg: 16, xl: 20, '2xl': 24 }[s];\r\n });\r\n\r\n readonly ariaLabel: Signal<string> = computed(() => {\r\n return this.alt() ?? (this.fullName() ? `Avatar for ${this.fullName()}` : 'User avatar');\r\n });\r\n}\r\n","<div class=\"fui-avatar\" [style.--fui-avatar-size.px]=\"pixelSize()\" [style.font-size.px]=\"fontSize()\">\r\n <div class=\"fui-avatar__initials\" role=\"img\" [attr.aria-label]=\"ariaLabel()\" [fuiTooltip]=\"fullName()\">\r\n {{ _initials() }}\r\n </div>\r\n\r\n <ng-content select=\"[avatar-badge]\"></ng-content>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAKA;;;;;;;;;;;;;AAaG;MASU,kBAAkB,CAAA;;AAEpB,IAAA,IAAI,GAAG,KAAK,CAAyB,IAAI,2EAAC;AAC1C,IAAA,QAAQ,GAAG,KAAK,CAAC,QAAQ,8EAAU;IACnC,QAAQ,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,UAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAsB;AACtC,IAAA,GAAG,GAAG,KAAK,CAAgB,IAAI,0EAAC;;AAIhC,IAAA,SAAS,GAAmB,QAAQ,CAAC,MAAK;AACjD,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,EAAE;AAChC,QAAA,IAAI,QAAQ;AAAE,YAAA,OAAO,QAAQ;AAE7B,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;AACxD,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC;AACrB,QAAA,MAAM,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC;AACxB,QAAA,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,GAAG;AACrB,QAAA,IAAI,CAAC,OAAO;YAAE,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE;AACnD,QAAA,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE;AAC7C,IAAA,CAAC,gFAAC;AAEO,IAAA,SAAS,GAAmB,QAAQ,CAAC,MAAK;AACjD,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE;QACrB,IAAI,OAAO,CAAC,KAAK,QAAQ;AAAE,YAAA,OAAO,CAAC;AACnC,QAAA,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;AACjE,IAAA,CAAC,gFAAC;AAEO,IAAA,QAAQ,GAAmB,QAAQ,CAAC,MAAK;AAChD,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE;QACrB,IAAI,OAAO,CAAC,KAAK,QAAQ;
|
|
1
|
+
{"version":3,"file":"raintonic-formaui-components-avatar.mjs","sources":["../../../lib/components/avatar/avatar.component.ts","../../../lib/components/avatar/avatar.component.html","../../../lib/components/avatar/raintonic-formaui-components-avatar.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, Signal } from '@angular/core';\r\nimport { FuiTooltipDirective } from '@raintonic/formaui/components/tooltip';\r\n\r\nexport type FuiAvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\r\n\r\n/**\r\n * @component FuiAvatarComponent\r\n * @selector fui-avatar\r\n * @description Displays a user avatar with initials-only fallback (no image tag).\r\n * Shows computed initials from fullName with a tooltip on hover.\r\n *\r\n * @input size - Avatar size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' or a numeric pixel value. Default 'md'.\r\n * @input fullName - Required. Full name used to compute initials and tooltip.\r\n * @input initials - Optional override for the computed initials string.\r\n * @input alt - Custom aria-label override. Defaults to \"Avatar for {fullName}\".\r\n *\r\n * @example\r\n * <fui-avatar fullName=\"Jane Doe\" size=\"md\"></fui-avatar>\r\n */\r\n@Component({\r\n selector: 'fui-avatar',\r\n standalone: true,\r\n imports: [FuiTooltipDirective],\r\n templateUrl: './avatar.component.html',\r\n styleUrls: ['./avatar.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class FuiAvatarComponent {\r\n // Inputs (signals)\r\n readonly size = input<FuiAvatarSize | number>('md');\r\n readonly fullName = input.required<string>();\r\n readonly initials = input<string | undefined>();\r\n readonly alt = input<string | null>(null);\r\n\r\n // Derived values\r\n\r\n readonly _initials: Signal<string> = computed(() => {\r\n const override = this.initials();\r\n if (override) return override;\r\n\r\n const parts = this.fullName().split(' ').filter(Boolean);\r\n const name = parts[0];\r\n const surname = parts[1];\r\n if (!name) return '?';\r\n if (!surname) return name.slice(0, 2).toUpperCase();\r\n return (name[0] + surname[0]).toUpperCase();\r\n });\r\n\r\n readonly pixelSize: Signal<number> = computed(() => {\r\n const s = this.size();\r\n if (typeof s === 'number') return s;\r\n return { xs: 24, sm: 32, md: 40, lg: 48, xl: 56, '2xl': 64 }[s];\r\n });\r\n\r\n readonly fontSize: Signal<number> = computed(() => {\r\n const s = this.size();\r\n if (typeof s === 'number') return Math.round(s * 0.4);\r\n return { xs: 10, sm: 12, md: 14, lg: 16, xl: 20, '2xl': 24 }[s];\r\n });\r\n\r\n readonly ariaLabel: Signal<string> = computed(() => {\r\n return this.alt() ?? (this.fullName() ? `Avatar for ${this.fullName()}` : 'User avatar');\r\n });\r\n}\r\n","<div class=\"fui-avatar\" [style.--fui-avatar-size.px]=\"pixelSize()\" [style.font-size.px]=\"fontSize()\">\r\n <div class=\"fui-avatar__initials\" role=\"img\" [attr.aria-label]=\"ariaLabel()\" [fuiTooltip]=\"fullName()\">\r\n {{ _initials() }}\r\n </div>\r\n\r\n <ng-content select=\"[avatar-badge]\"></ng-content>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, Component, signal, computed, HostListener, ContentChild, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
|
|
2
|
+
import { input, Component, Directive, signal, computed, HostListener, ContentChild, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* # FuiCardHeader Component
|
|
@@ -85,6 +85,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
85
85
|
}, template: "<ng-content></ng-content>\r\n" }]
|
|
86
86
|
}], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], paddingless: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingless", required: false }] }] } });
|
|
87
87
|
|
|
88
|
+
/**
|
|
89
|
+
* # FuiCardHeader Directive
|
|
90
|
+
*
|
|
91
|
+
* Marker directive for projecting a custom element into the card header region
|
|
92
|
+
* without using the {@link FuiCardHeaderComponent}. Apply it to any element to
|
|
93
|
+
* have `<fui-card>` treat it as header content.
|
|
94
|
+
*
|
|
95
|
+
* ## Usage
|
|
96
|
+
* ```html
|
|
97
|
+
* <fui-card>
|
|
98
|
+
* <div fuiCardHeader>My full-width header</div>
|
|
99
|
+
* <p>Content</p>
|
|
100
|
+
* </fui-card>
|
|
101
|
+
* ```
|
|
102
|
+
*/
|
|
103
|
+
class FuiCardHeaderDirective {
|
|
104
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiCardHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
105
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: FuiCardHeaderDirective, isStandalone: true, selector: "[fuiCardHeader]", host: { classAttribute: "fui-card-header" }, ngImport: i0 });
|
|
106
|
+
}
|
|
107
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiCardHeaderDirective, decorators: [{
|
|
108
|
+
type: Directive,
|
|
109
|
+
args: [{
|
|
110
|
+
selector: '[fuiCardHeader]',
|
|
111
|
+
standalone: true,
|
|
112
|
+
host: {
|
|
113
|
+
class: 'fui-card-header',
|
|
114
|
+
},
|
|
115
|
+
}]
|
|
116
|
+
}] });
|
|
117
|
+
|
|
118
|
+
/**
|
|
119
|
+
* # FuiCardActions Directive
|
|
120
|
+
*
|
|
121
|
+
* Marker directive for projecting a custom element into the card actions region
|
|
122
|
+
* without using the {@link FuiCardActionsComponent}. Apply it to any element to
|
|
123
|
+
* have `<fui-card>` treat it as actions content.
|
|
124
|
+
*
|
|
125
|
+
* ## Usage
|
|
126
|
+
* ```html
|
|
127
|
+
* <fui-card>
|
|
128
|
+
* <p>Content</p>
|
|
129
|
+
* <div fuiCardActions>
|
|
130
|
+
* <button fuiButton>OK</button>
|
|
131
|
+
* </div>
|
|
132
|
+
* </fui-card>
|
|
133
|
+
* ```
|
|
134
|
+
*/
|
|
135
|
+
class FuiCardActionsDirective {
|
|
136
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiCardActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
137
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: FuiCardActionsDirective, isStandalone: true, selector: "[fuiCardActions]", host: { classAttribute: "fui-card-actions" }, ngImport: i0 });
|
|
138
|
+
}
|
|
139
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiCardActionsDirective, decorators: [{
|
|
140
|
+
type: Directive,
|
|
141
|
+
args: [{
|
|
142
|
+
selector: '[fuiCardActions]',
|
|
143
|
+
standalone: true,
|
|
144
|
+
host: {
|
|
145
|
+
class: 'fui-card-actions',
|
|
146
|
+
},
|
|
147
|
+
}]
|
|
148
|
+
}] });
|
|
149
|
+
|
|
88
150
|
/**
|
|
89
151
|
* # FuiCard Component
|
|
90
152
|
*
|
|
@@ -183,6 +245,8 @@ class FuiCardComponent {
|
|
|
183
245
|
// Projected content queries and ARIA label linkage
|
|
184
246
|
headerCmp;
|
|
185
247
|
actionsCmp;
|
|
248
|
+
headerDir;
|
|
249
|
+
actionsDir;
|
|
186
250
|
headerId = '';
|
|
187
251
|
// Computed classes
|
|
188
252
|
computedClasses = computed(() => {
|
|
@@ -221,16 +285,16 @@ class FuiCardComponent {
|
|
|
221
285
|
ngAfterContentInit() {
|
|
222
286
|
this.headerId = this.headerCmp ? this.headerCmp.hostId : '';
|
|
223
287
|
}
|
|
224
|
-
// Check if header content is projected
|
|
288
|
+
// Check if header content is projected (component or attribute directive)
|
|
225
289
|
get hasHeader() {
|
|
226
|
-
return !!this.headerCmp;
|
|
290
|
+
return !!this.headerCmp || !!this.headerDir;
|
|
227
291
|
}
|
|
228
|
-
// Check if actions content is projected
|
|
292
|
+
// Check if actions content is projected (component or attribute directive)
|
|
229
293
|
get hasActions() {
|
|
230
|
-
return !!this.actionsCmp;
|
|
294
|
+
return !!this.actionsCmp || !!this.actionsDir;
|
|
231
295
|
}
|
|
232
296
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
233
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiCardComponent, isStandalone: true, selector: "fui-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "keydown": "onKeyDown($event)", "click": "onClick($event)" }, properties: { "class": "computedClasses()", "attr.role": "clickable() ? \"button\" : \"region\"", "attr.tabindex": "clickable() && !disabled() ? \"0\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-labelledby": "headerId" }, classAttribute: "fui-card" }, queries: [{ propertyName: "headerCmp", first: true, predicate: FuiCardHeaderComponent, descendants: true }, { propertyName: "actionsCmp", first: true, predicate: FuiCardActionsComponent, descendants: true }], ngImport: i0, template: "@if (hasHeader) {\r\n <div class=\"fui-card__header\">\r\n <ng-content select=\"fui-card-header, [rtCardHeader]\"></ng-content>\r\n </div>\r\n}\r\n\r\n<div class=\"fui-card__content\" [class.fui-card__content--no-padding]=\"padding() === 'none'\">\r\n <ng-content></ng-content>\r\n</div>\r\n\r\n@if (hasActions) {\r\n <div class=\"fui-card__actions\">\r\n <ng-content select=\"fui-card-actions, [rtCardActions]\"></ng-content>\r\n </div>\r\n}\r\n", styles: [".fui-text-xs{font-size:var(--fui-text-sm);font-style:normal;font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);letter-spacing:.24px}.fui-text-sm{font-size:var(--fui-text-base);font-style:normal;font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);letter-spacing:.56px}.fui-text-md{font-size:var(--fui-text-md);font-style:normal;font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal)}.fui-text-lg{font-size:var(--fui-text-lg);font-style:normal;font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal)}.fui-text-xl{font-size:var(--fui-text-xl);font-style:normal;font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal)}.fui-display-xs{font-size:var(--fui-text-2xl);font-style:normal;font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-snug);letter-spacing:.48px}.fui-display-sm{font-size:var(--fui-text-3xl);font-style:normal;font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-tight)}.fui-display-md{font-size:var(--fui-text-4xl);font-style:normal;font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-tight)}.fui-display-lg{font-size:var(--fui-text-5xl);font-style:normal;font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-tight)}.fui-display-xl{font-size:var(--fui-text-6xl);font-style:normal;font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-tight);letter-spacing:-1.2px}.fui-display-2xl{font-size:var(--fui-text-7xl);font-style:normal;font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-tight);letter-spacing:-1.44px}.fui-code-01{font-family:var(--fui-font-mono);font-size:var(--fui-text-sm);line-height:var(--fui-leading-loose)}.fui-code-02{font-family:var(--fui-font-mono);font-size:var(--fui-text-base);line-height:var(--fui-leading-relaxed)}.fui-font-light{font-weight:var(--fui-weight-light)}.fui-font-regular{font-weight:var(--fui-weight-regular)}.fui-font-medium{font-weight:var(--fui-weight-medium)}.fui-font-semibold{font-weight:var(--fui-weight-semibold)}.fui-font-bold{font-weight:var(--fui-weight-bold)}@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-card{--fui-card-bg: var(--fui-bg-default);--fui-card-border-color: var(--fui-border-default);--fui-card-header-padding: var(--fui-spacing-7) var(--fui-spacing-9);--fui-card-actions-gap: var(--fui-spacing-4);contain:layout style;display:flex;flex-direction:column;position:relative;border-radius:var(--fui-card-border-radius);background-color:var(--fui-card-bg);box-shadow:var(--fui-shadow-xs);backdrop-filter:blur(8px);overflow:hidden;transition-property:box-shadow,transform,border-color;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-card--elevated{box-shadow:var(--fui-card-shadow);border:none}.fui-card--elevated.fui-card--hovered:not(.fui-card--disabled){box-shadow:var(--fui-card-shadow-hover)}.fui-card--outlined{border:var(--fui-border-width-sm) solid var(--fui-border-default)}.fui-card--outlined.fui-card--hovered:not(.fui-card--disabled){border-color:var(--fui-border-strong)}.fui-card--flat{box-shadow:none;border:var(--fui-border-width-sm) solid transparent}.fui-card--clickable{cursor:pointer;transition:transform var(--fui-duration-fast) var(--fui-ease-in-out),box-shadow var(--fui-duration-fast) var(--fui-ease-in-out)}.fui-card--clickable:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.fui-card--clickable:focus-visible{outline:2px solid var(--fui-primary-10);transition-property:all;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-card--disabled{opacity:var(--fui-state-disabled-opacity);cursor:not-allowed}.fui-card--padding-none .fui-card__content{padding:0}.fui-card--padding-sm .fui-card__content{padding:var(--fui-spacing-6)}.fui-card--padding-md .fui-card__content{padding:var(--fui-spacing-7)}.fui-card--padding-lg .fui-card__content{padding:var(--fui-spacing-9)}.fui-card--padding-xl .fui-card__content{padding:var(--fui-spacing-11)}.fui-card__header{border-bottom:var(--fui-border-width-sm) solid var(--fui-border-default);font-weight:var(--fui-weight-medium)}.fui-card__header:empty{display:none}.fui-card__content{flex:1;padding:var(--fui-card-padding)}.fui-card__content--no-padding{padding:0}.fui-card__content>:first-child{margin-top:0}.fui-card__content>:last-child{margin-bottom:0}.fui-card__actions{padding-bottom:0;display:flex;gap:var(--fui-spacing-4);align-items:center;justify-content:flex-end}.fui-card__actions:empty{display:none}.fui-card__actions--align-start{justify-content:flex-start}.fui-card__actions--align-center{justify-content:center}.fui-card__actions--align-end{justify-content:flex-end}.fui-card-header{padding:var(--fui-spacing-7) var(--fui-spacing-9);display:flex;flex-direction:column;gap:var(--fui-spacing-2)}.fui-card-header__title{color:var(--fui-text-primary);margin:0}.fui-card-header__subtitle{font-size:var(--fui-text-base);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);color:var(--fui-text-secondary);margin:0}.fui-card-header__content:empty{margin-top:0}.fui-card-actions{display:flex;gap:var(--fui-spacing-4);align-items:center}.fui-card-actions--align-start{justify-content:flex-start}.fui-card-actions--align-center{justify-content:center}.fui-card-actions--align-end{justify-content:flex-end}.fui-card-actions--paddingless{padding:0}.fui-card-actions .fui-button+.fui-button{margin-left:var(--fui-spacing-4)}@media(min-width:640px){.fui-card--padding-sm .fui-card__content{padding:var(--fui-spacing-2)}.fui-card--padding-md .fui-card__content{padding:var(--fui-spacing-6)}.fui-card--padding-lg .fui-card__content{padding:var(--fui-spacing-9)}.fui-card__actions{padding:0 var(--fui-spacing-6) var(--fui-spacing-6);gap:var(--fui-spacing-2);flex-wrap:wrap}}.fui-card--horizontal{flex-direction:row}.fui-card--horizontal .fui-card__content{flex:1}.fui-card--horizontal .fui-card__actions{flex-direction:column;padding:var(--fui-spacing-7)}.fui-card__image{width:100%;height:auto;border-radius:var(--fui-card-border-radius) var(--fui-card-border-radius) 0 0}.fui-card__image:only-child{border-radius:var(--fui-card-border-radius)}.fui-card__media{position:relative;overflow:hidden;border-radius:var(--fui-card-border-radius) var(--fui-card-border-radius) 0 0}.fui-card__media img,.fui-card__media video{width:100%;height:auto;display:block}.fui-card__media:last-child{border-radius:0 0 var(--fui-card-border-radius) var(--fui-card-border-radius)}.fui-card__media:only-child{border-radius:var(--fui-card-border-radius)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
297
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiCardComponent, isStandalone: true, selector: "fui-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "keydown": "onKeyDown($event)", "click": "onClick($event)" }, properties: { "class": "computedClasses()", "attr.role": "clickable() ? \"button\" : \"region\"", "attr.tabindex": "clickable() && !disabled() ? \"0\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-labelledby": "headerId" }, classAttribute: "fui-card" }, queries: [{ propertyName: "headerCmp", first: true, predicate: FuiCardHeaderComponent, descendants: true }, { propertyName: "actionsCmp", first: true, predicate: FuiCardActionsComponent, descendants: true }, { propertyName: "headerDir", first: true, predicate: FuiCardHeaderDirective, descendants: true }, { propertyName: "actionsDir", first: true, predicate: FuiCardActionsDirective, descendants: true }], ngImport: i0, template: "@if (hasHeader) {\r\n <div class=\"fui-card__header\">\r\n <ng-content select=\"fui-card-header, [fuiCardHeader]\"></ng-content>\r\n </div>\r\n}\r\n\r\n<div class=\"fui-card__content\" [class.fui-card__content--no-padding]=\"padding() === 'none'\">\r\n <ng-content></ng-content>\r\n</div>\r\n\r\n@if (hasActions) {\r\n <div class=\"fui-card__actions\">\r\n <ng-content select=\"fui-card-actions, [fuiCardActions]\"></ng-content>\r\n </div>\r\n}\r\n", styles: [".fui-text-xs{font-size:var(--fui-text-sm);font-style:normal;font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);letter-spacing:.24px}.fui-text-sm{font-size:var(--fui-text-base);font-style:normal;font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);letter-spacing:.56px}.fui-text-md{font-size:var(--fui-text-md);font-style:normal;font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal)}.fui-text-lg{font-size:var(--fui-text-lg);font-style:normal;font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal)}.fui-text-xl{font-size:var(--fui-text-xl);font-style:normal;font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal)}.fui-display-xs{font-size:var(--fui-text-2xl);font-style:normal;font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-snug);letter-spacing:.48px}.fui-display-sm{font-size:var(--fui-text-3xl);font-style:normal;font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-tight)}.fui-display-md{font-size:var(--fui-text-4xl);font-style:normal;font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-tight)}.fui-display-lg{font-size:var(--fui-text-5xl);font-style:normal;font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-tight)}.fui-display-xl{font-size:var(--fui-text-6xl);font-style:normal;font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-tight);letter-spacing:-1.2px}.fui-display-2xl{font-size:var(--fui-text-7xl);font-style:normal;font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-tight);letter-spacing:-1.44px}.fui-code-01{font-family:var(--fui-font-mono);font-size:var(--fui-text-sm);line-height:var(--fui-leading-loose)}.fui-code-02{font-family:var(--fui-font-mono);font-size:var(--fui-text-base);line-height:var(--fui-leading-relaxed)}.fui-font-light{font-weight:var(--fui-weight-light)}.fui-font-regular{font-weight:var(--fui-weight-regular)}.fui-font-medium{font-weight:var(--fui-weight-medium)}.fui-font-semibold{font-weight:var(--fui-weight-semibold)}.fui-font-bold{font-weight:var(--fui-weight-bold)}@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-card{--fui-card-bg: var(--fui-bg-default);--fui-card-border-color: var(--fui-border-default);--fui-card-actions-gap: var(--fui-spacing-4);contain:layout style;display:flex;flex-direction:column;position:relative;border-radius:var(--fui-card-border-radius);background-color:var(--fui-card-bg);box-shadow:var(--fui-shadow-xs);backdrop-filter:blur(8px);overflow:hidden;transition-property:box-shadow,transform,border-color;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-card--elevated{box-shadow:var(--fui-card-shadow);border:none}.fui-card--elevated.fui-card--hovered:not(.fui-card--disabled){box-shadow:var(--fui-card-shadow-hover)}.fui-card--outlined{border:var(--fui-border-width-sm) solid var(--fui-border-default)}.fui-card--outlined.fui-card--hovered:not(.fui-card--disabled){border-color:var(--fui-border-strong)}.fui-card--flat{box-shadow:none;border:var(--fui-border-width-sm) solid transparent}.fui-card--clickable{cursor:pointer;transition:transform var(--fui-duration-fast) var(--fui-ease-in-out),box-shadow var(--fui-duration-fast) var(--fui-ease-in-out)}.fui-card--clickable:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.fui-card--clickable:focus-visible{outline:2px solid var(--fui-primary-10);transition-property:all;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-card--disabled{opacity:var(--fui-state-disabled-opacity);cursor:not-allowed}.fui-card--padding-none{--fui-card-padding: 0}.fui-card--padding-sm{--fui-card-padding: var(--fui-spacing-6)}.fui-card--padding-md{--fui-card-padding: var(--fui-spacing-7)}.fui-card--padding-lg{--fui-card-padding: var(--fui-spacing-9)}.fui-card--padding-xl{--fui-card-padding: var(--fui-spacing-11)}.fui-card__header{border-bottom:var(--fui-border-width-sm) solid var(--fui-border-default);font-weight:var(--fui-weight-medium)}.fui-card__header:empty{display:none}.fui-card__content{flex:1;padding:var(--fui-card-padding)}.fui-card__content--no-padding{padding:0}.fui-card__content>:first-child{margin-top:0}.fui-card__content>:last-child{margin-bottom:0}.fui-card__actions{padding-bottom:0;display:flex;gap:var(--fui-spacing-4);align-items:center;justify-content:flex-end}.fui-card__actions:empty{display:none}.fui-card__actions--align-start{justify-content:flex-start}.fui-card__actions--align-center{justify-content:center}.fui-card__actions--align-end{justify-content:flex-end}.fui-card-header{padding-block:calc(var(--fui-card-padding) + var(--fui-spacing-2));padding-inline:var(--fui-card-padding);display:flex;flex-direction:column;gap:var(--fui-spacing-2)}.fui-card-header__title{color:var(--fui-text-primary);margin:0}.fui-card-header__subtitle{font-size:var(--fui-text-base);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);color:var(--fui-text-secondary);margin:0}.fui-card-header__content{flex:1;min-width:0;display:flex;justify-content:flex-end}.fui-card-header__content:empty{margin-top:0}.fui-card-actions{display:flex;gap:var(--fui-spacing-4);align-items:center}.fui-card-actions--align-start{justify-content:flex-start}.fui-card-actions--align-center{justify-content:center}.fui-card-actions--align-end{justify-content:flex-end}.fui-card-actions--paddingless{padding:0}.fui-card-actions .fui-button+.fui-button{margin-left:var(--fui-spacing-4)}@media(min-width:640px){.fui-card--padding-sm{--fui-card-padding: var(--fui-spacing-2)}.fui-card--padding-md{--fui-card-padding: var(--fui-spacing-6)}.fui-card--padding-lg{--fui-card-padding: var(--fui-spacing-9)}.fui-card__actions{padding:0 var(--fui-spacing-6) var(--fui-spacing-6);gap:var(--fui-spacing-2);flex-wrap:wrap}}.fui-card--horizontal{flex-direction:row}.fui-card--horizontal .fui-card__content{flex:1}.fui-card--horizontal .fui-card__actions{flex-direction:column;padding:var(--fui-spacing-7)}.fui-card__image{width:100%;height:auto;border-radius:var(--fui-card-border-radius) var(--fui-card-border-radius) 0 0}.fui-card__image:only-child{border-radius:var(--fui-card-border-radius)}.fui-card__media{position:relative;overflow:hidden;border-radius:var(--fui-card-border-radius) var(--fui-card-border-radius) 0 0}.fui-card__media img,.fui-card__media video{width:100%;height:auto;display:block}.fui-card__media:last-child{border-radius:0 0 var(--fui-card-border-radius) var(--fui-card-border-radius)}.fui-card__media:only-child{border-radius:var(--fui-card-border-radius)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
234
298
|
}
|
|
235
299
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiCardComponent, decorators: [{
|
|
236
300
|
type: Component,
|
|
@@ -241,13 +305,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
241
305
|
'[attr.tabindex]': 'clickable() && !disabled() ? "0" : null',
|
|
242
306
|
'[attr.aria-disabled]': 'disabled() ? "true" : null',
|
|
243
307
|
'[attr.aria-labelledby]': 'headerId',
|
|
244
|
-
}, template: "@if (hasHeader) {\r\n <div class=\"fui-card__header\">\r\n <ng-content select=\"fui-card-header, [
|
|
308
|
+
}, template: "@if (hasHeader) {\r\n <div class=\"fui-card__header\">\r\n <ng-content select=\"fui-card-header, [fuiCardHeader]\"></ng-content>\r\n </div>\r\n}\r\n\r\n<div class=\"fui-card__content\" [class.fui-card__content--no-padding]=\"padding() === 'none'\">\r\n <ng-content></ng-content>\r\n</div>\r\n\r\n@if (hasActions) {\r\n <div class=\"fui-card__actions\">\r\n <ng-content select=\"fui-card-actions, [fuiCardActions]\"></ng-content>\r\n </div>\r\n}\r\n", styles: [".fui-text-xs{font-size:var(--fui-text-sm);font-style:normal;font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);letter-spacing:.24px}.fui-text-sm{font-size:var(--fui-text-base);font-style:normal;font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);letter-spacing:.56px}.fui-text-md{font-size:var(--fui-text-md);font-style:normal;font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal)}.fui-text-lg{font-size:var(--fui-text-lg);font-style:normal;font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal)}.fui-text-xl{font-size:var(--fui-text-xl);font-style:normal;font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal)}.fui-display-xs{font-size:var(--fui-text-2xl);font-style:normal;font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-snug);letter-spacing:.48px}.fui-display-sm{font-size:var(--fui-text-3xl);font-style:normal;font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-tight)}.fui-display-md{font-size:var(--fui-text-4xl);font-style:normal;font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-tight)}.fui-display-lg{font-size:var(--fui-text-5xl);font-style:normal;font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-tight)}.fui-display-xl{font-size:var(--fui-text-6xl);font-style:normal;font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-tight);letter-spacing:-1.2px}.fui-display-2xl{font-size:var(--fui-text-7xl);font-style:normal;font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-tight);letter-spacing:-1.44px}.fui-code-01{font-family:var(--fui-font-mono);font-size:var(--fui-text-sm);line-height:var(--fui-leading-loose)}.fui-code-02{font-family:var(--fui-font-mono);font-size:var(--fui-text-base);line-height:var(--fui-leading-relaxed)}.fui-font-light{font-weight:var(--fui-weight-light)}.fui-font-regular{font-weight:var(--fui-weight-regular)}.fui-font-medium{font-weight:var(--fui-weight-medium)}.fui-font-semibold{font-weight:var(--fui-weight-semibold)}.fui-font-bold{font-weight:var(--fui-weight-bold)}@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-card{--fui-card-bg: var(--fui-bg-default);--fui-card-border-color: var(--fui-border-default);--fui-card-actions-gap: var(--fui-spacing-4);contain:layout style;display:flex;flex-direction:column;position:relative;border-radius:var(--fui-card-border-radius);background-color:var(--fui-card-bg);box-shadow:var(--fui-shadow-xs);backdrop-filter:blur(8px);overflow:hidden;transition-property:box-shadow,transform,border-color;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-card--elevated{box-shadow:var(--fui-card-shadow);border:none}.fui-card--elevated.fui-card--hovered:not(.fui-card--disabled){box-shadow:var(--fui-card-shadow-hover)}.fui-card--outlined{border:var(--fui-border-width-sm) solid var(--fui-border-default)}.fui-card--outlined.fui-card--hovered:not(.fui-card--disabled){border-color:var(--fui-border-strong)}.fui-card--flat{box-shadow:none;border:var(--fui-border-width-sm) solid transparent}.fui-card--clickable{cursor:pointer;transition:transform var(--fui-duration-fast) var(--fui-ease-in-out),box-shadow var(--fui-duration-fast) var(--fui-ease-in-out)}.fui-card--clickable:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.fui-card--clickable:focus-visible{outline:2px solid var(--fui-primary-10);transition-property:all;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-card--disabled{opacity:var(--fui-state-disabled-opacity);cursor:not-allowed}.fui-card--padding-none{--fui-card-padding: 0}.fui-card--padding-sm{--fui-card-padding: var(--fui-spacing-6)}.fui-card--padding-md{--fui-card-padding: var(--fui-spacing-7)}.fui-card--padding-lg{--fui-card-padding: var(--fui-spacing-9)}.fui-card--padding-xl{--fui-card-padding: var(--fui-spacing-11)}.fui-card__header{border-bottom:var(--fui-border-width-sm) solid var(--fui-border-default);font-weight:var(--fui-weight-medium)}.fui-card__header:empty{display:none}.fui-card__content{flex:1;padding:var(--fui-card-padding)}.fui-card__content--no-padding{padding:0}.fui-card__content>:first-child{margin-top:0}.fui-card__content>:last-child{margin-bottom:0}.fui-card__actions{padding-bottom:0;display:flex;gap:var(--fui-spacing-4);align-items:center;justify-content:flex-end}.fui-card__actions:empty{display:none}.fui-card__actions--align-start{justify-content:flex-start}.fui-card__actions--align-center{justify-content:center}.fui-card__actions--align-end{justify-content:flex-end}.fui-card-header{padding-block:calc(var(--fui-card-padding) + var(--fui-spacing-2));padding-inline:var(--fui-card-padding);display:flex;flex-direction:column;gap:var(--fui-spacing-2)}.fui-card-header__title{color:var(--fui-text-primary);margin:0}.fui-card-header__subtitle{font-size:var(--fui-text-base);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);color:var(--fui-text-secondary);margin:0}.fui-card-header__content{flex:1;min-width:0;display:flex;justify-content:flex-end}.fui-card-header__content:empty{margin-top:0}.fui-card-actions{display:flex;gap:var(--fui-spacing-4);align-items:center}.fui-card-actions--align-start{justify-content:flex-start}.fui-card-actions--align-center{justify-content:center}.fui-card-actions--align-end{justify-content:flex-end}.fui-card-actions--paddingless{padding:0}.fui-card-actions .fui-button+.fui-button{margin-left:var(--fui-spacing-4)}@media(min-width:640px){.fui-card--padding-sm{--fui-card-padding: var(--fui-spacing-2)}.fui-card--padding-md{--fui-card-padding: var(--fui-spacing-6)}.fui-card--padding-lg{--fui-card-padding: var(--fui-spacing-9)}.fui-card__actions{padding:0 var(--fui-spacing-6) var(--fui-spacing-6);gap:var(--fui-spacing-2);flex-wrap:wrap}}.fui-card--horizontal{flex-direction:row}.fui-card--horizontal .fui-card__content{flex:1}.fui-card--horizontal .fui-card__actions{flex-direction:column;padding:var(--fui-spacing-7)}.fui-card__image{width:100%;height:auto;border-radius:var(--fui-card-border-radius) var(--fui-card-border-radius) 0 0}.fui-card__image:only-child{border-radius:var(--fui-card-border-radius)}.fui-card__media{position:relative;overflow:hidden;border-radius:var(--fui-card-border-radius) var(--fui-card-border-radius) 0 0}.fui-card__media img,.fui-card__media video{width:100%;height:auto;display:block}.fui-card__media:last-child{border-radius:0 0 var(--fui-card-border-radius) var(--fui-card-border-radius)}.fui-card__media:only-child{border-radius:var(--fui-card-border-radius)}\n"] }]
|
|
245
309
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], headerCmp: [{
|
|
246
310
|
type: ContentChild,
|
|
247
311
|
args: [FuiCardHeaderComponent]
|
|
248
312
|
}], actionsCmp: [{
|
|
249
313
|
type: ContentChild,
|
|
250
314
|
args: [FuiCardActionsComponent]
|
|
315
|
+
}], headerDir: [{
|
|
316
|
+
type: ContentChild,
|
|
317
|
+
args: [FuiCardHeaderDirective]
|
|
318
|
+
}], actionsDir: [{
|
|
319
|
+
type: ContentChild,
|
|
320
|
+
args: [FuiCardActionsDirective]
|
|
251
321
|
}], onMouseEnter: [{
|
|
252
322
|
type: HostListener,
|
|
253
323
|
args: ['mouseenter']
|
|
@@ -266,5 +336,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
266
336
|
* Generated bundle index. Do not edit.
|
|
267
337
|
*/
|
|
268
338
|
|
|
269
|
-
export { FuiCardActionsComponent, FuiCardComponent, FuiCardHeaderComponent };
|
|
339
|
+
export { FuiCardActionsComponent, FuiCardActionsDirective, FuiCardComponent, FuiCardHeaderComponent, FuiCardHeaderDirective };
|
|
270
340
|
//# sourceMappingURL=raintonic-formaui-components-card.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"raintonic-formaui-components-card.mjs","sources":["../../../lib/components/card/card-header.component.ts","../../../lib/components/card/card-header.component.html","../../../lib/components/card/card-actions.component.ts","../../../lib/components/card/card-actions.component.html","../../../lib/components/card/card.component.ts","../../../lib/components/card/card.component.html","../../../lib/components/card/raintonic-formaui-components-card.ts"],"sourcesContent":["import { Component, input, InputSignal } from '@angular/core';\r\n\r\n/**\r\n * # FuiCardHeader Component\r\n *\r\n * Header section for cards with optional title, subtitle, and additional content.\r\n *\r\n * ## Usage\r\n * ```html\r\n * <fui-card-header title=\"Card Title\" subtitle=\"Optional subtitle\">\r\n * <button fuiButton variant=\"tertiary\">\r\n * <fui-icon name=\"dots-three\"></fui-icon>\r\n * </button>\r\n * </fui-card-header>\r\n * ```\r\n */\r\n@Component({\r\n selector: 'fui-card-header',\r\n standalone: true,\r\n imports: [],\r\n templateUrl: './card-header.component.html',\r\n host: {\r\n class: 'fui-card-header',\r\n },\r\n})\r\nexport class FuiCardHeaderComponent {\r\n /**\r\n * Unique id for linking with aria-labelledby from the card\r\n */\r\n readonly hostId = `fui-card-header-${Math.random().toString(36).slice(2)}`;\r\n\r\n /**\r\n * Main title text for the card header\r\n */\r\n readonly title: InputSignal<string | undefined> = input<string>();\r\n\r\n /**\r\n * Optional subtitle text for the card header\r\n */\r\n readonly subtitle: InputSignal<string | undefined> = input<string>();\r\n}\r\n","<div class=\"fui-flex fui-justify-between\">\r\n <div>\r\n @if (title()) {\r\n <div class=\"fui-card-header__title\" [attr.id]=\"hostId\">\r\n {{ title() }}\r\n </div>\r\n }\r\n @if (subtitle()) {\r\n <div class=\"fui-card-header__subtitle\">\r\n {{ subtitle() }}\r\n </div>\r\n }\r\n </div>\r\n<div class=\"fui-card-header__content\">\r\n <ng-content></ng-content>\r\n</div>\r\n</div>\r\n","import { Component, input, InputSignal } from '@angular/core';\r\n\r\n/**\r\n * # FuiCardActions Component\r\n *\r\n * Actions section for cards, typically containing buttons or other interactive elements.\r\n *\r\n * ## Usage\r\n * ```html\r\n * <fui-card-actions align=\"end\">\r\n * <button fuiButton variant=\"tertiary\">Cancel</button>\r\n * <button fuiButton variant=\"primary\" color=\"primary\">Save</button>\r\n * </fui-card-actions>\r\n * ```\r\n *\r\n * ### Paddingless Actions\r\n * ```html\r\n * <fui-card-actions align=\"start\" paddingless=\"true\">\r\n * <button fuiButton variant=\"tertiary\">\r\n * <fui-icon name=\"heart\"></fui-icon>\r\n * </button>\r\n * </fui-card-actions>\r\n * ```\r\n */\r\n@Component({\r\n selector: 'fui-card-actions',\r\n standalone: true,\r\n templateUrl: './card-actions.component.html',\r\n host: {\r\n class: 'fui-card-actions',\r\n '[class.fui-card-actions--align-start]': 'align() === \"start\"',\r\n '[class.fui-card-actions--align-center]': 'align() === \"center\"',\r\n '[class.fui-card-actions--align-end]': 'align() === \"end\"',\r\n '[class.fui-card-actions--paddingless]': 'paddingless()',\r\n },\r\n})\r\nexport class FuiCardActionsComponent {\r\n /**\r\n * Alignment of actions within the container\r\n * @default 'end'\r\n */\r\n readonly align: InputSignal<'start' | 'center' | 'end'> = input<'start' | 'center' | 'end'>('end');\r\n\r\n /**\r\n * Whether to remove padding from the actions container\r\n * @default false\r\n */\r\n readonly paddingless: InputSignal<boolean> = input(false);\r\n}\r\n","<ng-content></ng-content>\r\n","import {\r\n AfterContentInit,\r\n ChangeDetectionStrategy,\r\n Component,\r\n computed,\r\n ContentChild,\r\n HostListener,\r\n input,\r\n InputSignal,\r\n Signal,\r\n signal,\r\n ViewEncapsulation,\r\n WritableSignal,\r\n} from '@angular/core';\r\n\r\nimport { FuiCardHeaderComponent } from './card-header.component';\r\nimport { FuiCardActionsComponent } from './card-actions.component';\r\n\r\n/**\r\n * Available card variants following Carbon Design System patterns\r\n */\r\nexport type FuiCardVariant = 'elevated' | 'outlined' | 'flat';\r\n\r\n/**\r\n * Available padding options for card content\r\n */\r\nexport type FuiCardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';\r\n\r\n/**\r\n * # FuiCard Component\r\n *\r\n * A flexible container component following Carbon Design System patterns.\r\n * Provides a structured layout with optional header, content, and actions sections.\r\n *\r\n * ## Features\r\n * - Multiple variants: elevated, outlined, flat\r\n * - Configurable padding: none, sm, md, lg, xl\r\n * - Structured content areas: header, content, actions\r\n * - Clickable state support with hover animations\r\n * - Disabled state support\r\n * - Full accessibility support\r\n * - Smooth motion transitions\r\n *\r\n * ## Usage\r\n *\r\n * ### Basic Card\r\n * ```html\r\n * <fui-card>\r\n * <p>Card content goes here</p>\r\n * </fui-card>\r\n * ```\r\n *\r\n * ### Card with Header and Actions\r\n * ```html\r\n * <fui-card variant=\"outlined\">\r\n * <fui-card-header title=\"Card Title\" subtitle=\"Optional subtitle\">\r\n * <button fuiButton variant=\"tertiary\" size=\"sm\" [iconOnly]=\"true\">\r\n * <fui-icon name=\"overflow-menu-vertical\"></fui-icon>\r\n * </button>\r\n * </fui-card-header>\r\n *\r\n * <p>Main card content</p>\r\n *\r\n * <fui-card-actions align=\"end\">\r\n * <button fuiButton variant=\"secondary\">Cancel</button>\r\n * <button fuiButton variant=\"primary\">Save</button>\r\n * </fui-card-actions>\r\n * </fui-card>\r\n * ```\r\n *\r\n * ### Clickable Card\r\n * ```html\r\n * <fui-card [clickable]=\"true\" (click)=\"handleCardClick()\">\r\n * <p>This entire card is clickable</p>\r\n * </fui-card>\r\n * ```\r\n *\r\n * @example\r\n * ```typescript\r\n * import { FuiCardComponent, FuiCardHeaderComponent, FuiCardActionsComponent } from '@raintonic/formaui/components/card';\r\n *\r\n * @Component({\r\n * standalone: true,\r\n * imports: [FuiCardComponent, FuiCardHeaderComponent, FuiCardActionsComponent],\r\n * template: `\r\n * <fui-card variant=\"elevated\" padding=\"lg\">\r\n * <fui-card-header title=\"User Profile\"></fui-card-header>\r\n * <div class=\"user-info\">\r\n * <p>User details here...</p>\r\n * </div>\r\n * <fui-card-actions>\r\n * <button fuiButton>Edit</button>\r\n * </fui-card-actions>\r\n * </fui-card>\r\n * `\r\n * })\r\n * export class UserCardComponent {}\r\n * ```\r\n */\r\n@Component({\r\n selector: 'fui-card',\r\n standalone: true,\r\n imports: [],\r\n templateUrl: './card.component.html',\r\n styleUrls: ['./card.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-card',\r\n '[class]': 'computedClasses()',\r\n '[attr.role]': 'clickable() ? \"button\" : \"region\"',\r\n '[attr.tabindex]': 'clickable() && !disabled() ? \"0\" : null',\r\n '[attr.aria-disabled]': 'disabled() ? \"true\" : null',\r\n '[attr.aria-labelledby]': 'headerId',\r\n },\r\n})\r\nexport class FuiCardComponent implements AfterContentInit {\r\n /**\r\n * Card variant that determines the visual style\r\n * @default 'outlined'\r\n */\r\n readonly variant: InputSignal<FuiCardVariant> = input<FuiCardVariant>('outlined');\r\n\r\n /**\r\n * Padding applied to card content\r\n * @default 'lg'\r\n */\r\n readonly padding: InputSignal<FuiCardPadding> = input<FuiCardPadding>('lg');\r\n\r\n /**\r\n * Whether the card is clickable (adds hover effects and cursor pointer)\r\n * @default false\r\n */\r\n readonly clickable: InputSignal<boolean> = input(false);\r\n\r\n /**\r\n * Whether the card is disabled\r\n * @default false\r\n */\r\n readonly disabled: InputSignal<boolean> = input(false);\r\n\r\n // Animation state\r\n readonly hovered: WritableSignal<boolean> = signal(false);\r\n readonly liftState: Signal<'idle' | 'lifted'> = computed(() =>\r\n this.clickable() && this.hovered() && !this.disabled() ? 'lifted' : 'idle',\r\n );\r\n\r\n // Projected content queries and ARIA label linkage\r\n @ContentChild(FuiCardHeaderComponent) headerCmp?: FuiCardHeaderComponent;\r\n @ContentChild(FuiCardActionsComponent) actionsCmp?: FuiCardActionsComponent;\r\n\r\n headerId = '';\r\n\r\n // Computed classes\r\n readonly computedClasses: Signal<string> = computed(() => {\r\n const classes: string[] = [`fui-card--${this.variant()}`, `fui-card--padding-${this.padding()}`];\r\n\r\n if (this.clickable()) {\r\n classes.push('fui-card--clickable');\r\n }\r\n\r\n if (this.disabled()) {\r\n classes.push('fui-card--disabled');\r\n }\r\n\r\n if (this.hovered()) {\r\n classes.push('fui-card--hovered');\r\n }\r\n\r\n return classes.join(' ');\r\n });\r\n\r\n @HostListener('mouseenter')\r\n onMouseEnter(): void {\r\n if (this.clickable() && !this.disabled()) {\r\n this.hovered.set(true);\r\n }\r\n }\r\n\r\n @HostListener('mouseleave')\r\n onMouseLeave(): void {\r\n this.hovered.set(false);\r\n }\r\n\r\n @HostListener('keydown', ['$event'])\r\n onKeyDown(event: KeyboardEvent): void {\r\n if (this.clickable() && !this.disabled() && (event.key === 'Enter' || event.key === ' ')) {\r\n event.preventDefault();\r\n (event.target as HTMLElement).click();\r\n }\r\n }\r\n\r\n @HostListener('click', ['$event'])\r\n onClick(event: MouseEvent): void {\r\n if (this.disabled()) {\r\n event.stopImmediatePropagation();\r\n event.preventDefault();\r\n }\r\n }\r\n\r\n ngAfterContentInit(): void {\r\n this.headerId = this.headerCmp ? this.headerCmp.hostId : '';\r\n }\r\n\r\n // Check if header content is projected\r\n get hasHeader(): boolean {\r\n return !!this.headerCmp;\r\n }\r\n\r\n // Check if actions content is projected\r\n get hasActions(): boolean {\r\n return !!this.actionsCmp;\r\n }\r\n}\r\n","@if (hasHeader) {\r\n <div class=\"fui-card__header\">\r\n <ng-content select=\"fui-card-header, [rtCardHeader]\"></ng-content>\r\n </div>\r\n}\r\n\r\n<div class=\"fui-card__content\" [class.fui-card__content--no-padding]=\"padding() === 'none'\">\r\n <ng-content></ng-content>\r\n</div>\r\n\r\n@if (hasActions) {\r\n <div class=\"fui-card__actions\">\r\n <ng-content select=\"fui-card-actions, [rtCardActions]\"></ng-content>\r\n </div>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"raintonic-formaui-components-card.mjs","sources":["../../../lib/components/card/card-header.component.ts","../../../lib/components/card/card-header.component.html","../../../lib/components/card/card-actions.component.ts","../../../lib/components/card/card-actions.component.html","../../../lib/components/card/card-header.directive.ts","../../../lib/components/card/card-actions.directive.ts","../../../lib/components/card/card.component.ts","../../../lib/components/card/card.component.html","../../../lib/components/card/raintonic-formaui-components-card.ts"],"sourcesContent":["import { Component, input, InputSignal } from '@angular/core';\r\n\r\n/**\r\n * # FuiCardHeader Component\r\n *\r\n * Header section for cards with optional title, subtitle, and additional content.\r\n *\r\n * ## Usage\r\n * ```html\r\n * <fui-card-header title=\"Card Title\" subtitle=\"Optional subtitle\">\r\n * <button fuiButton variant=\"tertiary\">\r\n * <fui-icon name=\"dots-three\"></fui-icon>\r\n * </button>\r\n * </fui-card-header>\r\n * ```\r\n */\r\n@Component({\r\n selector: 'fui-card-header',\r\n standalone: true,\r\n imports: [],\r\n templateUrl: './card-header.component.html',\r\n host: {\r\n class: 'fui-card-header',\r\n },\r\n})\r\nexport class FuiCardHeaderComponent {\r\n /**\r\n * Unique id for linking with aria-labelledby from the card\r\n */\r\n readonly hostId = `fui-card-header-${Math.random().toString(36).slice(2)}`;\r\n\r\n /**\r\n * Main title text for the card header\r\n */\r\n readonly title: InputSignal<string | undefined> = input<string>();\r\n\r\n /**\r\n * Optional subtitle text for the card header\r\n */\r\n readonly subtitle: InputSignal<string | undefined> = input<string>();\r\n}\r\n","<div class=\"fui-flex fui-justify-between\">\r\n <div>\r\n @if (title()) {\r\n <div class=\"fui-card-header__title\" [attr.id]=\"hostId\">\r\n {{ title() }}\r\n </div>\r\n }\r\n @if (subtitle()) {\r\n <div class=\"fui-card-header__subtitle\">\r\n {{ subtitle() }}\r\n </div>\r\n }\r\n </div>\r\n<div class=\"fui-card-header__content\">\r\n <ng-content></ng-content>\r\n</div>\r\n</div>\r\n","import { Component, input, InputSignal } from '@angular/core';\r\n\r\n/**\r\n * # FuiCardActions Component\r\n *\r\n * Actions section for cards, typically containing buttons or other interactive elements.\r\n *\r\n * ## Usage\r\n * ```html\r\n * <fui-card-actions align=\"end\">\r\n * <button fuiButton variant=\"tertiary\">Cancel</button>\r\n * <button fuiButton variant=\"primary\" color=\"primary\">Save</button>\r\n * </fui-card-actions>\r\n * ```\r\n *\r\n * ### Paddingless Actions\r\n * ```html\r\n * <fui-card-actions align=\"start\" paddingless=\"true\">\r\n * <button fuiButton variant=\"tertiary\">\r\n * <fui-icon name=\"heart\"></fui-icon>\r\n * </button>\r\n * </fui-card-actions>\r\n * ```\r\n */\r\n@Component({\r\n selector: 'fui-card-actions',\r\n standalone: true,\r\n templateUrl: './card-actions.component.html',\r\n host: {\r\n class: 'fui-card-actions',\r\n '[class.fui-card-actions--align-start]': 'align() === \"start\"',\r\n '[class.fui-card-actions--align-center]': 'align() === \"center\"',\r\n '[class.fui-card-actions--align-end]': 'align() === \"end\"',\r\n '[class.fui-card-actions--paddingless]': 'paddingless()',\r\n },\r\n})\r\nexport class FuiCardActionsComponent {\r\n /**\r\n * Alignment of actions within the container\r\n * @default 'end'\r\n */\r\n readonly align: InputSignal<'start' | 'center' | 'end'> = input<'start' | 'center' | 'end'>('end');\r\n\r\n /**\r\n * Whether to remove padding from the actions container\r\n * @default false\r\n */\r\n readonly paddingless: InputSignal<boolean> = input(false);\r\n}\r\n","<ng-content></ng-content>\r\n","import { Directive } from '@angular/core';\r\n\r\n/**\r\n * # FuiCardHeader Directive\r\n *\r\n * Marker directive for projecting a custom element into the card header region\r\n * without using the {@link FuiCardHeaderComponent}. Apply it to any element to\r\n * have `<fui-card>` treat it as header content.\r\n *\r\n * ## Usage\r\n * ```html\r\n * <fui-card>\r\n * <div fuiCardHeader>My full-width header</div>\r\n * <p>Content</p>\r\n * </fui-card>\r\n * ```\r\n */\r\n@Directive({\r\n selector: '[fuiCardHeader]',\r\n standalone: true,\r\n host: {\r\n class: 'fui-card-header',\r\n },\r\n})\r\nexport class FuiCardHeaderDirective {}\r\n","import { Directive } from '@angular/core';\r\n\r\n/**\r\n * # FuiCardActions Directive\r\n *\r\n * Marker directive for projecting a custom element into the card actions region\r\n * without using the {@link FuiCardActionsComponent}. Apply it to any element to\r\n * have `<fui-card>` treat it as actions content.\r\n *\r\n * ## Usage\r\n * ```html\r\n * <fui-card>\r\n * <p>Content</p>\r\n * <div fuiCardActions>\r\n * <button fuiButton>OK</button>\r\n * </div>\r\n * </fui-card>\r\n * ```\r\n */\r\n@Directive({\r\n selector: '[fuiCardActions]',\r\n standalone: true,\r\n host: {\r\n class: 'fui-card-actions',\r\n },\r\n})\r\nexport class FuiCardActionsDirective {}\r\n","import {\r\n AfterContentInit,\r\n ChangeDetectionStrategy,\r\n Component,\r\n computed,\r\n ContentChild,\r\n HostListener,\r\n input,\r\n InputSignal,\r\n Signal,\r\n signal,\r\n ViewEncapsulation,\r\n WritableSignal,\r\n} from '@angular/core';\r\n\r\nimport { FuiCardHeaderComponent } from './card-header.component';\r\nimport { FuiCardActionsComponent } from './card-actions.component';\r\nimport { FuiCardHeaderDirective } from './card-header.directive';\r\nimport { FuiCardActionsDirective } from './card-actions.directive';\r\n\r\n/**\r\n * Available card variants following Carbon Design System patterns\r\n */\r\nexport type FuiCardVariant = 'elevated' | 'outlined' | 'flat';\r\n\r\n/**\r\n * Available padding options for card content\r\n */\r\nexport type FuiCardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';\r\n\r\n/**\r\n * # FuiCard Component\r\n *\r\n * A flexible container component following Carbon Design System patterns.\r\n * Provides a structured layout with optional header, content, and actions sections.\r\n *\r\n * ## Features\r\n * - Multiple variants: elevated, outlined, flat\r\n * - Configurable padding: none, sm, md, lg, xl\r\n * - Structured content areas: header, content, actions\r\n * - Clickable state support with hover animations\r\n * - Disabled state support\r\n * - Full accessibility support\r\n * - Smooth motion transitions\r\n *\r\n * ## Usage\r\n *\r\n * ### Basic Card\r\n * ```html\r\n * <fui-card>\r\n * <p>Card content goes here</p>\r\n * </fui-card>\r\n * ```\r\n *\r\n * ### Card with Header and Actions\r\n * ```html\r\n * <fui-card variant=\"outlined\">\r\n * <fui-card-header title=\"Card Title\" subtitle=\"Optional subtitle\">\r\n * <button fuiButton variant=\"tertiary\" size=\"sm\" [iconOnly]=\"true\">\r\n * <fui-icon name=\"overflow-menu-vertical\"></fui-icon>\r\n * </button>\r\n * </fui-card-header>\r\n *\r\n * <p>Main card content</p>\r\n *\r\n * <fui-card-actions align=\"end\">\r\n * <button fuiButton variant=\"secondary\">Cancel</button>\r\n * <button fuiButton variant=\"primary\">Save</button>\r\n * </fui-card-actions>\r\n * </fui-card>\r\n * ```\r\n *\r\n * ### Clickable Card\r\n * ```html\r\n * <fui-card [clickable]=\"true\" (click)=\"handleCardClick()\">\r\n * <p>This entire card is clickable</p>\r\n * </fui-card>\r\n * ```\r\n *\r\n * @example\r\n * ```typescript\r\n * import { FuiCardComponent, FuiCardHeaderComponent, FuiCardActionsComponent } from '@raintonic/formaui/components/card';\r\n *\r\n * @Component({\r\n * standalone: true,\r\n * imports: [FuiCardComponent, FuiCardHeaderComponent, FuiCardActionsComponent],\r\n * template: `\r\n * <fui-card variant=\"elevated\" padding=\"lg\">\r\n * <fui-card-header title=\"User Profile\"></fui-card-header>\r\n * <div class=\"user-info\">\r\n * <p>User details here...</p>\r\n * </div>\r\n * <fui-card-actions>\r\n * <button fuiButton>Edit</button>\r\n * </fui-card-actions>\r\n * </fui-card>\r\n * `\r\n * })\r\n * export class UserCardComponent {}\r\n * ```\r\n */\r\n@Component({\r\n selector: 'fui-card',\r\n standalone: true,\r\n imports: [],\r\n templateUrl: './card.component.html',\r\n styleUrls: ['./card.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-card',\r\n '[class]': 'computedClasses()',\r\n '[attr.role]': 'clickable() ? \"button\" : \"region\"',\r\n '[attr.tabindex]': 'clickable() && !disabled() ? \"0\" : null',\r\n '[attr.aria-disabled]': 'disabled() ? \"true\" : null',\r\n '[attr.aria-labelledby]': 'headerId',\r\n },\r\n})\r\nexport class FuiCardComponent implements AfterContentInit {\r\n /**\r\n * Card variant that determines the visual style\r\n * @default 'outlined'\r\n */\r\n readonly variant: InputSignal<FuiCardVariant> = input<FuiCardVariant>('outlined');\r\n\r\n /**\r\n * Padding applied to card content\r\n * @default 'lg'\r\n */\r\n readonly padding: InputSignal<FuiCardPadding> = input<FuiCardPadding>('lg');\r\n\r\n /**\r\n * Whether the card is clickable (adds hover effects and cursor pointer)\r\n * @default false\r\n */\r\n readonly clickable: InputSignal<boolean> = input(false);\r\n\r\n /**\r\n * Whether the card is disabled\r\n * @default false\r\n */\r\n readonly disabled: InputSignal<boolean> = input(false);\r\n\r\n // Animation state\r\n readonly hovered: WritableSignal<boolean> = signal(false);\r\n readonly liftState: Signal<'idle' | 'lifted'> = computed(() =>\r\n this.clickable() && this.hovered() && !this.disabled() ? 'lifted' : 'idle',\r\n );\r\n\r\n // Projected content queries and ARIA label linkage\r\n @ContentChild(FuiCardHeaderComponent) headerCmp?: FuiCardHeaderComponent;\r\n @ContentChild(FuiCardActionsComponent) actionsCmp?: FuiCardActionsComponent;\r\n @ContentChild(FuiCardHeaderDirective) headerDir?: FuiCardHeaderDirective;\r\n @ContentChild(FuiCardActionsDirective) actionsDir?: FuiCardActionsDirective;\r\n\r\n headerId = '';\r\n\r\n // Computed classes\r\n readonly computedClasses: Signal<string> = computed(() => {\r\n const classes: string[] = [`fui-card--${this.variant()}`, `fui-card--padding-${this.padding()}`];\r\n\r\n if (this.clickable()) {\r\n classes.push('fui-card--clickable');\r\n }\r\n\r\n if (this.disabled()) {\r\n classes.push('fui-card--disabled');\r\n }\r\n\r\n if (this.hovered()) {\r\n classes.push('fui-card--hovered');\r\n }\r\n\r\n return classes.join(' ');\r\n });\r\n\r\n @HostListener('mouseenter')\r\n onMouseEnter(): void {\r\n if (this.clickable() && !this.disabled()) {\r\n this.hovered.set(true);\r\n }\r\n }\r\n\r\n @HostListener('mouseleave')\r\n onMouseLeave(): void {\r\n this.hovered.set(false);\r\n }\r\n\r\n @HostListener('keydown', ['$event'])\r\n onKeyDown(event: KeyboardEvent): void {\r\n if (this.clickable() && !this.disabled() && (event.key === 'Enter' || event.key === ' ')) {\r\n event.preventDefault();\r\n (event.target as HTMLElement).click();\r\n }\r\n }\r\n\r\n @HostListener('click', ['$event'])\r\n onClick(event: MouseEvent): void {\r\n if (this.disabled()) {\r\n event.stopImmediatePropagation();\r\n event.preventDefault();\r\n }\r\n }\r\n\r\n ngAfterContentInit(): void {\r\n this.headerId = this.headerCmp ? this.headerCmp.hostId : '';\r\n }\r\n\r\n // Check if header content is projected (component or attribute directive)\r\n get hasHeader(): boolean {\r\n return !!this.headerCmp || !!this.headerDir;\r\n }\r\n\r\n // Check if actions content is projected (component or attribute directive)\r\n get hasActions(): boolean {\r\n return !!this.actionsCmp || !!this.actionsDir;\r\n }\r\n}\r\n","@if (hasHeader) {\r\n <div class=\"fui-card__header\">\r\n <ng-content select=\"fui-card-header, [fuiCardHeader]\"></ng-content>\r\n </div>\r\n}\r\n\r\n<div class=\"fui-card__content\" [class.fui-card__content--no-padding]=\"padding() === 'none'\">\r\n <ng-content></ng-content>\r\n</div>\r\n\r\n@if (hasActions) {\r\n <div class=\"fui-card__actions\">\r\n <ng-content select=\"fui-card-actions, [fuiCardActions]\"></ng-content>\r\n </div>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -70,7 +70,7 @@ class FuiChipComponent {
|
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
72
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
73
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiChipComponent, isStandalone: true, selector: "fui-chip", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed", selectedChange: "selectedChange" }, host: { listeners: { "click": "onClick()", "keydown.enter": "onClick()", "keydown.space": "onSpace($event)" }, properties: { "class": "computedClasses()", "class.fui-chip--selected": "_selected()", "class.fui-chip--disabled": "disabled()", "attr.role": "selectable() ? \"option\" : null", "attr.aria-selected": "selectable() ? _selected() : null", "attr.aria-pressed": "selectable() ? _selected() : null", "attr.tabindex": "selectable() || removable() ? 0 : null" }, classAttribute: "fui-chip" }, ngImport: i0, template: "<span class=\"fui-chip__content\">\r\n @if (icon()) {\r\n <fui-icon class=\"fui-chip__icon\" [name]=\"icon()!\" size=\"sm\" aria-hidden=\"true\" />\r\n }\r\n <span class=\"fui-chip__label\">{{ label() }}</span>\r\n</span>\r\n\r\n@if (removable() && !disabled()) {\r\n <button\r\n class=\"fui-chip__remove\"\r\n type=\"button\"\r\n [attr.aria-label]=\"intl.removeAriaLabel(label())\"\r\n (click)=\"onRemove($event)\"\r\n (keydown.enter)=\"onRemove($event)\"\r\n >\r\n <fui-icon name=\"x\" size=\"sm\" aria-hidden=\"true\" />\r\n </button>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-chip{display:inline-flex;align-items:center;gap:var(--fui-spacing-2, .25rem);border-radius:var(--fui-radius-pill, 999px);font-family:var(--fui-font-sans);font-weight:var(--fui-weight-medium, 500);cursor:default;-webkit-user-select:none;user-select:none;transition-property:background-color border-color color;transition-duration:var(--fui-duration-fast, .15s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-chip--sm{padding:var(--fui-spacing-1) var(--fui-spacing-4, .5rem);font-size:var(--fui-text-sm);height:1.25rem}.fui-chip--md{padding:var(--fui-spacing-2) var(--fui-spacing-6, .75rem);font-size:var(--fui-text-base);height:1.625rem}.fui-chip--primary{background-color:var(--fui-primary-20);color:var(--fui-primary-80)}.fui-chip--secondary{background-color:var(--fui-neutral-20);color:var(--fui-neutral-80)}.fui-chip--success{background-color:var(--fui-success-20);color:var(--fui-success-80)}.fui-chip--warning{background-color:var(--fui-warning-20);color:var(--fui-warning-80)}.fui-chip--danger{background-color:var(--fui-error-20);color:var(--fui-error-80)}.fui-chip--info{background-color:var(--fui-info-20);color:var(--fui-info-80)}.fui-chip--selected.fui-chip--primary{background-color:var(--fui-primary-bg);color:var(--fui-text-on-fill)}.fui-chip--selected.fui-chip--secondary{background-color:var(--fui-neutral-80);color:var(--fui-text-on-fill)}.fui-chip--selected.fui-chip--success{background-color:var(--fui-fill-success);color:var(--fui-text-on-fill)}.fui-chip--selected.fui-chip--warning{background-color:var(--fui-fill-warning);color:var(--fui-text-on-fill)}.fui-chip--selected.fui-chip--danger{background-color:var(--fui-fill-error);color:var(--fui-text-on-fill)}.fui-chip--selected.fui-chip--info{background-color:var(--fui-fill-info);color:var(--fui-text-on-fill)}.fui-chip__content{display:inline-flex;align-items:center;gap:var(--fui-spacing-2, .25rem)}.fui-chip__remove{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-chip__remove:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-chip__remove{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;width:1rem;height:1rem;margin-left:var(--fui-spacing-2, .25rem)}.fui-chip__remove:hover{background-color:#0000001a}.fui-chip[tabindex=\"0\"]{cursor:pointer}.fui-chip:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-chip--disabled{opacity:var(--fui-state-disabled-opacity, .38);cursor:not-allowed;pointer-events:none}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
73
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiChipComponent, isStandalone: true, selector: "fui-chip", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed", selectedChange: "selectedChange" }, host: { listeners: { "click": "onClick()", "keydown.enter": "onClick()", "keydown.space": "onSpace($event)" }, properties: { "class": "computedClasses()", "class.fui-chip--selected": "_selected()", "class.fui-chip--disabled": "disabled()", "attr.role": "selectable() ? \"option\" : null", "attr.aria-selected": "selectable() ? _selected() : null", "attr.aria-pressed": "selectable() ? _selected() : null", "attr.tabindex": "selectable() || removable() ? 0 : null" }, classAttribute: "fui-chip" }, ngImport: i0, template: "<span class=\"fui-chip__content\">\r\n @if (icon()) {\r\n <fui-icon class=\"fui-chip__icon\" [name]=\"icon()!\" size=\"sm\" aria-hidden=\"true\" />\r\n }\r\n <span class=\"fui-chip__label\">{{ label() }}</span>\r\n</span>\r\n\r\n@if (removable() && !disabled()) {\r\n <button\r\n class=\"fui-chip__remove\"\r\n type=\"button\"\r\n [attr.aria-label]=\"intl.removeAriaLabel(label())\"\r\n (click)=\"onRemove($event)\"\r\n (keydown.enter)=\"onRemove($event)\"\r\n >\r\n <fui-icon name=\"x\" size=\"sm\" aria-hidden=\"true\" />\r\n </button>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-chip{display:inline-flex;align-items:center;gap:var(--fui-spacing-2, .25rem);border-radius:var(--fui-radius-pill, 999px);font-family:var(--fui-font-sans);font-weight:var(--fui-weight-medium, 500);cursor:default;-webkit-user-select:none;user-select:none;transition-property:background-color border-color color;transition-duration:var(--fui-duration-fast, .15s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-chip--sm{padding:var(--fui-spacing-1) var(--fui-spacing-4, .5rem);font-size:var(--fui-text-sm);min-height:1.25rem}.fui-chip--md{padding:var(--fui-spacing-2) var(--fui-spacing-6, .75rem);font-size:var(--fui-text-base);min-height:1.625rem}.fui-chip--primary{background-color:var(--fui-primary-20);color:var(--fui-primary-80)}.fui-chip--secondary{background-color:var(--fui-neutral-20);color:var(--fui-neutral-80)}.fui-chip--success{background-color:var(--fui-success-20);color:var(--fui-success-80)}.fui-chip--warning{background-color:var(--fui-warning-20);color:var(--fui-warning-80)}.fui-chip--danger{background-color:var(--fui-error-20);color:var(--fui-error-80)}.fui-chip--info{background-color:var(--fui-info-20);color:var(--fui-info-80)}.fui-chip--selected.fui-chip--primary{background-color:var(--fui-primary-bg);color:var(--fui-text-on-fill)}.fui-chip--selected.fui-chip--secondary{background-color:var(--fui-neutral-80);color:var(--fui-text-on-fill)}.fui-chip--selected.fui-chip--success{background-color:var(--fui-fill-success);color:var(--fui-text-on-fill)}.fui-chip--selected.fui-chip--warning{background-color:var(--fui-fill-warning);color:var(--fui-text-on-fill)}.fui-chip--selected.fui-chip--danger{background-color:var(--fui-fill-error);color:var(--fui-text-on-fill)}.fui-chip--selected.fui-chip--info{background-color:var(--fui-fill-info);color:var(--fui-text-on-fill)}.fui-chip__content{display:inline-flex;align-items:center;gap:var(--fui-spacing-2, .25rem);min-width:0}.fui-chip__label{white-space:normal;overflow-wrap:anywhere}.fui-chip__remove{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-chip__remove:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-chip__remove{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;width:1rem;height:1rem;margin-left:var(--fui-spacing-2, .25rem)}.fui-chip__remove:hover{background-color:#0000001a}.fui-chip[tabindex=\"0\"]{cursor:pointer}.fui-chip:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-chip--disabled{opacity:var(--fui-state-disabled-opacity, .38);cursor:not-allowed;pointer-events:none}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
74
74
|
}
|
|
75
75
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiChipComponent, decorators: [{
|
|
76
76
|
type: Component,
|
|
@@ -86,7 +86,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
86
86
|
'(click)': 'onClick()',
|
|
87
87
|
'(keydown.enter)': 'onClick()',
|
|
88
88
|
'(keydown.space)': 'onSpace($event)',
|
|
89
|
-
}, template: "<span class=\"fui-chip__content\">\r\n @if (icon()) {\r\n <fui-icon class=\"fui-chip__icon\" [name]=\"icon()!\" size=\"sm\" aria-hidden=\"true\" />\r\n }\r\n <span class=\"fui-chip__label\">{{ label() }}</span>\r\n</span>\r\n\r\n@if (removable() && !disabled()) {\r\n <button\r\n class=\"fui-chip__remove\"\r\n type=\"button\"\r\n [attr.aria-label]=\"intl.removeAriaLabel(label())\"\r\n (click)=\"onRemove($event)\"\r\n (keydown.enter)=\"onRemove($event)\"\r\n >\r\n <fui-icon name=\"x\" size=\"sm\" aria-hidden=\"true\" />\r\n </button>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-chip{display:inline-flex;align-items:center;gap:var(--fui-spacing-2, .25rem);border-radius:var(--fui-radius-pill, 999px);font-family:var(--fui-font-sans);font-weight:var(--fui-weight-medium, 500);cursor:default;-webkit-user-select:none;user-select:none;transition-property:background-color border-color color;transition-duration:var(--fui-duration-fast, .15s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-chip--sm{padding:var(--fui-spacing-1) var(--fui-spacing-4, .5rem);font-size:var(--fui-text-sm);height:1.25rem}.fui-chip--md{padding:var(--fui-spacing-2) var(--fui-spacing-6, .75rem);font-size:var(--fui-text-base);height:1.625rem}.fui-chip--primary{background-color:var(--fui-primary-20);color:var(--fui-primary-80)}.fui-chip--secondary{background-color:var(--fui-neutral-20);color:var(--fui-neutral-80)}.fui-chip--success{background-color:var(--fui-success-20);color:var(--fui-success-80)}.fui-chip--warning{background-color:var(--fui-warning-20);color:var(--fui-warning-80)}.fui-chip--danger{background-color:var(--fui-error-20);color:var(--fui-error-80)}.fui-chip--info{background-color:var(--fui-info-20);color:var(--fui-info-80)}.fui-chip--selected.fui-chip--primary{background-color:var(--fui-primary-bg);color:var(--fui-text-on-fill)}.fui-chip--selected.fui-chip--secondary{background-color:var(--fui-neutral-80);color:var(--fui-text-on-fill)}.fui-chip--selected.fui-chip--success{background-color:var(--fui-fill-success);color:var(--fui-text-on-fill)}.fui-chip--selected.fui-chip--warning{background-color:var(--fui-fill-warning);color:var(--fui-text-on-fill)}.fui-chip--selected.fui-chip--danger{background-color:var(--fui-fill-error);color:var(--fui-text-on-fill)}.fui-chip--selected.fui-chip--info{background-color:var(--fui-fill-info);color:var(--fui-text-on-fill)}.fui-chip__content{display:inline-flex;align-items:center;gap:var(--fui-spacing-2, .25rem)}.fui-chip__remove{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-chip__remove:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-chip__remove{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;width:1rem;height:1rem;margin-left:var(--fui-spacing-2, .25rem)}.fui-chip__remove:hover{background-color:#0000001a}.fui-chip[tabindex=\"0\"]{cursor:pointer}.fui-chip:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-chip--disabled{opacity:var(--fui-state-disabled-opacity, .38);cursor:not-allowed;pointer-events:none}\n"] }]
|
|
89
|
+
}, template: "<span class=\"fui-chip__content\">\r\n @if (icon()) {\r\n <fui-icon class=\"fui-chip__icon\" [name]=\"icon()!\" size=\"sm\" aria-hidden=\"true\" />\r\n }\r\n <span class=\"fui-chip__label\">{{ label() }}</span>\r\n</span>\r\n\r\n@if (removable() && !disabled()) {\r\n <button\r\n class=\"fui-chip__remove\"\r\n type=\"button\"\r\n [attr.aria-label]=\"intl.removeAriaLabel(label())\"\r\n (click)=\"onRemove($event)\"\r\n (keydown.enter)=\"onRemove($event)\"\r\n >\r\n <fui-icon name=\"x\" size=\"sm\" aria-hidden=\"true\" />\r\n </button>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-chip{display:inline-flex;align-items:center;gap:var(--fui-spacing-2, .25rem);border-radius:var(--fui-radius-pill, 999px);font-family:var(--fui-font-sans);font-weight:var(--fui-weight-medium, 500);cursor:default;-webkit-user-select:none;user-select:none;transition-property:background-color border-color color;transition-duration:var(--fui-duration-fast, .15s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-chip--sm{padding:var(--fui-spacing-1) var(--fui-spacing-4, .5rem);font-size:var(--fui-text-sm);min-height:1.25rem}.fui-chip--md{padding:var(--fui-spacing-2) var(--fui-spacing-6, .75rem);font-size:var(--fui-text-base);min-height:1.625rem}.fui-chip--primary{background-color:var(--fui-primary-20);color:var(--fui-primary-80)}.fui-chip--secondary{background-color:var(--fui-neutral-20);color:var(--fui-neutral-80)}.fui-chip--success{background-color:var(--fui-success-20);color:var(--fui-success-80)}.fui-chip--warning{background-color:var(--fui-warning-20);color:var(--fui-warning-80)}.fui-chip--danger{background-color:var(--fui-error-20);color:var(--fui-error-80)}.fui-chip--info{background-color:var(--fui-info-20);color:var(--fui-info-80)}.fui-chip--selected.fui-chip--primary{background-color:var(--fui-primary-bg);color:var(--fui-text-on-fill)}.fui-chip--selected.fui-chip--secondary{background-color:var(--fui-neutral-80);color:var(--fui-text-on-fill)}.fui-chip--selected.fui-chip--success{background-color:var(--fui-fill-success);color:var(--fui-text-on-fill)}.fui-chip--selected.fui-chip--warning{background-color:var(--fui-fill-warning);color:var(--fui-text-on-fill)}.fui-chip--selected.fui-chip--danger{background-color:var(--fui-fill-error);color:var(--fui-text-on-fill)}.fui-chip--selected.fui-chip--info{background-color:var(--fui-fill-info);color:var(--fui-text-on-fill)}.fui-chip__content{display:inline-flex;align-items:center;gap:var(--fui-spacing-2, .25rem);min-width:0}.fui-chip__label{white-space:normal;overflow-wrap:anywhere}.fui-chip__remove{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-chip__remove:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-chip__remove{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;width:1rem;height:1rem;margin-left:var(--fui-spacing-2, .25rem)}.fui-chip__remove:hover{background-color:#0000001a}.fui-chip[tabindex=\"0\"]{cursor:pointer}.fui-chip:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-chip--disabled{opacity:var(--fui-state-disabled-opacity, .38);cursor:not-allowed;pointer-events:none}\n"] }]
|
|
90
90
|
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }] } });
|
|
91
91
|
|
|
92
92
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"raintonic-formaui-components-chip.mjs","sources":["../../../lib/components/chip/chip.types.ts","../../../lib/components/chip/chip.intl.ts","../../../lib/components/chip/chip.component.ts","../../../lib/components/chip/chip.component.html","../../../lib/components/chip/raintonic-formaui-components-chip.ts"],"sourcesContent":["import { FuiChipComponent } from './chip.component';\r\n\r\nexport type FuiChipVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';\r\nexport type FuiChipSize = 'sm' | 'md';\r\n\r\nexport const FUI_CHIP_VARIANTS: readonly FuiChipVariant[] = [\r\n 'primary',\r\n 'secondary',\r\n 'success',\r\n 'warning',\r\n 'danger',\r\n 'info',\r\n] as const;\r\nexport const FUI_CHIP_SIZES: readonly FuiChipSize[] = ['sm', 'md'] as const;\r\n\r\nexport interface FuiChipRemoveEvent {\r\n chip: FuiChipComponent;\r\n}\r\n","import { Injectable } from '@angular/core';\r\nimport { FuiIntlBase } from '@raintonic/formaui/core';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class FuiChipIntl extends FuiIntlBase {\r\n removeAriaLabel(label: string): string {\r\n return `Remove ${label}`;\r\n }\r\n}\r\n","import {\r\n ChangeDetectionStrategy,\r\n ChangeDetectorRef,\r\n Component,\r\n ViewEncapsulation,\r\n computed,\r\n effect,\r\n inject,\r\n input,\r\n output,\r\n signal,\r\n booleanAttribute,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { FuiChipVariant, FuiChipSize, FUI_CHIP_VARIANTS, FuiChipRemoveEvent } from './chip.types';\r\nimport { FuiChipIntl } from './chip.intl';\r\n\r\n@Component({\r\n selector: 'fui-chip',\r\n standalone: true,\r\n imports: [FuiIconComponent],\r\n templateUrl: './chip.component.html',\r\n styleUrls: ['./chip.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-chip',\r\n '[class]': 'computedClasses()',\r\n '[class.fui-chip--selected]': '_selected()',\r\n '[class.fui-chip--disabled]': 'disabled()',\r\n '[attr.role]': 'selectable() ? \"option\" : null',\r\n '[attr.aria-selected]': 'selectable() ? _selected() : null',\r\n '[attr.aria-pressed]': 'selectable() ? _selected() : null',\r\n '[attr.tabindex]': 'selectable() || removable() ? 0 : null',\r\n '(click)': 'onClick()',\r\n '(keydown.enter)': 'onClick()',\r\n '(keydown.space)': 'onSpace($event)',\r\n },\r\n})\r\nexport class FuiChipComponent {\r\n readonly intl = inject(FuiChipIntl);\r\n private readonly _cdr = inject(ChangeDetectorRef);\r\n\r\n readonly label = input.required<string>();\r\n readonly variant = input<FuiChipVariant, FuiChipVariant | string>('primary', {\r\n transform: (v) => ((FUI_CHIP_VARIANTS as readonly string[]).includes(v) ? (v as FuiChipVariant) : 'primary'),\r\n });\r\n readonly size = input<FuiChipSize>('md');\r\n readonly icon = input<string | null>(null);\r\n readonly removable = input(false);\r\n readonly selectable = input(false);\r\n readonly selected = input(false);\r\n readonly disabled = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n\r\n readonly removed = output<FuiChipRemoveEvent>();\r\n readonly selectedChange = output<boolean>();\r\n\r\n readonly _selected = signal(false);\r\n\r\n readonly computedClasses = computed(() => {\r\n return `fui-chip fui-chip--${this.variant()} fui-chip--${this.size()}`;\r\n });\r\n\r\n constructor() {\r\n effect(() => {\r\n this._selected.set(this.selected());\r\n });\r\n this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => {\r\n this._cdr.markForCheck();\r\n });\r\n }\r\n\r\n onClick(): void {\r\n if (this.disabled()) return;\r\n if (this.selectable()) {\r\n this._selected.update((v) => !v);\r\n this.selectedChange.emit(this._selected());\r\n }\r\n }\r\n\r\n onSpace(event: Event): void {\r\n event.preventDefault();\r\n this.onClick();\r\n }\r\n\r\n onRemove(event: Event): void {\r\n event.stopPropagation();\r\n if (!this.disabled()) {\r\n this.removed.emit({ chip: this });\r\n }\r\n }\r\n}\r\n","<span class=\"fui-chip__content\">\r\n @if (icon()) {\r\n <fui-icon class=\"fui-chip__icon\" [name]=\"icon()!\" size=\"sm\" aria-hidden=\"true\" />\r\n }\r\n <span class=\"fui-chip__label\">{{ label() }}</span>\r\n</span>\r\n\r\n@if (removable() && !disabled()) {\r\n <button\r\n class=\"fui-chip__remove\"\r\n type=\"button\"\r\n [attr.aria-label]=\"intl.removeAriaLabel(label())\"\r\n (click)=\"onRemove($event)\"\r\n (keydown.enter)=\"onRemove($event)\"\r\n >\r\n <fui-icon name=\"x\" size=\"sm\" aria-hidden=\"true\" />\r\n </button>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"raintonic-formaui-components-chip.mjs","sources":["../../../lib/components/chip/chip.types.ts","../../../lib/components/chip/chip.intl.ts","../../../lib/components/chip/chip.component.ts","../../../lib/components/chip/chip.component.html","../../../lib/components/chip/raintonic-formaui-components-chip.ts"],"sourcesContent":["import { FuiChipComponent } from './chip.component';\r\n\r\nexport type FuiChipVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';\r\nexport type FuiChipSize = 'sm' | 'md';\r\n\r\nexport const FUI_CHIP_VARIANTS: readonly FuiChipVariant[] = [\r\n 'primary',\r\n 'secondary',\r\n 'success',\r\n 'warning',\r\n 'danger',\r\n 'info',\r\n] as const;\r\nexport const FUI_CHIP_SIZES: readonly FuiChipSize[] = ['sm', 'md'] as const;\r\n\r\nexport interface FuiChipRemoveEvent {\r\n chip: FuiChipComponent;\r\n}\r\n","import { Injectable } from '@angular/core';\r\nimport { FuiIntlBase } from '@raintonic/formaui/core';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class FuiChipIntl extends FuiIntlBase {\r\n removeAriaLabel(label: string): string {\r\n return `Remove ${label}`;\r\n }\r\n}\r\n","import {\r\n ChangeDetectionStrategy,\r\n ChangeDetectorRef,\r\n Component,\r\n ViewEncapsulation,\r\n computed,\r\n effect,\r\n inject,\r\n input,\r\n output,\r\n signal,\r\n booleanAttribute,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { FuiChipVariant, FuiChipSize, FUI_CHIP_VARIANTS, FuiChipRemoveEvent } from './chip.types';\r\nimport { FuiChipIntl } from './chip.intl';\r\n\r\n@Component({\r\n selector: 'fui-chip',\r\n standalone: true,\r\n imports: [FuiIconComponent],\r\n templateUrl: './chip.component.html',\r\n styleUrls: ['./chip.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-chip',\r\n '[class]': 'computedClasses()',\r\n '[class.fui-chip--selected]': '_selected()',\r\n '[class.fui-chip--disabled]': 'disabled()',\r\n '[attr.role]': 'selectable() ? \"option\" : null',\r\n '[attr.aria-selected]': 'selectable() ? _selected() : null',\r\n '[attr.aria-pressed]': 'selectable() ? _selected() : null',\r\n '[attr.tabindex]': 'selectable() || removable() ? 0 : null',\r\n '(click)': 'onClick()',\r\n '(keydown.enter)': 'onClick()',\r\n '(keydown.space)': 'onSpace($event)',\r\n },\r\n})\r\nexport class FuiChipComponent {\r\n readonly intl = inject(FuiChipIntl);\r\n private readonly _cdr = inject(ChangeDetectorRef);\r\n\r\n readonly label = input.required<string>();\r\n readonly variant = input<FuiChipVariant, FuiChipVariant | string>('primary', {\r\n transform: (v) => ((FUI_CHIP_VARIANTS as readonly string[]).includes(v) ? (v as FuiChipVariant) : 'primary'),\r\n });\r\n readonly size = input<FuiChipSize>('md');\r\n readonly icon = input<string | null>(null);\r\n readonly removable = input(false);\r\n readonly selectable = input(false);\r\n readonly selected = input(false);\r\n readonly disabled = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n\r\n readonly removed = output<FuiChipRemoveEvent>();\r\n readonly selectedChange = output<boolean>();\r\n\r\n readonly _selected = signal(false);\r\n\r\n readonly computedClasses = computed(() => {\r\n return `fui-chip fui-chip--${this.variant()} fui-chip--${this.size()}`;\r\n });\r\n\r\n constructor() {\r\n effect(() => {\r\n this._selected.set(this.selected());\r\n });\r\n this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => {\r\n this._cdr.markForCheck();\r\n });\r\n }\r\n\r\n onClick(): void {\r\n if (this.disabled()) return;\r\n if (this.selectable()) {\r\n this._selected.update((v) => !v);\r\n this.selectedChange.emit(this._selected());\r\n }\r\n }\r\n\r\n onSpace(event: Event): void {\r\n event.preventDefault();\r\n this.onClick();\r\n }\r\n\r\n onRemove(event: Event): void {\r\n event.stopPropagation();\r\n if (!this.disabled()) {\r\n this.removed.emit({ chip: this });\r\n }\r\n }\r\n}\r\n","<span class=\"fui-chip__content\">\r\n @if (icon()) {\r\n <fui-icon class=\"fui-chip__icon\" [name]=\"icon()!\" size=\"sm\" aria-hidden=\"true\" />\r\n }\r\n <span class=\"fui-chip__label\">{{ label() }}</span>\r\n</span>\r\n\r\n@if (removable() && !disabled()) {\r\n <button\r\n class=\"fui-chip__remove\"\r\n type=\"button\"\r\n [attr.aria-label]=\"intl.removeAriaLabel(label())\"\r\n (click)=\"onRemove($event)\"\r\n (keydown.enter)=\"onRemove($event)\"\r\n >\r\n <fui-icon name=\"x\" size=\"sm\" aria-hidden=\"true\" />\r\n </button>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|