{"version":3,"sources":["components/theme.js","components/themeSwitch.js"],"names":["dmx","Component","initialData","theme","active","detected","attributes","key","type","String","default","enum","methods","setTheme","this","props","performUpdate","render","init","_changeHandler","bind","_mediaQuery","window","matchMedia","addEventListener","_getStoredTheme","_update","destroy","removeEventListener","_setStoredTheme","matches","document","documentElement","setAttribute","set","event","localStorage","getItem","setItem","icons","textDark","textLight","textAuto","manager","events","change","Event","node","_icons","bi","auto","check","dark","light","fa","_prefix","id","$watch","isNavItem","classList","contains","parentNode","add","innerHTML","querySelectorAll","forEach","toggle","getAttribute","_setTheme","querySelector","focus","Map","updatedProps","$node","element","remove","activeThemeIcon","Object","values","cls","split","has","_watcher","effect","parse","dispatchEvent"],"mappings":"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","file":"dmxBootstrap5Theme.js","sourcesContent":["dmx.Component('bs5-theme', {\r\n  initialData: {\r\n    theme: 'auto',\r\n    active: 'light',\r\n    detected: 'light',\r\n  },\r\n\r\n  attributes: {\r\n    key: {\r\n      type: String,\r\n      default: 'theme',\r\n    },\r\n\r\n    theme: {\r\n      type: String,\r\n      default: 'auto',\r\n      enum: ['auto', 'light', 'dark'],\r\n    },\r\n  },\r\n\r\n  methods: {\r\n    setTheme (theme) {\r\n      this.props.theme = theme;\r\n      this.performUpdate();\r\n    },\r\n  },\r\n\r\n  render: false,\r\n\r\n  init () {\r\n    this._changeHandler = this._changeHandler.bind(this);\r\n    this._mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\r\n    this._mediaQuery.addEventListener('change', this._changeHandler);\r\n    this.props.theme = this._getStoredTheme() || this.props.theme;\r\n    this._update();\r\n  },\r\n\r\n  destroy () {\r\n    this._mediaQuery.removeEventListener('change', this._changeHandler);\r\n  },\r\n\r\n  performUpdate () {\r\n    this._setStoredTheme(this.props.theme);\r\n    this._update();\r\n  },\r\n  \r\n  _update () {\r\n    const detected = this._mediaQuery.matches ? 'dark' : 'light';\r\n    const active = this.props.theme === 'auto' ? detected : this.props.theme;\r\n\r\n    document.documentElement.setAttribute('data-bs-theme', active);\r\n\r\n    this.set('theme', this.props.theme);\r\n    this.set('active', active);\r\n    this.set('detected', detected);\r\n  },\r\n\r\n  _changeHandler (event) {\r\n    this._update();\r\n  },\r\n\r\n  _getStoredTheme () {\r\n    return localStorage.getItem(this.props.key);\r\n  },\r\n\r\n  _setStoredTheme (theme) {\r\n    localStorage.setItem(this.props.key, theme);\r\n  },\r\n\r\n});","dmx.Component('bs5-theme-switch', {\r\n\r\n  attributes: {\r\n    icons: {\r\n      type: String,\r\n      default: 'bi',\r\n      enum: ['bi', 'fa'],\r\n    },\r\n\r\n    textDark: {\r\n      type: String,\r\n      default: 'Dark',\r\n    },\r\n\r\n    textLight: {\r\n      type: String,\r\n      default: 'Light',\r\n    },\r\n\r\n    textAuto: {\r\n      type: String,\r\n      default: 'Auto',\r\n    },\r\n\r\n    manager: {\r\n      type: String,\r\n      default: '',\r\n    },\r\n  },\r\n\r\n  events: {\r\n    change: Event,\r\n  },\r\n\r\n  init (node) {\r\n    this._icons = {\r\n      bi: {\r\n        auto: 'bi-circle-half',\r\n        check: 'bi-check2',\r\n        dark: 'bi-moon-stars-fill',\r\n        light: 'bi-sun-fill',\r\n      },\r\n      fa: {\r\n        auto: 'fa-adjust',\r\n        check: 'fa-check',\r\n        dark: 'fa-moon fa-moon-o',\r\n        light: 'fa-sun fa-sun-o',\r\n      },\r\n    };\r\n\r\n    this._prefix = node.id;\r\n    this.props.theme = 'auto';\r\n\t\r\n    if (this.props.manager) {\r\n      this.$watch(`${this.props.manager}.theme`, theme => {\r\n        this.props.theme = theme;\r\n      });\r\n    }\r\n  },\r\n\r\n  render (node) {\r\n    const icons = this._icons[this.props.icons];\r\n    const isNavItem = node.classList.contains('nav-item') || node.parentNode.classList.contains('nav-item');\r\n\r\n    node.classList.add('dropdown');\r\n\r\n    node.innerHTML = `\r\n      <button class=\"btn ${isNavItem ? 'btn-link nav-link' : 'btn-primary'} py-2 dropdown-toggle d-flex align-items-center\" id=\"${this._prefix}-theme\" type=\"button\" aria-expanded=\"false\" data-bs-toggle=\"dropdown\" aria-label=\"Toggle theme (auto)\">\r\n        <i class=\"${this.props.icons} ${icons.auto} ${this.props.icons == 'fa' ? 'my-1' : ''} theme-icon-active\"></i>\r\n        <span class=\"visually-hidden\" id=\"${this._prefix}-theme-text\">Toggle theme</span>\r\n      </button>\r\n      <ul class=\"dropdown-menu dropdown-menu-end\" aria-labelledby=\"${this._prefix}-theme-text\">\r\n        <li>\r\n          <button type=\"button\" class=\"dropdown-item d-flex align-items-center\" data-bs-theme-value=\"light\" aria-pressed=\"false\">\r\n            <i class=\"${this.props.icons} ${icons.light} me-2 opacity-50\"></i>\r\n            ${this.props.textLight}\r\n            <i class=\"${this.props.icons} ${icons.check} ms-auto d-none\"></i>\r\n          </button>\r\n        </li>\r\n        <li>\r\n          <button type=\"button\" class=\"dropdown-item d-flex align-items-center\" data-bs-theme-value=\"dark\" aria-pressed=\"false\">\r\n            <i class=\"${this.props.icons} ${icons.dark} me-2 opacity-50\"></i>\r\n             ${this.props.textDark}\r\n            <i class=\"${this.props.icons} ${icons.check} ms-auto d-none\"></i>\r\n          </button>\r\n        </li>\r\n        <li>\r\n          <button type=\"button\" class=\"dropdown-item d-flex align-items-center\" data-bs-theme-value=\"auto\" aria-pressed=\"true\">\r\n            <i class=\"${this.props.icons} ${icons.auto} me-2 opacity-50\"></i>\r\n             ${this.props.textAuto}\r\n            <i class=\"${this.props.icons} ${icons.check} ms-auto d-none\"></i>\r\n          </button>\r\n        </li>\r\n      </ul>\r\n    `;\r\n\r\n    node.querySelectorAll('[data-bs-theme-value]').forEach(toggle => {\r\n      toggle.addEventListener('click', () => {\r\n        \tthis.props.theme = toggle.getAttribute('data-bs-theme-value');\r\n          this._setTheme(this.props.theme);\r\n          node.querySelector(`#${this._prefix}-theme`).focus();\r\n      });\r\n    });\r\n\r\n    this.performUpdate(new Map());\r\n  },\r\n\r\n  performUpdate (updatedProps) {\r\n    const icons = this._icons[this.props.icons];\r\n\r\n    this.$node.querySelectorAll('[data-bs-theme-value]').forEach(element => {\r\n      if (element.getAttribute('data-bs-theme-value') === this.props.theme) {\r\n        element.classList.add('active');\r\n        element.setAttribute('aria-pressed', 'true');\r\n        element.querySelector('.' + icons.check).classList.remove('d-none');\r\n      } else {\r\n        element.classList.remove('active');\r\n        element.setAttribute('aria-pressed', 'false');\r\n        element.querySelector('.' + icons.check).classList.add('d-none');\r\n      }\r\n    });\r\n\r\n    const activeThemeIcon = this.$node.querySelector('.theme-icon-active');\r\n    Object.values(icons).forEach(cls => activeThemeIcon.classList.remove(...cls.split(' ')));\r\n    activeThemeIcon.classList.add(...icons[this.props.theme].split(' '));\r\n    \r\n    const themeSwitcher = this.$node.querySelector(`#${this._prefix}-theme`);\r\n    themeSwitcher.setAttribute('aria-label', `Toggle theme (${this.props.theme})`);\r\n\r\n    if (updatedProps.has('manager')) {\r\n      if (this.props.manager) {\r\n        if (this._watcher) this._watcher();\r\n        this._watcher = dmx.effect(() => {\r\n          this.props.theme = this.parse(`${this.props.manager}.theme`);\r\n        });\r\n      }\r\n    }\r\n  },\r\n\r\n  destroy () {\r\n    if (this._watcher) this._watcher();\r\n  },\r\n\r\n  _setTheme (theme) {\r\n    if (this.props.manager) {\r\n      this.parse(`${this.props.manager}.setTheme(\"${theme}\")`);\r\n    }\r\n    this.dispatchEvent('change', {}, { theme });\r\n  },\r\n\r\n});"]}