openproject-primer_view_components 0.70.5 → 0.72.0

data/app/components/primer/{open_project → alpha}/tree_view/sub_tree.rb

@@ -1,26 +1,26 @@
 # frozen_string_literal: true
 
 module Primer
-  module OpenProject
+  module Alpha
     class TreeView
       # A `TreeView` sub-tree.
       #
-      # This component is part of the <%= link_to_component(Primer::OpenProject::TreeView) %> component and should
+      # This component is part of the <%= link_to_component(Primer::Alpha::TreeView) %> component and should
       # not be used directly.
       class SubTree < Primer::Component
         # @!parse
         #   # Adds an leaf node to the tree. Leaf nodes are nodes that do not have children.
         #   #
-        #   # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Primer::OpenProject::TreeView::LeafNode) %>
-        #   # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Primer::OpenProject::TreeView::LeafNode) %>, or whatever class is passed as the `component_klass` argument.
+        #   # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Primer::Alpha::TreeView::LeafNode) %>
+        #   # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Primer::Alpha::TreeView::LeafNode) %>, or whatever class is passed as the `component_klass` argument.
         #   def with_leaf(**system_arguments, &block)
         #   end
 
         # @!parse
         #   # Adds a sub-tree node to the tree. Sub-trees are nodes that have children, which can be both leaf nodes and other sub-trees.
         #   #
-        #   # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Primer::OpenProject::TreeView::SubTreeNode) %>
-        #   # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Primer::OpenProject::TreeView::SubTreeNode) %>, or whatever class is passed as the `component_klass` argument.
+        #   # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Primer::Alpha::TreeView::SubTreeNode) %>
+        #   # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Primer::Alpha::TreeView::SubTreeNode) %>, or whatever class is passed as the `component_klass` argument.
         #   def with_sub_tree(**system_arguments, &block)
         #   end
 
@@ -55,14 +55,14 @@ module Primer
         # @!parse
         #   # Adds a loader to this sub-tree that displays a spinner animation while nodes are fetched from the server.
         #   #
-        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::OpenProject::TreeView::SpinnerLoader) %>.
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::TreeView::SpinnerLoader) %>.
         #   def with_loading_spinner(**system_arguments, &block)
         #   end
 
         # @!parse
         #   # Adds a loader to this sub-tree that displays a skeleton animation while nodes are fetched from the server.
         #   #
-        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::OpenProject::TreeView::SkeletonLoader) %>.
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::TreeView::SkeletonLoader) %>.
         #   def with_loading_spinner(**system_arguments, &block)
         #   end
 
@@ -91,8 +91,8 @@ module Primer
 
         attr_reader :node_variant
 
-        # @param node_variant [Symbol] The variant to use for this node. <%= one_of(Primer::OpenProject::TreeView::NODE_VARIANT_OPTIONS) %>
-        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::OpenProject::TreeView::SubTreeContainer) %>.
+        # @param node_variant [Symbol] The variant to use for this node. <%= one_of(Primer::Alpha::TreeView::NODE_VARIANT_OPTIONS) %>
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::TreeView::SubTreeContainer) %>.
         def initialize(node_variant:, **system_arguments)
           @node_variant = node_variant
 

data/app/components/primer/{open_project → alpha}/tree_view/sub_tree_container.rb

@@ -1,9 +1,9 @@
 # frozen_string_literal: true
 
 module Primer
-  module OpenProject
+  module Alpha
     class TreeView
-      # This component is part of the <%= link_to_component(Primer::OpenProject::TreeView) %> component and should
+      # This component is part of the <%= link_to_component(Primer::Alpha::TreeView) %> component and should
       # not be used directly.
       class SubTreeContainer < Primer::Component
         # The path to this node

data/app/components/primer/{open_project → alpha}/tree_view/sub_tree_node.rb

@@ -1,24 +1,25 @@
 # frozen_string_literal: true
 
 module Primer
-  module OpenProject
+  module Alpha
     class TreeView
       # A `TreeView` sub-tree node.
       #
-      # This component is part of the <%= link_to_component(Primer::OpenProject::TreeView) %> component and should
+      # This component is part of the <%= link_to_component(Primer::Alpha::TreeView) %> component and should
       # not be used directly.
       class SubTreeNode < Primer::Component
-        DEFAULT_SELECT_STRATEGY = :descendants
+        DEFAULT_SELECT_STRATEGY = :mixed_descendants
         SELECT_STRATEGIES = [
           :self,
-          DEFAULT_SELECT_STRATEGY
+          DEFAULT_SELECT_STRATEGY,
+          :descendants
         ]
 
         # @!parse
         #   # Adds a leading visual icon rendered to the left of the node's label.
         #   #
         #   # @param label [String] A label describing the visual, displayed only to screen readers.
