Skip to content

Commit 61187f5

Browse files
author
R. S. Doiel
committed
Added input-agent-list component
1 parent 49b30e3 commit 61187f5

30 files changed

+667
-99
lines changed

CITATION.cff

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,18 @@ abstract: "CL-web-components provides a collection of Web Components used by Cal
77
88
The following are the components currently provided.
99
10-
`csv-textarea`
11-
: This is a textarea like component who's innerHTML content is CSV data. The component will display this as an editable table.
1210
1311
`a-to-z-ul`
1412
: This component takes an innerHTML containing a UL list. The UL list is then turned into an A to Z navigatable UL List. If JavaScript is unavailable then the innerHTML UL remains as a fallback.
1513
16-
One additional helper module is currently provided, `parseCSV.js`, that provides stringify and parse functions for CSV rows and strings."
14+
`csv-textarea`
15+
: This is a textarea like component who's innerHTML content is CSV data. The component will display this as an editable table.
16+
17+
`input-agent-list`
18+
: This element wraps a textarea containing a list of agents expressed as JSON.
19+
20+
`sortable-table`
21+
: This is a component that takes an innerHTML containing table. It makes the table sortable by the column headings and provides a filter input that lets you enter text to filter by and pick a column to filter on."
1722
authors:
1823
- family-names: Doiel
1924
given-names: R. S.
@@ -27,8 +32,8 @@ contacts:
2732
2833

2934
repository-code: "https://github.com/caltechlibrary/CL-web-components"
30-
version: 0.0.7
31-
date-released: 2025-06-20
35+
version: 0.0.8
36+
date-released: 2025-07-03
3237

3338
license-url: "https://caltechlibrary.github.io/CL-web-components/LICENSE"
3439
keywords:

README.md

Lines changed: 11 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,40 @@
11

2-
3-
# CL-web-components 0.0.4
2+
# CL-web-components
43

54
CL-web-components provides a collection of Web Components used by Caltech Library in various web sites and projects.
65

76
The following are the components currently provided.
87

9-
`csv-textarea`
10-
: This is a textarea like component who's innerHTML content is CSV data. The component will display this as an editable table.
118

129
`a-to-z-ul`
1310
: This component takes an innerHTML containing a UL list. The UL list is then turned into an A to Z navigatable UL List. If JavaScript is unavailable then the innerHTML UL remains as a fallback.
1411

12+
`csv-textarea`
13+
: This is a textarea like component who's innerHTML content is CSV data. The component will display this as an editable table.
14+
15+
`input-agent-list`
16+
: This element wraps a textarea containing a list of agents expressed as JSON.
17+
1518
`sortable-table`
1619
: This is a component that takes an innerHTML containing table. It makes the table sortable by the column headings and provides a filter input that lets you enter text to filter by and pick a column to filter on.
1720

18-
One additional helper module is currently provided, `parseCSV.js`, that provides stringify and parse functions for CSV rows and strings.
19-
2021
## Release Notes
2122

22-
- version: 0.0.4
23+
- version: 0.0.8
2324
- status: wip
24-
- released: 2025-03-12
25-
26-
Bug fix correcting missing events of "focused" and "changed" in CSVTextarea.
25+
- released: 2025-07-03
2726

27+
Added a new `<input-agent-list></input-agent-list>` web component. This allows you to use a textarea containing a list of agents (people and organizations)
28+
to be presented as a friendly editing element while preserving the textarea with JSON as a fallback.
2829

2930
### Authors
3031

3132
- Doiel, R. S.
3233

33-
34-
### Contributors
35-
36-
- Mistral
37-
38-
3934
### Maintainers
4035

4136
- Doiel, R. S.
4237

43-
44-
Uses: - HTML5-compatible web browser
45-
4638
## Related resources
4739

4840

about.html

