Merge branch 'develop' into 157-bug-currency-field-component-value-ha…

…rdening

.tooling/eleventy/assets/css/style.css

@@ -425,6 +425,7 @@ header .header-version-select {
     --omni-select-control-padding: 0px 4px 0px 0px;
     --omni-form-clear-control-width: 0px;
     --omni-select-items-container-width: auto;
+    --omni-select-field-height: 100%;
 }
 
 .docs-select {
@@ -598,13 +599,15 @@ h2 {
 
 .static-article code:not([class]),
 .story-description code:not([class]),
+.component-tab#docs code:not([class]),
 .keyboard-showcase code:not([class]) {
     font-family: ui-monospace, monospace;
     font-size: 14px;
 }
 
 .static-article code:not([class]),
 .story-description code:not([class]),
+.component-tab#docs code:not([class]),
 .keyboard-showcase code:not([class]) {
     padding: 2px 6px;
     margin: 0;

.tooling/eleventy/components.njk

@@ -127,6 +127,66 @@ eleventyComputed:
                     </div>
                 {% endif %}
 
+                {% set instanceFuncs = customElements | getInstanceFunctions(component.name) %}
+                {% if instanceFuncs.length > 0 %}
+                    <h2 class="component-props-table-header">Instance Functions</h2>
+                    {# <div class="docs-search-area">
+                        <omni-search-field id="instance-function-search"></omni-search-field>
+                    </div> #}
+                    <div class="component-props-table-wrapper">
+                        <table class="component-props-table">
+                            <thead>
+                                <tr>
+                                    <th scope="col">Name</th>
+                                    <th scope="col">Parameters</th>
+                                    <th scope="col">Returns</th>
+                                    <th scope="col">Description</th>
+                                </tr>
+                            </thead>
+                            <tbody id="component-attributes">
+                                {% for f in instanceFuncs %}
+                                <tr>
+                                    <td data-label="Name" scope="row">{{f.name}}</td>
+                                    <td data-label="Parameters"><pre><code class="language-js">{{ f.parameters }}</code></pre></td>
+                                    <td data-label="Returns"><pre><code class="language-js">{{ f.returnType }}</code></pre></td>
+                                    <td data-label="Description">{{ f.description | safe }}</td>
+                                </tr>
+                                {% endfor %}
+                            </tbody>
+                        </table>
+                    </div>
+                {% endif %}
+
+                {% set staticFuncs = customElements | getStaticFunctions(component.name) %}
+                {% if staticFuncs.length > 0 %}
+                    <h2 class="component-props-table-header">Static Functions</h2>
+                    {# <div class="docs-search-area">
+                        <omni-search-field id="static-function-search"></omni-search-field>
+                    </div> #}
+                    <div class="component-props-table-wrapper">
+                        <table class="component-props-table">
+                            <thead>
+                                <tr>
+                                    <th scope="col">Name</th>
+                                    <th scope="col">Parameters</th>
+                                    <th scope="col">Returns</th>
+                                    <th scope="col">Description</th>
+                                </tr>
+                            </thead>
+                            <tbody id="component-attributes">
+                                {% for f in staticFuncs %}
+                                <tr>
+                                    <td data-label="Name" scope="row">{{f.name}}</td>
+                                    <td data-label="Parameters"><pre><code class="language-js">{{ f.parameters }}</code></pre></td>
+                                    <td data-label="Returns"><pre><code class="language-js">{{ f.returnType }}</code></pre></td>
+                                    <td data-label="Description">{{ f.description | safe }}</td>
+                                </tr>
+                                {% endfor %}
+                            </tbody>
+                        </table>
+                    </div>
+                {% endif %}
+
                 {% set globalAttributes = customElements | getGlobalAttributes(component.name) %}
                 {% if globalAttributes.length > 0 %}
                     <h2 class="component-props-table-header">Supported Global Attributes</h2>

.tooling/scripts/eleventy/filters.js

@@ -44,6 +44,61 @@ export function getProperties(value, componentName) {
     });
 }
 
+function convertToParameterString(parametersList) {
+    let parameters = '';
+
+    if (!parametersList || parametersList.length === 0) {
+        return parameters;
+    }
+
+    parametersList.forEach(p => {
+        if (parameters) {
+            parameters += ',\r\n';
+        }
+        if (!p.type) {
+            console.log(p);
+        }
+
+        parameters += `${p.name} - ${p.type.text}`
+    });
+
+    return parameters;
+}
+
+export function getInstanceFunctions(value, componentName) {
+    const declaration = getComponentDeclaration(value, componentName);
+    return declaration.members?.filter(m => m.kind === 'method' &&
+        m.privacy !== 'private' &&
+        m.privacy !== 'protected' &&
+        m.description &&
+        m.static?.toString() !== 'true' &&
+        !m.name.startsWith('_'))?.map(a => {
+            return {
+                ...a,
+                parameters: convertToParameterString(a.parameters),
+                description: transformFromJsdoc(a.description),
+                returnType: a.return?.type?.text ?? ''
+            };
+        });
+}
+
+export function getStaticFunctions(value, componentName) {
+    const declaration = getComponentDeclaration(value, componentName);
+    return declaration.members?.filter(m => m.kind === 'method' &&
+        m.privacy !== 'private' &&
+        m.privacy !== 'protected' &&
+        m.description &&
+        m.static?.toString() === 'true' &&
+        !m.name.startsWith('_'))?.map(a => {
+            return {
+                ...a,
+                parameters: convertToParameterString(a.parameters),
+                description: transformFromJsdoc(a.description),
+                returnType: a.return?.type?.text ?? ''
+            };
+        });
+}
+
 export function getGlobalAttributes(value, componentName) {
     const declaration = getComponentDeclaration(value, componentName);
     return declaration.globalAttributes?.map(a => {
@@ -110,8 +165,8 @@ export function getCSSProperties(value, componentName) {
 }
 
 export function splitPascalCase(word) {
-	var wordRe = /($[a-z])|[A-Z][^A-Z]+/g;
-	return word.match(wordRe).join(' ');
+    var wordRe = /($[a-z])|[A-Z][^A-Z]+/g;
+    return word.match(wordRe).join(' ');
 }
 
 function distinct(value, index, self) {

.vscode/settings.json

@@ -44,6 +44,7 @@
 		"keyboard": true,
 		"modal": true,
 		"tab": true,
-		"toast": true
+		"toast": true,
+		"alert": true
 	}
 }