-        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::OpenProject::TreeView::Icon) %>.
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::TreeView::Icon) %>.
         #   def with_leading_visual_icon(label: nil, **system_arguments, &block)
         #   end
 
@@ -26,7 +27,7 @@ module Primer
         #   # Adds a pair of leading visual icon rendered to the left of the node's label.
         #   #
         #   # @param label [String] A label describing the visual, displayed only to screen readers.
-        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::OpenProject::TreeView::IconPair) %>.
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::TreeView::IconPair) %>.
         #   def with_leading_visual_icons(label: nil, **system_arguments, &block)
         #   end
 
@@ -59,7 +60,7 @@ module Primer
               visual: IconPair.new(
                 **system_arguments,
                 expanded: @sub_tree.expanded?,
-              )
+                )
             )
           }
         }
@@ -86,7 +87,7 @@ module Primer
         #   # Adds a trailing visual icon rendered to the right of the node's label.
         #   #
         #   # @param label [String] A label describing the visual, displayed only to screen readers.
-        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::OpenProject::TreeView::Icon) %>.
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::TreeView::Icon) %>.
         #   def with_trailing_visual_icon(label: nil, **system_arguments, &block)
         #   end
 
@@ -107,11 +108,20 @@ module Primer
 
         # @param label [String] The node's label, i.e. it's textual content.
         # @param path [Array<String>] The node's "path," i.e. this node's label and the labels of all its ancestors. This node should be reachable by traversing the tree following this path.
-        # @param node_variant [Symbol] The variant to use for this node. <%= one_of(Primer::OpenProject::TreeView::NODE_VARIANT_OPTIONS) %>
+        # @param node_variant [Symbol] The variant to use for this node. <%= one_of(Primer::Alpha::TreeView::NODE_VARIANT_OPTIONS) %>
+        # @param sub_tree_component_klass [Class] The class to use for the sub-tree instead of the default <%= link_to_component(Primer::Alpha::TreeView::SubTree) %>
         # @param expanded [Boolean] Whether or not this sub-tree should be rendered expanded.
-        # @param select_strategy [Symbol] What should happen when this sub-tree node is checked. <%= one_of(Primer::OpenProject::TreeView::SubTreeNode::SELECT_STRATEGIES) %>
-        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::OpenProject::TreeView::Node) %>.
-        def initialize(label:, path:, node_variant:, expanded: false, select_strategy: DEFAULT_SELECT_STRATEGY, **system_arguments)
+        # @param select_strategy [Symbol] What should happen when this sub-tree node is checked. <%= one_of(Primer::Alpha::TreeView::SubTreeNode::SELECT_STRATEGIES) %>
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::TreeView::Node) %>.
+        def initialize(
+          label:,
+          path:,
+          node_variant:,
+          sub_tree_component_klass: SubTree,
+          expanded: false,
+          select_strategy: DEFAULT_SELECT_STRATEGY,
+          **system_arguments
+        )
           @label = label
           @system_arguments = system_arguments
           @select_strategy = fetch_or_fallback(SELECT_STRATEGIES, select_strategy, DEFAULT_SELECT_STRATEGY)
@@ -123,23 +133,23 @@ module Primer
 
           @system_arguments[:data] = merge_data(
             @system_arguments, {
-              data: {
-                target: "tree-view-sub-tree-node.node",
-                "node-type": "sub-tree"
-              }
+            data: {
+              target: "tree-view-sub-tree-node.node",
+              "node-type": "sub-tree"
             }
+          }
           )
 
           sub_tree_arguments = @system_arguments.delete(:sub_tree_arguments) || {}
 