Lines changed: 20 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -19,28 +19,16 @@
1919
</nav>
2020
<section>
2121
<h1 id="about-this-software">About this software</h1>
22-
<h2 id="cl-web-components-0.0.7">CL-web-components 0.0.7</h2>
23-
<p>The files for the web components were normalized around the web
24-
componant name.</p>
25-
<ul>
26-
<li>csvtextaraa.js became csv-textarea.js for
27-
`&lt;csv-textarea&gt;&lt;/csv-textarea&gt;`</li>
28-
<li>a-to-z-ul.js became a-to-z-list.js for
29-
`&lt;a-to-z-list&gt;&lt;/a-to-z-list&gt;`</li>
30-
</ul>
31-
<p>Observer method setup was added to `&lt;a-to-z-list&gt;`.
32-
`&lt;csv-textarea&gt;` was updated with a form setup and observer method
33-
setup.</p>
22+
<h2 id="cl-web-components-0.0.8">CL-web-components 0.0.8</h2>
23+
<p>Added a new `&lt;input-agent-list&gt;&lt;/input-agent-list&gt;` web
24+
component. This allows you to use a textarea containing a list of agents
25+
(people and organizations) to be presented as a friendly editing element
26+
while preserving the textarea with JSON as a fallback.</p>
3427
<h3 id="authors">Authors</h3>
3528
<ul>
3629
<li>R. S. Doiel, <a href="https://orcid.org/0000-0003-0900-6903"
3730
class="uri">https://orcid.org/0000-0003-0900-6903</a></li>
3831
</ul>
39-
<h3 id="contributors">Contributors</h3>
40-
<ul>
41-
<li>Mistral, <a href="https://mistral.ai"
42-
class="uri">https://mistral.ai</a></li>
43-
</ul>
4432
<h3 id="maintainers">Maintainers</h3>
4533
<ul>
4634
<li>R. S. Doiel, <a href="https://orcid.org/0000-0003-0900-6903"
@@ -50,21 +38,29 @@ <h3 id="maintainers">Maintainers</h3>
5038
Caltech Library in various web sites and projects.</p>
5139
<p>The following are the components currently provided.</p>
5240
<dl>
41+
<dt>`a-to-z-ul`</dt>
42+
<dd>
43+
This component takes an innerHTML containing a UL list. The UL list is
44+
then turned into an A to Z navigatable UL List. If JavaScript is
45+
unavailable then the innerHTML UL remains as a fallback.
46+
</dd>
5347
<dt>`csv-textarea`</dt>
5448
<dd>
5549
This is a textarea like component who's innerHTML content is CSV data.
5650
The component will display this as an editable table.
5751
</dd>
58-
<dt>`a-to-z-ul`</dt>
52+
<dt>`input-agent-list`</dt>
5953
<dd>
60-
This component takes an innerHTML containing a UL list. The UL list is
61-
then turned into an A to Z navigatable UL List. If JavaScript is
62-
unavailable then the innerHTML UL remains as a fallback.
54+
This element wraps a textarea containing a list of agents expressed as
55+
JSON.
56+
</dd>
57+
<dt>`sortable-table`</dt>
58+
<dd>
59+
This is a component that takes an innerHTML containing table. It makes
60+
the table sortable by the column headings and provides a filter input
61+
that lets you enter text to filter by and pick a column to filter on.
6362
</dd>
6463
</dl>
65-
<p>One additional helper module is currently provided, `parseCSV.js`,
66-
that provides stringify and parse functions for CSV rows and
67-
strings.</p>
6864
<ul>
6965
<li>License: <a
7066
href="https://caltechlibrary.github.io/CL-web-components/LICENSE"

about.md

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,31 @@ abstract: "CL-web-components provides a collection of Web Components used by Cal
44
55
The following are the components currently provided.
66
7-
&#x60;csv-textarea&#x60;
8-
: This is a textarea like component who&#x27;s innerHTML content is CSV data. The component will display this as an editable table.
97
108
&#x60;a-to-z-ul&#x60;
119
: This component takes an innerHTML containing a UL list. The UL list is then turned into an A to Z navigatable UL List. If JavaScript is unavailable then the innerHTML UL remains as a fallback.
1210
13-
One additional helper module is currently provided, &#x60;parseCSV.js&#x60;, that provides stringify and parse functions for CSV rows and strings."
11+
&#x60;csv-textarea&#x60;
12+
: This is a textarea like component who&#x27;s innerHTML content is CSV data. The component will display this as an editable table.
13+
14+
&#x60;input-agent-list&#x60;
15+
: This element wraps a textarea containing a list of agents expressed as JSON.
16+
17+
&#x60;sortable-table&#x60;
18+
: This is a component that takes an innerHTML containing table. It makes the table sortable by the column headings and provides a filter input that lets you enter text to filter by and pick a column to filter on."
1419
authors:
1520
- family_name: Doiel
1621
given_name: R. S.
1722
id: https://orcid.org/0000-0003-0900-6903
1823

