ariadne_view_components 0.0.47 → 0.0.49

data/app/components/ariadne/relative_time_component.rb

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Converts time into a display-friendly format in a relative time (3d) or absolute date after a default of 30 days
+  class RelativeTimeComponent < Ariadne::Component
+    DEFAULT_TAG = :span
+    TAG_OPTIONS = [DEFAULT_TAG].freeze
+    DEFAULT_DATE_FORMAT = "%b %-d, %Y"
+    DEFAULT_DATE_FORMAT_SWITCH = 30 * 24 * 60 * 60
+
+    DEFAULT_CLASSES = ""
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::RelativeTimeComponent.new) { "Example" } %>
+    #
+    # @param tag [Symbol, String] The rendered tag name.
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(
+      tag: DEFAULT_TAG,
+      classes: "",
+      time: nil,
+      format: DEFAULT_DATE_FORMAT,
+      date_format_switch: DEFAULT_DATE_FORMAT_SWITCH,
+      force_relative: false,
+      attributes: {}
+    )
+      raise ArgumentError, "A 'time' argument is required to use the Relative Time component." if time.blank?
+
+      @now = 1.second.ago
+      @tag = check_incoming_tag(DEFAULT_TAG, tag)
+      @classes = merge_class_names(DEFAULT_CLASSES, classes)
+      @time = time
+      @date_format_switch = date_format_switch
+      @format = format
+      @force_relative = force_relative
+      @attributes = attributes
+
+      @formatted_date = formatted
+    end
+
+    private def formatted_time
+      @time.localtime.strftime(@format)
+    end
+
+    private def time_difference
+      (@now - @time).to_i.abs
+    end
+
+    private def formatted
+      diff = time_difference
+
+      if @force_relative || diff < @date_format_switch
+        time_ago_in_words(@time)
+      else
+        @time.localtime.strftime(@format)
+      end
+    end
+  end
+end

data/app/components/ariadne/show_more_button_component.html.erb

@@ -0,0 +1,11 @@
+<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |component| %>
+  <%= render Ariadne::ButtonComponent.new(classes: @button_classes, attributes: @button_attributes) do |button| %>
+    <%= @button_text %>
+  <% end %>
+  <div
+    class="ariadne-max-h-full aria-hidden:ariadne-max-h-0 ariadne-overflow-hidden ariadne-my-2 ariadne-border-solid ariadne-border-2 aria-selected:ariadne-hidden aria-selected:ariadne-border-green-300 aria-selected:ariadne-border-solid aria-selected:ariadne-border-2 ariadne-border-transparent ariadne-min-w-[21rem] ariadne-whitespace-nowrap ariadne-text-ellipsis" data-controller="toggleable" aria-hidden="true" data-toggleable-anti-attrs-value='["aria-hidden"]' data-toggleable-outlet="<%= @outlet %>">
+    <% hiddens.each do |hidden| %>
+      <%= hidden %>
+    <% end %>
+  </div>
+<% end %>

data/app/components/ariadne/show_more_button_component.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Add a general description of component here
+  # Add additional usage considerations or best practices that may aid the user to use the component correctly.
+  # @accessibility Add any accessibility considerations
+  class ShowMoreButtonComponent < Ariadne::Component
+    DEFAULT_TAG = :div
+    TAG_OPTIONS = [DEFAULT_TAG].freeze
+
+    DEFAULT_CLASSES = { wrapper: "ariadne-group", button: "ariadne-px-2 ariadne-py-0" }
+
+    DEFAULT_ATTRIBUTES = {
+      wrapper: {
+        "data-controller": "toggleable",
+      },
+      button: {
+        "data-action": "click->toggleable#toggle",
+      },
+    }
+
+    renders_many :hiddens
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::ShowMoreButtonComponent.new) { "Example" } %>
+    #
+    # @param tag [Symbol, String] The rendered tag name.
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(tag: DEFAULT_TAG, classes: "", button_text: "...", outlet: nil, attributes: {})
+      raise ArgumentError, "An 'aria-label' attribute is required to use the Show More Button. Include as much detail as you can about the content to be shown to assist screen readers." if attributes.blank? || attributes["aria-label"].blank?
+      raise ArgumentError, "An 'outlet' attribute is required to use the Show More Button. This will ensure controllers can correctly identify states to update." if outlet.blank?
+
+      @outlet = outlet
+      @tag = check_incoming_tag(DEFAULT_TAG, tag)
+      @classes = merge_class_names(DEFAULT_CLASSES[:wrapper], classes)
+      @attributes = DEFAULT_ATTRIBUTES[:wrapper]
+        .merge({ "data-toggleable-toggleable-outlet": "[data-toggleable-outlet=#{@outlet}]" })
+        .merge(attributes)
+
+      @button_classes = merge_class_names(DEFAULT_CLASSES[:button], classes)
+      @button_attributes = DEFAULT_ATTRIBUTES[:button].merge(attributes)
+      @button_text = button_text
+    end
+  end
+end