-          @sub_tree = SubTree.new(
+          @sub_tree = sub_tree_component_klass.new(
             expanded: expanded,
             path: path,
             node_variant: node_variant,
             **sub_tree_arguments
           )
 
-          @node = Primer::OpenProject::TreeView::Node.new(
+          @node = Primer::Alpha::TreeView::Node.new(
             **@system_arguments,
             path: @sub_tree.path,
             node_variant: node_variant

data/app/components/primer/{open_project → alpha}/tree_view/tree_view.d.ts

@@ -1,10 +1,15 @@
-import { TreeViewSubTreeNodeElement } from './tree_view_sub_tree_node_element';
+import { SelectStrategy, TreeViewSubTreeNodeElement } from './tree_view_sub_tree_node_element';
 import type { TreeViewNodeType, TreeViewCheckedValue, TreeViewNodeInfo } from '../../shared_events';
 export declare class TreeViewElement extends HTMLElement {
     #private;
+    formInputContainer: HTMLElement;
+    formInputPrototype: HTMLInputElement;
     connectedCallback(): void;
+    rootLeafNodes(): NodeListOf<HTMLElement>;
+    rootSubTreeNodes(): NodeListOf<TreeViewSubTreeNodeElement>;
     disconnectedCallback(): void;
     handleEvent(event: Event): void;
+    getFormInputValueForNode(node: Element): string | null;
     getNodePath(node: Element): string[];
     getNodeType(node: Element): TreeViewNodeType | null;
     markCurrentAtPath(path: string[]): void;
@@ -16,13 +21,18 @@ export declare class TreeViewElement extends HTMLElement {
     uncheckAtPath(path: string[]): void;
     toggleCheckedAtPath(path: string[]): void;
     checkedValueAtPath(path: string[]): TreeViewCheckedValue;
+    disabledValueAtPath(path: string[]): boolean;
     nodeAtPath(path: string[], selector?: string): Element | null;
     subTreeAtPath(path: string[]): TreeViewSubTreeNodeElement | null;
     leafAtPath(path: string[]): HTMLLIElement | null;
+    setNodeCheckedValue(node: Element, value: TreeViewCheckedValue): void;
     getNodeCheckedValue(node: Element): TreeViewCheckedValue;
+    getNodeDisabledValue(node: Element): boolean;
+    setNodeDisabledValue(node: Element, disabled: boolean): void;
     nodeHasCheckBox(node: Element): boolean;
     nodeHasNativeAction(node: Element): boolean;
     expandAncestorsForNode(node: HTMLElement): void;
+    changeSelectStrategy(newStrategy: SelectStrategy): void;
     infoFromNode(node: Element, newCheckedValue?: TreeViewCheckedValue): TreeViewNodeInfo | null;
 }
 declare global {

data/app/components/primer/{open_project → alpha}/tree_view/tree_view.js

@@ -15,8 +15,8 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _TreeViewElement_instances, _TreeViewElement_abortController, _TreeViewElement_autoExpandFrom, _TreeViewElement_eventIsActivation, _TreeViewElement_nodeForEvent, _TreeViewElement_handleNodeEvent, _TreeViewElement_eventIsCheckboxToggle, _TreeViewElement_handleCheckboxToggle, _TreeViewElement_handleNodeActivated, _TreeViewElement_handleNodeFocused, _TreeViewElement_handleNodeKeyboardEvent, _TreeViewElement_setNodeCheckedValue;
-import { controller } from '@github/catalyst';
+var _TreeViewElement_instances, _TreeViewElement_abortController, _TreeViewElement_autoExpandFrom, _TreeViewElement_eventIsActivation, _TreeViewElement_nodeForEvent, _TreeViewElement_handleNodeEvent, _TreeViewElement_eventIsCheckboxToggle, _TreeViewElement_handleCheckboxToggle, _TreeViewElement_handleNodeActivated, _TreeViewElement_handleNodeFocused, _TreeViewElement_handleNodeKeyboardEvent;
+import { controller, target } from '@github/catalyst';
 import { useRovingTabIndex } from './tree_view_roving_tab_index';
 let TreeViewElement = class TreeViewElement extends HTMLElement {
     constructor() {
@@ -43,12 +43,53 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
                 }
             }
         }).observe(this, { childList: true, subtree: true });
+        const updateInputsObserver = new MutationObserver(mutations => {
+            if (!this.formInputContainer)
+                return;
+            // There is another MutationObserver in TreeViewSubTreeNodeElement that manages checking/unchecking
+            // nodes based on the component's select strategy. These two observers can conflict and cause infinite
+            // looping, so we make sure something actually changed before computing inputs again.
+            const somethingChanged = mutations.some(m => {
+                if (!(m.target instanceof HTMLElement))
+                    return false;
+                return m.target.getAttribute('aria-checked') !== m.oldValue;
+            });
+            if (!somethingChanged)
+                return;
+            const newInputs = [];
+            // eslint-disable-next-line custom-elements/no-dom-traversal-in-connectedcallback
+            for (const node of this.querySelectorAll('[role=treeitem][aria-checked=true]')) {
+                const newInput = this.formInputPrototype.cloneNode();
+                newInput.removeAttribute('data-target');
+                newInput.removeAttribute('form');
+                const payload = {
+                    path: this.getNodePath(node),
+                };
+                const inputValue = this.getFormInputValueForNode(node);
+                if (inputValue)
+                    payload.value = inputValue;
+                newInput.value = JSON.stringify(payload);
+                newInputs.push(newInput);
+            }
+            this.formInputContainer.replaceChildren(...newInputs);
+        });
+        updateInputsObserver.observe(this, {
+            childList: true,
+            subtree: true,
+            attributeFilter: ['aria-checked'],
+        });
         // eslint-disable-next-line github/no-then -- We don't want to wait for this to resolve, just get on with it
         customElements.whenDefined('tree-view-sub-tree-node').then(() => {
             // depends on TreeViewSubTreeNodeElement#eachAncestorSubTreeNode, which may not be defined yet
             __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_autoExpandFrom).call(this, this);
         });
     }
+    rootLeafNodes() {
+        return this.querySelectorAll(':scope > ul > li > .TreeViewItemContainer [role=treeitem]');
+    }
+    rootSubTreeNodes() {
+        return this.querySelectorAll(':scope > ul > tree-view-sub-tree-node');
+    }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _TreeViewElement_abortController, "f").abort();
     }