19-
contributor:
20-
- name: Mistral
21-
id: https://mistral.ai
2224

2325
maintainer:
2426
- family_name: Doiel
2527
given_name: R. S.
2628
id: https://orcid.org/0000-0003-0900-6903
2729

2830
repository_code: https://github.com/caltechlibrary/CL-web-components
29-
version: 0.0.7
31+
version: 0.0.8
3032
license_url: https://caltechlibrary.github.io/CL-web-components/LICENSE
3133

3234
programming_language:
@@ -41,29 +43,22 @@ keywords:
4143
- ES6
4244
- Web Components
4345

44-
date_released: 2025-06-20
46+
date_released: 2025-07-03
4547
---
4648

4749
About this software
4850
===================
4951

50-
## CL-web-components 0.0.7
51-
52-
The files for the web components were normalized around the web componant name.
53-
54-
- csvtextaraa.js became csv-textarea.js for &#x60;&lt;csv-textarea&gt;&lt;/csv-textarea&gt;&#x60;
55-
- a-to-z-ul.js became a-to-z-list.js for &#x60;&lt;a-to-z-list&gt;&lt;/a-to-z-list&gt;&#x60;
52+
## CL-web-components 0.0.8
5653

57-
Observer method setup was added to &#x60;&lt;a-to-z-list&gt;&#x60;. &#x60;&lt;csv-textarea&gt;&#x60; was updated with a form setup and observer method setup.
54+
Added a new &#x60;&lt;input-agent-list&gt;&lt;/input-agent-list&gt;&#x60; web component. This allows you to use a textarea containing a list of agents (people and organizations)
55+
to be presented as a friendly editing element while preserving the textarea with JSON as a fallback.
5856

5957
### Authors
6058

6159
- R. S. Doiel, <https://orcid.org/0000-0003-0900-6903>
6260

6361

64-
### Contributors
65-
66-
- Mistral, <https://mistral.ai>
6762

6863

6964
### Maintainers
@@ -75,13 +70,18 @@ CL-web-components provides a collection of Web Components used by Caltech Librar
7570

7671
The following are the components currently provided.
7772

78-
&#x60;csv-textarea&#x60;
79-
: This is a textarea like component who&#x27;s innerHTML content is CSV data. The component will display this as an editable table.
8073

8174
&#x60;a-to-z-ul&#x60;
8275
: This component takes an innerHTML containing a UL list. The UL list is then turned into an A to Z navigatable UL List. If JavaScript is unavailable then the innerHTML UL remains as a fallback.
8376

84-
One additional helper module is currently provided, &#x60;parseCSV.js&#x60;, that provides stringify and parse functions for CSV rows and strings.
77+
&#x60;csv-textarea&#x60;
78+
: This is a textarea like component who&#x27;s innerHTML content is CSV data. The component will display this as an editable table.
79+
80+
&#x60;input-agent-list&#x60;
81+
: This element wraps a textarea containing a list of agents expressed as JSON.
82+
83+
&#x60;sortable-table&#x60;
84+
: This is a component that takes an innerHTML containing table. It makes the table sortable by the column headings and provides a filter input that lets you enter text to filter by and pick a column to filter on.
8585

8686
- License: <https://caltechlibrary.github.io/CL-web-components/LICENSE>
8787
- GitHub: <https://github.com/caltechlibrary/CL-web-components>

