@compsych-ui-components/angular 7.0.18 → 7.0.19
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/esm2022/index.js
CHANGED
|
@@ -5,7 +5,6 @@ import { FooterComponent } from './lib/footer/footer';
|
|
|
5
5
|
import { HeaderNavComponent } from './lib/header-nav/header-nav';
|
|
6
6
|
import { SidebarComponent } from './lib/sidebar/sidebar';
|
|
7
7
|
import { CardComponent } from './lib/card-base/card';
|
|
8
|
-
import { CardGridComponent } from './lib/card-grid/card-grid';
|
|
9
8
|
import { TextInputComponent } from './lib/text-input/text-input';
|
|
10
9
|
import { DialogComponent } from './lib/dialog/dialog';
|
|
11
10
|
import * as i0 from "@angular/core";
|
|
@@ -16,7 +15,6 @@ export { HeaderNavComponent } from './lib/header-nav/header-nav';
|
|
|
16
15
|
export { SidebarComponent } from './lib/sidebar/sidebar';
|
|
17
16
|
export { CardComponent } from './lib/card-base/card';
|
|
18
17
|
export { RippleDirective } from './lib/card-base/ripple.directive';
|
|
19
|
-
export { CardGridComponent } from './lib/card-grid/card-grid';
|
|
20
18
|
export { TextInputComponent } from './lib/text-input/text-input';
|
|
21
19
|
export { DialogComponent } from './lib/dialog/dialog';
|
|
22
20
|
export { DialogService } from './lib/dialog/dialog.service';
|
|
@@ -31,7 +29,6 @@ export class CompsychAngularModule {
|
|
|
31
29
|
HeaderNavComponent,
|
|
32
30
|
SidebarComponent,
|
|
33
31
|
CardComponent,
|
|
34
|
-
CardGridComponent,
|
|
35
32
|
TextInputComponent,
|
|
36
33
|
DialogComponent], exports: [ButtonComponent,
|
|
37
34
|
AccordionComponent,
|
|
@@ -39,7 +36,6 @@ export class CompsychAngularModule {
|
|
|
39
36
|
HeaderNavComponent,
|
|
40
37
|
SidebarComponent,
|
|
41
38
|
CardComponent,
|
|
42
|
-
CardGridComponent,
|
|
43
39
|
TextInputComponent,
|
|
44
40
|
DialogComponent] });
|
|
45
41
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CompsychAngularModule });
|
|
@@ -54,7 +50,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
54
50
|
HeaderNavComponent,
|
|
55
51
|
SidebarComponent,
|
|
56
52
|
CardComponent,
|
|
57
|
-
CardGridComponent,
|
|
58
53
|
TextInputComponent,
|
|
59
54
|
DialogComponent,
|
|
60
55
|
],
|
|
@@ -65,7 +60,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
65
60
|
HeaderNavComponent,
|
|
66
61
|
SidebarComponent,
|
|
67
62
|
CardComponent,
|
|
68
|
-
CardGridComponent,
|
|
69
63
|
TextInputComponent,
|
|
70
64
|
DialogComponent,
|
|
71
65
|
],
|
package/esm2022/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../packages/angular/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../packages/angular/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;;AAEtD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAE/D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAEjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAEjE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAGtD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAE5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,+EAA+E;AAC/E,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAwBlD,MAAM,OAAO,qBAAqB;wGAArB,qBAAqB;yGAArB,qBAAqB,YApB9B,eAAe;YACf,kBAAkB;YAClB,eAAe;YACf,kBAAkB;YAClB,gBAAgB;YAChB,aAAa;YACb,kBAAkB;YAClB,eAAe,aAGf,eAAe;YACf,kBAAkB;YAClB,eAAe;YACf,kBAAkB;YAClB,gBAAgB;YAChB,aAAa;YACb,kBAAkB;YAClB,eAAe;yGAGN,qBAAqB;;4FAArB,qBAAqB;kBAtBjC,QAAQ;mBAAC;oBACR,OAAO,EAAE;wBACP,eAAe;wBACf,kBAAkB;wBAClB,eAAe;wBACf,kBAAkB;wBAClB,gBAAgB;wBAChB,aAAa;wBACb,kBAAkB;wBAClB,eAAe;qBAChB;oBACD,OAAO,EAAE;wBACP,eAAe;wBACf,kBAAkB;wBAClB,eAAe;wBACf,kBAAkB;wBAClB,gBAAgB;wBAChB,aAAa;wBACb,kBAAkB;wBAClB,eAAe;qBAChB;iBACF","sourcesContent":["import { NgModule } from '@angular/core';\r\nimport { ButtonComponent } from './lib/button/button';\r\nimport { AccordionComponent } from './lib/accordion/accordion';\r\nimport { FooterComponent } from './lib/footer/footer';\r\nimport { HeaderNavComponent } from './lib/header-nav/header-nav';\r\nimport { SidebarComponent } from './lib/sidebar/sidebar';\r\nimport { CardComponent } from './lib/card-base/card';\r\nimport { TextInputComponent } from './lib/text-input/text-input';\r\nimport { DialogComponent } from './lib/dialog/dialog';\r\n\r\nexport { ButtonComponent } from './lib/button/button';\r\nexport type { ButtonVariant, ButtonSize, ButtonType } from './lib/button/button';\r\nexport { AccordionComponent } from './lib/accordion/accordion';\r\nexport type { AccordionItem, AccordionButton, AccordionVariant, NestedAccordionItem } from './lib/accordion/accordion-types';\r\nexport { FooterComponent } from './lib/footer/footer';\r\nexport type { FooterLink } from './lib/footer/footer';\r\nexport { HeaderNavComponent } from './lib/header-nav/header-nav';\r\nexport type { HeaderNavLevel, NavAction } from './lib/header-nav/header-nav';\r\nexport { SidebarComponent } from './lib/sidebar/sidebar';\r\nexport type { SidebarItem } from './lib/sidebar/sidebar';\r\nexport { CardComponent } from './lib/card-base/card';\r\nexport type { CardVariant, CardAppearance, CardRadius, CardPadding, CardOrientation, CardSize, CardHeadingLevel, CardCategoryStyle, CardIconStyle } from './lib/card-base/card';\r\nexport { RippleDirective } from './lib/card-base/ripple.directive';\r\nexport { TextInputComponent } from './lib/text-input/text-input';\r\nexport type { TextInputSize, TextInputType, TextInputLabelButton } from './lib/text-input/text-input';\r\nexport { DialogComponent } from './lib/dialog/dialog';\r\nexport type { DialogCloseReason } from './lib/dialog/dialog';\r\nexport type { DialogVariant } from './lib/dialog/dialog-types';\r\nexport { DialogService } from './lib/dialog/dialog.service';\r\nexport type { CompsychDialogConfig } from './lib/dialog/dialog.service';\r\nexport { CompsychDialogRef } from './lib/dialog/dialog-ref';\r\n// Re-exported from CDK so opened content components can inject the data token.\r\nexport { DIALOG_DATA } from '@angular/cdk/dialog';\r\n\r\n@NgModule({\r\n imports: [\r\n ButtonComponent,\r\n AccordionComponent,\r\n FooterComponent,\r\n HeaderNavComponent,\r\n SidebarComponent,\r\n CardComponent,\r\n TextInputComponent,\r\n DialogComponent,\r\n ],\r\n exports: [\r\n ButtonComponent,\r\n AccordionComponent,\r\n FooterComponent,\r\n HeaderNavComponent,\r\n SidebarComponent,\r\n CardComponent,\r\n TextInputComponent,\r\n DialogComponent,\r\n ],\r\n})\r\nexport class CompsychAngularModule {}\r\n"]}
|
package/index.d.ts
CHANGED
|
@@ -5,9 +5,8 @@ import * as i3 from "./lib/footer/footer";
|
|
|
5
5
|
import * as i4 from "./lib/header-nav/header-nav";
|
|
6
6
|
import * as i5 from "./lib/sidebar/sidebar";
|
|
7
7
|
import * as i6 from "./lib/card-base/card";
|
|
8
|
-
import * as i7 from "./lib/
|
|
9
|
-
import * as i8 from "./lib/
|
|
10
|
-
import * as i9 from "./lib/dialog/dialog";
|
|
8
|
+
import * as i7 from "./lib/text-input/text-input";
|
|
9
|
+
import * as i8 from "./lib/dialog/dialog";
|
|
11
10
|
export { ButtonComponent } from './lib/button/button';
|
|
12
11
|
export type { ButtonVariant, ButtonSize, ButtonType } from './lib/button/button';
|
|
13
12
|
export { AccordionComponent } from './lib/accordion/accordion';
|
|
@@ -21,8 +20,6 @@ export type { SidebarItem } from './lib/sidebar/sidebar';
|
|
|
21
20
|
export { CardComponent } from './lib/card-base/card';
|
|
22
21
|
export type { CardVariant, CardAppearance, CardRadius, CardPadding, CardOrientation, CardSize, CardHeadingLevel, CardCategoryStyle, CardIconStyle } from './lib/card-base/card';
|
|
23
22
|
export { RippleDirective } from './lib/card-base/ripple.directive';
|
|
24
|
-
export { CardGridComponent } from './lib/card-grid/card-grid';
|
|
25
|
-
export type { CardGridLayout } from './lib/card-grid/card-grid';
|
|
26
23
|
export { TextInputComponent } from './lib/text-input/text-input';
|
|
27
24
|
export type { TextInputSize, TextInputType, TextInputLabelButton } from './lib/text-input/text-input';
|
|
28
25
|
export { DialogComponent } from './lib/dialog/dialog';
|
|
@@ -34,6 +31,6 @@ export { CompsychDialogRef } from './lib/dialog/dialog-ref';
|
|
|
34
31
|
export { DIALOG_DATA } from '@angular/cdk/dialog';
|
|
35
32
|
export declare class CompsychAngularModule {
|
|
36
33
|
static ɵfac: i0.ɵɵFactoryDeclaration<CompsychAngularModule, never>;
|
|
37
|
-
static ɵmod: i0.ɵɵNgModuleDeclaration<CompsychAngularModule, never, [typeof i1.ButtonComponent, typeof i2.AccordionComponent, typeof i3.FooterComponent, typeof i4.HeaderNavComponent, typeof i5.SidebarComponent, typeof i6.CardComponent, typeof i7.
|
|
34
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<CompsychAngularModule, never, [typeof i1.ButtonComponent, typeof i2.AccordionComponent, typeof i3.FooterComponent, typeof i4.HeaderNavComponent, typeof i5.SidebarComponent, typeof i6.CardComponent, typeof i7.TextInputComponent, typeof i8.DialogComponent], [typeof i1.ButtonComponent, typeof i2.AccordionComponent, typeof i3.FooterComponent, typeof i4.HeaderNavComponent, typeof i5.SidebarComponent, typeof i6.CardComponent, typeof i7.TextInputComponent, typeof i8.DialogComponent]>;
|
|
38
35
|
static ɵinj: i0.ɵɵInjectorDeclaration<CompsychAngularModule>;
|
|
39
36
|
}
|
package/package.json
CHANGED
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component, ViewEncapsulation, input } from '@angular/core';
|
|
2
|
-
import * as i0 from "@angular/core";
|
|
3
|
-
/**
|
|
4
|
-
* Card Grid — the layout primitive for the Cards organism.
|
|
5
|
-
*
|
|
6
|
-
* Figma: Core Components — "Card Grid" base (file VFBn7KCDy3FSIlvhNo3ylq, 59621:14856).
|
|
7
|
-
*
|
|
8
|
-
* Arranges projected cards into one of the design's layouts: full-width,
|
|
9
|
-
* 2/3/4/5-column even grids, a Bento grid (one feature cell + a stacked column),
|
|
10
|
-
* or 2/3-column masonry. A 16px gutter (sys-padding-16) throughout. Cards are
|
|
11
|
-
* projected, so any card type can fill the cells.
|
|
12
|
-
*
|
|
13
|
-
* <compsych-card-grid layout="3-col">
|
|
14
|
-
* <compsych-content-card … /> …
|
|
15
|
-
* </compsych-card-grid>
|
|
16
|
-
*
|
|
17
|
-
* Uses `ViewEncapsulation.None` with `cmp-card-grid`-namespaced selectors so it
|
|
18
|
-
* can lay out the *projected* card children (bento span, masonry flow), which
|
|
19
|
-
* emulated encapsulation cannot reach.
|
|
20
|
-
*/
|
|
21
|
-
export class CardGridComponent {
|
|
22
|
-
layout = input('3-col', ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
|
|
23
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CardGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
24
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: CardGridComponent, isStandalone: true, selector: "compsych-card-grid", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.cmp-card-grid--full": "layout() === 'full'", "class.cmp-card-grid--2-col": "layout() === '2-col'", "class.cmp-card-grid--3-col": "layout() === '3-col'", "class.cmp-card-grid--4-col": "layout() === '4-col'", "class.cmp-card-grid--5-col": "layout() === '5-col'", "class.cmp-card-grid--bento": "layout() === 'bento'", "class.cmp-card-grid--masonry-2": "layout() === 'masonry-2'", "class.cmp-card-grid--masonry-3": "layout() === 'masonry-3'" }, classAttribute: "cmp-card-grid" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".cmp-card-grid{--cmp-grid-gap: var(--spacing-padding-sys-padding-16);display:grid;gap:var(--cmp-grid-gap);width:100%;align-items:stretch}.cmp-card-grid--full{grid-template-columns:1fr}.cmp-card-grid--2-col{grid-template-columns:repeat(2,minmax(0,1fr))}.cmp-card-grid--3-col{grid-template-columns:repeat(3,minmax(0,1fr))}.cmp-card-grid--4-col{grid-template-columns:repeat(4,minmax(0,1fr))}.cmp-card-grid--5-col{grid-template-columns:repeat(5,minmax(0,1fr))}.cmp-card-grid--bento{grid-template-columns:2fr 1fr;grid-auto-rows:1fr}.cmp-card-grid--bento>:first-child{grid-row:span 2}.cmp-card-grid--masonry-2,.cmp-card-grid--masonry-3{display:block;column-gap:var(--cmp-grid-gap)}.cmp-card-grid--masonry-2{column-count:2}.cmp-card-grid--masonry-3{column-count:3}.cmp-card-grid--masonry-2>*,.cmp-card-grid--masonry-3>*{break-inside:avoid;margin-bottom:var(--cmp-grid-gap)}@media(max-width:56.25rem){.cmp-card-grid--3-col,.cmp-card-grid--4-col,.cmp-card-grid--5-col{grid-template-columns:repeat(2,minmax(0,1fr))}.cmp-card-grid--masonry-3{column-count:2}.cmp-card-grid--bento{grid-template-columns:1fr;grid-auto-rows:auto}.cmp-card-grid--bento>:first-child{grid-row:auto}}@media(max-width:35rem){.cmp-card-grid--2-col,.cmp-card-grid--3-col,.cmp-card-grid--4-col,.cmp-card-grid--5-col{grid-template-columns:1fr}.cmp-card-grid--masonry-2,.cmp-card-grid--masonry-3{column-count:1}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
25
|
-
}
|
|
26
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CardGridComponent, decorators: [{
|
|
27
|
-
type: Component,
|
|
28
|
-
args: [{ selector: 'compsych-card-grid', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `<ng-content />`, host: {
|
|
29
|
-
class: 'cmp-card-grid',
|
|
30
|
-
'[class.cmp-card-grid--full]': "layout() === 'full'",
|
|
31
|
-
'[class.cmp-card-grid--2-col]': "layout() === '2-col'",
|
|
32
|
-
'[class.cmp-card-grid--3-col]': "layout() === '3-col'",
|
|
33
|
-
'[class.cmp-card-grid--4-col]': "layout() === '4-col'",
|
|
34
|
-
'[class.cmp-card-grid--5-col]': "layout() === '5-col'",
|
|
35
|
-
'[class.cmp-card-grid--bento]': "layout() === 'bento'",
|
|
36
|
-
'[class.cmp-card-grid--masonry-2]': "layout() === 'masonry-2'",
|
|
37
|
-
'[class.cmp-card-grid--masonry-3]': "layout() === 'masonry-3'",
|
|
38
|
-
}, styles: [".cmp-card-grid{--cmp-grid-gap: var(--spacing-padding-sys-padding-16);display:grid;gap:var(--cmp-grid-gap);width:100%;align-items:stretch}.cmp-card-grid--full{grid-template-columns:1fr}.cmp-card-grid--2-col{grid-template-columns:repeat(2,minmax(0,1fr))}.cmp-card-grid--3-col{grid-template-columns:repeat(3,minmax(0,1fr))}.cmp-card-grid--4-col{grid-template-columns:repeat(4,minmax(0,1fr))}.cmp-card-grid--5-col{grid-template-columns:repeat(5,minmax(0,1fr))}.cmp-card-grid--bento{grid-template-columns:2fr 1fr;grid-auto-rows:1fr}.cmp-card-grid--bento>:first-child{grid-row:span 2}.cmp-card-grid--masonry-2,.cmp-card-grid--masonry-3{display:block;column-gap:var(--cmp-grid-gap)}.cmp-card-grid--masonry-2{column-count:2}.cmp-card-grid--masonry-3{column-count:3}.cmp-card-grid--masonry-2>*,.cmp-card-grid--masonry-3>*{break-inside:avoid;margin-bottom:var(--cmp-grid-gap)}@media(max-width:56.25rem){.cmp-card-grid--3-col,.cmp-card-grid--4-col,.cmp-card-grid--5-col{grid-template-columns:repeat(2,minmax(0,1fr))}.cmp-card-grid--masonry-3{column-count:2}.cmp-card-grid--bento{grid-template-columns:1fr;grid-auto-rows:auto}.cmp-card-grid--bento>:first-child{grid-row:auto}}@media(max-width:35rem){.cmp-card-grid--2-col,.cmp-card-grid--3-col,.cmp-card-grid--4-col,.cmp-card-grid--5-col{grid-template-columns:1fr}.cmp-card-grid--masonry-2,.cmp-card-grid--masonry-3{column-count:1}}\n"] }]
|
|
39
|
-
}], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }] } });
|
|
40
|
-
//# sourceMappingURL=card-grid.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"card-grid.js","sourceRoot":"","sources":["../../../../../../packages/angular/src/lib/card-grid/card-grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;;AAa7F;;;;;;;;;;;;;;;;;GAiBG;AAoBH,MAAM,OAAO,iBAAiB;IACnB,MAAM,GAAG,KAAK,CAAiB,OAAO,6EAAC,CAAC;wGADtC,iBAAiB;4FAAjB,iBAAiB,8sBAdlB,gBAAgB;;4FAcf,iBAAiB;kBAnB7B,SAAS;+BACE,oBAAoB,cAClB,IAAI,mBACC,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,YAC3B,gBAAgB,QAEpB;wBACJ,KAAK,EAAE,eAAe;wBACtB,6BAA6B,EAAE,qBAAqB;wBACpD,8BAA8B,EAAE,sBAAsB;wBACtD,8BAA8B,EAAE,sBAAsB;wBACtD,8BAA8B,EAAE,sBAAsB;wBACtD,8BAA8B,EAAE,sBAAsB;wBACtD,8BAA8B,EAAE,sBAAsB;wBACtD,kCAAkC,EAAE,0BAA0B;wBAC9D,kCAAkC,EAAE,0BAA0B;qBAC/D","sourcesContent":["import { ChangeDetectionStrategy, Component, ViewEncapsulation, input } from '@angular/core';\r\n\r\n/** Grid arrangement. Mirrors the Figma \"Card Grid\" base type property. */\r\nexport type CardGridLayout =\r\n | 'full'\r\n | '2-col'\r\n | '3-col'\r\n | '4-col'\r\n | '5-col'\r\n | 'bento'\r\n | 'masonry-2'\r\n | 'masonry-3';\r\n\r\n/**\r\n * Card Grid — the layout primitive for the Cards organism.\r\n *\r\n * Figma: Core Components — \"Card Grid\" base (file VFBn7KCDy3FSIlvhNo3ylq, 59621:14856).\r\n *\r\n * Arranges projected cards into one of the design's layouts: full-width,\r\n * 2/3/4/5-column even grids, a Bento grid (one feature cell + a stacked column),\r\n * or 2/3-column masonry. A 16px gutter (sys-padding-16) throughout. Cards are\r\n * projected, so any card type can fill the cells.\r\n *\r\n * <compsych-card-grid layout=\"3-col\">\r\n * <compsych-content-card … /> …\r\n * </compsych-card-grid>\r\n *\r\n * Uses `ViewEncapsulation.None` with `cmp-card-grid`-namespaced selectors so it\r\n * can lay out the *projected* card children (bento span, masonry flow), which\r\n * emulated encapsulation cannot reach.\r\n */\r\n@Component({\r\n selector: 'compsych-card-grid',\r\n standalone: true,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n template: `<ng-content />`,\r\n styleUrl: './card-grid.css',\r\n host: {\r\n class: 'cmp-card-grid',\r\n '[class.cmp-card-grid--full]': \"layout() === 'full'\",\r\n '[class.cmp-card-grid--2-col]': \"layout() === '2-col'\",\r\n '[class.cmp-card-grid--3-col]': \"layout() === '3-col'\",\r\n '[class.cmp-card-grid--4-col]': \"layout() === '4-col'\",\r\n '[class.cmp-card-grid--5-col]': \"layout() === '5-col'\",\r\n '[class.cmp-card-grid--bento]': \"layout() === 'bento'\",\r\n '[class.cmp-card-grid--masonry-2]': \"layout() === 'masonry-2'\",\r\n '[class.cmp-card-grid--masonry-3]': \"layout() === 'masonry-3'\",\r\n },\r\n})\r\nexport class CardGridComponent {\r\n readonly layout = input<CardGridLayout>('3-col');\r\n}\r\n"]}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import * as i0 from "@angular/core";
|
|
2
|
-
/** Grid arrangement. Mirrors the Figma "Card Grid" base type property. */
|
|
3
|
-
export type CardGridLayout = 'full' | '2-col' | '3-col' | '4-col' | '5-col' | 'bento' | 'masonry-2' | 'masonry-3';
|
|
4
|
-
/**
|
|
5
|
-
* Card Grid — the layout primitive for the Cards organism.
|
|
6
|
-
*
|
|
7
|
-
* Figma: Core Components — "Card Grid" base (file VFBn7KCDy3FSIlvhNo3ylq, 59621:14856).
|
|
8
|
-
*
|
|
9
|
-
* Arranges projected cards into one of the design's layouts: full-width,
|
|
10
|
-
* 2/3/4/5-column even grids, a Bento grid (one feature cell + a stacked column),
|
|
11
|
-
* or 2/3-column masonry. A 16px gutter (sys-padding-16) throughout. Cards are
|
|
12
|
-
* projected, so any card type can fill the cells.
|
|
13
|
-
*
|
|
14
|
-
* <compsych-card-grid layout="3-col">
|
|
15
|
-
* <compsych-content-card … /> …
|
|
16
|
-
* </compsych-card-grid>
|
|
17
|
-
*
|
|
18
|
-
* Uses `ViewEncapsulation.None` with `cmp-card-grid`-namespaced selectors so it
|
|
19
|
-
* can lay out the *projected* card children (bento span, masonry flow), which
|
|
20
|
-
* emulated encapsulation cannot reach.
|
|
21
|
-
*/
|
|
22
|
-
export declare class CardGridComponent {
|
|
23
|
-
readonly layout: import("@angular/core").InputSignal<CardGridLayout>;
|
|
24
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<CardGridComponent, never>;
|
|
25
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<CardGridComponent, "compsych-card-grid", never, { "layout": { "alias": "layout"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
26
|
-
}
|