@ni/ok-components 1.7.0 → 1.8.0
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 +109 -6
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +100 -55
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/custom-elements.json +211 -119
- package/dist/custom-elements.md +35 -31
- package/dist/esm/fv/summary-panel/index.d.ts +18 -1
- package/dist/esm/fv/summary-panel/index.js +60 -6
- package/dist/esm/fv/summary-panel/index.js.map +1 -1
- package/dist/esm/fv/summary-panel/styles.js +20 -1
- package/dist/esm/fv/summary-panel/styles.js.map +1 -1
- package/dist/esm/fv/summary-panel/template.js +7 -2
- package/dist/esm/fv/summary-panel/template.js.map +1 -1
- package/dist/esm/fv/summary-panel/types.d.ts +5 -0
- package/dist/esm/fv/summary-panel/types.js +5 -0
- package/dist/esm/fv/summary-panel/types.js.map +1 -0
- package/dist/esm/fv/summary-panel-tile/index.d.ts +2 -0
- package/dist/esm/fv/summary-panel-tile/index.js +5 -0
- package/dist/esm/fv/summary-panel-tile/index.js.map +1 -1
- package/dist/esm/fv/summary-panel-tile/styles.js +18 -0
- package/dist/esm/fv/summary-panel-tile/styles.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { css } from '@ni/fast-element';
|
|
2
|
-
import { standardPadding } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
|
|
2
|
+
import { mediumPadding, smallPadding, standardPadding } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
|
|
3
3
|
import { display } from '../../utilities/style/display';
|
|
4
4
|
export const styles = css `
|
|
5
5
|
@layer base, hover, focusVisible, active, disabled, top;
|
|
@@ -26,6 +26,25 @@ export const styles = css `
|
|
|
26
26
|
display: none;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
+
:host([size='compact']) .summary-item-container {
|
|
30
|
+
flex-wrap: nowrap;
|
|
31
|
+
box-sizing: border-box;
|
|
32
|
+
overflow-x: auto;
|
|
33
|
+
overflow-y: hidden;
|
|
34
|
+
gap: ${mediumPadding};
|
|
35
|
+
padding: calc(${standardPadding} - ${smallPadding});
|
|
36
|
+
scrollbar-width: none;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
:host([size='compact']) .summary-item-container.has-overflow {
|
|
40
|
+
-webkit-mask-image: linear-gradient(to right, black calc(100% - 48px), transparent);
|
|
41
|
+
mask-image: linear-gradient(to right, black calc(100% - 48px), transparent);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
:host([size='compact']) .summary-item-container::-webkit-scrollbar {
|
|
45
|
+
display: none;
|
|
46
|
+
}
|
|
47
|
+
|
|
29
48
|
.edit-items-button {
|
|
30
49
|
align-self: start;
|
|
31
50
|
justify-self: end;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/summary-panel/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/summary-panel/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,aAAa,EACb,YAAY,EACZ,eAAe,EAClB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,OAAO,CAAC;;;;;;0BAMA,eAAe;;;;;;;mBAOtB,eAAe;;;;;;;;;;;;;mBAaf,aAAa;4BACJ,eAAe,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgC5D,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n mediumPadding,\n smallPadding,\n standardPadding\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n @layer base, hover, focusVisible, active, disabled, top;\n\n @layer base {\n ${display('block')}\n\n .summary-panel {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n align-items: flex-start;\n column-gap: ${standardPadding};\n }\n\n .summary-item-container {\n display: flex;\n flex-wrap: wrap;\n align-items: stretch;\n gap: ${standardPadding};\n min-width: 0;\n }\n\n .summary-item-container:empty {\n display: none;\n }\n\n :host([size='compact']) .summary-item-container {\n flex-wrap: nowrap;\n box-sizing: border-box;\n overflow-x: auto;\n overflow-y: hidden;\n gap: ${mediumPadding};\n padding: calc(${standardPadding} - ${smallPadding});\n scrollbar-width: none;\n }\n\n :host([size='compact']) .summary-item-container.has-overflow {\n -webkit-mask-image: linear-gradient(to right, black calc(100% - 48px), transparent);\n mask-image: linear-gradient(to right, black calc(100% - 48px), transparent);\n }\n\n :host([size='compact']) .summary-item-container::-webkit-scrollbar {\n display: none;\n }\n\n .edit-items-button {\n align-self: start;\n justify-self: end;\n }\n\n ::slotted(*) {\n flex: 0 0 auto;\n }\n }\n\n @layer hover {}\n\n @layer focusVisible {}\n\n @layer active {}\n\n @layer disabled {}\n\n @layer top {}\n`;"]}
|
|
@@ -1,10 +1,15 @@
|
|
|
1
|
-
import { html, when } from '@ni/fast-element';
|
|
1
|
+
import { html, ref, when } from '@ni/fast-element';
|
|
2
2
|
import { buttonTag } from '@ni/nimble-components/dist/esm/button';
|
|
3
3
|
import { ButtonAppearance } from '@ni/nimble-components/dist/esm/button/types';
|
|
4
4
|
import { iconCogTag } from '@ni/nimble-components/dist/esm/icons/cog';
|
|
5
5
|
export const template = html `
|
|
6
6
|
<section class="summary-panel" part="panel">
|
|
7
|
-
<div
|
|
7
|
+
<div
|
|
8
|
+
${ref('summaryItems')}
|
|
9
|
+
class="summary-item-container"
|
|
10
|
+
part="items"
|
|
11
|
+
@scroll="${x => x.handleItemsScroll()}"
|
|
12
|
+
>
|
|
8
13
|
<slot @slotchange="${x => x.handleItemsSlotChange()}"></slot>
|
|
9
14
|
</div>
|
|
10
15
|
${when(x => x.showEditItemsButton, html `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/fv/summary-panel/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/fv/summary-panel/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AAGtE,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAgB;;;cAG9B,GAAG,CAAC,cAAc,CAAC;;;uBAGV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,EAAE;;iCAEhB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,qBAAqB,EAAE;;UAErD,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE,IAAI,CAAgB;eAChD,SAAS;;;8BAGM,gBAAgB,CAAC,KAAK;;yBAE3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,oBAAoB;8BACtB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,oBAAoB;0BAC/B,CAAC,CAAC,EAAE;IACV,CAAC,CAAC,oBAAoB,EAAE,CAAC;IACzB,OAAO,IAAI,CAAC;AAChB,CAAC;;kBAEC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,oBAAoB;mBAC1B,UAAU,mBAAmB,UAAU;gBAC1C,SAAS;SAChB,CAAC;;CAET,CAAC","sourcesContent":["import { html, ref, when } from '@ni/fast-element';\nimport { buttonTag } from '@ni/nimble-components/dist/esm/button';\nimport { ButtonAppearance } from '@ni/nimble-components/dist/esm/button/types';\nimport { iconCogTag } from '@ni/nimble-components/dist/esm/icons/cog';\nimport type { FvSummaryPanel } from '.';\n\nexport const template = html<FvSummaryPanel>`\n <section class=\"summary-panel\" part=\"panel\">\n <div\n ${ref('summaryItems')}\n class=\"summary-item-container\"\n part=\"items\"\n @scroll=\"${x => x.handleItemsScroll()}\"\n >\n <slot @slotchange=\"${x => x.handleItemsSlotChange()}\"></slot>\n </div>\n ${when(x => x.showEditItemsButton, html<FvSummaryPanel>`\n <${buttonTag}\n class=\"edit-items-button\"\n part=\"edit-items-button\"\n appearance=\"${ButtonAppearance.ghost}\"\n content-hidden\n title=\"${x => x.editItemsButtonLabel}\"\n aria-label=\"${x => x.editItemsButtonLabel}\"\n @click=\"${x => {\n x.handleEditItemsClick();\n return true;\n }}\"\n >\n ${x => x.editItemsButtonLabel}\n <${iconCogTag} slot=\"start\"></${iconCogTag}>\n </${buttonTag}>\n `)}\n </section>\n`;"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/fv/summary-panel/types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAC9B,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;CACZ,CAAC","sourcesContent":["export const FvSummaryPanelSize = {\n default: 'default',\n compact: 'compact'\n} as const;\n\nexport type FvSummaryPanelSize = (typeof FvSummaryPanelSize)[keyof typeof FvSummaryPanelSize];"]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { FoundationElement } from '@ni/fast-foundation';
|
|
2
|
+
import { type FvSummaryPanelSize as FvSummaryPanelSizeType } from '../summary-panel/types';
|
|
2
3
|
import { type FvSummaryPanelTileTextPosition as FvSummaryPanelTileTextPositionType } from './types';
|
|
3
4
|
declare global {
|
|
4
5
|
interface HTMLElementTagNameMap {
|
|
@@ -12,6 +13,7 @@ export declare class FvSummaryPanelTile extends FoundationElement {
|
|
|
12
13
|
count: string;
|
|
13
14
|
label: string;
|
|
14
15
|
legacyStyle: boolean;
|
|
16
|
+
size: FvSummaryPanelSizeType;
|
|
15
17
|
selected: boolean;
|
|
16
18
|
textPosition: FvSummaryPanelTileTextPositionType;
|
|
17
19
|
/** @internal */
|
|
@@ -3,6 +3,7 @@ import { attr } from '@ni/fast-element';
|
|
|
3
3
|
import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
|
|
4
4
|
import { styles } from './styles';
|
|
5
5
|
import { template } from './template';
|
|
6
|
+
import { FvSummaryPanelSize } from '../summary-panel/types';
|
|
6
7
|
import { FvSummaryPanelTileTextPosition } from './types';
|
|
7
8
|
/**
|
|
8
9
|
* A clickable summary tile for displaying a large value with a compact label.
|
|
@@ -13,6 +14,7 @@ export class FvSummaryPanelTile extends FoundationElement {
|
|
|
13
14
|
this.count = '';
|
|
14
15
|
this.label = '';
|
|
15
16
|
this.legacyStyle = false;
|
|
17
|
+
this.size = FvSummaryPanelSize.default;
|
|
16
18
|
this.selected = false;
|
|
17
19
|
this.textPosition = FvSummaryPanelTileTextPosition.beside;
|
|
18
20
|
}
|
|
@@ -43,6 +45,9 @@ __decorate([
|
|
|
43
45
|
__decorate([
|
|
44
46
|
attr({ attribute: 'legacy-style', mode: 'boolean' })
|
|
45
47
|
], FvSummaryPanelTile.prototype, "legacyStyle", void 0);
|
|
48
|
+
__decorate([
|
|
49
|
+
attr
|
|
50
|
+
], FvSummaryPanelTile.prototype, "size", void 0);
|
|
46
51
|
__decorate([
|
|
47
52
|
attr({ mode: 'boolean' })
|
|
48
53
|
], FvSummaryPanelTile.prototype, "selected", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fv/summary-panel-tile/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EACH,8BAA8B,EAEjC,MAAM,SAAS,CAAC;AAQjB;;GAEG;AACH,MAAM,OAAO,kBAAmB,SAAQ,iBAAiB;IAAzD;;QAEW,UAAK,GAAG,EAAE,CAAC;QAGX,UAAK,GAAG,EAAE,CAAC;QAGX,gBAAW,GAAG,KAAK,CAAC;QAGpB,aAAQ,GAAG,KAAK,CAAC;QAGjB,iBAAY,GAAuC,8BAA8B,CAAC,MAAM,CAAC;IAoBpG,CAAC;IAlBG,gBAAgB;IACA,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,wBAAwB,EAAE,CAAC;IACpC,CAAC;IAED,gBAAgB;IACT,kBAAkB;QACrB,IAAI,CAAC,wBAAwB,EAAE,CAAC;IACpC,CAAC;IAEO,wBAAwB;QAC5B,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;QAC1C,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC;QACzC,CAAC;IACL,CAAC;CACJ;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fv/summary-panel-tile/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,kBAAkB,EAAqD,MAAM,wBAAwB,CAAC;AAC/G,OAAO,EACH,8BAA8B,EAEjC,MAAM,SAAS,CAAC;AAQjB;;GAEG;AACH,MAAM,OAAO,kBAAmB,SAAQ,iBAAiB;IAAzD;;QAEW,UAAK,GAAG,EAAE,CAAC;QAGX,UAAK,GAAG,EAAE,CAAC;QAGX,gBAAW,GAAG,KAAK,CAAC;QAGpB,SAAI,GAA2B,kBAAkB,CAAC,OAAO,CAAC;QAG1D,aAAQ,GAAG,KAAK,CAAC;QAGjB,iBAAY,GAAuC,8BAA8B,CAAC,MAAM,CAAC;IAoBpG,CAAC;IAlBG,gBAAgB;IACA,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,wBAAwB,EAAE,CAAC;IACpC,CAAC;IAED,gBAAgB;IACT,kBAAkB;QACrB,IAAI,CAAC,wBAAwB,EAAE,CAAC;IACpC,CAAC;IAEO,wBAAwB;QAC5B,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;QAC1C,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC;QACzC,CAAC;IACL,CAAC;CACJ;AAnCU;IADN,IAAI;iDACa;AAGX;IADN,IAAI;iDACa;AAGX;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uDAC1B;AAGpB;IADN,IAAI;gDAC4D;AAG1D;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;oDACF;AAGjB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;wDAC2D;AAsBpG,MAAM,oBAAoB,GAAG,kBAAkB,CAAC,OAAO,CAAC;IACpD,QAAQ,EAAE,uBAAuB;IACjC,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;AAC7E,MAAM,CAAC,MAAM,qBAAqB,GAAG,0BAA0B,CAAC","sourcesContent":["import { attr } from '@ni/fast-element';\nimport { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { template } from './template';\nimport { FvSummaryPanelSize, type FvSummaryPanelSize as FvSummaryPanelSizeType } from '../summary-panel/types';\nimport {\n FvSummaryPanelTileTextPosition,\n type FvSummaryPanelTileTextPosition as FvSummaryPanelTileTextPositionType\n} from './types';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ok-fv-summary-panel-tile': FvSummaryPanelTile;\n }\n}\n\n/**\n * A clickable summary tile for displaying a large value with a compact label.\n */\nexport class FvSummaryPanelTile extends FoundationElement {\n @attr\n public count = '';\n\n @attr\n public label = '';\n\n @attr({ attribute: 'legacy-style', mode: 'boolean' })\n public legacyStyle = false;\n\n @attr\n public size: FvSummaryPanelSizeType = FvSummaryPanelSize.default;\n\n @attr({ mode: 'boolean' })\n public selected = false;\n\n @attr({ attribute: 'text-position' })\n public textPosition: FvSummaryPanelTileTextPositionType = FvSummaryPanelTileTextPosition.beside;\n\n /** @internal */\n public override connectedCallback(): void {\n super.connectedCallback();\n this.syncLegacyStyleAttribute();\n }\n\n /** @internal */\n public legacyStyleChanged(): void {\n this.syncLegacyStyleAttribute();\n }\n\n private syncLegacyStyleAttribute(): void {\n if (this.legacyStyle) {\n this.setAttribute('legacy-style', '');\n } else {\n this.removeAttribute('legacy-style');\n }\n }\n}\n\nconst okFvSummaryPanelTile = FvSummaryPanelTile.compose({\n baseName: 'fv-summary-panel-tile',\n template,\n styles\n});\n\nDesignSystem.getOrCreate().withPrefix('ok').register(okFvSummaryPanelTile());\nexport const fvSummaryPanelTileTag = 'ok-fv-summary-panel-tile';"]}
|
|
@@ -77,6 +77,24 @@ export const styles = css `
|
|
|
77
77
|
text-transform: uppercase;
|
|
78
78
|
white-space: nowrap;
|
|
79
79
|
}
|
|
80
|
+
|
|
81
|
+
:host([size='compact']) .summary-panel-tile-content {
|
|
82
|
+
gap: 6px;
|
|
83
|
+
margin: 10px 14px;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
:host([size='compact']) .count {
|
|
87
|
+
font-size: 24px;
|
|
88
|
+
line-height: normal;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
:host([size='compact']) .summary-panel-tile-content.beside .count {
|
|
92
|
+
padding-right: 0;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
:host([size='compact']) .label {
|
|
96
|
+
font-size: 11px;
|
|
97
|
+
}
|
|
80
98
|
}
|
|
81
99
|
|
|
82
100
|
@layer hover {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/summary-panel-tile/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,QAAQ,EACR,gBAAgB,EAChB,eAAe,EACf,mBAAmB,EACnB,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,UAAU,EACV,eAAe,EACf,mBAAmB,EACtB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,cAAc,CAAC;;;;;;;;;;;qCAWI,UAAU;;;4DAGa,gBAAgB;;;;;;;;;;;uCAWrC,UAAU;;;;gCAIjB,eAAe;;;+BAGhB,UAAU;+BACV,UAAU;;;;;;mBAMtB,aAAa;sBACV,YAAY,SAAS,YAAY,MAAM,eAAe;oBACxD,QAAQ;;;;;;mBAMT,YAAY;;;;;qBAKV,mBAAmB;;;;;;;;6BAQX,aAAa
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/summary-panel-tile/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,QAAQ,EACR,gBAAgB,EAChB,eAAe,EACf,mBAAmB,EACnB,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,UAAU,EACV,eAAe,EACf,mBAAmB,EACtB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,cAAc,CAAC;;;;;;;;;;;qCAWI,UAAU;;;4DAGa,gBAAgB;;;;;;;;;;;uCAWrC,UAAU;;;;gCAIjB,eAAe;;;+BAGhB,UAAU;+BACV,UAAU;;;;;;mBAMtB,aAAa;sBACV,YAAY,SAAS,YAAY,MAAM,eAAe;oBACxD,QAAQ;;;;;;mBAMT,YAAY;;;;;qBAKV,mBAAmB;;;;;;;;6BAQX,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAkCN,gBAAgB;;;;;;;;;;;;;;;;8BAgBtB,mBAAmB,CAAC,iBAAiB;;;;;sBAK7C,mBAAmB,CAAC,iBAAiB;4BAC/B,gBAAgB;;;;8BAId,mBAAmB,CAAC,iBAAiB;;;;4BAIvC,gBAAgB;;;;;;;;gCAQZ,gBAAgB;;;;;;;;;;;;;;;CAe/C,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n bodyFont,\n borderHoverColor,\n cardBorderColor,\n elevation2BoxShadow,\n largePadding,\n mediumPadding,\n smallPadding,\n smallDelay,\n standardPadding,\n titlePlus2FontColor\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n @layer base, hover, focusVisible, active, disabled, top;\n\n @layer base {\n ${display('inline-block')}\n\n :host {\n min-width: max-content;\n }\n\n :host(:not([legacy-style])) .summary-panel-tile {\n position: relative;\n border-radius: 8px;\n overflow: clip;\n box-shadow: none;\n transition: 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: ${borderHoverColor};\n }\n\n :host(:not([legacy-style])) .summary-panel-tile::after {\n content: '';\n position: absolute;\n inset: 0;\n box-sizing: border-box;\n border: 2px solid transparent;\n border-radius: inherit;\n pointer-events: none;\n transition: border-color ${smallDelay} ease-in-out;\n }\n\n :host(:not([legacy-style])) .summary-panel-tile::part(control) {\n border: 2px solid ${cardBorderColor};\n border-radius: 8px;\n transition:\n border-color ${smallDelay} ease-in-out,\n border-width ${smallDelay} ease-in-out;\n }\n\n .summary-panel-tile-content {\n display: flex;\n align-items: center;\n gap: ${mediumPadding};\n margin: ${largePadding} calc(${largePadding} + ${standardPadding});\n font: ${bodyFont};\n }\n\n .summary-panel-tile-content.under {\n flex-direction: column;\n align-items: center;\n gap: ${smallPadding};\n text-align: center;\n }\n\n .count {\n color: ${titlePlus2FontColor};\n font-size: 32px;\n font-weight: 400;\n line-height: 40px;\n white-space: nowrap;\n }\n\n .summary-panel-tile-content.beside .count {\n padding-right: ${mediumPadding};\n }\n\n .summary-panel-tile-content.under .count {\n padding-right: 0;\n }\n\n .label {\n font-weight: 600;\n text-transform: uppercase;\n white-space: nowrap;\n }\n\n :host([size='compact']) .summary-panel-tile-content {\n gap: 6px;\n margin: 10px 14px;\n }\n\n :host([size='compact']) .count {\n font-size: 24px;\n line-height: normal;\n }\n\n :host([size='compact']) .summary-panel-tile-content.beside .count {\n padding-right: 0;\n }\n\n :host([size='compact']) .label {\n font-size: 11px;\n }\n }\n\n @layer hover {\n :host(:not([legacy-style])) .summary-panel-tile:hover {\n box-shadow: 0 0 0 2px ${borderHoverColor};\n }\n\n :host(:not([legacy-style])) .summary-panel-tile::part(control):hover {\n border-color: transparent;\n }\n }\n\n @layer focusVisible {}\n\n @layer active {\n :host(:not([legacy-style])) .summary-panel-tile:active {\n box-shadow: none;\n }\n\n :host(:not([legacy-style])) .summary-panel-tile[selected] {\n box-shadow: var(${elevation2BoxShadow.cssCustomProperty});\n }\n\n :host(:not([legacy-style])) .summary-panel-tile[selected]:hover {\n box-shadow:\n var(${elevation2BoxShadow.cssCustomProperty}),\n 0 0 0 2px ${borderHoverColor};\n }\n\n :host(:not([legacy-style])) .summary-panel-tile[selected]:active {\n box-shadow: var(${elevation2BoxShadow.cssCustomProperty});\n }\n\n :host(:not([legacy-style])) .summary-panel-tile:active::after {\n border-color: ${borderHoverColor};\n }\n\n :host(:not([legacy-style])) .summary-panel-tile::part(control):active {\n border: 2px solid transparent;\n }\n\n :host(:not([legacy-style])) .summary-panel-tile[selected]::part(control) {\n border: 2px solid ${borderHoverColor};\n }\n\n :host(:not([legacy-style])) .summary-panel-tile[selected]::part(control):hover {\n border: 2px solid transparent;\n }\n\n :host(:not([legacy-style])) .summary-panel-tile[selected]::part(control):active {\n border: 2px solid transparent;\n }\n }\n\n @layer disabled {}\n\n @layer top {}\n`;"]}
|