codemeta.json

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,6 @@
1111
"email": "[email protected]"
1212
}
1313
],
14-
"contributor": [
15-
{
16-
"id": "https://mistral.ai",
17-
"type": "Organization",
18-
"name": "Mistral"
19-
}
20-
],
2114
"maintainer": [
2215
{
2316
"id": "https://orcid.org/0000-0003-0900-6903",
@@ -28,9 +21,9 @@
2821
}
2922
],
3023
"dateCreated": "2025-02-26",
31-
"dateModified": "2025-06-20",
32-
"datePublished": "2025-06-20",
33-
"description": "CL-web-components provides a collection of Web Components used by Caltech Library in various web sites and projects.\n\nThe following are the components currently provided.\n\n`csv-textarea`\n: This is a textarea like component who's innerHTML content is CSV data. The component will display this as an editable table. \n\n`a-to-z-ul`\n: This component takes an innerHTML containing a UL list. The UL list is then turned into an A to Z navigatable UL List. If JavaScript is unavailable then the innerHTML UL remains as a fallback.\n\nOne additional helper module is currently provided, `parseCSV.js`, that provides stringify and parse functions for CSV rows and strings.",
24+
"dateModified": "2025-07-03",
25+
"datePublished": "2025-07-03",
26+
"description": "CL-web-components provides a collection of Web Components used by Caltech Library in various web sites and projects.\n\nThe following are the components currently provided.\n\n\n`a-to-z-ul`\n: This component takes an innerHTML containing a UL list. The UL list is then turned into an A to Z navigatable UL List. If JavaScript is unavailable then the innerHTML UL remains as a fallback.\n\n`csv-textarea`\n: This is a textarea like component who's innerHTML content is CSV data. The component will display this as an editable table. \n\n`input-agent-list`\n: This element wraps a textarea containing a list of agents expressed as JSON. \n\n`sortable-table`\n: This is a component that takes an innerHTML containing table. It makes the table sortable by the column headings and provides a filter input that lets you enter text to filter by and pick a column to filter on.",
3427
"funder": [
3528
"Caltech Library"
3629
],
@@ -53,11 +46,11 @@
5346
"https://github.com/caltechlibrary/a_to_z_ul"
5447
],
5548
"runtimePlatform": "- HTML5-compatible web browser",
56-
"version": "0.0.7",
49+
"version": "0.0.8",
5750
"developmentStatus": "wip",
5851
"issueTracker": "https://github.com/caltechlibrary/CL-web-components/issues",
5952
"downloadUrl": "https://github.com/caltechlibrary/CL-web-components/releases",
60-
"releaseNotes": "The files for the web components were normalized around the web componant name.\n\n- csvtextaraa.js became csv-textarea.js for `<csv-textarea></csv-textarea>`\n- a-to-z-ul.js became a-to-z-list.js for `<a-to-z-list></a-to-z-list>`\n\nObserver method setup was added to `<a-to-z-list>`. `<csv-textarea>` was updated with a form setup and observer method setup.",
53+
"releaseNotes": "Added a new `<input-agent-list></input-agent-list>` web component. This allows you to use a textarea containing a list of agents (people and organizations)\nto be presented as a friendly editing element while preserving the textarea with JSON as a fallback.",
6154
"copyrightYear": 2025,
6255
"copyrightHolder": "California Institute of Technology"
6356
}

demo_input_agent_list.html

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Agent List Input</title>
7+
<script src="input-agent-list.js" type="module"></script>
8+
</head>
9+
<body>
10+
11+
<h1>Example of an input element for lists of agents (people and organizations)</h1>
12+
13+
<h2>An empty list, read to add people or organizations</h2>
14+
15+
<input-agent-list>
16+
<textarea></textarea>
17+
</input-agent-list>
18+
19+
20+
<h2>A populated list example</h2>
21+
22+
NOTE: style attribute is being passed so you should see different color text and background.
23+
24+
<input-agent-list style="color: yellow; background-color: blue; font-size: 16px;">
25+
<textarea>
26+
[
27+
{
28+
"family_name": "Doe",
29+
"given_name": "John",
30+
"orcid": "0000-0000-0000-0000"
31+
},
32+
{
33+
"name": "Example Organization",
34+
"ror": "0000001"
35+
}
36+
]
37+
</textarea>
38+
</input-agent-list>
39+
40+
41+
<script>
42+
</script>
43+
44+
</body>
45+
</html>

0 commit comments

Comments
 (0)