data/app/components/ariadne/spinner_component.html.erb

@@ -0,0 +1,16 @@
+<%= render Ariadne::BaseComponent.new(tag: :svg, classes: @classes, attributes: @attributes) do |svg| %>
+  <circle
+    cx="8"
+    cy="8"
+    r="7"
+    stroke="currentColor"
+    stroke-opacity="0.25"
+    stroke-width="2"
+    vector-effect="non-scaling-stroke" />
+  <path
+    d="M15 8a7.002 7.002 0 00-7-7"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    vector-effect="non-scaling-stroke" />
+<% end %>

data/app/components/ariadne/spinner_component.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Renders a spinning wheel to indicate a loading state
+  # Add color using a tailwind text color class
+  class SpinnerComponent < Ariadne::Component
+    DEFAULT_SIZE = :md
+    DEFAULT_CLASSES = "ariadne-animate-spin ariadne-fill-none"
+    DEFAULT_ATTRIBUTES = {
+      fill: "none",
+      viewBox: "0 0 16 16",
+      role: "progressbar",
+      "aria-valuetext": "Loading...",
+      "aria-busy": true,
+      "aria-valuemin": "0",
+      "aria-valuemax": "100",
+    }.freeze
+
+    SIZE_CLASS_MAPPINGS = {
+      xs: "ariadne-h-4 ariadne-w-4",
+      sm: "ariadne-h-6 ariadne-w-6",
+      md: "ariadne-h-8 ariadne-w-8",
+      lg: "ariadne-h-10 ariadne-w-10",
+      xl: "ariadne-h-12 ariadne-w-12",
+    }.freeze
+
+    VALID_SIZES = SIZE_CLASS_MAPPINGS.keys.freeze
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::SpinnerComponent.new) { } %>
+    #
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(classes: "", attributes: {}, size: DEFAULT_SIZE)
+      @size = fetch_or_raise(VALID_SIZES, size)
+      @attributes = DEFAULT_ATTRIBUTES.merge(attributes)
+      @classes = merge_class_names(
+        DEFAULT_CLASSES,
+        SIZE_CLASS_MAPPINGS[size],
+        classes,
+      )
+    end
+  end
+end

data/app/components/ariadne/string_match_controller/string_match_controller.d.ts

@@ -0,0 +1,27 @@
+import { TOutletChangeData } from '../outlet_manager_controller/outlet_manager_controller';
+import SyncedBooleanAttributesController from '../synced_boolean_attributes_controller/synced_boolean_attributes_controller';
+export interface StringMatchOutlet extends SyncedBooleanAttributesController<string> {
+    change: (event: Event, updateTo?: TOutletChangeData<string>) => void;
+}
+export default class StringMatchController extends SyncedBooleanAttributesController<string> implements StringMatchOutlet {
+    #private;
+    static outlets: string[];
+    static targets: string[];
+    static values: {
+        keyword: StringConstructor;
+        syncedAttrs: ArrayConstructor;
+        antiAttrs: ArrayConstructor;
+        protectAttrs: BooleanConstructor;
+        outletEvents: ArrayConstructor;
+    };
+    readonly matchTargets: Array<HTMLElement>;
+    readonly hasMatchTarget: boolean;
+    readonly emptyTarget: Element;
+    readonly hasEmptyTarget: boolean;
+    keywordValue: string;
+    change(event: Event, updateTo?: TOutletChangeData<string>): void;
+    getElementsToSync(): Element[] | null | undefined;
+    getValueForElement(element: Element): boolean;
+    getState(): string;
+    outletUpdate: (event: Event, updateTo?: TOutletChangeData<string>) => void;
+}

data/app/components/ariadne/string_match_controller/string_match_controller.js

