@skyux/layout 15.0.0-alpha.11 → 15.0.0-alpha.13
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/skyux-layout.mjs +56 -6
- package/fesm2022/skyux-layout.mjs.map +1 -1
- package/package.json +10 -10
- package/types/skyux-layout.d.ts +19 -2
|
@@ -3,7 +3,7 @@ import { ObserversModule } from '@angular/cdk/observers';
|
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i0 from '@angular/core';
|
|
6
|
-
import { inject, RendererFactory2, Injectable, EventEmitter, ChangeDetectorRef, Output, Input, HostBinding, ChangeDetectionStrategy, ViewEncapsulation, Component, ElementRef, HostListener, ViewChild, ContentChildren, NgModule, Directive, InjectionToken, numberAttribute, booleanAttribute, ContentChild, signal, TemplateRef,
|
|
6
|
+
import { inject, RendererFactory2, Injectable, EventEmitter, ChangeDetectorRef, Output, Input, HostBinding, ChangeDetectionStrategy, ViewEncapsulation, Component, ElementRef, HostListener, ViewChild, ContentChildren, NgModule, Directive, InjectionToken, numberAttribute, booleanAttribute, ContentChild, signal, TemplateRef, input, computed, contentChildren, effect, DestroyRef, viewChild, afterRenderEffect } from '@angular/core';
|
|
7
7
|
import * as i2 from '@angular/router';
|
|
8
8
|
import { RouterModule } from '@angular/router';
|
|
9
9
|
import * as i3 from '@skyux/router';
|
|
@@ -347,6 +347,22 @@ const RESOURCES = {
|
|
|
347
347
|
skyux_text_expand_see_less: { message: 'See less' },
|
|
348
348
|
skyux_text_expand_see_more: { message: 'See more' },
|
|
349
349
|
},
|
|
350
|
+
ES: {
|
|
351
|
+
skyux_back_to_top: { message: 'Volver arriba' },
|
|
352
|
+
skyux_card_checkbox_label: { message: 'Seleccionar tarjeta' },
|
|
353
|
+
skyux_definition_list_none_found: { message: 'No se encontró ninguno.' },
|
|
354
|
+
skyux_description_list_none_found: { message: 'No se encontró ninguno.' },
|
|
355
|
+
skyux_inline_delete_assistive_text: {
|
|
356
|
+
message: '¿Está seguro de que desea eliminar este elemento?',
|
|
357
|
+
},
|
|
358
|
+
skyux_inline_delete_cancel: { message: 'Cancelar' },
|
|
359
|
+
skyux_inline_delete_confirm_deletion: { message: 'Confirmar eliminación' },
|
|
360
|
+
skyux_inline_delete_delete: { message: 'Borrar' },
|
|
361
|
+
skyux_text_expand_close_text: { message: 'Cerrar' },
|
|
362
|
+
skyux_text_expand_modal_title: { message: 'Vista expandida' },
|
|
363
|
+
skyux_text_expand_see_less: { message: 'Ver menos' },
|
|
364
|
+
skyux_text_expand_see_more: { message: 'Ver más' },
|
|
365
|
+
},
|
|
350
366
|
'FR-CA': {
|
|
351
367
|
skyux_back_to_top: { message: 'Retour en haut' },
|
|
352
368
|
skyux_card_checkbox_label: { message: 'Sélectionner la carte' },
|
|
@@ -1749,13 +1765,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
1749
1765
|
*/
|
|
1750
1766
|
class SkyFluidGridComponent {
|
|
1751
1767
|
constructor() {
|
|
1768
|
+
this.#logSvc = inject(SkyLogService);
|
|
1769
|
+
this.#disableMargin = signal(undefined, /* @ts-ignore */
|
|
1770
|
+
...(ngDevMode ? [{ debugName: "#disableMargin" }] : /* istanbul ignore next */ []));
|
|
1752
1771
|
/**
|
|
1753
|
-
*
|
|
1772
|
+
* Whether to add padding inside the fluid grid container so its content is
|
|
1773
|
+
* inset from the container's outer left and right edges. When `false`,
|
|
1774
|
+
* the fluid grid's content extends to the edges of its container.
|
|
1754
1775
|
* @default false
|
|
1755
1776
|
*/
|
|
1756
|
-
this.
|
|
1777
|
+
this.inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1778
|
+
/**
|
|
1779
|
+
* Whether the fluid grid's outer left and right margin should be hidden.
|
|
1780
|
+
* The deprecated `disableMargin` input, when explicitly set, takes
|
|
1781
|
+
* precedence over `inset` so apps mid-migration keep their existing
|
|
1782
|
+
* behavior until `disableMargin` is removed.
|
|
1783
|
+
*/
|
|
1784
|
+
this.noMargin = computed(() => this.#disableMargin() ?? !this.inset(), /* @ts-ignore */
|
|
1785
|
+
...(ngDevMode ? [{ debugName: "noMargin" }] : /* istanbul ignore next */ []));
|
|
1757
1786
|
this.#_gutterSize = 'large';
|
|
1758
1787
|
}
|
|
1788
|
+
#logSvc;
|
|
1789
|
+
#disableMargin;
|
|
1790
|
+
/**
|
|
1791
|
+
* Disables the outer left and right margin of the fluid grid container.
|
|
1792
|
+
* @deprecated Use `inset` instead. Note that the values are inverted:
|
|
1793
|
+
* setting `disableMargin` to `true` is equivalent to setting `inset` to
|
|
1794
|
+
* `false`.
|
|
1795
|
+
*/
|
|
1796
|
+
set disableMargin(value) {
|
|
1797
|
+
this.#disableMargin.set(value);
|
|
1798
|
+
if (value !== undefined) {
|
|
1799
|
+
this.#logSvc.deprecated('SkyFluidGridComponent.disableMargin', {
|
|
1800
|
+
deprecationMajorVersion: 15,
|
|
1801
|
+
replacementRecommendation: 'Use the `inset` input instead. Note that the values are inverted: setting `disableMargin` to `true` is equivalent to setting `inset` to `false`.',
|
|
1802
|
+
});
|
|
1803
|
+
}
|
|
1804
|
+
}
|
|
1805
|
+
/* istanbul ignore next */
|
|
1806
|
+
get disableMargin() {
|
|
1807
|
+
return this.#disableMargin();
|
|
1808
|
+
}
|
|
1759
1809
|
/**
|
|
1760
1810
|
* The type that defines the size of the padding
|
|
1761
1811
|
* between columns.
|
|
@@ -1769,14 +1819,14 @@ class SkyFluidGridComponent {
|
|
|
1769
1819
|
}
|
|
1770
1820
|
#_gutterSize;
|
|
1771
1821
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFluidGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1772
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1822
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: SkyFluidGridComponent, isStandalone: false, selector: "sky-fluid-grid", inputs: { disableMargin: { classPropertyName: "disableMargin", publicName: "disableMargin", isSignal: false, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, gutterSize: { classPropertyName: "gutterSize", publicName: "gutterSize", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"sky-fluid-grid\"\n [ngClass]=\"{\n 'sky-fluid-grid-gutter-size-small': gutterSize === 'small',\n 'sky-fluid-grid-gutter-size-medium': gutterSize === 'medium',\n 'sky-fluid-grid-gutter-size-large': gutterSize === 'large',\n 'sky-fluid-grid-no-margin': noMargin()\n }\"\n>\n <ng-content />\n</div>\n", styles: [".sky-fluid-grid:not(.sky-theme-modern *){--sky-override-fluid-grid-gutter-size-small: 5px;--sky-override-fluid-grid-gutter-size-medium: 10px;--sky-override-fluid-grid-gutter-size-large: 15px;--sky-override-fluid-grid-top-bottom: 0}.sky-fluid-grid-gutter-size-small{padding:var(--sky-override-fluid-grid-top-bottom, var(--sky-space-inset-horizontal-top-s)) var(--sky-override-fluid-grid-gutter-size-small, var(--sky-space-inset-horizontal-right-s)) var(--sky-override-fluid-grid-top-bottom, var(--sky-space-inset-horizontal-bottom-s)) var(--sky-override-fluid-grid-gutter-size-small, var(--sky-space-inset-horizontal-left-s))}.sky-fluid-grid-gutter-size-medium{padding:var(--sky-override-fluid-grid-top-bottom, var(--sky-space-inset-horizontal-top-m)) var(--sky-override-fluid-grid-gutter-size-medium, var(--sky-space-inset-horizontal-right-m)) var(--sky-override-fluid-grid-top-bottom, var(--sky-space-inset-horizontal-bottom-m)) var(--sky-override-fluid-grid-gutter-size-medium, var(--sky-space-inset-horizontal-left-m))}.sky-fluid-grid-gutter-size-large{padding:var(--sky-override-fluid-grid-top-bottom, var(--sky-space-inset-horizontal-top-xl)) var(--sky-override-fluid-grid-gutter-size-large, var(--sky-space-inset-horizontal-right-xl)) var(--sky-override-fluid-grid-top-bottom, var(--sky-space-inset-horizontal-bottom-xl)) var(--sky-override-fluid-grid-gutter-size-large, var(--sky-space-inset-horizontal-left-xl))}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
1773
1823
|
}
|
|
1774
1824
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFluidGridComponent, decorators: [{
|
|
1775
1825
|
type: Component,
|
|
1776
|
-
args: [{ selector: 'sky-fluid-grid', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div\n class=\"sky-fluid-grid\"\n [ngClass]=\"{\n 'sky-fluid-grid-gutter-size-small': gutterSize === 'small',\n 'sky-fluid-grid-gutter-size-medium': gutterSize === 'medium',\n 'sky-fluid-grid-gutter-size-large': gutterSize === 'large',\n 'sky-fluid-grid-no-margin':
|
|
1826
|
+
args: [{ selector: 'sky-fluid-grid', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div\n class=\"sky-fluid-grid\"\n [ngClass]=\"{\n 'sky-fluid-grid-gutter-size-small': gutterSize === 'small',\n 'sky-fluid-grid-gutter-size-medium': gutterSize === 'medium',\n 'sky-fluid-grid-gutter-size-large': gutterSize === 'large',\n 'sky-fluid-grid-no-margin': noMargin()\n }\"\n>\n <ng-content />\n</div>\n", styles: [".sky-fluid-grid:not(.sky-theme-modern *){--sky-override-fluid-grid-gutter-size-small: 5px;--sky-override-fluid-grid-gutter-size-medium: 10px;--sky-override-fluid-grid-gutter-size-large: 15px;--sky-override-fluid-grid-top-bottom: 0}.sky-fluid-grid-gutter-size-small{padding:var(--sky-override-fluid-grid-top-bottom, var(--sky-space-inset-horizontal-top-s)) var(--sky-override-fluid-grid-gutter-size-small, var(--sky-space-inset-horizontal-right-s)) var(--sky-override-fluid-grid-top-bottom, var(--sky-space-inset-horizontal-bottom-s)) var(--sky-override-fluid-grid-gutter-size-small, var(--sky-space-inset-horizontal-left-s))}.sky-fluid-grid-gutter-size-medium{padding:var(--sky-override-fluid-grid-top-bottom, var(--sky-space-inset-horizontal-top-m)) var(--sky-override-fluid-grid-gutter-size-medium, var(--sky-space-inset-horizontal-right-m)) var(--sky-override-fluid-grid-top-bottom, var(--sky-space-inset-horizontal-bottom-m)) var(--sky-override-fluid-grid-gutter-size-medium, var(--sky-space-inset-horizontal-left-m))}.sky-fluid-grid-gutter-size-large{padding:var(--sky-override-fluid-grid-top-bottom, var(--sky-space-inset-horizontal-top-xl)) var(--sky-override-fluid-grid-gutter-size-large, var(--sky-space-inset-horizontal-right-xl)) var(--sky-override-fluid-grid-top-bottom, var(--sky-space-inset-horizontal-bottom-xl)) var(--sky-override-fluid-grid-gutter-size-large, var(--sky-space-inset-horizontal-left-xl))}\n"] }]
|
|
1777
1827
|
}], propDecorators: { disableMargin: [{
|
|
1778
1828
|
type: Input
|
|
1779
|
-
}], gutterSize: [{
|
|
1829
|
+
}], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], gutterSize: [{
|
|
1780
1830
|
type: Input
|
|
1781
1831
|
}] } });
|
|
1782
1832
|
|