@things-factory/board-ui 10.1.160 → 10.1.165

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.
Files changed (28) hide show
  1. package/dist-client/board-list/board-card-thumb.d.ts +16 -0
  2. package/dist-client/board-list/board-card-thumb.js +25 -0
  3. package/dist-client/board-list/board-card-thumb.js.map +1 -0
  4. package/dist-client/pages/board-list-page.d.ts +0 -1
  5. package/dist-client/pages/board-list-page.js +7 -8
  6. package/dist-client/pages/board-list-page.js.map +1 -1
  7. package/dist-client/pages/board-template/board-template-list-page.d.ts +2 -3
  8. package/dist-client/pages/board-template/board-template-list-page.js +8 -8
  9. package/dist-client/pages/board-template/board-template-list-page.js.map +1 -1
  10. package/dist-client/pages/play-list-page.d.ts +0 -1
  11. package/dist-client/pages/play-list-page.js +7 -7
  12. package/dist-client/pages/play-list-page.js.map +1 -1
  13. package/dist-client/tsconfig.tsbuildinfo +1 -1
  14. package/helps/board-modeller/data-binding-property.ko.md +1 -1
  15. package/helps/board-modeller/data-binding.ko.md +1 -1
  16. package/helps/board-modeller/data-spread.ko.md +1 -1
  17. package/helps/board-modeller/effects/hover-event.ko.md +2 -2
  18. package/helps/board-modeller/effects/tap-event.ko.md +3 -3
  19. package/helps/board-modeller/modeller.ko.md +1 -1
  20. package/helps/board-modeller/shapes/shapes.ko.md +1 -1
  21. package/package.json +7 -7
  22. package/translations/ko.json +1 -1
  23. package/dist-client/board-list/board-thumb.d.ts +0 -33
  24. package/dist-client/board-list/board-thumb.js +0 -119
  25. package/dist-client/board-list/board-thumb.js.map +0 -1
  26. package/dist-client/styles/board-card-styles.d.ts +0 -11
  27. package/dist-client/styles/board-card-styles.js +0 -56
  28. package/dist-client/styles/board-card-styles.js.map +0 -1
@@ -22,7 +22,7 @@
22
22
  - value 속성은 각 컴포넌트의 대표속성과 동일한 기능을 합니다.
23
23
  - 예를 들면, 'rect' 컴포넌트의 경우에 'value'와 'text' 속성은 같은 효과를 만들게 됩니다. 'rect'의 대표 속성이 'text' 이기 때문입니다.
24
24
  - 'scenario-run' 컴포넌트의 경우에 'value'는 'variables' 속성과 같은 기능을 하게됩니다. 이 속성은 시나리오 호출시에 넘겨줄 파라미터로 사용됩니다.
25
- - 각 컴포넌트의 대표 속성이 무엇인지는 각 컴포넌트 도움말을 참조하시기 바랍니다.
25
+ - 각 컴포넌트의 대표 속성이 무엇인지는 각 컴포넌트 도움말을 참조해 주세요.
26
26
 
27
27
  - data
28
28
  - 대상 컴포넌트의 data 속성에 반영된다.
@@ -56,7 +56,7 @@
56
56
 
57
57
  - 소스 컴포넌트의 data 값을 기반으로 대상 컴포넌트의 속성을 변경시키는 설정이다.
58
58
  - 만일, 소스 컴포넌트가 대상 컴포넌트의 data속성을 변경시키는 경우, 대상 컴포넌트의 Data Spread 기능이 연속적으로 동작하므로, 이 기능을 데이타 전파라고 한다.
59
- - 여러개의 데이타 전파 설정이 가능하다
59
+ - 여러 개의 데이타 전파 설정이 가능하다
60
60
 
61
61
  ### 소스데이타 (source)
62
62
 
@@ -6,7 +6,7 @@
6
6
 
7
7
  - 소스 컴포넌트의 data 값을 기반으로 대상 컴포넌트의 속성을 변경시키는 설정이다.
8
8
  - 만일, 소스 컴포넌트가 대상 컴포넌트의 data속성을 변경시키는 경우, 대상 컴포넌트의 Data Spread 기능이 연속적으로 동작하므로, 이 기능을 데이타 전파라고 한다.
