{"version":3,"sources":["webpack:///./node_modules/@rancher/shell/components/form/ColorInput.vue?fc11","webpack:///./node_modules/@rancher/shell/pages/c/_cluster/settings/brand.vue?26e3","webpack:///./node_modules/@rancher/shell/components/form/ColorInput.vue?7270","webpack:///./node_modules/@rancher/shell/pages/c/_cluster/settings/brand.vue?df30","webpack:///./node_modules/@rancher/shell/components/form/ColorInput.vue?3726","webpack:///./node_modules/@rancher/shell/pages/c/_cluster/settings/brand.vue","webpack:///node_modules/@rancher/shell/pages/c/_cluster/settings/brand.vue","webpack:///./node_modules/@rancher/shell/pages/c/_cluster/settings/brand.vue?15f2","webpack:///./node_modules/@rancher/shell/pages/c/_cluster/settings/brand.vue?fe62","webpack:///./node_modules/@rancher/shell/pages/c/_cluster/settings/brand.vue?efa4","webpack:///./node_modules/@rancher/shell/components/form/ColorInput.vue","webpack:///node_modules/@rancher/shell/components/form/ColorInput.vue","webpack:///./node_modules/@rancher/shell/components/form/ColorInput.vue?90bf","webpack:///./node_modules/@rancher/shell/components/form/ColorInput.vue?7b6d"],"names":["___CSS_LOADER_API_IMPORT___","exports","push","module","i","content","__esModule","default","locals","add","render","_vm","this","_c","_self","$fetchState","pending","staticClass","_v","_s","t","attrs","mode","model","value","uiPLSetting","callback","$$v","$set","expression","customizeLogo","on","setError","$event","updateLogo","uiLogoLight","uiLogoDark","_e","customizeFavicon","uiFavicon","customizeColor","uiColor","customizeLinkColor","uiLinkColor","_l","errors","err","key","save","staticRenderFns","Color","require","layout","components","LabeledInput","Checkbox","FileImageSelector","Loading","SimpleBox","AsyncButton","Banner","ColorInput","TypeDescription","fetch","_this","_asyncToGenerator","_regeneratorRuntime","mark","_callee","hash","wrap","_context","prev","next","allHash","$store","dispatch","type","MANAGEMENT","SETTING","id","PL","uiLogoDarkSetting","fetchOrCreateSetting","LOGO_DARK","uiLogoLightSetting","LOGO_LIGHT","uiColorSetting","PRIMARY_COLOR","uiLinkColorSetting","LINK_COLOR","uiFaviconSetting","FAVICON","sent","Object","assign","_unused","_unused2","_unused3","hex","stop","data","vendor","getVendor","computed","_schema$resourceMetho","schema","getters","resourceMethods","includes","_EDIT","_VIEW","mounted","getComputedStyle","document","body","getPropertyValue","suse","querySelector","trim","methods","img","e","btnCB","_this2","_callee2","_context2","replaceAll","rgb","string","Promise","all","setVendor","setFavIcon","t0","component","_class","class","_defineProperty","editMode","componentTestid","labelKey","label","stopPropagation","$refs","input","click","style","inputValue","ref","domProps","$emit","target","props","String","defaultValue","validator","viewMode"],"mappings":"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","file":"js/pages/c/_cluster/settings/brand.720e4e9f.js","sourcesContent":["// Imports\nvar ___CSS_LOADER_API_IMPORT___ = require(\"../../../../@vue/cli-service/node_modules/css-loader/dist/runtime/api.js\");\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.id, \".color-input[data-v-37115604]{border:1px solid var(--border);border-radius:var(--border-radius);padding:10px}.color-input.disabled[data-v-37115604],.color-input.disabled .selected[data-v-37115604],.color-input[disabled][data-v-37115604],.color-input[disabled][data-v-37115604]:hover{color:var(--input-disabled-text);background-color:var(--input-disabled-bg);outline-width:0;border-color:var(--input-disabled-border);cursor:not-allowed}.color-input.disabled .selected div[data-v-37115604],.color-input.disabled .selected input[data-v-37115604],.color-input.disabled .selected label[data-v-37115604],.color-input.disabled .selected span[data-v-37115604],.color-input.disabled div[data-v-37115604],.color-input.disabled input[data-v-37115604],.color-input.disabled label[data-v-37115604],.color-input.disabled span[data-v-37115604],.color-input[disabled]:hover div[data-v-37115604],.color-input[disabled]:hover input[data-v-37115604],.color-input[disabled]:hover label[data-v-37115604],.color-input[disabled]:hover span[data-v-37115604],.color-input[disabled] div[data-v-37115604],.color-input[disabled] input[data-v-37115604],.color-input[disabled] label[data-v-37115604],.color-input[disabled] span[data-v-37115604]{cursor:not-allowed!important}.color-input.disabled .selected label[data-v-37115604],.color-input.disabled label[data-v-37115604],.color-input[disabled]:hover label[data-v-37115604],.color-input[disabled] label[data-v-37115604]{color:var(--input-disabled-label);display:inline-block;z-index:1}.color-input.disabled .selected[data-v-37115604]::-moz-placeholder,.color-input.disabled[data-v-37115604]::-moz-placeholder,.color-input[disabled][data-v-37115604]::-moz-placeholder,.color-input[disabled][data-v-37115604]:hover::-moz-placeholder{color:var(--input-disabled-placeholder)}.color-input.disabled .selected[data-v-37115604]::placeholder,.color-input.disabled[data-v-37115604]::placeholder,.color-input[disabled][data-v-37115604]::placeholder,.color-input[disabled][data-v-37115604]:hover::placeholder{color:var(--input-disabled-placeholder)}.color-input LABEL[data-v-37115604]{display:block}.color-input .preview-container[data-v-37115604]:hover{cursor:pointer}.color-input .preview-container .color-value[data-v-37115604]{margin-left:4px}.color-input .color-display[data-v-37115604]{border:1px solid var(--border)}.color-input .color-display[data-v-37115604]:focus{outline:none;box-shadow:0 0 0 var(--outline-width) var(--outline);background:var(--input-focus-bg)}.color-input INPUT[data-v-37115604]{border:none;padding:0;width:23px;height:23px;-webkit-appearance:none;opacity:0}.color-input INPUT[data-v-37115604]:hover{cursor:pointer}\", \"\"]);\n// Exports\nmodule.exports = exports;\n","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../../../../../../@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../../../../@vue/cli-service/node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../postcss-loader/src/index.js??ref--9-oneOf-1-2!../../../../../../postcss-loader/src/index.js??ref--9-oneOf-1-3!../../../../../../sass-loader/dist/cjs.js??ref--9-oneOf-1-4!../../../../../../cache-loader/dist/cjs.js??ref--1-0!../../../../../../@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./brand.vue?vue&type=style&index=0&id=41d31674&prod&scoped=true&lang=scss&\");\nif(content.__esModule) content = content.default;\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar add = require(\"!../../../../../../vue-style-loader/lib/addStylesClient.js\").default\nvar update = add(\"26314ada\", content, true, {\"sourceMap\":false,\"shadowMode\":false});","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../../../../@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../../@vue/cli-service/node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../postcss-loader/src/index.js??ref--9-oneOf-1-2!../../../../postcss-loader/src/index.js??ref--9-oneOf-1-3!../../../../sass-loader/dist/cjs.js??ref--9-oneOf-1-4!../../../../cache-loader/dist/cjs.js??ref--1-0!../../../../@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./ColorInput.vue?vue&type=style&index=0&id=37115604&prod&lang=scss&scoped=true&\");\nif(content.__esModule) content = content.default;\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar add = require(\"!../../../../vue-style-loader/lib/addStylesClient.js\").default\nvar update = add(\"a365ee88\", content, true, {\"sourceMap\":false,\"shadowMode\":false});","export * from \"-!../../../../../../vue-style-loader/index.js??ref--9-oneOf-1-0!../../../../../../@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../../../../@vue/cli-service/node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../postcss-loader/src/index.js??ref--9-oneOf-1-2!../../../../../../postcss-loader/src/index.js??ref--9-oneOf-1-3!../../../../../../sass-loader/dist/cjs.js??ref--9-oneOf-1-4!../../../../../../cache-loader/dist/cjs.js??ref--1-0!../../../../../../@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./brand.vue?vue&type=style&index=0&id=41d31674&prod&scoped=true&lang=scss&\"","export * from \"-!../../../../vue-style-loader/index.js??ref--9-oneOf-1-0!../../../../@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../../@vue/cli-service/node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../postcss-loader/src/index.js??ref--9-oneOf-1-2!../../../../postcss-loader/src/index.js??ref--9-oneOf-1-3!../../../../sass-loader/dist/cjs.js??ref--9-oneOf-1-4!../../../../cache-loader/dist/cjs.js??ref--1-0!../../../../@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./ColorInput.vue?vue&type=style&index=0&id=37115604&prod&lang=scss&scoped=true&\"","var render = function render(){var _vm=this,_c=_vm._self._c;return (_vm.$fetchState.pending)?_c('Loading'):_c('div',[_c('h1',{staticClass:\"mb-20\"},[_vm._v(\"\\n    \"+_vm._s(_vm.t('branding.label'))+\"\\n  \")]),_vm._v(\" \"),_c('TypeDescription',{attrs:{\"resource\":\"branding\"}}),_vm._v(\" \"),_c('div',[_c('div',{staticClass:\"row mb-20\"},[_c('div',{staticClass:\"col span-6\"},[_c('LabeledInput',{attrs:{\"label\":_vm.t('branding.uiPL.label'),\"mode\":_vm.mode,\"maxlength\":100},model:{value:(_vm.uiPLSetting.value),callback:function ($$v) {_vm.$set(_vm.uiPLSetting, \"value\", $$v)},expression:\"uiPLSetting.value\"}})],1)]),_vm._v(\" \"),_c('h3',{staticClass:\"mt-20 mb-5 pb-5\"},[_vm._v(\"\\n      \"+_vm._s(_vm.t('branding.logos.label'))+\"\\n    \")]),_vm._v(\" \"),_c('label',{staticClass:\"text-label\"},[_vm._v(\"\\n      \"+_vm._s(_vm.t('branding.logos.tip', {}, true))+\"\\n    \")]),_vm._v(\" \"),_c('div',{staticClass:\"row mt-10 mb-20\"},[_c('Checkbox',{attrs:{\"label\":_vm.t('branding.logos.useCustom'),\"mode\":_vm.mode},model:{value:(_vm.customizeLogo),callback:function ($$v) {_vm.customizeLogo=$$v},expression:\"customizeLogo\"}})],1),_vm._v(\" \"),(_vm.customizeLogo)?_c('div',{staticClass:\"row mb-20\"},[_c('div',{staticClass:\"col logo-container span-6\"},[_c('div',{staticClass:\"mb-10\"},[_c('FileImageSelector',{staticClass:\"role-secondary\",attrs:{\"byte-limit\":20000,\"read-as-data-url\":true,\"label\":_vm.t('branding.logos.uploadLight'),\"mode\":_vm.mode,\"accept\":\"image/jpeg,image/png,image/svg+xml\"},on:{\"error\":_vm.setError,\"input\":function($event){return _vm.updateLogo($event, 'uiLogoLight')}}})],1),_vm._v(\" \"),(_vm.uiLogoLight || _vm.uiLogoDark)?_c('SimpleBox',{staticClass:\"theme-light mb-10\"},[_c('label',{staticClass:\"text-muted\"},[_vm._v(_vm._s(_vm.t('branding.logos.lightPreview')))]),_vm._v(\" \"),_c('img',{staticClass:\"logo-preview\",attrs:{\"src\":_vm.uiLogoLight ? _vm.uiLogoLight : _vm.uiLogoDark}})]):_vm._e()],1),_vm._v(\" \"),_c('div',{staticClass:\"col logo-container span-6\"},[_c('div',{staticClass:\"mb-10\"},[_c('FileImageSelector',{staticClass:\"role-secondary\",attrs:{\"byte-limit\":20000,\"read-as-data-url\":true,\"label\":_vm.t('branding.logos.uploadDark'),\"mode\":_vm.mode,\"accept\":\"image/jpeg,image/png,image/svg+xml\"},on:{\"error\":_vm.setError,\"input\":function($event){return _vm.updateLogo($event, 'uiLogoDark')}}})],1),_vm._v(\" \"),(_vm.uiLogoDark || _vm.uiLogoLight)?_c('SimpleBox',{staticClass:\"theme-dark mb-10\"},[_c('label',{staticClass:\"text-muted\"},[_vm._v(_vm._s(_vm.t('branding.logos.darkPreview')))]),_vm._v(\" \"),_c('img',{staticClass:\"logo-preview\",attrs:{\"src\":_vm.uiLogoDark ? _vm.uiLogoDark : _vm.uiLogoLight}})]):_vm._e()],1)]):_vm._e(),_vm._v(\" \"),_c('h3',{staticClass:\"mt-20 mb-5 pb-5\"},[_vm._v(\"\\n      \"+_vm._s(_vm.t('branding.favicon.label'))+\"\\n    \")]),_vm._v(\" \"),_c('label',{staticClass:\"text-label\"},[_vm._v(\"\\n      \"+_vm._s(_vm.t('branding.favicon.tip', {}, true))+\"\\n    \")]),_vm._v(\" \"),_c('div',{staticClass:\"row mt-10 mb-20\"},[_c('Checkbox',{attrs:{\"label\":_vm.t('branding.favicon.useCustom'),\"mode\":_vm.mode},model:{value:(_vm.customizeFavicon),callback:function ($$v) {_vm.customizeFavicon=$$v},expression:\"customizeFavicon\"}})],1),_vm._v(\" \"),(_vm.customizeFavicon)?_c('div',{staticClass:\"row mb-20\"},[_c('div',{staticClass:\"col logo-container span-12\"},[_c('div',{staticClass:\"mb-10\"},[_c('FileImageSelector',{staticClass:\"role-secondary\",attrs:{\"byte-limit\":20000,\"read-as-data-url\":true,\"label\":_vm.t('branding.favicon.upload'),\"mode\":_vm.mode,\"accept\":\"image/jpeg,image/png,image/svg+xml\"},on:{\"error\":_vm.setError,\"input\":function($event){return _vm.updateLogo($event, 'uiFavicon')}}})],1),_vm._v(\" \"),(_vm.uiFavicon)?_c('SimpleBox',[_c('label',{staticClass:\"text-muted\"},[_vm._v(_vm._s(_vm.t('branding.favicon.preview')))]),_vm._v(\" \"),_c('img',{staticClass:\"logo-preview\",attrs:{\"src\":_vm.uiFavicon}})]):_vm._e()],1)]):_vm._e(),_vm._v(\" \"),_c('h3',{staticClass:\"mt-40 mb-5 pb-0\"},[_vm._v(\"\\n      \"+_vm._s(_vm.t('branding.color.label'))+\"\\n    \")]),_vm._v(\" \"),_c('label',{staticClass:\"text-label\"},[_vm._v(\"\\n      \"+_vm._s(_vm.t('branding.color.tip', {}, true))+\"\\n    \")]),_vm._v(\" \"),_c('div',{staticClass:\"row mt-20\"},[_c('Checkbox',{attrs:{\"label\":_vm.t('branding.color.useCustom'),\"mode\":_vm.mode},model:{value:(_vm.customizeColor),callback:function ($$v) {_vm.customizeColor=$$v},expression:\"customizeColor\"}})],1),_vm._v(\" \"),(_vm.customizeColor)?_c('div',{staticClass:\"row mt-20 mb-20\"},[_c('ColorInput',{attrs:{\"component-testid\":\"primary\"},model:{value:(_vm.uiColor),callback:function ($$v) {_vm.uiColor=$$v},expression:\"uiColor\"}})],1):_vm._e(),_vm._v(\" \"),_c('h3',{staticClass:\"mt-40 mb-5 pb-0\"},[_vm._v(\"\\n      \"+_vm._s(_vm.t('branding.linkColor.label'))+\"\\n    \")]),_vm._v(\" \"),_c('label',{staticClass:\"text-label\"},[_vm._v(\"\\n      \"+_vm._s(_vm.t('branding.linkColor.tip', {}, true))+\"\\n    \")]),_vm._v(\" \"),_c('div',{staticClass:\"row mt-20\"},[_c('Checkbox',{attrs:{\"label\":_vm.t('branding.linkColor.useCustom'),\"mode\":_vm.mode},model:{value:(_vm.customizeLinkColor),callback:function ($$v) {_vm.customizeLinkColor=$$v},expression:\"customizeLinkColor\"}})],1),_vm._v(\" \"),(_vm.customizeLinkColor)?_c('div',{staticClass:\"row mt-20 mb-20\"},[_c('ColorInput',{staticClass:\"col\",attrs:{\"component-testid\":\"link\"},model:{value:(_vm.uiLinkColor),callback:function ($$v) {_vm.uiLinkColor=$$v},expression:\"uiLinkColor\"}}),_vm._v(\" \"),_c('span',{staticClass:\"col link-example\"},[_c('a',[_vm._v(\"\\n          \"+_vm._s(_vm.t('branding.linkColor.example'))+\"\\n        \")])])],1):_vm._e()]),_vm._v(\" \"),_vm._l((_vm.errors),function(err){return [_c('Banner',{key:err,attrs:{\"color\":\"error\",\"label\":err}})]}),_vm._v(\" \"),(_vm.mode === 'edit')?_c('div',[_c('AsyncButton',{staticClass:\"pull-right mt-20\",attrs:{\"component-testid\":\"branding-apply\",\"mode\":\"apply\"},on:{\"click\":_vm.save}})],1):_vm._e()],2)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<script>\nimport { LabeledInput } from '@components/Form/LabeledInput';\nimport ColorInput from '@shell/components/form/ColorInput';\nimport TypeDescription from '@shell/components/TypeDescription';\n\nimport { Checkbox } from '@components/Form/Checkbox';\nimport FileImageSelector from '@shell/components/form/FileImageSelector';\nimport SimpleBox from '@shell/components/SimpleBox';\nimport Loading from '@shell/components/Loading';\nimport AsyncButton from '@shell/components/AsyncButton';\nimport { Banner } from '@components/Banner';\nimport { allHash } from '@shell/utils/promise';\nimport { MANAGEMENT } from '@shell/config/types';\nimport { getVendor, setVendor } from '@shell/config/private-label';\nimport { fetchOrCreateSetting } from '@shell/utils/settings';\nimport { SETTING } from '@shell/config/settings';\nimport { _EDIT, _VIEW } from '@shell/config/query-params';\nimport { setFavIcon } from '@shell/utils/favicon';\n\nconst Color = require('color');\n\nexport default {\n  layout: 'authenticated',\n\n  components: {\n    LabeledInput, Checkbox, FileImageSelector, Loading, SimpleBox, AsyncButton, Banner, ColorInput, TypeDescription\n  },\n\n  async fetch() {\n    const hash = await allHash({\n      uiPLSetting:        this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.PL }),\n      uiLogoDarkSetting:  fetchOrCreateSetting(this.$store, SETTING.LOGO_DARK, ''),\n      uiLogoLightSetting: fetchOrCreateSetting(this.$store, SETTING.LOGO_LIGHT, ''),\n      uiColorSetting:     fetchOrCreateSetting(this.$store, SETTING.PRIMARY_COLOR, ''),\n      uiLinkColorSetting: fetchOrCreateSetting(this.$store, SETTING.LINK_COLOR, ''),\n      uiFaviconSetting:   fetchOrCreateSetting(this.$store, SETTING.FAVICON, ''),\n    });\n\n    Object.assign(this, hash);\n\n    if (hash.uiLogoDarkSetting.value) {\n      try {\n        this.uiLogoDark = hash.uiLogoDarkSetting.value;\n        this.customizeLogo = true;\n      } catch {}\n    }\n    if (hash.uiLogoLightSetting.value) {\n      try {\n        this.uiLogoLight = hash.uiLogoLightSetting.value;\n\n        this.customizeLogo = true;\n      } catch {}\n    }\n    if (hash.uiFaviconSetting.value) {\n      try {\n        this.uiFavicon = hash.uiFaviconSetting.value;\n\n        this.customizeFavicon = true;\n      } catch {}\n    }\n    if (hash.uiColorSetting.value) {\n      this.uiColor = Color(hash.uiColorSetting.value).hex();\n      this.customizeColor = true;\n    }\n    if (hash.uiLinkColorSetting.value) {\n      this.uiLinkColor = Color(hash.uiLinkColorSetting.value).hex();\n      this.customizeLinkColor = true;\n    }\n  },\n\n  data() {\n    return {\n      vendor:      getVendor(),\n      uiPLSetting: {},\n\n      uiLogoDarkSetting:  {},\n      uiLogoDark:         '',\n      uiLogoLightSetting: {},\n      uiLogoLight:        '',\n      customizeLogo:      false,\n\n      uiFaviconSetting: {},\n      uiFavicon:        '',\n      customizeFavicon: false,\n\n      uiColorSetting:     {},\n      uiColor:            null,\n      customizeColor:     false,\n      uiLinkColorSetting: {},\n      uiLinkColor:        null,\n      customizeLinkColor: false,\n\n      errors: [],\n\n    };\n  },\n\n  computed: {\n    mode() {\n      const schema = this.$store.getters[`management/schemaFor`](MANAGEMENT.SETTING);\n\n      return schema?.resourceMethods?.includes('PUT') ? _EDIT : _VIEW;\n    }\n  },\n\n  mounted() {\n    let uiColor = getComputedStyle(document.body).getPropertyValue('--primary');\n    let uiLinkColor = getComputedStyle(document.body).getPropertyValue('--link');\n    const suse = document.querySelector('.suse');\n\n    if (suse) {\n      uiColor = getComputedStyle(suse).getPropertyValue('--primary');\n      uiLinkColor = getComputedStyle(suse).getPropertyValue('--link');\n    }\n\n    // Only set the color to the default if not already set from the custom color\n    this.uiColor = this.uiColor || uiColor.trim();\n    this.uiLinkColor = this.uiLinkColor || uiLinkColor.trim();\n  },\n\n  methods: {\n    updateLogo(img, key) {\n      this[key] = img;\n    },\n\n    setError(e) {\n      this.errors = [];\n      this.errors.push(e);\n    },\n\n    async save(btnCB) {\n      this.uiPLSetting.value = this.uiPLSetting.value.replaceAll(/[\\<>&=#()\"]/gm, '');\n\n      if (this.customizeLogo) {\n        this.uiLogoLightSetting.value = this.uiLogoLight;\n        this.uiLogoDarkSetting.value = this.uiLogoDark;\n      } else {\n        this.uiLogoLightSetting.value = '';\n        this.uiLogoDarkSetting.value = '';\n      }\n\n      if (this.customizeFavicon) {\n        this.uiFaviconSetting.value = this.uiFavicon;\n      } else {\n        this.uiFaviconSetting.value = '';\n      }\n\n      if (this.customizeColor) {\n        this.uiColorSetting.value = Color(this.uiColor).rgb().string();\n      } else {\n        this.uiColorSetting.value = null;\n      }\n\n      if (this.customizeLinkColor) {\n        this.uiLinkColorSetting.value = Color(this.uiLinkColor).rgb().string();\n      } else {\n        this.uiLinkColorSetting.value = null;\n      }\n\n      this.errors = [];\n\n      try {\n        await Promise.all([\n          this.uiPLSetting.save(),\n          this.uiLogoDarkSetting.save(),\n          this.uiLogoLightSetting.save(),\n          this.uiColorSetting.save(),\n          this.uiLinkColorSetting.save(),\n          this.uiFaviconSetting.save()\n        ]);\n        if (this.uiPLSetting.value !== this.vendor) {\n          setVendor(this.uiPLSetting.value);\n        }\n\n        setFavIcon(this.$store);\n        btnCB(true);\n      } catch (err) {\n        this.errors.push(err);\n        btnCB(false);\n      }\n    },\n  }\n};\n</script>\n\n<template>\n  <Loading v-if=\"$fetchState.pending\" />\n  <div v-else>\n    <h1 class=\"mb-20\">\n      {{ t('branding.label') }}\n    </h1>\n    <TypeDescription resource=\"branding\" />\n    <div>\n      <div class=\"row mb-20\">\n        <div class=\"col span-6\">\n          <LabeledInput\n            v-model=\"uiPLSetting.value\"\n            :label=\"t('branding.uiPL.label')\"\n            :mode=\"mode\"\n            :maxlength=\"100\"\n          />\n        </div>\n      </div>\n      <h3 class=\"mt-20 mb-5 pb-5\">\n        {{ t('branding.logos.label') }}\n      </h3>\n      <label class=\"text-label\">\n        {{ t('branding.logos.tip', {}, true) }}\n      </label>\n\n      <div class=\"row mt-10 mb-20\">\n        <Checkbox\n          v-model=\"customizeLogo\"\n          :label=\"t('branding.logos.useCustom')\"\n          :mode=\"mode\"\n        />\n      </div>\n\n      <div\n        v-if=\"customizeLogo\"\n        class=\"row mb-20\"\n      >\n        <div class=\"col logo-container span-6\">\n          <div class=\"mb-10\">\n            <FileImageSelector\n              :byte-limit=\"20000\"\n              :read-as-data-url=\"true\"\n              class=\"role-secondary\"\n              :label=\"t('branding.logos.uploadLight')\"\n              :mode=\"mode\"\n              accept=\"image/jpeg,image/png,image/svg+xml\"\n              @error=\"setError\"\n              @input=\"updateLogo($event, 'uiLogoLight')\"\n            />\n          </div>\n          <SimpleBox\n            v-if=\"uiLogoLight || uiLogoDark\"\n            class=\"theme-light  mb-10\"\n          >\n            <label class=\"text-muted\">{{ t('branding.logos.lightPreview') }}</label>\n            <img\n              class=\"logo-preview\"\n              :src=\"uiLogoLight ? uiLogoLight : uiLogoDark\"\n            >\n          </SimpleBox>\n        </div>\n        <div class=\"col logo-container span-6\">\n          <div class=\"mb-10\">\n            <FileImageSelector\n              :byte-limit=\"20000\"\n              :read-as-data-url=\"true\"\n              class=\"role-secondary\"\n              :label=\"t('branding.logos.uploadDark')\"\n              :mode=\"mode\"\n              accept=\"image/jpeg,image/png,image/svg+xml\"\n              @error=\"setError\"\n              @input=\"updateLogo($event, 'uiLogoDark')\"\n            />\n          </div>\n          <SimpleBox\n            v-if=\"uiLogoDark || uiLogoLight\"\n            class=\"theme-dark  mb-10\"\n          >\n            <label class=\"text-muted\">{{ t('branding.logos.darkPreview') }}</label>\n            <img\n              class=\"logo-preview\"\n              :src=\"uiLogoDark ? uiLogoDark : uiLogoLight\"\n            >\n          </SimpleBox>\n        </div>\n      </div>\n\n      <h3 class=\"mt-20 mb-5 pb-5\">\n        {{ t('branding.favicon.label') }}\n      </h3>\n      <label class=\"text-label\">\n        {{ t('branding.favicon.tip', {}, true) }}\n      </label>\n\n      <div class=\"row mt-10 mb-20\">\n        <Checkbox\n          v-model=\"customizeFavicon\"\n          :label=\"t('branding.favicon.useCustom')\"\n          :mode=\"mode\"\n        />\n      </div>\n\n      <div\n        v-if=\"customizeFavicon\"\n        class=\"row mb-20\"\n      >\n        <div class=\"col logo-container span-12\">\n          <div class=\"mb-10\">\n            <FileImageSelector\n              :byte-limit=\"20000\"\n              :read-as-data-url=\"true\"\n              class=\"role-secondary\"\n              :label=\"t('branding.favicon.upload')\"\n              :mode=\"mode\"\n              accept=\"image/jpeg,image/png,image/svg+xml\"\n              @error=\"setError\"\n              @input=\"updateLogo($event, 'uiFavicon')\"\n            />\n          </div>\n          <SimpleBox v-if=\"uiFavicon\">\n            <label class=\"text-muted\">{{ t('branding.favicon.preview') }}</label>\n            <img\n              class=\"logo-preview\"\n              :src=\"uiFavicon\"\n            >\n          </SimpleBox>\n        </div>\n      </div>\n\n      <h3 class=\"mt-40 mb-5 pb-0\">\n        {{ t('branding.color.label') }}\n      </h3>\n      <label class=\"text-label\">\n        {{ t('branding.color.tip', {}, true) }}\n      </label>\n      <div class=\"row mt-20\">\n        <Checkbox\n          v-model=\"customizeColor\"\n          :label=\"t('branding.color.useCustom')\"\n          :mode=\"mode\"\n        />\n      </div>\n      <div\n        v-if=\"customizeColor\"\n        class=\"row mt-20 mb-20\"\n      >\n        <ColorInput\n          v-model=\"uiColor\"\n          component-testid=\"primary\"\n        />\n      </div>\n\n      <h3 class=\"mt-40 mb-5 pb-0\">\n        {{ t('branding.linkColor.label') }}\n      </h3>\n      <label class=\"text-label\">\n        {{ t('branding.linkColor.tip', {}, true) }}\n      </label>\n      <div class=\"row mt-20\">\n        <Checkbox\n          v-model=\"customizeLinkColor\"\n          :label=\"t('branding.linkColor.useCustom')\"\n          :mode=\"mode\"\n        />\n      </div>\n      <div\n        v-if=\"customizeLinkColor\"\n        class=\"row mt-20 mb-20\"\n      >\n        <ColorInput\n          v-model=\"uiLinkColor\"\n          class=\"col\"\n          component-testid=\"link\"\n        />\n        <span class=\"col link-example\">\n          <a>\n            {{ t('branding.linkColor.example') }}\n          </a>\n        </span>\n      </div>\n    </div>\n    <template v-for=\"err in errors\">\n      <Banner\n        :key=\"err\"\n        color=\"error\"\n        :label=\"err\"\n      />\n    </template>\n    <div v-if=\"mode === 'edit'\">\n      <AsyncButton\n        component-testid=\"branding-apply\"\n        class=\"pull-right mt-20\"\n        mode=\"apply\"\n        @click=\"save\"\n      />\n    </div>\n  </div>\n</template>\n\n<style scoped lang='scss'>\n.link-example {\n  display: flex;\n  align-content: center;\n\n  a {\n    margin: auto;\n  }\n}\n\n.logo-container {\n    display: flex;\n    flex-direction: column;\n\n    ::v-deep.simple-box {\n        position: relative;\n        flex: 1;\n        max-height: 120px;\n\n        .content {\n          height: 100%;\n          display: flex;\n        }\n\n        .logo-preview {\n          max-width: 100%;\n        }\n    }\n\n    & LABEL {\n      position: absolute;\n      top: 10px;\n      left: 10px;\n    }\n}\n</style>\n","import mod from \"-!../../../../../../cache-loader/dist/cjs.js??ref--16-0!../../../../../../babel-loader/lib/index.js??ref--16-1!../../../../../../cache-loader/dist/cjs.js??ref--1-0!../../../../../../@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./brand.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../../cache-loader/dist/cjs.js??ref--16-0!../../../../../../babel-loader/lib/index.js??ref--16-1!../../../../../../cache-loader/dist/cjs.js??ref--1-0!../../../../../../@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./brand.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./brand.vue?vue&type=template&id=41d31674&scoped=true&\"\nimport script from \"./brand.vue?vue&type=script&lang=js&\"\nexport * from \"./brand.vue?vue&type=script&lang=js&\"\nimport style0 from \"./brand.vue?vue&type=style&index=0&id=41d31674&prod&scoped=true&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../@vue/cli-service/node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"41d31674\",\n  null\n  \n)\n\nexport default component.exports","// Imports\nvar ___CSS_LOADER_API_IMPORT___ = require(\"../../../../../../@vue/cli-service/node_modules/css-loader/dist/runtime/api.js\");\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.id, \".link-example[data-v-41d31674]{display:flex;align-content:center}.link-example a[data-v-41d31674]{margin:auto}.logo-container[data-v-41d31674]{display:flex;flex-direction:column}.logo-container[data-v-41d31674].simple-box{position:relative;flex:1;max-height:120px}.logo-container[data-v-41d31674].simple-box .content{height:100%;display:flex}.logo-container[data-v-41d31674].simple-box .logo-preview{max-width:100%}.logo-container LABEL[data-v-41d31674]{position:absolute;top:10px;left:10px}\", \"\"]);\n// Exports\nmodule.exports = exports;\n","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"color-input\",class:{[_vm.mode]:_vm.mode, disabled: _vm.mode !== _vm.editMode},attrs:{\"data-testid\":_vm.componentTestid + '-color-input'}},[_c('label',{staticClass:\"text-label\"},[(_vm.labelKey)?_c('t',{attrs:{\"k\":_vm.labelKey,\"raw\":true}}):_vm._e(),_vm._v(_vm._s(_vm.label))],1),_vm._v(\" \"),_c('div',{staticClass:\"preview-container\",on:{\"click\":function($event){$event.stopPropagation();return _vm.$refs.input.click($event)}}},[_c('span',{staticClass:\"color-display\",style:({'background-color': _vm.inputValue})},[_c('input',{ref:\"input\",attrs:{\"type\":\"color\",\"disabled\":_vm.mode !== _vm.editMode},domProps:{\"value\":_vm.inputValue},on:{\"input\":function($event){return _vm.$emit('input', $event.target.value)}}})]),_vm._v(\" \"),_c('span',{staticClass:\"text-muted color-value\"},[_vm._v(_vm._s(_vm.inputValue))])])])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<script>\nimport { _EDIT, _VIEW } from '@shell/config/query-params';\n\nexport default {\n  props: {\n    value: {\n      type:    String,\n      default: ''\n    },\n\n    defaultValue: {\n      type:    String,\n      default: ''\n    },\n\n    label: {\n      type:    String,\n      default: null\n    },\n\n    labelKey: {\n      type:    String,\n      default: null\n    },\n\n    mode: {\n      type: String,\n      validator(value) {\n        return [_EDIT, _VIEW].includes(value);\n      },\n      default: _EDIT,\n    },\n\n    /**\n     * Inherited global identifier prefix for tests\n     * Define a term based on the parent component to avoid conflicts on multiple components\n     */\n    componentTestid: {\n      type:    String,\n      default: 'color-input'\n    }\n  },\n\n  data() {\n    return {\n      viewMode: _VIEW,\n      editMode: _EDIT\n    };\n  },\n\n  computed: {\n    /**\n     * Allow UI to set a default value.\n     */\n    inputValue() {\n      return this.value ? this.value : this.defaultValue;\n    }\n  },\n\n  mounted() {\n    // Ensures that if the default value is used, the model is updated with it\n    this.$emit('input', this.inputValue);\n  }\n};\n</script>\n\n<template>\n  <div\n    class=\"color-input\"\n    :class=\"{[mode]:mode, disabled: mode !== editMode}\"\n    :data-testid=\"componentTestid + '-color-input'\"\n  >\n    <label class=\"text-label\"><t\n      v-if=\"labelKey\"\n      :k=\"labelKey\"\n      :raw=\"true\"\n    />{{ label }}</label>\n    <div\n      class=\"preview-container\"\n      @click.stop=\"$refs.input.click($event)\"\n    >\n      <span\n        :style=\"{'background-color': inputValue}\"\n        class=\"color-display\"\n      >\n        <input\n          ref=\"input\"\n          type=\"color\"\n          :disabled=\"mode !== editMode\"\n          :value=\"inputValue\"\n          @input=\"$emit('input', $event.target.value)\"\n        >\n      </span>\n      <span class=\"text-muted color-value\">{{ inputValue }}</span>\n    </div>\n  </div>\n</template>\n\n<style lang='scss' scoped>\n.color-input {\n  border: 1px solid var(--border);\n  border-radius: var(--border-radius);\n  padding: 10px;\n\n  &.disabled, &.disabled .selected, &[disabled], &[disabled]:hover {\n    color: var(--input-disabled-text);\n    background-color: var(--input-disabled-bg);\n    outline-width: 0;\n    border-color: var(--input-disabled-border);\n    cursor: not-allowed;\n\n    label, span, div, input {\n      cursor: not-allowed !important;\n    }\n\n    label {\n      color: var(--input-disabled-label);\n      display: inline-block;\n      z-index: 1;\n    }\n    &::placeholder {\n        color: var(--input-disabled-placeholder);\n    }\n  }\n\n  LABEL{\n    display: block;\n  }\n\n  .preview-container{\n    &:hover {\n      cursor: pointer;\n    }\n\n    .color-value {\n      margin-left: 4px;\n    }\n  }\n\n  .color-display{\n    border: 1px solid var(--border);\n\n    &:focus {\n      outline: none;\n      box-shadow: 0 0 0 var(--outline-width) var(--outline);\n      background: var(--input-focus-bg);\n    }\n  }\n\n  INPUT{\n    border: none;\n    padding: 0;\n    width: 23px;\n    height: 23px;\n    -webkit-appearance: none;\n    opacity: 0;\n    &:hover {\n      cursor: pointer;\n    }\n  }\n}\n</style>\n","import mod from \"-!../../../../cache-loader/dist/cjs.js??ref--16-0!../../../../babel-loader/lib/index.js??ref--16-1!../../../../cache-loader/dist/cjs.js??ref--1-0!../../../../@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./ColorInput.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../cache-loader/dist/cjs.js??ref--16-0!../../../../babel-loader/lib/index.js??ref--16-1!../../../../cache-loader/dist/cjs.js??ref--1-0!../../../../@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./ColorInput.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ColorInput.vue?vue&type=template&id=37115604&scoped=true&\"\nimport script from \"./ColorInput.vue?vue&type=script&lang=js&\"\nexport * from \"./ColorInput.vue?vue&type=script&lang=js&\"\nimport style0 from \"./ColorInput.vue?vue&type=style&index=0&id=37115604&prod&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../@vue/cli-service/node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"37115604\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}