@@ -0,0 +1,51 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    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 _StringMatchController_instances, _StringMatchController_compareKeywordToTargets;
+import SyncedBooleanAttributesController from '../synced_boolean_attributes_controller/synced_boolean_attributes_controller';
+class StringMatchController extends SyncedBooleanAttributesController {
+    constructor() {
+        super(...arguments);
+        _StringMatchController_instances.add(this);
+        this.outletUpdate = this.change;
+    }
+    change(event, updateTo = {}) {
+        var _a;
+        const value = (_a = updateTo.data) !== null && _a !== void 0 ? _a : event.currentTarget.value;
+        this.keywordValue = value;
+        __classPrivateFieldGet(this, _StringMatchController_instances, "m", _StringMatchController_compareKeywordToTargets).call(this);
+        this.sendToOutlets(event, Object.assign(Object.assign({}, updateTo), { data: this.keywordValue }));
+    }
+    getElementsToSync() {
+        return this.matchTargets;
+    }
+    getValueForElement(element) {
+        var _a, _b;
+        return (_b = (_a = element.innerText) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(this.keywordValue.toLowerCase())) !== null && _b !== void 0 ? _b : false;
+    }
+    getState() {
+        return this.keywordValue;
+    }
+}
+_StringMatchController_instances = new WeakSet(), _StringMatchController_compareKeywordToTargets = function _StringMatchController_compareKeywordToTargets() {
+    if (this.hasMatchTarget) {
+        let foundMatch = false;
+        for (let index in this.matchTargets) {
+            const target = this.matchTargets[index];
+            const value = this.getValueForElement(target);
+            this.updateAttributesForElement(target, value);
+            if (value) {
+                foundMatch = true;
+            }
+        }
+        if (this.hasEmptyTarget) {
+            this.emptyTarget.setAttribute('aria-hidden', String(foundMatch));
+        }
+    }
+};
+StringMatchController.outlets = SyncedBooleanAttributesController.outlets;
+StringMatchController.targets = ['match', 'empty'];
+StringMatchController.values = Object.assign(Object.assign({}, SyncedBooleanAttributesController.values), { keyword: String });
+export default StringMatchController;

data/app/components/ariadne/string_match_controller/string_match_controller.ts

@@ -0,0 +1,64 @@
+import {TOutletChangeData} from '../outlet_manager_controller/outlet_manager_controller'
+import SyncedBooleanAttributesController from '../synced_boolean_attributes_controller/synced_boolean_attributes_controller'
+
+export interface StringMatchOutlet extends SyncedBooleanAttributesController<string> {
+  change: (event: Event, updateTo?: TOutletChangeData<string>) => void
+}
+
+export default class StringMatchController
+  extends SyncedBooleanAttributesController<string>
+  implements StringMatchOutlet
+{
+  static outlets = SyncedBooleanAttributesController.outlets
+  static targets = ['match', 'empty']
+  static values = {
+    ...SyncedBooleanAttributesController.values,
+    keyword: String,
+  }
+
+  declare readonly matchTargets: Array<HTMLElement>
+  declare readonly hasMatchTarget: boolean
+
+  declare readonly emptyTarget: Element
+  declare readonly hasEmptyTarget: boolean
+
+  declare keywordValue: string
+
+  change(event: Event, updateTo: TOutletChangeData<string> = {}) {
+    const value = updateTo.data ?? (event.currentTarget as HTMLInputElement).value
+    this.keywordValue = value
+    this.#compareKeywordToTargets()
+    this.sendToOutlets(event, {...updateTo, data: this.keywordValue})
+  }
+  #compareKeywordToTargets() {
+    if (this.hasMatchTarget) {
+      let foundMatch = false
+      for (let index in this.matchTargets) {
+        const target = this.matchTargets[index]
+        const value = this.getValueForElement(target)
+        this.updateAttributesForElement(target, value)
+        if (value) {
+          foundMatch = true
+        }
+      }
+
+      if (this.hasEmptyTarget) {
+        this.emptyTarget.setAttribute('aria-hidden', String(foundMatch))
+      }
+    }
+  }
+
+  getElementsToSync(): Element[] | null | undefined {
+    return this.matchTargets
+  }
+
+  getValueForElement(element: Element) {
+    return (element as HTMLElement).innerText?.toLowerCase().includes(this.keywordValue.toLowerCase()) ?? false
+  }
+
+  getState() {
+    return this.keywordValue
+  }
+
+  outletUpdate = this.change
+}