9
- - 여러개의 데이타 전파 설정이 가능하다
9
+ - 여러 개의 데이타 전파 설정이 가능하다
10
10
 
11
11
  ### 복사, 붙여넣기 그리고 삭제
12
12
 
@@ -15,13 +15,13 @@
15
15
  - 팝업창의 위치는 팝업 대상 보드의 크기와 호버된 컴포넌트의 위치를 감안해서 다음의 위치중 한 곳에 보여진다.
16
16
  - top-left, top-right, bottom-left, bottom-right, center
17
17
  - 팝업창의 크기는 현재 보드의 크기보다 커서는 안된다. 팝업 대상 보드의 크기가 현재 보드보다 크면, 팝업 대상 보드의 모든 내용을 보기 힘들게 된다.
18
- - 팝업창을 닫기 위해서는 팝업창 우측 상단의 'X' 클로즈 버튼을 누르거나, 대상 보드의 특정 컴포넌트의 탭이벤트가 'close current board'로 설정되어있다면, 해당 컴포넌트를 클릭해서 닫을 수 있다.
18
+ - 팝업창을 닫기 위해서는 팝업창 우측 상단의 'X' 닫기 버튼을 누르거나, 대상 보드의 특정 컴포넌트의 탭이벤트가 'close current board'로 설정되어 있다면, 해당 컴포넌트를 클릭해서 닫을 수 있다.
19
19
  - 'reset on leave(나갈 때 원상태로 복구)' 설정에 영향을 받지 않는다.
20
20
  - 파라미터
21
21
  - target : 팝업창으로 보여줄 대상 보드를 보드목록에서 지정한다.
22
22
  - open infowindow
23
23
  - 'info-window' 컴포넌트에 설정된 내용으로 호버된 포인트에 근접한 위치에 인포윈도우를 띄워준다.
24
- - 'reset on leave(나갈 때 원상태로 복구)' 설정이 되어있으면, 마우스 포인트가 컴포넌트에서 벗어날 때 인포윈도우도 클로즈된다.
24
+ - 'reset on leave(나갈 때 원상태로 복구)' 설정이 되어 있으면, 마우스 포인터가 컴포넌트에서 벗어날 때 인포윈도우도 닫힙니다.
25
25
  - 파라미터
26
26
  - target : 대상 인포윈도우의 아이디를 지정한다.
27
27
  - toggle target component data
@@ -14,7 +14,7 @@
14
14
 
15
15
  - goto target board
16
16
  - 타겟으로 지정한 대상 보드로 이동한다.
17
- - 이를 지원하는 뷰어는 현재 보드에서 타겟보드로 화면이 바뀌게 되며, 뷰어에서 제공하는 '뒤로 가기' 기능으로 되돌아 오거나, 대상 보드의 특정 컴포넌트의 탭이벤트가 'close current board'로 설정되어있다면, 해당 컴포넌트를 클릭해서 돌아올 수 있다.
17
+ - 이를 지원하는 뷰어는 현재 보드에서 타겟보드로 화면이 바뀌게 되며, 뷰어에서 제공하는 '뒤로 가기' 기능으로 되돌아오거나, 대상 보드의 특정 컴포넌트의 탭이벤트가 'close current board'로 설정되어 있다면, 해당 컴포넌트를 클릭해서 돌아올 수 있다.
18
18
  - 이처럼 보드 네비게이션을 제공하는 뷰어에서 효과를 발휘한다.
19
19
  - 파라미터
20
20
  - 대상(target) : 팝업창으로 보여줄 대상 보드를 보드목록에서 지정한다.
@@ -36,7 +36,7 @@
36
36
  - 팝업창의 위치는 팝업 대상 보드의 크기와 호버된 컴포넌트의 위치를 감안해서 다음의 위치중 한 곳에 보여진다.
37
37
  - top-left, top-right, bottom-left, bottom-right, center
38
38
  - 팝업창의 크기는 현재 보드의 크기보다 커서는 안된다. 팝업 대상 보드의 크기가 현재 보드보다 크면, 팝업 대상 보드의 모든 내용을 보기 힘들게 된다.
