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;