@operato/font 10.20.0 → 10.23.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +22 -0
- package/dist/src/font-creation-card.js +86 -35
- package/dist/src/font-creation-card.js.map +1 -1
- package/dist/src/font-selector.d.ts +0 -2
- package/dist/src/font-selector.js +189 -84
- package/dist/src/font-selector.js.map +1 -1
- package/dist/src/ox-font-selector.js +8 -3
- package/dist/src/ox-font-selector.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +8 -8
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"font-selector.js","sourceRoot":"","sources":["../../src/font-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/input/ox-select.js'\nimport '@operato/popup/ox-popup-list.js'\nimport './font-creation-card.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { i18next, localize } from '@operato/i18n'\nimport { pulltorefresh } from '@operato/pull-to-refresh'\nimport { store, FontController, Font } from '@operato/shell'\nimport { ScrollbarStyles, CommonHeaderStyles } from '@operato/styles'\n\nimport { createFont, deleteFont, updateFont } from './font-graphql-client.js'\nimport { actionUpdateFontList } from './redux-font-actions.js'\n\n@customElement('font-selector')\nexport class FontSelector extends localize(i18next)(LitElement) {\n static styles = [\n ScrollbarStyles,\n CommonHeaderStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n color: var(--md-sys-color-on-background);\n background-color: var(--md-sys-color-background);\n\n position: relative;\n }\n\n #main {\n overflow: auto;\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n grid-auto-rows: var(--card-list-rows-height);\n grid-gap: 20px;\n box-sizing: border-box;\n padding: var(--spacing-medium);\n }\n\n #main .card {\n display: flex;\n flex-direction: column;\n align-items: center;\n overflow: hidden;\n border: 1px solid rgba(0, 0, 0, 0.2);\n border-radius: var(--md-sys-shape-corner-small);\n color: var(--md-sys-color-on-surface);\n background-color: var(--md-sys-color-surface);\n\n position: relative;\n }\n\n #main .card.create {\n overflow: visible;\n }\n\n .card .button-container {\n position: absolute;\n right: 0;\n height: 100%;\n display: flex;\n direction: rtl;\n flex-direction: column;\n flex-wrap: wrap;\n }\n\n .card .button-container > md-icon {\n text-align: center;\n width: var(--font-selector-icon-size, 35px);\n height: var(--font-selector-icon-size, 35px);\n color: var(--md-sys-color-on-primary-container);\n background-color: var(--md-sys-color-primary-container);\n }\n\n .card .button-container > md-icon:last-child {\n border-bottom-left-radius: var(--md-sys-shape-corner-medium);\n }\n\n .card .button-container > md-icon:hover,\n .card .button-container > md-icon:active {\n color: var(--md-sys-color-on-secondary);\n background-color: var(--md-sys-color-secondary);\n }\n\n #main .card:hover {\n cursor: pointer;\n }\n\n [face] {\n flex: 1;\n }\n\n [name] {\n color: var(--md-sys-color-on-tertiary);\n background-color: var(--md-sys-color-tertiary);\n opacity: 0.8;\n margin-top: -35px;\n width: 100%;\n color: #fff;\n font-weight: bolder;\n font-size: 13px;\n text-indent: 7px;\n }\n\n [provider] {\n color: var(--md-sys-color-on-secondary);\n background-color: var(--md-sys-color-secondary);\n width: 100%;\n min-height: 15px;\n font-size: 0.6rem;\n color: #fff;\n text-indent: 7px;\n }\n `\n ]\n\n private _font = new FontController(this)\n private _prevFonts: Font[] = []\n\n @property({ type: Boolean }) creatable: boolean = false\n @property({ type: String }) provider: string = ''\n\n @query('#main') main!: HTMLElement\n @query('.header') header!: HTMLElement\n @query('font-creation-card') creationCard!: { reset: () => {} }\n\n showGotoTop: boolean = false\n\n render() {\n var fonts = this._font.fonts || []\n\n return html`\n <div class=\"header\">\n <div class=\"filters\">\n <ox-select\n .placeholder=${i18next.t('text.please choose a provider')}\n .value=${this.provider}\n @change=${(e: Event) => {\n this.provider = (e.currentTarget as HTMLInputElement).value\n }}\n >\n <ox-popup-list>\n ${['', 'google', 'custom'].map(provider => html` <div option value=${provider}>${provider} </div> `)}\n </ox-popup-list>\n </ox-select>\n </div>\n </div>\n\n <div id=\"main\">\n ${this.creatable\n ? html`\n <font-creation-card\n class=\"card create\"\n @create-font=${(e: CustomEvent) => this.onCreateFont(e)}\n ></font-creation-card>\n `\n : html``}\n ${fonts\n .filter(font => (this.provider ? font.provider === this.provider : true))\n .map(\n font => html`\n <div class=\"card\" @click=${(e: Event) => this.onClickSelect(font)}>\n <div face>\n <font .face=${font.name}>ABCDEFGHIJKLMNOPQRSTUVWXYZ</font>\n <br />\n <font .face=${font.name}>abcdefghijklmnopqrstuvwxyz</font>\n <br />\n <font .face=${font.name}>1234567890~!@#$%^&*</font>\n </div>\n <div name>${font.name}</div>\n <div provider>${font.provider}</div>\n <div class=\"button-container\">\n <md-icon\n @click=${(e: Event) => {\n e.stopPropagation()\n this.toggleActive(font)\n }}\n >${font.active ? 'check_box' : 'check_box_outline_blank'}</md-icon\n >\n <md-icon\n @click=${(e: Event) => {\n e.stopPropagation()\n this.deleteFont(font)\n }}\n >delete</md-icon\n >\n </div>\n </div>\n `\n )}\n </div>\n `\n }\n\n async firstUpdated() {\n var list = this.renderRoot.querySelector('#main')\n\n pulltorefresh({\n container: this.renderRoot,\n scrollable: list,\n refresh: () => {\n return this.refresh()\n }\n })\n }\n\n protected willUpdate() {\n if (this._font.fonts !== this._prevFonts) {\n this._prevFonts = this._font.fonts\n this.creationCard?.reset()\n }\n }\n\n async refresh() {\n return store.dispatch(actionUpdateFontList() as any)\n }\n\n async toggleActive(font: { id: string; active: boolean }) {\n try {\n await updateFont({ id: font.id, active: !font.active })\n this.refresh()\n } catch (e) {\n console.error(e)\n }\n }\n\n async onCreateFont(e: CustomEvent) {\n try {\n await createFont(e.detail)\n this.refresh()\n } catch (e) {\n console.error(e)\n }\n }\n\n async deleteFont(font: { id: string }) {\n try {\n await deleteFont(font.id)\n this.refresh()\n } catch (e) {\n console.error(e)\n }\n }\n\n onClickSelect(font: any) {\n this.dispatchEvent(\n new CustomEvent('font-selected', {\n composed: true,\n bubbles: true,\n detail: {\n font\n }\n })\n )\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"font-selector.js","sourceRoot":"","sources":["../../src/font-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport './font-creation-card.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { i18next, localize } from '@operato/i18n'\nimport { pulltorefresh } from '@operato/pull-to-refresh'\nimport { store, FontController, Font } from '@operato/shell'\nimport { ScrollbarStyles, CommonHeaderStyles } from '@operato/styles'\n\nimport { createFont, deleteFont, updateFont } from './font-graphql-client.js'\nimport { actionUpdateFontList } from './redux-font-actions.js'\n\n@customElement('font-selector')\nexport class FontSelector extends localize(i18next)(LitElement) {\n static styles = [\n ScrollbarStyles,\n CommonHeaderStyles,\n css`\n /*\n * A font is shown by what it looks like, so the card is mostly specimen: a big \"Aa\" in the\n * face, the alphabet under it, and the name at the foot. No coloured bars - the name and the\n * provider are plain text on the card - and the two actions (in use / delete) are quiet\n * glyphs in the corner until the pointer reaches them.\n */\n :host {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n color: var(--md-sys-color-on-background);\n background-color: var(--md-sys-color-background);\n\n position: relative;\n }\n\n .filters {\n display: flex;\n align-items: center;\n gap: 6px;\n flex-wrap: wrap;\n }\n\n /* Provider filter, as the same chips the rest of the product filters with. */\n .filters button.chip {\n height: 28px;\n padding: 0 12px;\n border: 1px solid var(--md-sys-color-outline-variant);\n border-radius: 999px;\n background: transparent;\n color: var(--md-sys-color-on-surface-variant);\n font: inherit;\n font-size: 0.78rem;\n text-transform: capitalize;\n cursor: pointer;\n }\n\n .filters button.chip:hover {\n background: var(--md-sys-color-surface-container-high);\n color: var(--md-sys-color-on-surface);\n }\n\n .filters button.chip[active] {\n border-color: transparent;\n background: var(--md-sys-color-secondary-container);\n color: var(--md-sys-color-on-secondary-container);\n }\n\n .filters .count {\n margin-left: 6px;\n font-size: 0.78rem;\n color: var(--md-sys-color-on-surface-variant);\n }\n\n #main {\n overflow: auto;\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n grid-auto-rows: 172px;\n gap: 16px;\n box-sizing: border-box;\n padding: 4px var(--spacing-medium) var(--spacing-medium);\n }\n\n #main .card {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n border: 1px solid var(--md-sys-color-outline-variant);\n border-radius: 12px;\n color: var(--md-sys-color-on-surface);\n background-color: var(--board-card-surface, var(--md-sys-color-surface-container-lowest));\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n\n position: relative;\n }\n\n #main .card:hover {\n cursor: pointer;\n border-color: var(--md-sys-color-outline);\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);\n }\n\n #main .card.create {\n overflow: visible;\n border: 0;\n background: transparent;\n box-shadow: none;\n }\n\n /* Not in use: the specimen fades, the card stays in its place so the list does not jump. */\n #main .card[inactive] [face] {\n opacity: 0.38;\n }\n\n [face] {\n flex: 1;\n min-height: 0;\n padding: 18px 18px 0;\n overflow: hidden;\n line-height: 1.15;\n }\n\n [face] .large {\n display: block;\n font-size: 2.1rem;\n letter-spacing: 0.01em;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n [face] .line {\n display: block;\n margin-top: 8px;\n font-size: 0.82rem;\n color: var(--md-sys-color-on-surface-variant);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n [foot] {\n display: flex;\n align-items: baseline;\n gap: 8px;\n padding: 10px 18px 14px;\n min-width: 0;\n }\n\n [name] {\n flex: 1;\n min-width: 0;\n font-size: 0.86rem;\n font-weight: 600;\n color: var(--md-sys-color-on-surface);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n [provider] {\n flex: none;\n font-size: 0.68rem;\n letter-spacing: 0.02em;\n color: var(--md-sys-color-outline);\n }\n\n .card .button-container {\n position: absolute;\n top: 8px;\n right: 8px;\n display: flex;\n gap: 2px;\n }\n\n .card .button-container > md-icon {\n --md-icon-size: 18px;\n width: 28px;\n height: 28px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n color: var(--md-sys-color-outline);\n cursor: pointer;\n }\n\n .card .button-container > md-icon:hover {\n color: var(--md-sys-color-on-surface);\n background-color: var(--md-sys-color-surface-container-high);\n }\n\n /* The in-use mark is the one thing in colour on the card. */\n .card .button-container > md-icon[on] {\n color: var(--md-sys-color-primary);\n }\n\n /* Not the shared [danger] fill: this one is quiet until hovered. */\n .card .button-container > md-icon.remove:hover {\n color: var(--md-sys-color-error);\n background-color: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent);\n }\n\n [empty] {\n grid-column: 1 / -1;\n padding: 48px 0;\n text-align: center;\n color: var(--md-sys-color-on-surface-variant);\n font-size: 0.86rem;\n }\n `\n ]\n\n private _font = new FontController(this)\n private _prevFonts: Font[] = []\n\n @property({ type: Boolean }) creatable: boolean = false\n @property({ type: String }) provider: string = ''\n\n @query('#main') main!: HTMLElement\n @query('.header') header!: HTMLElement\n @query('font-creation-card') creationCard!: { reset: () => {} }\n\n showGotoTop: boolean = false\n\n render() {\n var fonts = this._font.fonts || []\n\n const shown = fonts.filter(font => (this.provider ? font.provider === this.provider : true))\n const providers = ['', ...Array.from(new Set(fonts.map(font => font.provider).filter(Boolean)))]\n\n return html`\n <div class=\"header\">\n <div class=\"filters\">\n ${providers.map(\n provider => html`\n <button\n class=\"chip\"\n ?active=${this.provider === provider}\n @click=${() => {\n this.provider = provider\n }}\n >\n ${provider || i18next.t('label.all', { defaultValue: 'All' })}\n </button>\n `\n )}\n <span class=\"count\">${shown.length}</span>\n </div>\n </div>\n\n <div id=\"main\">\n ${this.creatable\n ? html`\n <font-creation-card\n class=\"card create\"\n @create-font=${(e: CustomEvent) => this.onCreateFont(e)}\n ></font-creation-card>\n `\n : html``}\n ${shown.map(\n font => html`\n <div class=\"card\" ?inactive=${!font.active} @click=${(e: Event) => this.onClickSelect(font)}>\n <div face style=\"font-family: '${font.name}'\">\n <span class=\"large\">Aa Bb Cc</span>\n <span class=\"line\">ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz</span>\n <span class=\"line\">1234567890 ~!@#$%^&*</span>\n </div>\n <div foot>\n <span name title=${font.name}>${font.name}</span>\n <span provider>${font.provider}</span>\n </div>\n <div class=\"button-container\">\n <md-icon\n ?on=${font.active}\n title=${font.active\n ? i18next.t('text.font in use', { defaultValue: 'In use - click to stop offering it' })\n : i18next.t('text.font not in use', { defaultValue: 'Not in use - click to offer it' })}\n @click=${(e: Event) => {\n e.stopPropagation()\n this.toggleActive(font)\n }}\n >${font.active ? 'check_circle' : 'radio_button_unchecked'}</md-icon\n >\n <md-icon\n class=\"remove\"\n title=${i18next.t('button.delete', { defaultValue: 'Delete' })}\n @click=${(e: Event) => {\n e.stopPropagation()\n this.deleteFont(font)\n }}\n >delete</md-icon\n >\n </div>\n </div>\n `\n )}\n ${!shown.length && !this.creatable\n ? html`<div empty>${i18next.t('text.no fonts', { defaultValue: 'No fonts yet.' })}</div>`\n : ''}\n </div>\n `\n }\n\n async firstUpdated() {\n var list = this.renderRoot.querySelector('#main')\n\n pulltorefresh({\n container: this.renderRoot,\n scrollable: list,\n refresh: () => {\n return this.refresh()\n }\n })\n }\n\n protected willUpdate() {\n if (this._font.fonts !== this._prevFonts) {\n this._prevFonts = this._font.fonts\n this.creationCard?.reset()\n }\n }\n\n async refresh() {\n return store.dispatch(actionUpdateFontList() as any)\n }\n\n async toggleActive(font: { id: string; active: boolean }) {\n try {\n await updateFont({ id: font.id, active: !font.active })\n this.refresh()\n } catch (e) {\n console.error(e)\n }\n }\n\n async onCreateFont(e: CustomEvent) {\n try {\n await createFont(e.detail)\n this.refresh()\n } catch (e) {\n console.error(e)\n }\n }\n\n async deleteFont(font: { id: string }) {\n try {\n await deleteFont(font.id)\n this.refresh()\n } catch (e) {\n console.error(e)\n }\n }\n\n onClickSelect(font: any) {\n this.dispatchEvent(\n new CustomEvent('font-selected', {\n composed: true,\n bubbles: true,\n detail: {\n font\n }\n })\n )\n }\n}\n"]}
|
|
@@ -19,7 +19,7 @@ let OxFontSelector = class OxFontSelector extends LitElement {
|
|
|
19
19
|
.placeholder=${this.getAttribute('placeholder') || ''}
|
|
20
20
|
/>
|
|
21
21
|
|
|
22
|
-
<md-icon @click=${() => this.openSelector()}>
|
|
22
|
+
<md-icon @click=${() => this.openSelector()}>expand_more</md-icon>
|
|
23
23
|
`;
|
|
24
24
|
}
|
|
25
25
|
_onInputChanged(e) {
|
|
@@ -74,11 +74,16 @@ OxFontSelector.styles = [
|
|
|
74
74
|
md-icon {
|
|
75
75
|
position: absolute;
|
|
76
76
|
top: 50%;
|
|
77
|
-
right:
|
|
78
|
-
opacity: 0.5;
|
|
77
|
+
right: 4px;
|
|
79
78
|
transform: translateY(-50%);
|
|
79
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
80
|
+
--md-icon-size: 18px;
|
|
80
81
|
cursor: pointer;
|
|
81
82
|
}
|
|
83
|
+
|
|
84
|
+
md-icon:hover {
|
|
85
|
+
color: var(--md-sys-color-on-surface);
|
|
86
|
+
}
|
|
82
87
|
`
|
|
83
88
|
];
|
|
84
89
|
__decorate([
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-font-selector.js","sourceRoot":"","sources":["../../src/ox-font-selector.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,4BAA4B,CAAA;AACnC,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAG5B,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;
|
|
1
|
+
{"version":3,"file":"ox-font-selector.js","sourceRoot":"","sources":["../../src/ox-font-selector.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,4BAA4B,CAAA;AACnC,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAG5B,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAuCpD,MAAM;QACJ,OAAO,IAAI,CAAA;;;;iBAIE,IAAI,CAAC,KAAK,IAAI,EAAE;kBACf,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;uBAChC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,EAAE;;;wBAGrC,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE;KAC5C,CAAA;IACH,CAAC;IAED,eAAe,CAAC,CAAQ;QACtB,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAA;QACjD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;IAED,YAAY;QACV,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,OAAO,IAAI,CAAC,KAAK,CAAA;QACnB,CAAC;QAED;;;;WAIG;QACH,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE5B,IAAI,QAAQ,GAAG,IAAI,CAAA;;qBAEF,IAAI;yBACA,KAAK,EAAE,CAAc,EAAE,EAAE;YACxC,IAAI,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAA;YACxB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAA;YAEtB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;YAEhF,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;QAClC,CAAC;;KAEJ,CAAA;QAED,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE;YAC/B,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;SACtC,CAAC,CAAA;IACJ,CAAC;;AAxFM,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6BF;CACF,AA/BY,CA+BZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAgB;AAnCxB,cAAc;IADlC,aAAa,CAAC,kBAAkB,CAAC;GACb,cAAc,CA0FlC;eA1FoB,cAAc","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\nimport './font-selector.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\n\n@customElement('ox-font-selector')\nexport default class OxFontSelector extends LitElement {\n static styles = [\n css`\n :host {\n position: relative;\n display: inline-block;\n }\n\n input[type='text'] {\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n border: none;\n padding-right: 26px;\n border-radius: inherit;\n background-color: inherit;\n }\n\n md-icon {\n position: absolute;\n top: 50%;\n right: 4px;\n transform: translateY(-50%);\n color: var(--md-sys-color-on-surface-variant);\n --md-icon-size: 18px;\n cursor: pointer;\n }\n\n md-icon:hover {\n color: var(--md-sys-color-on-surface);\n }\n `\n ]\n\n @property({ type: String }) value?: string\n @property({ type: Object }) properties: any\n\n popup: any\n\n render() {\n return html`\n <input\n id=\"text\"\n type=\"text\"\n .value=${this.value || ''}\n @change=${(e: Event) => this._onInputChanged(e)}\n .placeholder=${this.getAttribute('placeholder') || ''}\n />\n\n <md-icon @click=${() => this.openSelector()}>expand_more</md-icon>\n `\n }\n\n _onInputChanged(e: Event) {\n this.value = (e.target as HTMLInputElement).value\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n openSelector() {\n if (this.popup) {\n delete this.popup\n }\n\n /*\n * 기존 설정된 보드가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.\n * 주의. value는 object일 수도 있고, string일 수도 있다.\n * string인 경우에는 해당 보드의 id로 해석한다.\n */\n var value = this.value || {}\n\n var template = html`\n <font-selector\n .creatable=${true}\n @font-selected=${async (e: CustomEvent) => {\n var font = e.detail.font\n this.value = font.name\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n\n this.popup && this.popup.close()\n }}\n ></font-selector>\n `\n\n this.popup = openPopup(template, {\n backdrop: true,\n size: 'large',\n title: i18next.t('title.select font')\n })\n }\n}\n"]}
|