39
- - 팝업창을 닫기 위해서는 팝업창 우측 상단의 'X' 클로즈 버튼을 누르거나, 대상 보드의 특정 컴포넌트의 탭이벤트가 'close current board'로 설정되어있다면, 해당 컴포넌트를 클릭해서 닫을 수 있다.
39
+ - 팝업창을 닫기 위해서는 팝업창 우측 상단의 'X' 닫기 버튼을 누르거나, 대상 보드의 특정 컴포넌트의 탭이벤트가 'close current board'로 설정되어 있다면, 해당 컴포넌트를 클릭해서 닫을 수 있다.
40
40
  - 파라미터
41
41
  - 대상(target) : 팝업창으로 보여줄 대상 보드를 보드목록에서 지정한다.
42
42
  - 입력데이타 : 대상보드에 전달될 초기값. 이 파라미터에 지정된 컴포넌트의 데이터값이 초기값으로 전달된다.
@@ -44,7 +44,7 @@
44
44
  - modal popup target board
45
45
  - popup target board 와 동일하나 팝업창은 'modal'식으로 동작한다. 팝업창을 닫기 위해서는 팝업창 주변의 backdrop 부분을 클릭하거나, esc 키로 제거한다.
46
46
  - close current board
47
- - 이 컴포넌트가 속한 보드가 'popup target board'으로 오픈된 경우이면 popup이 클로즈된다.
47
+ - 이 컴포넌트가 속한 보드가 'popup target board'으로 오픈된 경우이면 popup이 닫힙니다.
48
48
  - 이 컴포넌트가 속한 보드가 'goto target board'로 이동된 경우이면 이전 보드로 돌아간다.
49
49
  - open infowindow
50
50
  - 'info-window' 컴포넌트에 설정된 내용으로 호버된 포인트에 근접한 위치에 인포윈도우를 띄워준다.
@@ -27,7 +27,7 @@
27
27
  되돌리기로 취소했던 작업의 내용을 다시 수행
28
28
 
29
29
  1. 잘라내기![잘라내기][Cut](<kbd>Ctrl</kbd> + <kbd>X</kbd>) :
30
- 선택된 컴포넌트를 클립보드로 복사 하면서 현재의 컴포넌트는 삭제
30
+ 선택된 컴포넌트를 클립보드로 복사하면서 현재의 컴포넌트는 삭제
31
31
 
32
32
  1. 복사![복사][Copy](<kbd>Ctrl</kbd> + <kbd>C</kbd>) :
33
33
  선택된 컴포넌트를 클립보드로 복사
@@ -7,7 +7,7 @@
7
7
 
8
8
  - \# : 숫자형식 (값 또는 소수점 이하의 값이 0이면 표시하지 않는다.)
9
9
  - 0 : 숫자형식
10
- - , : 자리수 표현
10
+ - , : 자릿수 표현
11
11
  - . : 소수점 표현
12
12
 
13
13
  1. 숨김 : 컴포넌트를 숨긴다.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@things-factory/board-ui",
3
- "version": "10.1.160",
3
+ "version": "10.1.165",
4
4
  "main": "dist-server/index.js",
5
5
  "browser": "dist-client/index.js",
6
6
  "things-factory": true,
@@ -43,12 +43,12 @@
43
43
  "@operato/shell": "^10.29.2",
44
44
  "@operato/styles": "^10.0.0",
45
45
  "@operato/utils": "^10.0.0",
46
- "@things-factory/ai-assistant": "^10.1.160",
47
- "@things-factory/barcode-base": "^10.1.159",
48
- "@things-factory/board-ai": "^10.1.160",
49
- "@things-factory/fav-base": "^10.1.159",
50
- "@things-factory/setting-base": "^10.1.159",
46
+ "@things-factory/ai-assistant": "^10.1.165",
47
+ "@things-factory/barcode-base": "^10.1.165",
48
+ "@things-factory/board-ai": "^10.1.165",
49
+ "@things-factory/fav-base": "^10.1.165",
50
+ "@things-factory/setting-base": "^10.1.165",
51
51
  "@things-factory/utils": "^10.1.20"
52
52
  },
