{"version":3,"file":"icon-picker-modal.element-BC9hVr63.js","sources":["../../../src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts"],"sourcesContent":["import { css, customElement, html, nothing, query, repeat, state } from '@umbraco-cms/backoffice/external/lit';\nimport { extractUmbColorVariable, umbracoColors } from '@umbraco-cms/backoffice/resources';\nimport { umbFocus } from '@umbraco-cms/backoffice/lit-element';\nimport { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';\nimport { UmbTextStyles } from '@umbraco-cms/backoffice/style';\nimport { UMB_ICON_REGISTRY_CONTEXT, type UmbIconDefinition } from '@umbraco-cms/backoffice/icon';\nimport type { UmbIconPickerModalData, UmbIconPickerModalValue } from '@umbraco-cms/backoffice/modal';\nimport type { UUIColorSwatchesEvent } from '@umbraco-cms/backoffice/external/uui';\n\n@customElement('umb-icon-picker-modal')\nexport class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPickerModalData, UmbIconPickerModalValue> {\n\t#icons?: Array<UmbIconDefinition>;\n\n\t@query('#search')\n\tprivate _searchInput?: HTMLInputElement;\n\n\t@state()\n\tprivate _iconsFiltered?: Array<UmbIconDefinition>;\n\n\t@state()\n\tprivate _colorList = umbracoColors.filter((color) => !color.legacy);\n\n\t@state()\n\tprivate _currentIcon?: string;\n\n\t@state()\n\tprivate _currentColor = 'text';\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.consumeContext(UMB_ICON_REGISTRY_CONTEXT, (context) => {\n\t\t\tthis.observe(context.approvedIcons, (icons) => {\n\t\t\t\tthis.#icons = icons;\n\t\t\t\tthis.#filterIcons();\n\t\t\t});\n\t\t});\n\t}\n\n\t#filterIcons() {\n\t\tif (!this.#icons) return;\n\t\tconst value = this._searchInput?.value;\n\t\tif (value) {\n\t\t\tthis._iconsFiltered = this.#icons.filter((icon) => icon.name.toLowerCase().includes(value.toLowerCase()));\n\t\t} else {\n\t\t\tthis._iconsFiltered = this.#icons;\n\t\t}\n\t}\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis._iconsFiltered = this.#icons;\n\n\t\tif (this.modalContext) {\n\t\t\tthis.observe(\n\t\t\t\tthis.modalContext?.value,\n\t\t\t\t(newValue) => {\n\t\t\t\t\tthis._currentIcon = newValue?.icon;\n\t\t\t\t\tthis._currentColor = newValue?.color ?? 'text';\n\t\t\t\t},\n\t\t\t\t'_observeModalContextValue',\n\t\t\t);\n\t\t}\n\t}\n\n\t#changeIcon(e: InputEvent | KeyboardEvent, iconName: string) {\n\t\tif (e.type == 'click' || (e.type == 'keyup' && (e as KeyboardEvent).key == 'Enter')) {\n\t\t\tthis.modalContext?.updateValue({ icon: iconName });\n\t\t}\n\t}\n\n\t#onColorChange(e: UUIColorSwatchesEvent) {\n\t\tconst colorAlias = e.target.value;\n\t\tthis.modalContext?.updateValue({ color: colorAlias });\n\t\tthis._currentColor = colorAlias;\n\t}\n\n\toverride render() {\n\t\t// TODO: Missing localization in general. [NL]\n\t\treturn html`\n\t\t\t<umb-body-layout headline=\"Select Icon\">\n\t\t\t\t<div id=\"container\">\n\t\t\t\t\t${this.renderSearch()}\n\t\t\t\t\t<hr />\n\t\t\t\t\t<uui-color-swatches\n\t\t\t\t\t\t.value=${this._currentColor}\n\t\t\t\t\t\tlabel=\"Color switcher for icons\"\n\t\t\t\t\t\t@change=${this.#onColorChange}>\n\t\t\t\t\t\t${\n\t\t\t\t\t\t\t// TODO: Missing localization for the color aliases. [NL]\n\t\t\t\t\t\t\tthis._colorList.map(\n\t\t\t\t\t\t\t\t(color) => html`\n\t\t\t\t\t\t\t\t\t<uui-color-swatch\n\t\t\t\t\t\t\t\t\t\tlabel=${color.alias}\n\t\t\t\t\t\t\t\t\t\ttitle=${color.alias}\n\t\t\t\t\t\t\t\t\t\tvalue=${color.alias}\n\t\t\t\t\t\t\t\t\t\tstyle=\"--uui-swatch-color: var(${color.varName})\"></uui-color-swatch>\n\t\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t</uui-color-swatches>\n\t\t\t\t\t<hr />\n\t\t\t\t\t<uui-scroll-container id=\"icons\">${this.renderIcons()}</uui-scroll-container>\n\t\t\t\t</div>\n\t\t\t\t<uui-button\n\t\t\t\t\tslot=\"actions\"\n\t\t\t\t\tlabel=${this.localize.term('general_close')}\n\t\t\t\t\t@click=${this._rejectModal}></uui-button>\n\t\t\t\t<uui-button\n\t\t\t\t\tslot=\"actions\"\n\t\t\t\t\tcolor=\"positive\"\n\t\t\t\t\tlook=\"primary\"\n\t\t\t\t\t@click=${this._submitModal}\n\t\t\t\t\tlabel=${this.localize.term('general_submit')}></uui-button>\n\t\t\t</umb-body-layout>\n\t\t`;\n\t}\n\n\trenderSearch() {\n\t\treturn html` <uui-input\n\t\t\ttype=\"search\"\n\t\t\tplaceholder=${this.localize.term('placeholders_filter')}\n\t\t\tlabel=${this.localize.term('placeholders_filter')}\n\t\t\tid=\"search\"\n\t\t\t@keyup=${this.#filterIcons}\n\t\t\t${umbFocus()}>\n\t\t\t<uui-icon name=\"search\" slot=\"prepend\" id=\"search_icon\"></uui-icon>\n\t\t</uui-input>`;\n\t}\n\n\trenderIcons() {\n\t\treturn this._iconsFiltered\n\t\t\t? repeat(\n\t\t\t\t\tthis._iconsFiltered,\n\t\t\t\t\t(icon) => icon.name,\n\t\t\t\t\t(icon) => html`\n\t\t\t\t\t\t<uui-button\n\t\t\t\t\t\t\tlabel=${icon.name}\n\t\t\t\t\t\t\ttitle=${icon.name}\n\t\t\t\t\t\t\tclass=${icon.name === this._currentIcon ? 'selected' : ''}\n\t\t\t\t\t\t\t@click=${(e: InputEvent) => this.#changeIcon(e, icon.name)}\n\t\t\t\t\t\t\t@keyup=${(e: KeyboardEvent) => this.#changeIcon(e, icon.name)}>\n\t\t\t\t\t\t\t<uui-icon\n\t\t\t\t\t\t\t\tstyle=\"--uui-icon-color: var(${extractUmbColorVariable(this._currentColor)})\"\n\t\t\t\t\t\t\t\tname=${icon.name}></uui-icon>\n\t\t\t\t\t\t</uui-button>\n\t\t\t\t\t`,\n\t\t\t\t)\n\t\t\t: nothing;\n\t}\n\n\tstatic override styles = [\n\t\tUmbTextStyles,\n\t\tcss`\n\t\t\t:host {\n\t\t\t\tposition: relative;\n\t\t\t}\n\n\t\t\t#container {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\theight: 100%;\n\t\t\t\tbackground-color: var(--uui-color-surface);\n\t\t\t\tbox-shadow: var(--uui-shadow-depth-1, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24));\n\t\t\t\tborder-radius: var(--uui-border-radius);\n\t\t\t\tpadding: var(--uui-size-space-5);\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\t\t\t#container hr {\n\t\t\t\theight: 1px;\n\t\t\t\tborder: none;\n\t\t\t\tbackground-color: var(--uui-color-divider);\n\t\t\t\tmargin: 20px 0;\n\t\t\t}\n\n\t\t\t#search {\n\t\t\t\twidth: 100%;\n\t\t\t\talign-items: center;\n\t\t\t}\n\t\t\t#search_icon {\n\t\t\t\tpadding-left: var(--uui-size-space-2);\n\t\t\t}\n\n\t\t\t#icons {\n\t\t\t\tline-height: 0;\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template-columns: repeat(auto-fit, minmax(40px, calc((100% / 12) - 10px)));\n\t\t\t\tgap: 10px;\n\t\t\t\toverflow-y: scroll;\n\t\t\t\tmax-height: 100%;\n\t\t\t\tmin-height: 0;\n\t\t\t\tpadding: 2px;\n\t\t\t}\n\n\t\t\t#icons uui-button {\n\t\t\t\tborder-radius: var(--uui-border-radius);\n\t\t\t\tfont-size: 16px; /* specific for icons */\n\t\t\t}\n\t\t\t#icons uui-button:focus,\n\t\t\t#icons uui-button:hover,\n\t\t\t#icons uui-button.selected {\n\t\t\t\toutline: 2px solid var(--uui-color-selected);\n\t\t\t}\n\n\t\t\tuui-button[slot='actions'] {\n\t\t\t\tmargin-left: var(--uui-size-space-4);\n\t\t\t}\n\n\t\t\tuui-color-swatches {\n\t\t\t\tmargin: 0;\n\t\t\t}\n\t\t`,\n\t];\n}\n\nexport default UmbIconPickerModalElement;\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'umb-icon-picker-modal': UmbIconPickerModalElement;\n\t}\n}\n"],"names":["_icons","_UmbIconPickerModalElement_instances","filterIcons_fn","changeIcon_fn","onColorChange_fn","UmbIconPickerModalElement","UmbModalBaseElement","__privateAdd","umbracoColors","color","UMB_ICON_REGISTRY_CONTEXT","context","icons","__privateSet","__privateMethod","__privateGet","newValue","html","umbFocus","repeat","icon","e","extractUmbColorVariable","nothing","value","iconName","colorAlias","UmbTextStyles","css","__decorateClass","query","state","customElement","UmbIconPickerModalElement$1"],"mappings":"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"}