data/app/components/ariadne/subheader_component.html.erb

@@ -0,0 +1,11 @@
+<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |component| %>
+  <div class="ariadne-flex ariadne-justify-between">
+    <%= header %>
+    <div>
+      <% actions.each do |action| %>
+        <%= action %>
+      <% end %>
+    </div>
+  </div>
+  <%= description %>
+<% end %>

data/app/components/ariadne/subheader_component.rb

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # A component to render a subheader with optional description below it and optional action
+  # components on the right side
+  class SubheaderComponent < Ariadne::Component
+    DEFAULT_TAGS = {
+      wrapper: :div,
+      actions: :div,
+      header: :h2,
+      description: :span,
+    }
+
+    DEFAULT_CLASSES = {
+      wrapper: "ariadne-border-b-2 ariadne-border-solid ariadne-border-black ariadne-border-opacity-20",
+      header: "",
+      actions: "",
+      description: "ariadne-text-black/50",
+    }
+
+    DEFAULT_ATTRIBUTES = {
+      wrapper: {},
+      header: {},
+      description: {},
+      actions: {},
+    }
+
+    renders_one :header, lambda { |tag: DEFAULT_TAGS[:header], classes: "", attributes: {}|
+      Ariadne::HeadingComponent.new(
+        tag: check_incoming_tag(DEFAULT_TAGS[:header], tag),
+        classes: merge_class_names(DEFAULT_CLASSES[:header], classes),
+        attributes: DEFAULT_ATTRIBUTES[:header].merge({ id: @header_id }).merge(attributes),
+      )
+    }
+
+    renders_one :description, lambda { |tag: DEFAULT_TAGS[:description], classes: "", attributes: {}|
+      Ariadne::BaseComponent.new(
+        tag: check_incoming_tag(DEFAULT_TAGS[:description], tag),
+        classes: merge_class_names(DEFAULT_CLASSES[:description], classes),
+        attributes: DEFAULT_ATTRIBUTES[:description]
+          .merge({ "aria-describedby": @header_id })
+          .merge(attributes),
+      )
+    }
+
+    renders_many :actions
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::SubheaderComponent.new) { "Example" } %>
+    #
+    # @param tag [Symbol, String] The rendered tag name.
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(tag: DEFAULT_TAGS[:wrapper], classes: "", id: "subheader-#{SecureRandom.uuid}", attributes: {})
+      @tag = check_incoming_tag(DEFAULT_TAGS[:wrapper], tag)
+      @header_id = id
+      @attributes = DEFAULT_ATTRIBUTES[:wrapper].merge(attributes)
+      @classes = merge_class_names(
+        DEFAULT_CLASSES[:wrapper],
+        classes,
+      )
+    end
+  end
+end

data/app/components/ariadne/synced_boolean_attributes_controller/synced_boolean_attributes_controller.d.ts

@@ -0,0 +1,44 @@
+import OutletManagerController from '../outlet_manager_controller/outlet_manager_controller';
+export type TStimulusDispatchEvent<TDetails> = {
+    target?: Element | undefined;
+    detail?: TDetails | undefined;
+    prefix?: string | undefined;
+    bubbles?: boolean | undefined;
+    cancelable?: boolean | undefined;
+    preventDefault: () => void;
+};
+export type TBooleanValueDetail = {
+    value: boolean;
+};
+export interface TSyncAttrDetail extends TBooleanValueDetail {
+    attr: string;
+}
+export default class SyncedBooleanAttributesController<T> extends OutletManagerController<T> {
+    #private;
+    static values: {
+        syncedAttrs: ArrayConstructor;
+        antiAttrs: ArrayConstructor;
+        protectAttrs: BooleanConstructor;
+        outletEvents: ArrayConstructor;
+    };
+    readonly syncedAttrsValue: string[];
+    readonly hasSyncedAttrsValue: boolean;
+    readonly antiAttrsValue: string[];
+    readonly hasAntiAttrsValue: boolean;
+    readonly protectAttrsValue: boolean;
+    static removeOnFalseAttrs: {
+        [k: string]: boolean;
+    };
+    syncedAttrsLookup: {
+        [k: string]: boolean;
+    } | null;
+    antiAttrsLookup: {
+        [k: string]: boolean;
+    } | null;
+    getValueForElement(element: Element): boolean | null;
+    getElementsToSync(): Array<Element> | null | undefined;
+    connect(): void;
+    updateAttributesForElement(element: Element, value: boolean): void;
+    syncElementAttributes(): void;
+    validateAttrChange(dispatchEvent: TStimulusDispatchEvent<TSyncAttrDetail>): void;
+}