53
- "gitHead": "b5e86be374e8b913a3f2b8459b6001e8f44e345b"
53
+ "gitHead": "d9e3774d70561b063e4f1d10c387caf721d99b61"
54
54
  }
@@ -94,7 +94,7 @@
94
94
  "error.license key is empty": "라이센스 정보가 없습니다!",
95
95
  "error.license key is not certified": "라이센스가 인증되지 않았습니다!",
96
96
  "error.license token not valid": "라이선스 토큰 데이터 검사에 실패하였습니다!",
97
- "error.name must be unique from the original board": "원본 보드와 다른 이름을 적으십시오",
97
+ "error.name must be unique from the original board": "원본 보드와 다른 이름을 입력해 주세요",
98
98
  "error.setting-error": "설정 오류",
99
99
  "error.your license due date is x, please renewal your license!": "라이센스 기한은 {x}입니다. 라이센스를 갱신하십시오!",
100
100
  "error.your license is expired! expired date is [x]": "라이센스가 만료되었습니다! 만료일은 [{x}]입니다!",
@@ -1,33 +0,0 @@
1
- import '@material/web/icon/icon.js';
2
- import { LitElement } from 'lit';
3
- declare const BoardThumb_base: (new (...args: any[]) => LitElement) & typeof LitElement;
4
- /**
5
- * A board card's image cell - the picture itself, plus the draft marker.
6
- *
7
- * ## Why a component
8
- *
9
- * The catalog draws in ox-grist's CARD mode. The grid treats the thumbnail as one column, drawn by
10
- * that column's `record.renderer` - and a renderer's output lands inside `ox-card-field`'s own
11
- * shadow root, several shadow boundaries below this page's stylesheet, so inline `style=""` is the
12
- * only way to reach it directly. That still works for a plain image and a badge, but this stays a
13
- * component (rather than folding back into an inline renderer) because the border-bottom seam
14
- * against the info area below wants the same shadow-scoped styling.
15
- *
16
- * ## Why info and favorite do *not* live here
17
- *
18
- * They did, briefly, overlaid on the image the way figure-ui's figure-thumb.ts overlays its own
19
- * (2026-09-23). Reverted the same day: a figure's picture is a neutral rendered part, closer to a
20
- * plan drawing than a screen - text and icons laid over it read fine. A board's picture is the
21
- * actual dashboard, often already dense with its own labels and numbers; icons on top of that
22
- * compete with content the catalog exists to let a person recognize at a glance. Board's info and
23
- * favorite are gutter buttons instead (board-list-page.ts / play-list-page.ts), in the information
24
- * area below the picture, not on it.
25
- */
26
- export declare class BoardThumb extends BoardThumb_base {
27
- static styles: import("lit").CSSResult;
28
- board: any;
29
- badge?: string;
30
- render(): import("lit-html").TemplateResult<1>;
31
- private renderBadge;
32
- }
33
- export {};
@@ -1,119 +0,0 @@
1
- import { __decorate, __metadata } from "tslib";
2
- import '@material/web/icon/icon.js';
3
- import { css, html, LitElement } from 'lit';
4
- import { customElement, property } from 'lit/decorators.js';
5
- import { i18next, localize } from '@operato/i18n';
6
- /**
7
- * A board card's image cell - the picture itself, plus the draft marker.
8
- *
9
- * ## Why a component
10
- *
11
- * The catalog draws in ox-grist's CARD mode. The grid treats the thumbnail as one column, drawn by
12
- * that column's `record.renderer` - and a renderer's output lands inside `ox-card-field`'s own
13
- * shadow root, several shadow boundaries below this page's stylesheet, so inline `style=""` is the
14
- * only way to reach it directly. That still works for a plain image and a badge, but this stays a
15
- * component (rather than folding back into an inline renderer) because the border-bottom seam
16
- * against the info area below wants the same shadow-scoped styling.
17
- *
18
- * ## Why info and favorite do *not* live here
19
- *
20
- * They did, briefly, overlaid on the image the way figure-ui's figure-thumb.ts overlays its own
21
- * (2026-09-23). Reverted the same day: a figure's picture is a neutral rendered part, closer to a
22
- * plan drawing than a screen - text and icons laid over it read fine. A board's picture is the
23
- * actual dashboard, often already dense with its own labels and numbers; icons on top of that
24
- * compete with content the catalog exists to let a person recognize at a glance. Board's info and
25
- * favorite are gutter buttons instead (board-list-page.ts / play-list-page.ts), in the information
26
- * area below the picture, not on it.
27
- */
28
- let BoardThumb = class BoardThumb extends localize(i18next)(LitElement) {
29
- static { this.styles = css `
30
- :host {
31
- position: relative;
32
- display: block;
33
- width: 100%;
34
- height: 100%;
35
- overflow: hidden;
36
- /* The name/gutters area below has no border of its own (record-card.ts's [content] is plain
37
- * margin) - without this the image bleeds straight into it with no seam. */
38
- border-bottom: 1px solid var(--md-sys-color-outline-variant);
39
- box-sizing: border-box;
40
- }
41
-
42
- img {
43
- display: block;
44
- width: 100%;
45
- height: 100%;
46
- /*
47
- contain, not cover. Boards are not one shape - a wide dashboard, a portrait barcode label,
48
- a small popup - and cover cropped each one differently, so no two cards framed their
49
- picture alike and the grid never settled. contain shows the whole board on the neutral plate
50
- (--data-card-thumbnail-background) the way figure-list-page shows a whole figure, so every
51
- card reads as "a picture in a frame" and the row lines up.
52
- */
53
- object-fit: contain;
54
- }
55
-
56
- div[empty] {
57
- display: flex;
58
- align-items: center;
59
- justify-content: center;
60
- width: 100%;
61
- height: 100%;
62
- color: var(--md-sys-color-outline);
63
- }
64
- div[empty] md-icon {
65
- --md-icon-size: 28px;
66
- }
67
-
68
- /* Draft marker - only draft ever says anything, same reasoning as figure-thumb.ts's span[draft]. */
69
- span[draft] {
70
- position: absolute;
71
- top: 6px;
72
- left: 6px;
73
- padding: 1px 7px;
74
- font: var(--label-font, inherit);
75
- font-size: 0.68rem;
76
- line-height: 1.5;
77
- color: var(--md-sys-color-on-secondary-container);
78
- background-color: var(--md-sys-color-secondary-container);
79
- border-radius: 4px;
80
- }
81
- `; }
82
- render() {
83
- const board = this.board;
84
- if (!board) {
85
- return html ``;
86
- }
87
- return html `
88
- ${board.thumbnail
89
- ? html `<img src=${board.thumbnail} alt=${board.name || ''} loading="lazy" />`
90
- : html `
91
- <div empty>
92
- <md-icon>dashboard</md-icon>
93
- </div>
94
- `}
95
- ${this.renderBadge(board)}
96
- `;
97
- }
98
- renderBadge(board) {
99
- const text = this.badge !== undefined
100
- ? this.badge
101
- : board.state === 'released'
102
- ? ''
103
- : i18next.t('label.draft', { defaultValue: 'Draft' });
104
- return text ? html `<span draft>${text}</span>` : '';
105
- }
106
- };
107
- __decorate([
108
- property({ type: Object }),
109
- __metadata("design:type", Object)
110
- ], BoardThumb.prototype, "board", void 0);
111
- __decorate([
112
- property({ type: String }),
113
- __metadata("design:type", String)
114
- ], BoardThumb.prototype, "badge", void 0);
115
- BoardThumb = __decorate([
116
- customElement('board-thumb')
117
- ], BoardThumb);
118
- export { BoardThumb };
119
- //# sourceMappingURL=board-thumb.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"board-thumb.js","sourceRoot":"","sources":["../../client/board-list/board-thumb.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAEjD;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;aACpD,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDlB,AApDY,CAoDZ;IAOD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QACxB,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO,IAAI,CAAA,EAAE,CAAA;QACf,CAAC;QAED,OAAO,IAAI,CAAA;QACP,KAAK,CAAC,SAAS;YACf,CAAC,CAAC,IAAI,CAAA,YAAY,KAAK,CAAC,SAAS,QAAQ,KAAK,CAAC,IAAI,IAAI,EAAE,oBAAoB;YAC7E,CAAC,CAAC,IAAI,CAAA;;;;WAIH;QACH,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;KAC1B,CAAA;IACH,CAAC;IAEO,WAAW,CAAC,KAAU;QAC5B,MAAM,IAAI,GACR,IAAI,CAAC,KAAK,KAAK,SAAS;YACtB,CAAC,CAAC,IAAI,CAAC,KAAK;YACZ,CAAC,CAAC,KAAK,CAAC,KAAK,KAAK,UAAU;gBAC1B,CAAC,CAAC,EAAE;gBACJ,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,CAAA;QAE3D,OAAO,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,eAAe,IAAI,SAAS,CAAC,CAAC,CAAC,EAAE,CAAA;IACrD,CAAC;;AAhC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;yCAAY;AAGX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;yCAAe;AA1D/B,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAwFtB","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\n\n/**\n * A board card's image cell - the picture itself, plus the draft marker.\n *\n * ## Why a component\n *\n * The catalog draws in ox-grist's CARD mode. The grid treats the thumbnail as one column, drawn by\n * that column's `record.renderer` - and a renderer's output lands inside `ox-card-field`'s own\n * shadow root, several shadow boundaries below this page's stylesheet, so inline `style=\"\"` is the\n * only way to reach it directly. That still works for a plain image and a badge, but this stays a\n * component (rather than folding back into an inline renderer) because the border-bottom seam\n * against the info area below wants the same shadow-scoped styling.\n *\n * ## Why info and favorite do *not* live here\n *\n * They did, briefly, overlaid on the image the way figure-ui's figure-thumb.ts overlays its own\n * (2026-09-23). Reverted the same day: a figure's picture is a neutral rendered part, closer to a\n * plan drawing than a screen - text and icons laid over it read fine. A board's picture is the\n * actual dashboard, often already dense with its own labels and numbers; icons on top of that\n * compete with content the catalog exists to let a person recognize at a glance. Board's info and\n * favorite are gutter buttons instead (board-list-page.ts / play-list-page.ts), in the information\n * area below the picture, not on it.\n */\n@customElement('board-thumb')\nexport class BoardThumb extends localize(i18next)(LitElement) {\n static styles = css`\n :host {\n position: relative;\n display: block;\n width: 100%;\n height: 100%;\n overflow: hidden;\n /* The name/gutters area below has no border of its own (record-card.ts's [content] is plain\n * margin) - without this the image bleeds straight into it with no seam. */\n border-bottom: 1px solid var(--md-sys-color-outline-variant);\n box-sizing: border-box;\n }\n\n img {\n display: block;\n width: 100%;\n height: 100%;\n /*\n contain, not cover. Boards are not one shape - a wide dashboard, a portrait barcode label,\n a small popup - and cover cropped each one differently, so no two cards framed their\n picture alike and the grid never settled. contain shows the whole board on the neutral plate\n (--data-card-thumbnail-background) the way figure-list-page shows a whole figure, so every\n card reads as \"a picture in a frame\" and the row lines up.\n */\n object-fit: contain;\n }\n\n div[empty] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n color: var(--md-sys-color-outline);\n }\n div[empty] md-icon {\n --md-icon-size: 28px;\n }\n\n /* Draft marker - only draft ever says anything, same reasoning as figure-thumb.ts's span[draft]. */\n span[draft] {\n position: absolute;\n top: 6px;\n left: 6px;\n padding: 1px 7px;\n font: var(--label-font, inherit);\n font-size: 0.68rem;\n line-height: 1.5;\n color: var(--md-sys-color-on-secondary-container);\n background-color: var(--md-sys-color-secondary-container);\n border-radius: 4px;\n }\n `\n\n @property({ type: Object }) board!: any\n /* Overrides the marker text. Unset means \"the draft rule\"; an empty string means no marker at\n * all - a template has no draft/released state, so board-template-list-page.ts passes ''. */\n @property({ type: String }) badge?: string\n\n render() {\n const board = this.board\n if (!board) {\n return html``\n }\n\n return html`\n ${board.thumbnail\n ? html`<img src=${board.thumbnail} alt=${board.name || ''} loading=\"lazy\" />`\n : html`\n <div empty>\n <md-icon>dashboard</md-icon>\n </div>\n `}\n ${this.renderBadge(board)}\n `\n }\n\n private renderBadge(board: any) {\n const text =\n this.badge !== undefined\n ? this.badge\n : board.state === 'released'\n ? ''\n : i18next.t('label.draft', { defaultValue: 'Draft' })\n\n return text ? html`<span draft>${text}</span>` : ''\n }\n}\n"]}
@@ -1,11 +0,0 @@
1
- /**
2
- * The one card look for every board catalog - board list, play list, template list.
3
- *
4
- * Each page hosts an `ox-grist` in CARD mode and sets the card by `--data-card-*` variables. The
5
- * three pages used to carry the same forty lines apiece (2026-09-23); a drift between them is
6
- * exactly the "why does this page look different" complaint this suite keeps hearing, so the
7
- * tokens now live once, here, and a page adds only what is its own (a chip strip). The FAB is the suite's (`FabStyles`).
8
- *
9
- * Sized and typed after figure-ui's figure-list-page.ts, so board and figure read as one product.
10
- */
11
- export declare const BoardCardStyles: import("lit").CSSResult;
@@ -1,56 +0,0 @@
1
- import { css } from 'lit';
2
- import { FabStyles } from '@operato/styles';
3
- /**
4
- * The one card look for every board catalog - board list, play list, template list.
5
- *
6
- * Each page hosts an `ox-grist` in CARD mode and sets the card by `--data-card-*` variables. The
7
- * three pages used to carry the same forty lines apiece (2026-09-23); a drift between them is
8
- * exactly the "why does this page look different" complaint this suite keeps hearing, so the
9
- * tokens now live once, here, and a page adds only what is its own (a chip strip). The FAB is the suite's (`FabStyles`).
10
- *
11
- * Sized and typed after figure-ui's figure-list-page.ts, so board and figure read as one product.
12
- */
13
- export const BoardCardStyles = css `
14
- /* The page's one primary action: the suite's card-page FAB. */
15
- ${FabStyles}
16
-
17
- :host {
18
- /* The frame (WorkSurfacePageStyles) lays the page out; this only anchors the FAB. */
19
- position: relative;
20
-
21
- --data-card-min-width: 240px;
22
- --data-card-record-card-border-radius: 6px;
23
- --data-card-record-card-padding: 0;
24
- --data-card-thumbnail-aspect: 16 / 9;
25
- --data-card-thumbnail-padding: 0;
26
- --data-card-thumbnail-radius: 6px 6px 0 0;
27
- /* The card's two surfaces. The theme raises both in dark (--board-card-surface / -plate in
28
- * operato-board's board-accent.css): the light defaults - white card, light plate - become
29
- * black on black there, and a card that does not lift off its page is not a card. */
30
- --data-card-record-card-background-color: var(--board-card-surface, var(--md-sys-color-surface-container-lowest));
31
- --data-card-thumbnail-background: var(--board-card-plate, var(--md-sys-color-surface-container));
32
- /* The right margin clears the corner where the action icons sit (below). */
33
- --data-card-item-margin: 10px 52px 10px 12px;
34
- --data-card-item-name-font: 500 0.9rem/1.35 var(--theme-font, 'Roboto');
35
- --data-card-item-name-color: var(--md-sys-color-on-surface);
36
- --data-card-item-etc-font: normal 0.72rem/1.2 var(--theme-font, 'Roboto');
37
- /* The second line under the name is a side note, not a rival to it. */
38
- --data-card-item-disc-font: normal 0.72rem/1.2 var(--theme-font, 'Roboto');
39
- --data-card-item-disc-color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
40
- /* record-card.ts reads these two with no fallback - unset means no hover feedback at all. */
41
- --data-card-record-card-border-hover: 1px solid var(--md-sys-color-outline-variant);
42
- --data-card-record-card-boxshadow-hover: 0 2px 8px rgba(0, 0, 0, 0.16);
43
- /* Card actions are secondary to the picture and the name: small, in the quiet outline tone. */
44
- --data-card-gutter-icon-size: 16px;
45
- --data-card-gutter-icon-color: var(--md-sys-color-outline);
46
- /* One or two small icons do not deserve a row of their own under the text: park them in the
47
- * bottom-right corner, level with the meta line, so the information area stays two lines tall. */
48
- --data-card-gutters-position: absolute;
49
- --data-card-gutters-inset: auto 8px 9px auto;
50
- --data-card-gutters-margin: 0;
51
- }
52
-
53
- /* .page-fill is WorkSurfacePageStyles' own class (flex: 1; min-height: 0) - the min-height half
54
- * is what lets ox-grist's internal scroller, not the page, be the thing that scrolls. */
55
- `;
56
- //# sourceMappingURL=board-card-styles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"board-card-styles.js","sourceRoot":"","sources":["../../client/styles/board-card-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE3C;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;IAE9B,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCZ,CAAA","sourcesContent":["import { css } from 'lit'\n\nimport { FabStyles } from '@operato/styles'\n\n/**\n * The one card look for every board catalog - board list, play list, template list.\n *\n * Each page hosts an `ox-grist` in CARD mode and sets the card by `--data-card-*` variables. The\n * three pages used to carry the same forty lines apiece (2026-09-23); a drift between them is\n * exactly the \"why does this page look different\" complaint this suite keeps hearing, so the\n * tokens now live once, here, and a page adds only what is its own (a chip strip). The FAB is the suite's (`FabStyles`).\n *\n * Sized and typed after figure-ui's figure-list-page.ts, so board and figure read as one product.\n */\nexport const BoardCardStyles = css`\n /* The page's one primary action: the suite's card-page FAB. */\n ${FabStyles}\n\n :host {\n /* The frame (WorkSurfacePageStyles) lays the page out; this only anchors the FAB. */\n position: relative;\n\n --data-card-min-width: 240px;\n --data-card-record-card-border-radius: 6px;\n --data-card-record-card-padding: 0;\n --data-card-thumbnail-aspect: 16 / 9;\n --data-card-thumbnail-padding: 0;\n --data-card-thumbnail-radius: 6px 6px 0 0;\n /* The card's two surfaces. The theme raises both in dark (--board-card-surface / -plate in\n * operato-board's board-accent.css): the light defaults - white card, light plate - become\n * black on black there, and a card that does not lift off its page is not a card. */\n --data-card-record-card-background-color: var(--board-card-surface, var(--md-sys-color-surface-container-lowest));\n --data-card-thumbnail-background: var(--board-card-plate, var(--md-sys-color-surface-container));\n /* The right margin clears the corner where the action icons sit (below). */\n --data-card-item-margin: 10px 52px 10px 12px;\n --data-card-item-name-font: 500 0.9rem/1.35 var(--theme-font, 'Roboto');\n --data-card-item-name-color: var(--md-sys-color-on-surface);\n --data-card-item-etc-font: normal 0.72rem/1.2 var(--theme-font, 'Roboto');\n /* The second line under the name is a side note, not a rival to it. */\n --data-card-item-disc-font: normal 0.72rem/1.2 var(--theme-font, 'Roboto');\n --data-card-item-disc-color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n /* record-card.ts reads these two with no fallback - unset means no hover feedback at all. */\n --data-card-record-card-border-hover: 1px solid var(--md-sys-color-outline-variant);\n --data-card-record-card-boxshadow-hover: 0 2px 8px rgba(0, 0, 0, 0.16);\n /* Card actions are secondary to the picture and the name: small, in the quiet outline tone. */\n --data-card-gutter-icon-size: 16px;\n --data-card-gutter-icon-color: var(--md-sys-color-outline);\n /* One or two small icons do not deserve a row of their own under the text: park them in the\n * bottom-right corner, level with the meta line, so the information area stays two lines tall. */\n --data-card-gutters-position: absolute;\n --data-card-gutters-inset: auto 8px 9px auto;\n --data-card-gutters-margin: 0;\n }\n\n /* .page-fill is WorkSurfacePageStyles' own class (flex: 1; min-height: 0) - the min-height half\n * is what lets ox-grist's internal scroller, not the page, be the thing that scrolls. */\n`\n"]}