@@ -58,6 +99,9 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
             __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_handleNodeEvent).call(this, node, event);
         }
     }
+    getFormInputValueForNode(node) {
+        return node.getAttribute('data-value');
+    }
     getNodePath(node) {
         const rawPath = node.getAttribute('data-path');
         if (rawPath) {
@@ -101,13 +145,13 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
         const node = this.nodeAtPath(path);
         if (!node)
             return;
-        __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_setNodeCheckedValue).call(this, node, 'true');
+        this.setNodeCheckedValue(node, 'true');
     }
     uncheckAtPath(path) {
         const node = this.nodeAtPath(path);
         if (!node)
             return;
-        __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_setNodeCheckedValue).call(this, node, 'false');
+        this.setNodeCheckedValue(node, 'false');
     }
     toggleCheckedAtPath(path) {
         const node = this.nodeAtPath(path);
@@ -128,6 +172,12 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
             return 'false';
         return this.getNodeCheckedValue(node);
     }
+    disabledValueAtPath(path) {
+        const node = this.nodeAtPath(path);
+        if (!node)
+            return false;
+        return this.getNodeDisabledValue(node);
+    }
     nodeAtPath(path, selector) {
         const pathStr = JSON.stringify(path);
         return this.querySelector(`${selector || ''}[data-path="${CSS.escape(pathStr)}"]`);
@@ -141,9 +191,23 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
     leafAtPath(path) {
         return this.nodeAtPath(path, '[data-node-type=leaf]');
     }
+    setNodeCheckedValue(node, value) {
+        node.setAttribute('aria-checked', value.toString());
+    }
     getNodeCheckedValue(node) {
         return (node.getAttribute('aria-checked') || 'false');
     }
+    getNodeDisabledValue(node) {
+        return node.getAttribute('aria-disabled') === 'true';
+    }
+    setNodeDisabledValue(node, disabled) {
+        if (disabled) {
+            node.setAttribute('aria-disabled', 'true');
+        }
+        else {
+            node.removeAttribute('aria-disabled');
+        }
+    }
     nodeHasCheckBox(node) {
         return node.querySelector('.TreeViewItemCheckbox') !== null;
     }
@@ -160,6 +224,11 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
             }
         }
     }
+    changeSelectStrategy(newStrategy) {
+        for (const subTreeNode of this.querySelectorAll('tree-view-sub-tree-node')) {
+            subTreeNode.changeSelectStrategy(newStrategy);
+        }
+    }
     // PRIVATE API METHOD
     //
     // This would normally be marked private, but it's called by TreeViewSubTreeNodes
@@ -189,22 +258,22 @@ _TreeViewElement_eventIsActivation = function _TreeViewElement_eventIsActivation
     return event.type === 'click';
 };
 _TreeViewElement_nodeForEvent = function _TreeViewElement_nodeForEvent(event) {
-    const target = event.target;
-    const node = target.closest('[role=treeitem]');
+    const eventTarget = event.target;
+    const node = eventTarget.closest('[role=treeitem]');
     if (!node)
         return null;
-    if (target.closest('.TreeViewItemToggle'))
+    if (eventTarget.closest('.TreeViewItemToggle'))
         return null;
-    if (target.closest('.TreeViewItemLeadingAction'))
+    if (eventTarget.closest('.TreeViewItemLeadingAction'))
         return null;
     return node;
 };
 _TreeViewElement_handleNodeEvent = function _TreeViewElement_handleNodeEvent(node, event) {
     if (__classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_eventIsCheckboxToggle).call(this, event, node)) {
-        __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_handleCheckboxToggle).call(this, node);
+        __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_handleCheckboxToggle).call(this, event, node);
     }
     else if (__classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_eventIsActivation).call(this, event)) {
-        __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_handleNodeActivated).call(this, node);
+        __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_handleNodeActivated).call(this, event, node);
     }
     else if (event.type === 'focusin') {
         __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_handleNodeFocused).call(this, node);
