structra-ui 0.1.55 → 0.1.58
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/structra-ui.mjs
CHANGED
|
@@ -5032,6 +5032,7 @@ var FormActionsAlign;
|
|
|
5032
5032
|
* - `direction` — igual a `flex-direction` em CSS:
|
|
5033
5033
|
* - **`Row`** = filhos **na horizontal** (lado a lado). Use para “colunas” no ecrã ou `form-row` + `form-col` na mesma linha.
|
|
5034
5034
|
* - **`Column`** = filhos **empilhados** (um por baixo do outro). **Não** coloca “colunas” lado a lado; para isso use **`Row`**.
|
|
5035
|
+
* `app-layout-stack` **aninhado** conserva o próprio `direction` (não herda regras de flex do pai em coluna).
|
|
5035
5036
|
* Constantes: `LAYOUT_STACK_SIDE_BY_SIDE` e `LAYOUT_STACK_STACKED` no barrel `form-layout`.
|
|
5036
5037
|
* - `itemAlign` — eixo cruzado (`align-items` em `row`: topo/meio/baixo; em `column`: alinhamento horizontal dos blocos).
|
|
5037
5038
|
*/
|
|
@@ -5045,7 +5046,8 @@ class LayoutStackComponent {
|
|
|
5045
5046
|
this.direction = LayoutStackDirection.Row;
|
|
5046
5047
|
/**
|
|
5047
5048
|
* Eixo cruzado: em `row` alinha no vertical (ex.: `start` = topo); em `column` alinha no horizontal.
|
|
5048
|
-
* Se não for definido
|
|
5049
|
+
* Se não for definido: sem `stackFill` = eixo cruzado centrado; com `stackFill` em `row` = `flex-start` (altura = conteúdo).
|
|
5050
|
+
* Use `LayoutStackItemAlign.Stretch` se quiser todas as células da fila com a mesma altura.
|
|
5049
5051
|
*/
|
|
5050
5052
|
this.itemAlign = null;
|
|
5051
5053
|
/**
|
|
@@ -5083,11 +5085,11 @@ class LayoutStackComponent {
|
|
|
5083
5085
|
return parts.join(' ');
|
|
5084
5086
|
}
|
|
5085
5087
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LayoutStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5086
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: LayoutStackComponent, isStandalone: true, selector: "app-layout-stack", inputs: { align: "align", direction: "direction", itemAlign: "itemAlign", stackOnMobile: ["stackOnMobile", "stackOnMobile", booleanAttribute], stackDivider: ["stackDivider", "stackDivider", booleanAttribute], stackFill: ["stackFill", "stackFill", booleanAttribute] }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<div class=\"layout-stack__track\">\r\n <ng-content />\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box}.layout-stack__track{display:flex;flex-wrap:wrap;width:100%;min-width:0;box-sizing:border-box;align-items:flex-start;gap:.5rem .75rem}:host(.layout-stack--dir-column) .layout-stack__track{flex-direction:column;flex-wrap:nowrap;align-items:stretch}:host(.layout-stack--
|
|
5088
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: LayoutStackComponent, isStandalone: true, selector: "app-layout-stack", inputs: { align: "align", direction: "direction", itemAlign: "itemAlign", stackOnMobile: ["stackOnMobile", "stackOnMobile", booleanAttribute], stackDivider: ["stackDivider", "stackDivider", booleanAttribute], stackFill: ["stackFill", "stackFill", booleanAttribute] }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<div class=\"layout-stack__track\">\r\n <ng-content />\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box}.layout-stack__track{display:flex;flex-wrap:wrap;width:100%;min-width:0;box-sizing:border-box;align-items:flex-start;gap:.5rem .75rem}:host(.layout-stack--dir-column) .layout-stack__track{flex-direction:column;flex-wrap:nowrap;align-items:stretch}:host(.layout-stack--align-start) .layout-stack__track{justify-content:flex-start}:host(.layout-stack--align-center) .layout-stack__track{justify-content:center}:host(.layout-stack--align-end) .layout-stack__track{justify-content:flex-end}:host(.layout-stack--align-space-between) .layout-stack__track{justify-content:space-between}:host(.layout-stack--divider){margin-top:.25rem;padding-top:1rem;border-top:1px solid var(--ui-layout-stack-divider-color, #e8eaed)}:host:not(.layout-stack--fill) .layout-stack__track{align-items:center}:host(:not(.layout-stack--fill))>.layout-stack__track>::ng-deep *{flex:0 0 auto;min-width:0;max-width:100%}:host(.layout-stack--items-stretch) .layout-stack__track{align-items:stretch}:host(.layout-stack--items-start) .layout-stack__track{align-items:flex-start}:host(.layout-stack--items-center) .layout-stack__track{align-items:center}:host(.layout-stack--items-end) .layout-stack__track{align-items:flex-end}:host(.layout-stack--fill:not(.layout-stack--align-space-between)) .layout-stack__track{flex-wrap:nowrap}:host(.layout-stack--fill.layout-stack--align-space-between) .layout-stack__track{flex-wrap:nowrap}:host(.layout-stack--fill)>.layout-stack__track>::ng-deep *{flex:1 1 0;min-width:0;max-width:100%;min-height:0;align-self:auto}:host(.layout-stack--fill.layout-stack--dir-column)>.layout-stack__track>::ng-deep *{flex:0 0 auto;min-height:min-content;min-width:0;width:100%;max-width:100%;align-self:stretch}:host(.layout-stack--fill)>.layout-stack__track>::ng-deep .base-button:not(.base-button--full-width){flex:0 0 auto;align-self:center}@media(max-width:39.98rem){:host(.layout-stack--stack-mobile) .layout-stack__track{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:.45rem .6rem}:host(.layout-stack--stack-mobile.layout-stack--fill)>.layout-stack__track>::ng-deep *{flex:0 0 auto;min-height:min-content;min-width:0;width:100%;max-width:100%;align-self:stretch}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5087
5089
|
}
|
|
5088
5090
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LayoutStackComponent, decorators: [{
|
|
5089
5091
|
type: Component,
|
|
5090
|
-
args: [{ selector: 'app-layout-stack', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-stack__track\">\r\n <ng-content />\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box}.layout-stack__track{display:flex;flex-wrap:wrap;width:100%;min-width:0;box-sizing:border-box;align-items:flex-start;gap:.5rem .75rem}:host(.layout-stack--dir-column) .layout-stack__track{flex-direction:column;flex-wrap:nowrap;align-items:stretch}:host(.layout-stack--
|
|
5092
|
+
args: [{ selector: 'app-layout-stack', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-stack__track\">\r\n <ng-content />\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box}.layout-stack__track{display:flex;flex-wrap:wrap;width:100%;min-width:0;box-sizing:border-box;align-items:flex-start;gap:.5rem .75rem}:host(.layout-stack--dir-column) .layout-stack__track{flex-direction:column;flex-wrap:nowrap;align-items:stretch}:host(.layout-stack--align-start) .layout-stack__track{justify-content:flex-start}:host(.layout-stack--align-center) .layout-stack__track{justify-content:center}:host(.layout-stack--align-end) .layout-stack__track{justify-content:flex-end}:host(.layout-stack--align-space-between) .layout-stack__track{justify-content:space-between}:host(.layout-stack--divider){margin-top:.25rem;padding-top:1rem;border-top:1px solid var(--ui-layout-stack-divider-color, #e8eaed)}:host:not(.layout-stack--fill) .layout-stack__track{align-items:center}:host(:not(.layout-stack--fill))>.layout-stack__track>::ng-deep *{flex:0 0 auto;min-width:0;max-width:100%}:host(.layout-stack--items-stretch) .layout-stack__track{align-items:stretch}:host(.layout-stack--items-start) .layout-stack__track{align-items:flex-start}:host(.layout-stack--items-center) .layout-stack__track{align-items:center}:host(.layout-stack--items-end) .layout-stack__track{align-items:flex-end}:host(.layout-stack--fill:not(.layout-stack--align-space-between)) .layout-stack__track{flex-wrap:nowrap}:host(.layout-stack--fill.layout-stack--align-space-between) .layout-stack__track{flex-wrap:nowrap}:host(.layout-stack--fill)>.layout-stack__track>::ng-deep *{flex:1 1 0;min-width:0;max-width:100%;min-height:0;align-self:auto}:host(.layout-stack--fill.layout-stack--dir-column)>.layout-stack__track>::ng-deep *{flex:0 0 auto;min-height:min-content;min-width:0;width:100%;max-width:100%;align-self:stretch}:host(.layout-stack--fill)>.layout-stack__track>::ng-deep .base-button:not(.base-button--full-width){flex:0 0 auto;align-self:center}@media(max-width:39.98rem){:host(.layout-stack--stack-mobile) .layout-stack__track{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:.45rem .6rem}:host(.layout-stack--stack-mobile.layout-stack--fill)>.layout-stack__track>::ng-deep *{flex:0 0 auto;min-height:min-content;min-width:0;width:100%;max-width:100%;align-self:stretch}}\n"] }]
|
|
5091
5093
|
}], propDecorators: { align: [{
|
|
5092
5094
|
type: Input
|
|
5093
5095
|
}], direction: [{
|