pict-section-recordset 1.0.62 → 1.0.64

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 (9) hide show
  1. package/example_applications/index.html +41 -11
  2. package/example_applications/mocks/book-edit-view.html +137 -109
  3. package/example_applications/mocks/book-read-view.html +130 -103
  4. package/example_applications/mocks/list-view.html +170 -110
  5. package/example_applications/simple_entity/Simple-RecordSet-Application.js +78 -1
  6. package/example_applications/simple_entity/html/index.html +187 -7
  7. package/package.json +12 -12
  8. package/source/views/dashboard/RecordSet-Dashboard.js +100 -4
  9. /package/docs/{cover.md → _cover.md} +0 -0
package/example_applications/index.html CHANGED
@@ -3,18 +3,48 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Example Pict-Section-Form Applications</title>
6
+ <title>Examples - Pict Example</title>
7
+ <!-- Red Rock Mesa Theme — Pict Example App -->
8
+ <style>
9
+ *, *::before, *::after { box-sizing: border-box; }
10
+ body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: #FAEDCD; color: #264653; }
11
+
12
+ /* --- Header Bar --- */
13
+ .pict-example-header { display: flex; align-items: stretch; background: #264653; border-bottom: 3px solid #E76F51; }
14
+ .pict-example-badge { background: #E76F51; color: #fff; padding: 0.6rem 1rem; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; display: flex; align-items: center; gap: 0.5rem; }
15
+ .pict-example-badge svg { width: 14px; height: 14px; fill: #fff; flex-shrink: 0; }
16
+ .pict-example-app-name { padding: 0.6rem 1rem; color: #FAEDCD; font-size: 1.1rem; font-weight: 600; display: flex; align-items: center; }
17
+ .pict-example-module { margin-left: auto; padding: 0.6rem 1rem; color: #D4A373; font-size: 0.75rem; display: flex; align-items: center; letter-spacing: 0.03em; }
18
+
19
+ /* --- Content Area --- */
20
+ .pict-example-content { padding: 1.5rem; }
21
+ .pict-example-content h1 { color: #264653; font-size: 1.5rem; margin: 0 0 1.25rem; }
22
+
23
+ /* --- Example List --- */
24
+ .example-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
25
+ .example-list li { background: #fff; border: 1px solid #D4A373; border-left: 4px solid #E76F51; border-radius: 4px; transition: border-color 0.15s, box-shadow 0.15s; }
26
+ .example-list li:hover { border-left-color: #264653; box-shadow: 0 2px 8px rgba(38,70,83,0.1); }
27
+ .example-list a { display: block; padding: 0.75rem 1rem; text-decoration: none; color: #264653; font-weight: 500; font-size: 0.95rem; }
28
+ .example-list a:hover { color: #E76F51; }
29
+ </style>
7
30
  </head>
8
31
  <body>
9
- <h1>Examples</h1>
10
- <ul>
11
- <li><a href="debug/index.html">Debug Harness (must build from debug folder)</a></li>
12
- <li><a href="simple_form/dist/index.html">Simple Form</a></li>
13
- <li><a href="simple_table/dist/index.html">Simple Table</a></li>
14
- <li><a href="complex_table/dist/index.html">Complex Grid</a></li>
15
- <li><a href="complex_tuigrid/dist/index.html">Complex Grid (using Toast UI Grid)</a></li>
16
- <li><a href="gradebook/dist/index.html">Gradebook Linked Set Exercises</a></li>
17
- <li><a href="postcard_example/dist/index.html">PostKard Custom App</a></li>
18
- </ul>
32
+ <div class="pict-example-header">
33
+ <div class="pict-example-badge">
34
+ <svg viewBox="0 0 16 16"><polygon points="8,1 10,6 16,6 11,9.5 13,15 8,11.5 3,15 5,9.5 0,6 6,6"/></svg>
35
+ Pict Example
36
+ </div>
37
+ <div class="pict-example-app-name">Example Index</div>
38
+ <div class="pict-example-module">pict-section-recordset</div>
39
+ </div>
40
+ <div class="pict-example-content">
41
+ <h1>Example Applications</h1>
42
+ <ul class="example-list">
43
+ <li><a href="simple_entity/dist/index.html">Simple Entity (Books &amp; Authors)</a></li>
44
+ <li><a href="mocks/list-view.html">Mock: List View</a></li>
45
+ <li><a href="mocks/book-read-view.html">Mock: Book Read View</a></li>
46
+ <li><a href="mocks/book-edit-view.html">Mock: Book Edit View</a></li>
47
+ </ul>
48
+ </div>
19
49
  </body>
20
50
  </html>
package/example_applications/mocks/book-edit-view.html CHANGED
@@ -3,123 +3,151 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Example Pict-Section-Form List View </title>
6
+ <title>Book Edit View Mock - Pict Example</title>
7
+ <!-- Red Rock Mesa Theme — Pict Example App -->
7
8
  <style>
8
- .grid-container {
9
- display: grid;
10
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
11
- gap: 10px;
12
- }
13
- .grid-item{
14
- background-color: #f0f0f0;
15
- padding: 10px;
16
- text-align: center;
17
- border: 1px solid #ccc;
18
- list-style-type: none;
19
- }
20
- .grid-item.active {
21
- background-color: aliceblue
22
- }
23
- article {
24
- padding: 20px;
25
- border: 1px solid #ccc;
26
- margin: 10px 0;
27
- }
9
+ *, *::before, *::after { box-sizing: border-box; }
10
+ body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: #FAEDCD; color: #264653; }
11
+
12
+ /* --- Header Bar --- */
13
+ .pict-example-header { display: flex; align-items: stretch; background: #264653; border-bottom: 3px solid #E76F51; }
14
+ .pict-example-badge { background: #E76F51; color: #fff; padding: 0.6rem 1rem; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; display: flex; align-items: center; gap: 0.5rem; }
15
+ .pict-example-badge svg { width: 14px; height: 14px; fill: #fff; flex-shrink: 0; }
16
+ .pict-example-app-name { padding: 0.6rem 1rem; color: #FAEDCD; font-size: 1.1rem; font-weight: 600; display: flex; align-items: center; }
17
+ .pict-example-module { margin-left: auto; padding: 0.6rem 1rem; color: #D4A373; font-size: 0.75rem; display: flex; align-items: center; letter-spacing: 0.03em; }
18
+
19
+ /* --- Content Area --- */
20
+ .pict-example-content { padding: 1.5rem; }
21
+
22
+ /* --- Record Header --- */
23
+ #RSP-Header-Container { margin-bottom: 1rem; }
24
+ #RSP-Header-Container input[type="text"] { border: 1px solid #D4C4A8; background: #FFFCF7; padding: 0.5rem 0.75rem; border-radius: 4px; font-size: 1.5rem; font-weight: 700; color: #264653; width: 100%; margin-bottom: 1rem; }
25
+ #RSP-Header-Container input[type="text"]:focus { outline: none; border-color: #E76F51; box-shadow: 0 0 0 2px rgba(231,111,81,0.15); }
26
+
27
+ /* --- Tab Navigation --- */
28
+ .grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0; list-style: none; margin: 0; padding: 0; }
29
+ .grid-item { background: #fff; padding: 0.65rem 1rem; text-align: center; border: 1px solid #D4A373; border-bottom: 2px solid #D4A373; list-style-type: none; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
30
+ .grid-item a { text-decoration: none; color: #264653; font-weight: 500; font-size: 0.9rem; }
31
+ .grid-item:hover { background: #FFF9F0; }
32
+ .grid-item.active { background: #264653; border-color: #264653; border-bottom-color: #E76F51; }
33
+ .grid-item.active a { color: #FAEDCD; }
34
+
35
+ /* --- Record Content --- */
36
+ #RSP-Record-Container article { background: #fff; border: 1px solid #D4A373; border-top: 4px solid #E76F51; border-radius: 0 0 6px 6px; padding: 1.25rem; margin: 0 0 1rem; box-shadow: 0 2px 8px rgba(38,70,83,0.08); }
37
+ #RSP-Record-Container h3 { color: #264653; font-size: 1.1rem; margin: 0 0 0.75rem; }
38
+ #RSP-Record-Container h4 { color: #264653; font-size: 0.95rem; margin: 1rem 0 0.5rem; }
39
+ #RSP-Record-Container textarea { border: 1px solid #D4C4A8; background: #FFFCF7; padding: 0.45rem 0.6rem; border-radius: 4px; font-size: 0.9rem; color: #264653; width: 100%; min-height: 80px; font-family: inherit; }
40
+ #RSP-Record-Container textarea:focus { outline: none; border-color: #E76F51; box-shadow: 0 0 0 2px rgba(231,111,81,0.15); }
41
+ #RSP-Record-Container input[type="text"] { border: 1px solid #D4C4A8; background: #FFFCF7; padding: 0.45rem 0.6rem; border-radius: 4px; font-size: 0.9rem; color: #264653; width: 100%; }
42
+ #RSP-Record-Container input[type="text"]:focus { outline: none; border-color: #E76F51; box-shadow: 0 0 0 2px rgba(231,111,81,0.15); }
43
+ #RSP-Record-Container ul { padding-left: 1.25rem; }
44
+ #RSP-Record-Container li { padding: 0.35rem 0; color: #264653; font-size: 0.9rem; list-style: none; }
45
+ #RSP-Record-Container img { max-width: 100%; border-radius: 4px; border: 1px solid #D4A373; margin-bottom: 0.5rem; }
46
+ #RSP-Record-Image-Button { background: #264653; color: #FAEDCD; border: none; padding: 0.4rem 1rem; border-radius: 4px; font-size: 0.8rem; font-weight: 600; cursor: pointer; margin-bottom: 0.5rem; }
47
+ #RSP-Record-Image-Button:hover { background: #1A3340; }
48
+
49
+ /* --- Footer --- */
50
+ #RSP-Footer-Container { padding: 0.5rem 0; }
51
+ #RSP-Record-Button { background: #E76F51; color: #fff; border: none; padding: 0.5rem 1.25rem; border-radius: 4px; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
52
+ #RSP-Record-Button:hover { background: #C45A3E; }
28
53
  </style>
29
54
  </head>
30
55
  <body>
31
- <!-- START Header template -->
32
- <header id="RSP-Header-Container">
33
- <!-- START Header-Title template -->
34
- <input type="text" style="font-size: 24px; margin-top: 20px;" value="Book Title" />
35
- <br>
36
- <!-- END Header-Title template -->
37
- <!-- START Header-Nav template -->
38
- <nav id="RSP-Header-Nav">
39
- <ul class="grid-container">
40
- <li class="grid-item active"><a href="javascript:void(0);" onclick="toggleTabContent(event, 'RSP-Record-Toggleable-Content-1')">Details</a></li>
41
- <li class="grid-item"><a href="javascript:void(0);" onclick="toggleTabContent(event, 'RSP-Record-Toggleable-Content-2')">Author</a></li>
42
- <li class="grid-item"><a href="javascript:void(0);" onclick="toggleTabContent(event, 'RSP-Record-Toggleable-Content-3')">Series</a></li>
43
- </ul>
44
- </nav>
45
- <!-- END Header-Nav template -->
46
- </header>
47
- <!-- END Header template -->
48
-
49
- <!-- START Record template -->
50
- <section id="RSP-Record-Container">
51
- <!-- START Record Content -->
52
- <article id="RSP-Record-Toggleable-Content-1">
53
- <!-- START Record Content-Description template -->
54
- <br />
55
- <textarea>Book Description</textarea>
56
- <br />
57
- <!-- END Record Content-Description template -->
58
- <!-- START Record Content-Image template -->
59
- <img src="image.jpg" alt="Book Image">
60
- <button type="button" id="RSP-Record-Image-Button">Change Image</button>
61
- <!-- END Record Content-Image template -->
62
- <!-- START Record Content-Details template -->
63
- <h4>Book Metadata:</h4>
64
- <ul>
65
- <li><input type="text" value="Info 1" /></li>
66
- <li><input type="text" value="Info 2" /></li>
67
- <li><input type="text" value="Info 3" /></li>
68
- </ul>
69
- <!-- END Record Content-Details template -->
70
- </article>
71
- <!-- END Record Content -->
72
-
73
- <!-- START Record Content -->
74
- <article id="RSP-Record-Toggleable-Content-2" style="display:none;">
75
- <!-- START Record Content-Title template -->
76
- <input type="text" value="Joined Entity 1 Title" />
77
- <!-- END Record Content-Title template -->
78
- <!-- START Record Content-Description template -->
79
- <br />
80
- <textarea>Joined Entity 1 Description</textarea>
81
- <!-- END Record Content-Description template -->
82
- <!-- START Record Content-Details template -->
83
- <ul>
84
- <li><input type="text" value="Detail A" /></li>
85
- <li><input type="text" value="Detail B" /></li>
86
- <li><input type="text" value="Detail C" /></li>
87
- </ul>
88
- <!-- END Record Content-Details template -->
89
- </article>
90
- <!-- END Record Content -->
56
+ <div class="pict-example-header">
57
+ <div class="pict-example-badge">
58
+ <svg viewBox="0 0 16 16"><polygon points="8,1 10,6 16,6 11,9.5 13,15 8,11.5 3,15 5,9.5 0,6 6,6"/></svg>
59
+ Pict Example
60
+ </div>
61
+ <div class="pict-example-app-name">Book Edit View Mock</div>
62
+ <div class="pict-example-module">pict-section-recordset</div>
63
+ </div>
64
+ <div class="pict-example-content">
65
+ <!-- START Header template -->
66
+ <header id="RSP-Header-Container">
67
+ <!-- START Header-Title template -->
68
+ <input type="text" value="Book Title" />
69
+ <!-- END Header-Title template -->
70
+ <!-- START Header-Nav template -->
71
+ <nav id="RSP-Header-Nav">
72
+ <ul class="grid-container">
73
+ <li class="grid-item active"><a href="javascript:void(0);" onclick="toggleTabContent(event, 'RSP-Record-Toggleable-Content-1')">Details</a></li>
74
+ <li class="grid-item"><a href="javascript:void(0);" onclick="toggleTabContent(event, 'RSP-Record-Toggleable-Content-2')">Author</a></li>
75
+ <li class="grid-item"><a href="javascript:void(0);" onclick="toggleTabContent(event, 'RSP-Record-Toggleable-Content-3')">Series</a></li>
76
+ </ul>
77
+ </nav>
78
+ <!-- END Header-Nav template -->
79
+ </header>
80
+ <!-- END Header template -->
91
81
 
92
- <!-- START Record Content -->
93
- <article id="RSP-Record-Toggleable-Content-3" style="display:none;">
94
- <!-- START Record Content-Title template -->
95
- <input type="text" value="Joined Entity 2 Title" />
96
- <!-- END Record Content-Title template -->
97
- <!-- START Record Content-Description template -->
98
- <br />
99
- <textarea>Joined Entity 2 Description</textarea>
100
- <!-- END Record Content-Description template -->
101
- <!-- START Record Content-Details template -->
102
- <ul>
103
- <li><input type="text" value="Detail X" /></li>
104
- <li><input type="text" value="Detail Y" /></li>
105
- <li><input type="text" value="Detail Z" /></li>
106
- </ul>
107
- <!-- END Record Content-Details template -->
108
- </article>
109
- <!-- END Record Content -->
82
+ <!-- START Record template -->
83
+ <section id="RSP-Record-Container">
84
+ <!-- START Record Content -->
85
+ <article id="RSP-Record-Toggleable-Content-1">
86
+ <!-- START Record Content-Description template -->
87
+ <textarea>Book Description</textarea>
88
+ <!-- END Record Content-Description template -->
89
+ <!-- START Record Content-Image template -->
90
+ <img src="image.jpg" alt="Book Image">
91
+ <button type="button" id="RSP-Record-Image-Button">Change Image</button>
92
+ <!-- END Record Content-Image template -->
93
+ <!-- START Record Content-Details template -->
94
+ <h4>Book Metadata:</h4>
95
+ <ul>
96
+ <li><input type="text" value="Info 1" /></li>
97
+ <li><input type="text" value="Info 2" /></li>
98
+ <li><input type="text" value="Info 3" /></li>
99
+ </ul>
100
+ <!-- END Record Content-Details template -->
101
+ </article>
102
+ <!-- END Record Content -->
110
103
 
111
- </section>
112
- <!-- END Record template -->
104
+ <!-- START Record Content -->
105
+ <article id="RSP-Record-Toggleable-Content-2" style="display:none;">
106
+ <!-- START Record Content-Title template -->
107
+ <input type="text" value="Joined Entity 1 Title" />
108
+ <!-- END Record Content-Title template -->
109
+ <!-- START Record Content-Description template -->
110
+ <textarea>Joined Entity 1 Description</textarea>
111
+ <!-- END Record Content-Description template -->
112
+ <!-- START Record Content-Details template -->
113
+ <ul>
114
+ <li><input type="text" value="Detail A" /></li>
115
+ <li><input type="text" value="Detail B" /></li>
116
+ <li><input type="text" value="Detail C" /></li>
117
+ </ul>
118
+ <!-- END Record Content-Details template -->
119
+ </article>
120
+ <!-- END Record Content -->
113
121
 
114
- <!-- Footer template -->
115
- <footer id="RSP-Footer-Container">
116
- <!-- NOTE: slot for additional set actions -->
117
- <!-- START Record Content-Button template -->
118
- <button type="button" id="RSP-Record-Button" onclick="window.location='./book-read-view.html'">Save Changes</button>
119
- <!-- END Record Content-Button template -->
120
- </footer>
121
- <!-- END Footer template -->
122
+ <!-- START Record Content -->
123
+ <article id="RSP-Record-Toggleable-Content-3" style="display:none;">
124
+ <!-- START Record Content-Title template -->
125
+ <input type="text" value="Joined Entity 2 Title" />
126
+ <!-- END Record Content-Title template -->
127
+ <!-- START Record Content-Description template -->
128
+ <textarea>Joined Entity 2 Description</textarea>
129
+ <!-- END Record Content-Description template -->
130
+ <!-- START Record Content-Details template -->
131
+ <ul>
132
+ <li><input type="text" value="Detail X" /></li>
133
+ <li><input type="text" value="Detail Y" /></li>
134
+ <li><input type="text" value="Detail Z" /></li>
135
+ </ul>
136
+ <!-- END Record Content-Details template -->
137
+ </article>
138
+ <!-- END Record Content -->
139
+ </section>
140
+ <!-- END Record template -->
122
141
 
142
+ <!-- Footer template -->
143
+ <footer id="RSP-Footer-Container">
144
+ <!-- NOTE: slot for additional set actions -->
145
+ <!-- START Record Content-Button template -->
146
+ <button type="button" id="RSP-Record-Button" onclick="window.location='./book-read-view.html'">Save Changes</button>
147
+ <!-- END Record Content-Button template -->
148
+ </footer>
149
+ <!-- END Footer template -->
150
+ </div>
123
151
 
124
152
  <script>
125
153
  function toggleTabContent(event, contentId) {
package/example_applications/mocks/book-read-view.html CHANGED
@@ -3,117 +3,144 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Example Pict-Section-Form List View </title>
6
+ <title>Book Read View Mock - Pict Example</title>
7
+ <!-- Red Rock Mesa Theme — Pict Example App -->
7
8
  <style>
8
- .grid-container {
9
- display: grid;
10
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
11
- gap: 10px;
12
- }
13
- .grid-item{
14
- background-color: #f0f0f0;
15
- padding: 10px;
16
- text-align: center;
17
- border: 1px solid #ccc;
18
- list-style-type: none;
19
- }
20
- .grid-item.active {
21
- background-color: aliceblue
22
- }
23
- article {
24
- padding: 20px;
25
- border: 1px solid #ccc;
26
- margin: 10px 0;
27
- }
9
+ *, *::before, *::after { box-sizing: border-box; }
10
+ body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: #FAEDCD; color: #264653; }
11
+
12
+ /* --- Header Bar --- */
13
+ .pict-example-header { display: flex; align-items: stretch; background: #264653; border-bottom: 3px solid #E76F51; }
14
+ .pict-example-badge { background: #E76F51; color: #fff; padding: 0.6rem 1rem; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; display: flex; align-items: center; gap: 0.5rem; }
15
+ .pict-example-badge svg { width: 14px; height: 14px; fill: #fff; flex-shrink: 0; }
16
+ .pict-example-app-name { padding: 0.6rem 1rem; color: #FAEDCD; font-size: 1.1rem; font-weight: 600; display: flex; align-items: center; }
17
+ .pict-example-module { margin-left: auto; padding: 0.6rem 1rem; color: #D4A373; font-size: 0.75rem; display: flex; align-items: center; letter-spacing: 0.03em; }
18
+
19
+ /* --- Content Area --- */
20
+ .pict-example-content { padding: 1.5rem; }
21
+
22
+ /* --- Record Header --- */
23
+ #RSP-Header-Container { margin-bottom: 1rem; }
24
+ #RSP-Header-Container h1 { color: #264653; font-size: 1.5rem; margin: 0 0 1rem; }
25
+
26
+ /* --- Tab Navigation --- */
27
+ .grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0; list-style: none; margin: 0; padding: 0; }
28
+ .grid-item { background: #fff; padding: 0.65rem 1rem; text-align: center; border: 1px solid #D4A373; border-bottom: 2px solid #D4A373; list-style-type: none; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
29
+ .grid-item a { text-decoration: none; color: #264653; font-weight: 500; font-size: 0.9rem; }
30
+ .grid-item:hover { background: #FFF9F0; }
31
+ .grid-item.active { background: #264653; border-color: #264653; border-bottom-color: #E76F51; }
32
+ .grid-item.active a { color: #FAEDCD; }
33
+
34
+ /* --- Record Content --- */
35
+ #RSP-Record-Container article { background: #fff; border: 1px solid #D4A373; border-top: 4px solid #E76F51; border-radius: 0 0 6px 6px; padding: 1.25rem; margin: 0 0 1rem; box-shadow: 0 2px 8px rgba(38,70,83,0.08); }
36
+ #RSP-Record-Container h3 { color: #264653; font-size: 1.1rem; margin: 0 0 0.75rem; }
37
+ #RSP-Record-Container h4 { color: #264653; font-size: 0.95rem; margin: 1rem 0 0.5rem; }
38
+ #RSP-Record-Container p { color: #264653; line-height: 1.6; }
39
+ #RSP-Record-Container ul { padding-left: 1.25rem; }
40
+ #RSP-Record-Container li { padding: 0.25rem 0; color: #264653; font-size: 0.9rem; }
41
+ #RSP-Record-Container img { max-width: 100%; border-radius: 4px; border: 1px solid #D4A373; }
42
+
43
+ /* --- Footer --- */
44
+ #RSP-Footer-Container { padding: 0.5rem 0; }
45
+ #RSP-Record-Button { background: #E76F51; color: #fff; border: none; padding: 0.5rem 1.25rem; border-radius: 4px; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
46
+ #RSP-Record-Button:hover { background: #C45A3E; }
28
47
  </style>
29
48
  </head>
30
49
  <body>
31
- <!-- START Header template -->
32
- <header id="RSP-Header-Container">
33
- <!-- START Header-Title template -->
34
- <h1>Book Title</h1>
35
- <!-- END Header-Title template -->
36
- <!-- START Header-Nav template -->
37
- <nav id="RSP-Header-Nav">
38
- <ul class="grid-container">
39
- <li class="grid-item active"><a href="javascript:void(0);" onclick="toggleTabContent(event, 'RSP-Record-Toggleable-Content-1')">Details</a></li>
40
- <li class="grid-item"><a href="javascript:void(0);" onclick="toggleTabContent(event, 'RSP-Record-Toggleable-Content-2')">Author</a></li>
41
- <li class="grid-item"><a href="javascript:void(0);" onclick="toggleTabContent(event, 'RSP-Record-Toggleable-Content-3')">Series</a></li>
42
- </ul>
43
- </nav>
44
- <!-- END Header-Nav template -->
45
- </header>
46
- <!-- END Header template -->
47
-
48
- <!-- START Record template -->
49
- <section id="RSP-Record-Container">
50
- <!-- START Record Content -->
51
- <article id="RSP-Record-Toggleable-Content-1">
52
- <!-- START Record Content-Description template -->
53
- <p>Book Description</p>
54
- <!-- END Record Content-Description template -->
55
- <!-- START Record Content-Image template -->
56
- <img src="image.jpg" alt="Book Image">
57
- <!-- END Record Content-Image template -->
58
- <!-- START Record Content-Details template -->
59
- <h4>Book Metadata:</h4>
60
- <ul>
61
- <li>Info 1</li>
62
- <li>Info 2</li>
63
- <li>Info 3</li>
64
- </ul>
65
- <!-- END Record Content-Details template -->
66
- </article>
67
- <!-- END Record Content -->
68
-
69
- <!-- START Record Content -->
70
- <article id="RSP-Record-Toggleable-Content-2" style="display:none;">
71
- <!-- START Record Content-Title template -->
72
- <h3>Joined Entity 1 Title</h3>
73
- <!-- END Record Content-Title template -->
74
- <!-- START Record Content-Description template -->
75
- <p>Joined Entity 1 Description</p>
76
- <!-- END Record Content-Description template -->
77
- <!-- START Record Content-Details template -->
78
- <ul>
79
- <li>Detail A</li>
80
- <li>Detail B</li>
81
- <li>Detail C</li>
82
- </ul>
83
- <!-- END Record Content-Details template -->
84
- </article>
85
- <!-- END Record Content -->
50
+ <div class="pict-example-header">
51
+ <div class="pict-example-badge">
52
+ <svg viewBox="0 0 16 16"><polygon points="8,1 10,6 16,6 11,9.5 13,15 8,11.5 3,15 5,9.5 0,6 6,6"/></svg>
53
+ Pict Example
54
+ </div>
55
+ <div class="pict-example-app-name">Book Read View Mock</div>
56
+ <div class="pict-example-module">pict-section-recordset</div>
57
+ </div>
58
+ <div class="pict-example-content">
59
+ <!-- START Header template -->
60
+ <header id="RSP-Header-Container">
61
+ <!-- START Header-Title template -->
62
+ <h1>Book Title</h1>
63
+ <!-- END Header-Title template -->
64
+ <!-- START Header-Nav template -->
65
+ <nav id="RSP-Header-Nav">
66
+ <ul class="grid-container">
67
+ <li class="grid-item active"><a href="javascript:void(0);" onclick="toggleTabContent(event, 'RSP-Record-Toggleable-Content-1')">Details</a></li>
68
+ <li class="grid-item"><a href="javascript:void(0);" onclick="toggleTabContent(event, 'RSP-Record-Toggleable-Content-2')">Author</a></li>
69
+ <li class="grid-item"><a href="javascript:void(0);" onclick="toggleTabContent(event, 'RSP-Record-Toggleable-Content-3')">Series</a></li>
70
+ </ul>
71
+ </nav>
72
+ <!-- END Header-Nav template -->
73
+ </header>
74
+ <!-- END Header template -->
86
75
 
87
- <!-- START Record Content -->
88
- <article id="RSP-Record-Toggleable-Content-3" style="display:none;">
89
- <!-- START Record Content-Title template -->
90
- <h3>Joined Entity 2 Title</h3>
91
- <!-- END Record Content-Title template -->
92
- <!-- START Record Content-Description template -->
93
- <p>Joined Entity 2 Description</p>
94
- <!-- END Record Content-Description template -->
95
- <!-- START Record Content-Details template -->
96
- <ul>
97
- <li>Detail X</li>
98
- <li>Detail Y</li>
99
- <li>Detail Z</li>
100
- </ul>
101
- <!-- END Record Content-Details template -->
102
- </article>
103
- <!-- END Record Content -->
76
+ <!-- START Record template -->
77
+ <section id="RSP-Record-Container">
78
+ <!-- START Record Content -->
79
+ <article id="RSP-Record-Toggleable-Content-1">
80
+ <!-- START Record Content-Description template -->
81
+ <p>Book Description</p>
82
+ <!-- END Record Content-Description template -->
83
+ <!-- START Record Content-Image template -->
84
+ <img src="image.jpg" alt="Book Image">
85
+ <!-- END Record Content-Image template -->
86
+ <!-- START Record Content-Details template -->
87
+ <h4>Book Metadata:</h4>
88
+ <ul>
89
+ <li>Info 1</li>
90
+ <li>Info 2</li>
91
+ <li>Info 3</li>
92
+ </ul>
93
+ <!-- END Record Content-Details template -->
94
+ </article>
95
+ <!-- END Record Content -->
104
96
 
105
- </section>
106
- <!-- END Record template -->
97
+ <!-- START Record Content -->
98
+ <article id="RSP-Record-Toggleable-Content-2" style="display:none;">
99
+ <!-- START Record Content-Title template -->
100
+ <h3>Joined Entity 1 Title</h3>
101
+ <!-- END Record Content-Title template -->
102
+ <!-- START Record Content-Description template -->
103
+ <p>Joined Entity 1 Description</p>
104
+ <!-- END Record Content-Description template -->
105
+ <!-- START Record Content-Details template -->
106
+ <ul>
107
+ <li>Detail A</li>
108
+ <li>Detail B</li>
109
+ <li>Detail C</li>
110
+ </ul>
111
+ <!-- END Record Content-Details template -->
112
+ </article>
113
+ <!-- END Record Content -->
107
114
 
108
- <!-- Footer template -->
109
- <footer id="RSP-Footer-Container">
110
- <!-- NOTE: slot for additional set actions -->
111
- <!-- START Record Content-Button template -->
112
- <button type="button" id="RSP-Record-Button" onclick="window.location='./book-edit-view.html'">Edit Record</button>
113
- <!-- END Record Content-Button template -->
114
- </footer>
115
- <!-- END Footer template -->
115
+ <!-- START Record Content -->
116
+ <article id="RSP-Record-Toggleable-Content-3" style="display:none;">
117
+ <!-- START Record Content-Title template -->
118
+ <h3>Joined Entity 2 Title</h3>
119
+ <!-- END Record Content-Title template -->
120
+ <!-- START Record Content-Description template -->
121
+ <p>Joined Entity 2 Description</p>
122
+ <!-- END Record Content-Description template -->
123
+ <!-- START Record Content-Details template -->
124
+ <ul>
125
+ <li>Detail X</li>
126
+ <li>Detail Y</li>
127
+ <li>Detail Z</li>
128
+ </ul>
129
+ <!-- END Record Content-Details template -->
130
+ </article>
131
+ <!-- END Record Content -->
132
+ </section>
133
+ <!-- END Record template -->
116
134
 
135
+ <!-- Footer template -->
136
+ <footer id="RSP-Footer-Container">
137
+ <!-- NOTE: slot for additional set actions -->
138
+ <!-- START Record Content-Button template -->
139
+ <button type="button" id="RSP-Record-Button" onclick="window.location='./book-edit-view.html'">Edit Record</button>
140
+ <!-- END Record Content-Button template -->
141
+ </footer>
142
+ <!-- END Footer template -->
143
+ </div>
117
144
 
118
145
  <script>
119
146
  function toggleTabContent(event, contentId) {