@fireng/layout
Version:
Angular directives for responsive layout and visual adjustments using Fireng breakpoints.
58 lines • 7.09 kB
JavaScript
import { computed, Directive, inject, input } from '@angular/core';
import { FirengScreenService } from '@fireng/core';
import * as i0 from "@angular/core";
export class FirengGapDirective {
/**
* Defines the gap (gutters) between rows and columns in flex and grid layouts.
* This is a shorthand for `row-gap` and `column-gap`.
* Accepted values for gap are any valid CSS <length> or <percentage> value,
* which can be a single value (for both row and column gap) or two values
* (first for row-gap, second for column-gap).
*
* Global CSS values are also accepted: `inherit`, `initial`, `unset`, `revert`.
*
* For more details on the gap property, refer to the MDN documentation:
* @see [MDN - gap](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)
*
* Can also be provided as a responsive map for different screen sizes.
* @example
* // Static usage:
* <div fireGap="20px">...</div>
* <div fireGap="1em 0.5em">...</div>
* <div fireGap="calc(10% + 20px)">...</div>
* <div fireGap="unset">...</div> // Example with a global value
* // Responsive usage:
* <div fireGap="{ xs: '8px', sm: '1em 2em', md: '3vmin 2vmax', lg: 'inherit' }">...</div>
* @defaultValue `normal`
*/
gap = input('normal', {
alias: 'fireGap',
});
screenService = inject(FirengScreenService);
// Compute the active gap based on the current screen size
activeGap = computed(() => {
const gap = this.gap();
if (typeof gap === 'string') {
return gap;
}
else {
// Resolve the value based on the current breakpoint
const resolvedValue = this.screenService.resolveBreakpointValue(gap, '0px' // Default value if no breakpoint matches
);
return resolvedValue();
}
});
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FirengGapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: FirengGapDirective, isStandalone: true, selector: "[fireGap]", inputs: { gap: { classPropertyName: "gap", publicName: "fireGap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.gap": "activeGap()" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FirengGapDirective, decorators: [{
type: Directive,
args: [{
selector: '[fireGap]',
standalone: true,
host: {
'[style.gap]': 'activeGap()',
},
}]
}] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlyZW5nLWdhcC1kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9sYXlvdXQvc3JjL2xpYi9hdG9taWMtZGlyZWN0aXZlcy9maXJlbmctZ2FwLWRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRW5FLE9BQU8sRUFBdUIsbUJBQW1CLEVBQUUsTUFBTSxjQUFjLENBQUM7O0FBU3hFLE1BQU0sT0FBTyxrQkFBa0I7SUFDN0I7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7T0FzQkc7SUFDSSxHQUFHLEdBQUcsS0FBSyxDQUE2QyxRQUFRLEVBQUU7UUFDdkUsS0FBSyxFQUFFLFNBQVM7S0FDakIsQ0FBQyxDQUFDO0lBRWMsYUFBYSxHQUFHLE1BQU0sQ0FBQyxtQkFBbUIsQ0FBQyxDQUFDO0lBRTdELDBEQUEwRDtJQUN6QyxTQUFTLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRTtRQUN6QyxNQUFNLEdBQUcsR0FBRyxJQUFJLENBQUMsR0FBRyxFQUFFLENBQUM7UUFDdkIsSUFBSSxPQUFPLEdBQUcsS0FBSyxRQUFRLEVBQUUsQ0FBQztZQUM1QixPQUFPLEdBQUcsQ0FBQztRQUNiLENBQUM7YUFBTSxDQUFDO1lBQ04sb0RBQW9EO1lBQ3BELE1BQU0sYUFBYSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsc0JBQXNCLENBQzdELEdBQUcsRUFDSCxLQUFLLENBQUMseUNBQXlDO2FBQ2hELENBQUM7WUFDRixPQUFPLGFBQWEsRUFBRSxDQUFDO1FBQ3pCLENBQUM7SUFDSCxDQUFDLENBQUMsQ0FBQzt3R0EzQ1Esa0JBQWtCOzRGQUFsQixrQkFBa0I7OzRGQUFsQixrQkFBa0I7a0JBUDlCLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLFdBQVc7b0JBQ3JCLFVBQVUsRUFBRSxJQUFJO29CQUNoQixJQUFJLEVBQUU7d0JBQ0osYUFBYSxFQUFFLGFBQWE7cUJBQzdCO2lCQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY29tcHV0ZWQsIERpcmVjdGl2ZSwgaW5qZWN0LCBpbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBGaXJlbmdHYXAgfSBmcm9tICcuLi9maXJlbmcudHlwZXMnO1xyXG5pbXBvcnQgeyBGaXJlbmdSZXNwb25zaXZlTWFwLCBGaXJlbmdTY3JlZW5TZXJ2aWNlIH0gZnJvbSAnQGZpcmVuZy9jb3JlJztcclxuXHJcbkBEaXJlY3RpdmUoe1xyXG4gIHNlbGVjdG9yOiAnW2ZpcmVHYXBdJyxcclxuICBzdGFuZGFsb25lOiB0cnVlLFxyXG4gIGhvc3Q6IHtcclxuICAgICdbc3R5bGUuZ2FwXSc6ICdhY3RpdmVHYXAoKScsXHJcbiAgfSxcclxufSlcclxuZXhwb3J0IGNsYXNzIEZpcmVuZ0dhcERpcmVjdGl2ZSB7XHJcbiAgLyoqXHJcbiAgICogRGVmaW5lcyB0aGUgZ2FwIChndXR0ZXJzKSBiZXR3ZWVuIHJvd3MgYW5kIGNvbHVtbnMgaW4gZmxleCBhbmQgZ3JpZCBsYXlvdXRzLlxyXG4gICAqIFRoaXMgaXMgYSBzaG9ydGhhbmQgZm9yIGByb3ctZ2FwYCBhbmQgYGNvbHVtbi1nYXBgLlxyXG4gICAqIEFjY2VwdGVkIHZhbHVlcyBmb3IgZ2FwIGFyZSBhbnkgdmFsaWQgQ1NTIDxsZW5ndGg+IG9yIDxwZXJjZW50YWdlPiB2YWx1ZSxcclxuICAgKiB3aGljaCBjYW4gYmUgYSBzaW5nbGUgdmFsdWUgKGZvciBib3RoIHJvdyBhbmQgY29sdW1uIGdhcCkgb3IgdHdvIHZhbHVlc1xyXG4gICAqIChmaXJzdCBmb3Igcm93LWdhcCwgc2Vjb25kIGZvciBjb2x1bW4tZ2FwKS5cclxuICAgKlxyXG4gICAqIEdsb2JhbCBDU1MgdmFsdWVzIGFyZSBhbHNvIGFjY2VwdGVkOiBgaW5oZXJpdGAsIGBpbml0aWFsYCwgYHVuc2V0YCwgYHJldmVydGAuXHJcbiAgICpcclxuICAgKiBGb3IgbW9yZSBkZXRhaWxzIG9uIHRoZSBnYXAgcHJvcGVydHksIHJlZmVyIHRvIHRoZSBNRE4gZG9jdW1lbnRhdGlvbjpcclxuICAgKiBAc2VlIFtNRE4gLSBnYXBdKGh0dHBzOi8vZGV2ZWxvcGVyLm1vemlsbGEub3JnL2VuLVVTL2RvY3MvV2ViL0NTUy9nYXApXHJcbiAgICpcclxuICAgKiBDYW4gYWxzbyBiZSBwcm92aWRlZCBhcyBhIHJlc3BvbnNpdmUgbWFwIGZvciBkaWZmZXJlbnQgc2NyZWVuIHNpemVzLlxyXG4gICAqIEBleGFtcGxlXHJcbiAgICogLy8gU3RhdGljIHVzYWdlOlxyXG4gICAqIDxkaXYgZmlyZUdhcD1cIjIwcHhcIj4uLi48L2Rpdj5cclxuICAgKiA8ZGl2IGZpcmVHYXA9XCIxZW0gMC41ZW1cIj4uLi48L2Rpdj5cclxuICAgKiA8ZGl2IGZpcmVHYXA9XCJjYWxjKDEwJSArIDIwcHgpXCI+Li4uPC9kaXY+XHJcbiAgICogPGRpdiBmaXJlR2FwPVwidW5zZXRcIj4uLi48L2Rpdj4gLy8gRXhhbXBsZSB3aXRoIGEgZ2xvYmFsIHZhbHVlXHJcbiAgICogLy8gUmVzcG9uc2l2ZSB1c2FnZTpcclxuICAgKiA8ZGl2IGZpcmVHYXA9XCJ7IHhzOiAnOHB4Jywgc206ICcxZW0gMmVtJywgbWQ6ICczdm1pbiAydm1heCcsIGxnOiAnaW5oZXJpdCcgfVwiPi4uLjwvZGl2PlxyXG4gICAqIEBkZWZhdWx0VmFsdWUgYG5vcm1hbGBcclxuICAgKi9cclxuICBwdWJsaWMgZ2FwID0gaW5wdXQ8RmlyZW5nR2FwIHwgRmlyZW5nUmVzcG9uc2l2ZU1hcDxGaXJlbmdHYXA+Pignbm9ybWFsJywge1xyXG4gICAgYWxpYXM6ICdmaXJlR2FwJyxcclxuICB9KTtcclxuXHJcbiAgcHJpdmF0ZSByZWFkb25seSBzY3JlZW5TZXJ2aWNlID0gaW5qZWN0KEZpcmVuZ1NjcmVlblNlcnZpY2UpO1xyXG5cclxuICAvLyBDb21wdXRlIHRoZSBhY3RpdmUgZ2FwIGJhc2VkIG9uIHRoZSBjdXJyZW50IHNjcmVlbiBzaXplXHJcbiAgcHJpdmF0ZSByZWFkb25seSBhY3RpdmVHYXAgPSBjb21wdXRlZCgoKSA9PiB7XHJcbiAgICBjb25zdCBnYXAgPSB0aGlzLmdhcCgpO1xyXG4gICAgaWYgKHR5cGVvZiBnYXAgPT09ICdzdHJpbmcnKSB7XHJcbiAgICAgIHJldHVybiBnYXA7XHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICAvLyBSZXNvbHZlIHRoZSB2YWx1ZSBiYXNlZCBvbiB0aGUgY3VycmVudCBicmVha3BvaW50XHJcbiAgICAgIGNvbnN0IHJlc29sdmVkVmFsdWUgPSB0aGlzLnNjcmVlblNlcnZpY2UucmVzb2x2ZUJyZWFrcG9pbnRWYWx1ZShcclxuICAgICAgICBnYXAsXHJcbiAgICAgICAgJzBweCcgLy8gRGVmYXVsdCB2YWx1ZSBpZiBubyBicmVha3BvaW50IG1hdGNoZXNcclxuICAgICAgKTtcclxuICAgICAgcmV0dXJuIHJlc29sdmVkVmFsdWUoKTtcclxuICAgIH1cclxuICB9KTtcclxufVxyXG4iXX0=