@ni/ok-components 1.3.2 → 1.3.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/dist/all-components-bundle.js +30 -10
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +3665 -3644
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/fv/card/styles.js +28 -4
- package/dist/esm/fv/card/styles.js.map +1 -1
- package/dist/esm/fv/card/template.js +2 -6
- package/dist/esm/fv/card/template.js.map +1 -1
- package/package.json +1 -1
|
@@ -20,8 +20,10 @@ export const styles = css `
|
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
.card-shell {
|
|
23
|
-
display:
|
|
23
|
+
display: grid;
|
|
24
24
|
width: 100%;
|
|
25
|
+
height: 100%;
|
|
26
|
+
min-height: inherit;
|
|
25
27
|
box-sizing: border-box;
|
|
26
28
|
padding: ${standardPadding};
|
|
27
29
|
border-radius: 8px;
|
|
@@ -39,10 +41,27 @@ export const styles = css `
|
|
|
39
41
|
--ni-private-card-button-border-selected-color: transparent;
|
|
40
42
|
}
|
|
41
43
|
|
|
44
|
+
.card-button-shell::part(control) {
|
|
45
|
+
display: flex;
|
|
46
|
+
flex-direction: column;
|
|
47
|
+
align-items: stretch;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.card-shell > .card-layout,
|
|
51
|
+
.card-shell > .card-button-content,
|
|
52
|
+
.card-button-content > .card-layout {
|
|
53
|
+
height: 100%;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.card-button-content {
|
|
57
|
+
flex: 1 1 auto;
|
|
58
|
+
}
|
|
59
|
+
|
|
42
60
|
.card-layout {
|
|
43
61
|
display: grid;
|
|
44
62
|
grid-template-columns: minmax(0, 1fr);
|
|
45
63
|
align-items: start;
|
|
64
|
+
min-height: 100%;
|
|
46
65
|
}
|
|
47
66
|
|
|
48
67
|
.card-layout.has-media {
|
|
@@ -77,10 +96,11 @@ export const styles = css `
|
|
|
77
96
|
|
|
78
97
|
.main-region {
|
|
79
98
|
min-width: 0;
|
|
80
|
-
display:
|
|
81
|
-
|
|
99
|
+
display: flex;
|
|
100
|
+
flex-direction: column;
|
|
82
101
|
gap: ${mediumPadding};
|
|
83
102
|
text-align: left;
|
|
103
|
+
align-self: stretch;
|
|
84
104
|
}
|
|
85
105
|
|
|
86
106
|
.header-row {
|
|
@@ -141,6 +161,7 @@ export const styles = css `
|
|
|
141
161
|
align-items: center;
|
|
142
162
|
justify-content: space-between;
|
|
143
163
|
gap: ${mediumPadding};
|
|
164
|
+
margin-top: auto;
|
|
144
165
|
font: ${tooltipCaptionFont};
|
|
145
166
|
color: ${tooltipCaptionFontColor};
|
|
146
167
|
text-transform: uppercase;
|
|
@@ -167,7 +188,10 @@ export const styles = css `
|
|
|
167
188
|
display: block;
|
|
168
189
|
}
|
|
169
190
|
|
|
170
|
-
::slotted([slot='badges'])
|
|
191
|
+
::slotted([slot='badges']) {
|
|
192
|
+
max-width: 100%;
|
|
193
|
+
}
|
|
194
|
+
|
|
171
195
|
::slotted([slot='footer-start']),
|
|
172
196
|
::slotted([slot='footer-end']) {
|
|
173
197
|
display: block;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/card/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,QAAQ,EACR,aAAa,EACb,uBAAuB,EACvB,4BAA4B,EAC5B,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,aAAa,EACb,sBAAsB,EACtB,YAAY,EACZ,UAAU,EACV,eAAe,EACf,YAAY,EACZ,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EAC1B,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,2DAA2D,CAAC;AAC/F,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;;;;;;;UASZ,OAAO,CAAC,OAAO,CAAC
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/card/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,QAAQ,EACR,aAAa,EACb,uBAAuB,EACvB,4BAA4B,EAC5B,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,aAAa,EACb,sBAAsB,EACtB,YAAY,EACZ,UAAU,EACV,eAAe,EACf,YAAY,EACZ,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EAC1B,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,2DAA2D,CAAC;AAC/F,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;;;;;;;UASZ,OAAO,CAAC,OAAO,CAAC;;;;;;;;;;;;uBAYH,eAAe;;;;;;;mCAOH,UAAU;+BACd,UAAU;6BACZ,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAgCb,eAAe;;;;;;;;8BAQX,aAAa,MAAM,aAAa;;;;;;;;;;;;;;;qBAezC,4BAA4B;oBAC7B,uBAAuB;;;;;;;;mBAQxB,aAAa;;;;;;;mBAOb,aAAa;;;;;;;;;;;;;;;;;;;oBAmBZ,uBAAuB;qBACtB,4BAA4B;;;;oBAI7B,YAAY;qBACX,iBAAiB;;;;;mBAKnB,YAAY;;;;;;;;;mBASZ,YAAY;qBACV,aAAa;oBACd,QAAQ;;;;;oBAKR,QAAQ;qBACP,aAAa;;;;;;;;mBAQf,aAAa;;oBAEZ,kBAAkB;qBACjB,uBAAuB;;;;;;;;;;;;;;;;;mBAiBzB,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;oCAyBK,gBAAgB;;;;;;;;;4BASxB,gBAAgB;;;;;;;;;;;CAW3C;KACA,aAAa,CACV,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;;wCAG6B,eAAe;;;;;;;;;;;;oCAYnB,gBAAgB;;;SAG3C,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;wCAG6B,sBAAsB;;;;SAIrD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n bodyFont,\n bodyFontColor,\n bodyPlus1EmphasizedFont,\n bodyPlus1EmphasizedFontColor,\n borderHoverColor,\n cardBorderColor,\n controlHeight,\n mediumPadding,\n sectionBackgroundColor,\n smallPadding,\n smallDelay,\n standardPadding,\n subtitleFont,\n subtitleFontColor,\n tooltipCaptionFont,\n tooltipCaptionFontColor\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { appearanceBehavior } from '@ni/nimble-components/dist/esm/utilities/style/appearance';\nimport { display } from '../../utilities/style/display';\nimport { FvCardAppearance } from './types';\n\nexport const styles = css`\n ${display('block')}\n\n :host {\n display: block;\n }\n\n @layer base, hover, focusVisible, active, disabled, top;\n\n @layer base {\n ${display('block')}\n\n :host {\n display: block;\n }\n\n .card-shell {\n display: grid;\n width: 100%;\n height: 100%;\n min-height: inherit;\n box-sizing: border-box;\n padding: ${standardPadding};\n border-radius: 8px;\n }\n\n .card-button-shell {\n overflow: clip;\n transition:\n background-color ${smallDelay} ease-in-out,\n border-color ${smallDelay} ease-in-out,\n box-shadow ${smallDelay} ease-in-out;\n --ni-private-card-button-background-hover-color: transparent;\n --ni-private-card-button-background-active-color: transparent;\n --ni-private-card-button-border-active-color: transparent;\n --ni-private-card-button-border-selected-color: transparent;\n }\n\n .card-button-shell::part(control) {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n }\n\n .card-shell > .card-layout,\n .card-shell > .card-button-content,\n .card-button-content > .card-layout {\n height: 100%;\n }\n\n .card-button-content {\n flex: 1 1 auto;\n }\n\n .card-layout {\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n align-items: start;\n min-height: 100%;\n }\n\n .card-layout.has-media {\n grid-template-columns: auto minmax(0, 1fr);\n column-gap: ${standardPadding};\n }\n\n .media-region {\n display: flex;\n align-items: flex-start;\n justify-content: center;\n align-self: start;\n min-width: calc(${controlHeight} + ${mediumPadding});\n }\n\n .media-region slot[name='icon'] {\n display: block;\n }\n\n .initials-tile {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 8px;\n background: rgba(0, 0, 0, 0.06);\n color: ${bodyPlus1EmphasizedFontColor};\n font: ${bodyPlus1EmphasizedFont};\n text-transform: uppercase;\n }\n\n .main-region {\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: ${mediumPadding};\n text-align: left;\n align-self: stretch;\n }\n\n .header-row {\n display: flex;\n gap: ${mediumPadding};\n align-items: flex-start;\n justify-content: space-between;\n min-width: 0;\n }\n\n .title-group,\n .body,\n .footer,\n .actions {\n min-width: 0;\n }\n\n .title-group {\n display: grid;\n gap: 2px;\n }\n\n .title {\n font: ${bodyPlus1EmphasizedFont};\n color: ${bodyPlus1EmphasizedFontColor};\n }\n\n .subtitle {\n font: ${subtitleFont};\n color: ${subtitleFontColor};\n }\n\n .badges {\n display: inline-flex;\n gap: ${smallPadding};\n align-items: center;\n justify-content: flex-end;\n flex-wrap: wrap;\n text-align: right;\n }\n\n .body {\n display: grid;\n gap: ${smallPadding};\n color: ${bodyFontColor};\n font: ${bodyFont};\n text-align: left;\n }\n\n .description {\n font: ${bodyFont};\n color: ${bodyFontColor};\n text-align: left;\n }\n\n .footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ${mediumPadding};\n margin-top: auto;\n font: ${tooltipCaptionFont};\n color: ${tooltipCaptionFontColor};\n text-transform: uppercase;\n }\n\n .footer-start,\n .footer-end {\n min-width: 0;\n }\n\n .footer-end {\n text-align: right;\n }\n\n .actions {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: ${smallPadding};\n flex-wrap: wrap;\n }\n\n ::slotted([slot='icon']) {\n display: block;\n }\n\n ::slotted([slot='badges']) {\n max-width: 100%;\n }\n\n ::slotted([slot='footer-start']),\n ::slotted([slot='footer-end']) {\n display: block;\n max-width: 100%;\n }\n\n .actions ::slotted(*) {\n flex: 0 0 auto;\n }\n }\n\n @layer hover {\n .card-button-shell:hover {\n box-shadow: 0 0 0 2px ${borderHoverColor};\n }\n }\n\n @layer focusVisible {}\n\n @layer active {\n .card-button-shell:active {\n box-shadow: none;\n border-color: ${borderHoverColor};\n }\n }\n\n @layer disabled {\n .card-button-shell[disabled] {\n box-shadow: none;\n }\n }\n\n @layer top {}\n`\n.withBehaviors(\n appearanceBehavior(\n FvCardAppearance.outline,\n css`\n @layer base {\n .card-shell {\n border: 2px solid ${cardBorderColor};\n }\n }\n\n @layer hover {\n .card-button-shell:hover {\n border-color: transparent;\n }\n }\n\n @layer active {\n .card-button-shell:hover:active {\n border-color: ${borderHoverColor};\n }\n }\n `\n ),\n appearanceBehavior(\n FvCardAppearance.block,\n css`\n @layer base {\n .card-shell {\n background-color: ${sectionBackgroundColor};\n border: 2px solid transparent;\n }\n }\n `\n )\n);\n"]}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { html, when } from '@ni/fast-element';
|
|
2
|
-
import { cardTag } from '@ni/nimble-components/dist/esm/card';
|
|
3
2
|
import { cardButtonTag } from '@ni/nimble-components/dist/esm/card-button';
|
|
4
3
|
import { FvCardInteractionMode } from './types';
|
|
5
4
|
const cardContentTemplate = html `
|
|
@@ -115,12 +114,9 @@ export const template = html `
|
|
|
115
114
|
</div>
|
|
116
115
|
</${cardButtonTag}>
|
|
117
116
|
`, html `
|
|
118
|
-
|
|
119
|
-
class="card-shell card-static-shell"
|
|
120
|
-
part="card-shell"
|
|
121
|
-
>
|
|
117
|
+
<div class="card-shell card-static-shell" part="card-shell">
|
|
122
118
|
${cardContentTemplate}
|
|
123
|
-
|
|
119
|
+
</div>
|
|
124
120
|
`)}
|
|
125
121
|
`;
|
|
126
122
|
//# sourceMappingURL=template.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/fv/card/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/fv/card/template.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, when } from '@ni/fast-element';\nimport { cardButtonTag } from '@ni/nimble-components/dist/esm/card-button';\nimport { FvCardInteractionMode } from './types';\nimport type { FvCard } from '.';\n\nconst cardContentTemplate = html<FvCard>`\n <div class=\"card-layout ${x => (x.hasMedia ? 'has-media' : 'no-media')}\">\n ${when(\n x => x.hasMedia,\n html<FvCard>`\n <div class=\"media-region\" part=\"media-region\">\n ${when(\n x => x.showInitials,\n html<FvCard>`\n <div class=\"initials-tile\" part=\"initials-tile\" aria-hidden=\"true\">\n ${x => x.initialsText}\n </div>\n `\n )}\n <slot\n name=\"icon\"\n @slotchange=\"${(x, c) => x.handleIconSlotChange(c.event)}\"\n ></slot>\n </div>\n `\n )}\n <div class=\"main-region\" part=\"main-region\">\n <div class=\"header-row\" part=\"header-row\">\n <div class=\"title-group\" part=\"title-group\">\n <div class=\"title\" part=\"title\">${x => x.title}</div>\n ${when(\n x => x.subtitle.length > 0,\n html<FvCard>`\n <div class=\"subtitle\" part=\"subtitle\">${x => x.subtitle}</div>\n `\n )}\n </div>\n ${when(\n x => x.hasBadgesContent,\n html<FvCard>`\n <div class=\"badges\" part=\"badges\">\n <slot\n name=\"badges\"\n @slotchange=\"${(x, c) => x.handleBadgesSlotChange(c.event)}\"\n ></slot>\n </div>\n `\n )}\n ${when(\n x => !x.hasBadgesContent,\n html<FvCard>`\n <slot\n name=\"badges\"\n hidden\n @slotchange=\"${(x, c) => x.handleBadgesSlotChange(c.event)}\"\n ></slot>\n `\n )}\n </div>\n ${when(\n x => x.showBody,\n html<FvCard>`\n <div class=\"body\" part=\"body\">\n ${when(\n x => x.description.length > 0,\n html<FvCard>`\n <div class=\"description\" part=\"description\">${x => x.description}</div>\n `\n )}\n <slot\n @slotchange=\"${(x, c) => x.handleDefaultSlotChange(c.event)}\"\n ></slot>\n </div>\n `\n )}\n ${when(\n x => !x.showBody,\n html<FvCard>`\n <slot\n hidden\n @slotchange=\"${(x, c) => x.handleDefaultSlotChange(c.event)}\"\n ></slot>\n `\n )}\n ${when(\n x => x.showFooter,\n html<FvCard>`\n <div class=\"footer\" part=\"footer\">\n <div class=\"footer-start\" part=\"footer-start\">\n <slot\n name=\"footer-start\"\n @slotchange=\"${(x, c) => x.handleFooterStartSlotChange(c.event)}\"\n ></slot>\n </div>\n <div class=\"footer-end\" part=\"footer-end\">\n <slot\n name=\"footer-end\"\n @slotchange=\"${(x, c) => x.handleFooterEndSlotChange(c.event)}\"\n ></slot>\n </div>\n </div>\n `\n )}\n ${when(\n x => !x.showFooter,\n html<FvCard>`\n <slot\n name=\"footer-start\"\n hidden\n @slotchange=\"${(x, c) => x.handleFooterStartSlotChange(c.event)}\"\n ></slot>\n <slot\n name=\"footer-end\"\n hidden\n @slotchange=\"${(x, c) => x.handleFooterEndSlotChange(c.event)}\"\n ></slot>\n `\n )}\n ${when(\n x => x.showActions,\n html<FvCard>`\n <div class=\"actions\" part=\"actions\">\n <slot\n name=\"actions\"\n @slotchange=\"${(x, c) => x.handleActionsSlotChange(c.event)}\"\n ></slot>\n </div>\n `\n )}\n ${when(\n x => !x.showActions,\n html<FvCard>`\n <slot\n name=\"actions\"\n hidden\n @slotchange=\"${(x, c) => x.handleActionsSlotChange(c.event)}\"\n ></slot>\n `\n )}\n </div>\n </div>\n`;\n\nexport const template = html<FvCard>`\n ${when(\n x => x.interactionMode === FvCardInteractionMode.card,\n html<FvCard>`\n <${cardButtonTag}\n class=\"card-shell card-button-shell\"\n part=\"card-shell\"\n ?disabled=\"${x => x.disabled}\"\n >\n <div class=\"card-button-content\">\n ${cardContentTemplate}\n </div>\n </${cardButtonTag}>\n `,\n html<FvCard>`\n <div class=\"card-shell card-static-shell\" part=\"card-shell\">\n ${cardContentTemplate}\n </div>\n `\n )}\n`;\n"]}
|