data/app/components/ariadne/synced_boolean_attributes_controller/synced_boolean_attributes_controller.js

@@ -0,0 +1,153 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    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 _SyncedBooleanAttributesController_instances, _SyncedBooleanAttributesController_isSyncedAttr, _SyncedBooleanAttributesController_isAntiAttr, _SyncedBooleanAttributesController_isAttr, _SyncedBooleanAttributesController_setAttrs, _SyncedBooleanAttributesController_getLookupForStringArray;
+import OutletManagerController from '../outlet_manager_controller/outlet_manager_controller';
+/*
+ This class isn't used directly by itself because it has no functionality. What it does is establishes
+ "synced attrs" and "anti-attrs" so that other controllers can extend this one and not worry about
+ implementing the logic themselves (and thus have duplicate logic all over our controllers)
+
+ To implement this, extend your controller with "SyncedBooleanAttributesController" then spread its
+ values into your controllers then implement:
+
+ export default class MyNewController extends SyncedBooleanAttributesController {
+  static values = {
+    ...SyncedBooleanAttributesController.values,
+    myString: String,
+  }
+}
+
+Also, consider the functions defined here ABOVE the connection() function. Those functions will
+give you control over how your controller can interact with other SyncedBooleanAttributeControllers.
+Not every controller needs them but you should consider them (description can be found in the functions)
+
+And don't forget that when you want to change an attr on an element, you should not do it manually.
+Instead run:
+this.updateAttributesForElement(element, value)
+This will let you take advantage of the ecosystem created by this base controller without any additional work
+*/
+class SyncedBooleanAttributesController extends OutletManagerController {
+    constructor() {
+        super(...arguments);
+        _SyncedBooleanAttributesController_instances.add(this);
+        this.syncedAttrsLookup = null;
+        this.antiAttrsLookup = null;
+    }
+    getValueForElement(element) {
+        // This function allows the base controller to access a given element's
+        // current status so the attributes can be set or compared. For example,
+        // you will want to make sure the attributes are added initially and are
+        // in sync with the controller's state. To ensure this, you can use the
+        // default connect() function or add "this.syncElementAttributes()" to your
+        // custom connect function. It'll look through your targets and get values for
+        // each then set the appropriate attrs and anti-attrs
+        return null;
+    }
+    getElementsToSync() {
+        // These are the elements your controller wants to keep in sync with the attrs
+        // Sometimes these are this.element, sometimes they're specific targets.
+        // Return them here so the base controller can automate some behaviors for you
+        return [];
+    }
+    connect() {
+        // This function will sync attrs and anti-attrs when the controller connects.
+        // The logic is abstracted to a function so you can override this connect
+        // function in favor of your own without having to duplicate the sync logic
+        this.syncElementAttributes();
+    }
+    updateAttributesForElement(element, value) {
+        // This is how you should update any synced or anti-synced attrs on your elements
+        // Do not do it manually unless you are very sure of what you're doing
+        if (this.hasSyncedAttrsValue) {
+            __classPrivateFieldGet(this, _SyncedBooleanAttributesController_instances, "m", _SyncedBooleanAttributesController_setAttrs).call(this, element, this.syncedAttrsValue, value);
+        }
+        if (this.hasAntiAttrsValue) {
+            __classPrivateFieldGet(this, _SyncedBooleanAttributesController_instances, "m", _SyncedBooleanAttributesController_setAttrs).call(this, element, this.antiAttrsValue, !value);
+        }
+    }
+    syncElementAttributes() {
+        var _a;
+        this.syncOutlets();
+        // Essentially just a "sync attrs and anti-attrs on mount" function
+        const elements = this.getElementsToSync();
+        if (elements === null || elements === void 0 ? void 0 : elements.length) {
+            for (let index in elements) {
+                const element = elements[index];
+                const value = (_a = this.getValueForElement(element)) !== null && _a !== void 0 ? _a : false;
+                this.updateAttributesForElement(element, value);
+            }
+        }
+    }
+    validateAttrChange(dispatchEvent) {
+        // If you protect your attrs, then this function will deny other controllers you specify from making changes to them.
+        // For example, if you want an item to disappear when it's selected, then your Options controller likely has an "aria-hidden"
+        // synced attr. If you use another attr to filter the list and then remove that filter, normally that would unhide your selected
+        // element. But if you have Options protect its attrs, the filter behavior won't be allowed to change it at any time and thus
+        // the element will remain hidden
+        const { target, detail } = dispatchEvent;
+        if (target && detail) {
+            const currentValue = this.getValueForElement(target);
+            if (currentValue !== null && this.protectAttrsValue && __classPrivateFieldGet(this, _SyncedBooleanAttributesController_instances, "m", _SyncedBooleanAttributesController_isAttr).call(this, detail.attr)) {
+                dispatchEvent.preventDefault();
+            }
+        }
+    }
+}
+_SyncedBooleanAttributesController_instances = new WeakSet(), _SyncedBooleanAttributesController_isSyncedAttr = function _SyncedBooleanAttributesController_isSyncedAttr(attr) {
+    var _a;
+    // Helper function to determine if the attr is synced
+    if (this.syncedAttrsLookup === null) {
+        this.syncedAttrsLookup = __classPrivateFieldGet(this, _SyncedBooleanAttributesController_instances, "m", _SyncedBooleanAttributesController_getLookupForStringArray).call(this, this.syncedAttrsValue);
+    }
+    return (_a = this.syncedAttrsLookup[attr]) !== null && _a !== void 0 ? _a : false;
+}, _SyncedBooleanAttributesController_isAntiAttr = function _SyncedBooleanAttributesController_isAntiAttr(attr) {
+    var _a;
+    // Helper function to determine if the attr is anti-synced
+    if (this.antiAttrsLookup === null) {
+        this.antiAttrsLookup = __classPrivateFieldGet(this, _SyncedBooleanAttributesController_instances, "m", _SyncedBooleanAttributesController_getLookupForStringArray).call(this, this.antiAttrsValue);
+    }
+    return (_a = this.antiAttrsLookup[attr]) !== null && _a !== void 0 ? _a : false;
+}, _SyncedBooleanAttributesController_isAttr = function _SyncedBooleanAttributesController_isAttr(attr) {
+    // Helper function to determine if an attr is known to a controller
+    return __classPrivateFieldGet(this, _SyncedBooleanAttributesController_instances, "m", _SyncedBooleanAttributesController_isAntiAttr).call(this, attr) || __classPrivateFieldGet(this, _SyncedBooleanAttributesController_instances, "m", _SyncedBooleanAttributesController_isSyncedAttr).call(this, attr);
+}, _SyncedBooleanAttributesController_setAttrs = function _SyncedBooleanAttributesController_setAttrs(element, attrs, value) {
+    // Attempts to change the attr for an element. However, it'll dispatch an event
+    // first so other controllers get the opportunity to deny it
+    const attrState = JSON.stringify(value);
+    for (let index in attrs) {
+        const attr = attrs[index];
+        const dispatchEvent = this.dispatch('attrChange', {
+            target: element,
+            detail: { attr, value },
+        });
+        if (!dispatchEvent.defaultPrevented) {
+            if (attrState === 'false' && SyncedBooleanAttributesController.removeOnFalseAttrs[attr]) {
+                element.removeAttribute(attr);
+            }
+            else {
+                element.setAttribute(attr, attrState);
+            }
+        }
+    }
+}, _SyncedBooleanAttributesController_getLookupForStringArray = function _SyncedBooleanAttributesController_getLookupForStringArray(arr) {
+    // Helper function to return an array of strings into an object for easy lookup
+    // While the arrays contained here are small, looking up attrs will happen often
+    // so I think it's worth the small sacrifice to memory
+    if (!(arr === null || arr === void 0 ? void 0 : arr.length)) {
+        return {};
+    }
+    return arr.reduce((acc, cur) => {
+        acc[cur] = true;
+        return acc;
+    }, {});
+};
+SyncedBooleanAttributesController.values = Object.assign(Object.assign({}, OutletManagerController.values), { syncedAttrs: Array, antiAttrs: Array, protectAttrs: Boolean });
+// Some attributes are only false in HTML if they don't exist
+// If included here, the property will be deleted on "false"
+SyncedBooleanAttributesController.removeOnFalseAttrs = {
+    checked: true,
+};
+export default SyncedBooleanAttributesController;