@@ -216,19 +285,43 @@ _TreeViewElement_handleNodeEvent = function _TreeViewElement_handleNodeEvent(nod
 _TreeViewElement_eventIsCheckboxToggle = function _TreeViewElement_eventIsCheckboxToggle(event, node) {
     return event.type === 'click' && this.nodeHasCheckBox(node);
 };
-_TreeViewElement_handleCheckboxToggle = function _TreeViewElement_handleCheckboxToggle(node) {
-    // only handle checking of leaf nodes
+_TreeViewElement_handleCheckboxToggle = function _TreeViewElement_handleCheckboxToggle(event, node) {
+    if (this.getNodeDisabledValue(node)) {
+        event.preventDefault();
+        return;
+    }
+    // only handle checking of leaf nodes, see TreeViewSubTreeNodeElement for the code that
+    // handles checking sub tree items.
     const type = this.getNodeType(node);
     if (type !== 'leaf')
         return;
+    const checkValue = this.getNodeCheckedValue(node);
+    const newCheckValue = checkValue === 'false' ? 'true' : 'false';
+    const nodeInfo = this.infoFromNode(node, newCheckValue);
+    const checkSuccess = this.dispatchEvent(new CustomEvent('treeViewBeforeNodeChecked', {
+        bubbles: true,
+        cancelable: true,
+        detail: [nodeInfo],
+    }));
+    if (!checkSuccess)
+        return;
     if (this.getNodeCheckedValue(node) === 'true') {
-        __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_setNodeCheckedValue).call(this, node, 'false');
+        this.setNodeCheckedValue(node, 'false');
     }
     else {
-        __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_setNodeCheckedValue).call(this, node, 'true');
+        this.setNodeCheckedValue(node, 'true');
     }
+    this.dispatchEvent(new CustomEvent('treeViewNodeChecked', {
+        bubbles: true,
+        cancelable: true,
+        detail: [nodeInfo],
+    }));
 };
-_TreeViewElement_handleNodeActivated = function _TreeViewElement_handleNodeActivated(node) {
+_TreeViewElement_handleNodeActivated = function _TreeViewElement_handleNodeActivated(event, node) {
+    if (this.getNodeDisabledValue(node)) {
+        event.preventDefault();
+        return;
+    }
     // do not emit activation events for buttons and anchors, since it is assumed any activation
     // behavior for these element types is user- or browser-defined
     if (!(node instanceof HTMLDivElement))
@@ -262,13 +355,17 @@ _TreeViewElement_handleNodeKeyboardEvent = function _TreeViewElement_handleNodeK
     switch (event.key) {
         case ' ':
         case 'Enter':
+            if (this.getNodeDisabledValue(node)) {
+                event.preventDefault();
+                break;
+            }
             if (this.nodeHasCheckBox(node)) {
                 event.preventDefault();
                 if (this.getNodeCheckedValue(node) === 'true') {
-                    __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_setNodeCheckedValue).call(this, node, 'false');
+                    this.setNodeCheckedValue(node, 'false');
                 }
                 else {
-                    __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_setNodeCheckedValue).call(this, node, 'true');
+                    this.setNodeCheckedValue(node, 'true');
                 }
             }
             else if (node instanceof HTMLAnchorElement) {
@@ -278,9 +375,12 @@ _TreeViewElement_handleNodeKeyboardEvent = function _TreeViewElement_handleNodeK
             break;
     }
 };
-_TreeViewElement_setNodeCheckedValue = function _TreeViewElement_setNodeCheckedValue(node, value) {
-    node.setAttribute('aria-checked', value.toString());
-};
+__decorate([
+    target
+], TreeViewElement.prototype, "formInputContainer", void 0);
+__decorate([
+    target
+], TreeViewElement.prototype, "formInputPrototype", void 0);
 TreeViewElement = __decorate([
     controller
 ], TreeViewElement);