npm - @operato/property-panel - Versions diffs - 9.0.0-beta.22 → 9.0.0-beta.28 - Mend

@operato/property-panel 9.0.0-beta.22 → 9.0.0-beta.28

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.

Files changed (26) hide show

package/dist/src/property-panel/styles/styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/property-panel/styles/styles.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n /\n\nimport '@operato/help/ox-title-with-help.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@operato/input/ox-input-range.js'\nimport '@operato/input/ox-input-color.js'\nimport '@operato/input/ox-input-fill-style.js'\nimport '@operato/input/ox-select.js'\nimport '@operato/font/ox-font-selector.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, nothing } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { Component } from '@hatiolab/things-scene'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\nimport { LineStyles } from '@operato/styles/line-styles.js'\n\nimport { AbstractProperty } from '../abstract-property.js'\n\nexport class PropertyStyles extends AbstractProperty {\n static styles = [\n PropertyGridStyles,\n LineStyles,\n css`\n ox-input-range {\n width: 100%;\n }\n\n .btn-group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--spacing-medium, 8px);\n }\n\n .btn-group {\n width: 30px;\n min-width: initial;\n border-radius: 0;\n border-bottom: 2px solid #fff;\n }\n\n .btn-group [active] {\n border-bottom: 2px solid #f2471c;\n }\n `\n ]\n\n @property({ type: Object }) value: any = {}\n @property({ type: Array }) selected: Component[] = []\n @property({ type: Array }) fonts: any[] = []\n @property({ type: Boolean, attribute: 'is-line' }) isLine: boolean = false\n\n connectedCallback() {\n super.connectedCallback()\n\n this.renderRoot.addEventListener('change', this.onValueChange.bind(this))\n }\n\n onButtonGroupClick(e: Event) {\n const target = e.target as HTMLElement\n\n if (target.hasAttribute('value-key')) {\n target.toggleAttribute('active')\n\n target.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true\n })\n )\n }\n }\n\n render() {\n var {\n alpha = 1,\n fontFamily,\n fontSize,\n lineHeight,\n fontColor,\n letterSpacing,\n bold,\n italic,\n fillStyle,\n lineWidth,\n strokeStyle,\n lineDash = 'solid',\n lineCap,\n lineJoin,\n begin = 'none',\n beginSize = 'size1',\n end = 'none',\n endSize = 'size1'\n } = this.value \|\| {}\n\n return html`\n <fieldset>\n <legend>\n <ox-title-with-help topic=\"board-modeller/styles/opacity\" msgid=\"label.opacity\">opacity</ox-title-with-help>\n </legend>\n <ox-input-range min=\"0\" max=\"1\" step=\"0.1\" value-key=\"alpha\" .value=${alpha} editable> </ox-input-range>\n </fieldset>\n\n <fieldset>\n <legend>\n <ox-title-with-help topic=\"board-modeller/styles/text-style\" msgid=\"label.text-style\"\n >text style</ox-title-with-help\n >\n </legend>\n\n <div class=\"property-grid\">\n <label>\n <ox-i18n msgid=\"label.font-family\">Font Family</ox-i18n>\n </label>\n\n <ox-font-selector class=\"custom-editor\" value-key=\"fontFamily\" .value=${fontFamily}></ox-font-selector>\n\n <label class=\"property-onethird-label icon-only-label\"><md-icon>format_size</md-icon></label>\n <input type=\"number\" value-key=\"fontSize\" .value=${fontSize} class=\"property-onethird-input\" />\n\n <label class=\"property-onethird-label icon-only-label\"><md-icon>format_line_spacing</md-icon></label>\n <input type=\"number\" value-key=\"lineHeight\" .value=${lineHeight} class=\"property-onethird-input\" />\n\n <label class=\"property-onethird-label icon-only-label\"><md-icon>format_letter_spacing</md-icon></label>\n <input type=\"number\" value-key=\"letterSpacing\" .value=${letterSpacing} class=\"property-onethird-input\" />\n\n <label class=\"property-twothird-label icon-only-label\"><md-icon>format_color_text</md-icon></label>\n <ox-input-color value-key=\"fontColor\" .value=${fontColor} class=\"property-twothird-input\"> </ox-input-color>\n\n <div class=\"property-onethird-full btn-group\" @click=${this.onButtonGroupClick}>\n <md-icon value-key=\"bold\" ?active=${bold}>format_bold</md-icon>\n <md-icon value-key=\"italic\" ?active=${italic}>format_italic</md-icon>\n </div>\n </div>\n </fieldset>\n\n <fieldset>\n <legend>\n <ox-title-with-help topic=\"board-modeller/styles/fill-style\" msgid=\"label.fill-style\"\n >fill style</ox-title-with-help\n >\n </legend>\n\n <ox-input-fill-style value-key=\"fillStyle\" .value=${fillStyle}> </ox-input-fill-style>\n </fieldset>\n\n <fieldset>\n <legend>\n <ox-title-with-help msgid=\"label.line-style\" topic=\"board-modeller/styles/line-style\"></ox-title-with-help>\n </legend>\n\n <div class=\"property-grid\">\n <label class=\"property-half-label icon-only-label\"><md-icon>line_weight</md-icon></label>\n <input type=\"number\" value-key=\"lineWidth\" .value=${lineWidth} class=\"property-half-input\" />\n\n <label class=\"property-half-label icon-only-label\"><md-icon>border_color</md-icon></label>\n <ox-input-color value-key=\"strokeStyle\" .value=${strokeStyle} class=\"property-half-input\"> </ox-input-color>\n\n <label>\n <ox-i18n msgid=\"label.line-type\">line type</ox-i18n>\n </label>\n <ox-select value-key=\"lineDash\" .value=${lineDash} class=\"custom-editor\">\n <div class=\"line-type ${lineDash}\" slot=\"label\"></div>\n <ox-popup-list align-left nowrap>\n <style>\n ${LineStyles.cssText}\n </style>\n <div class=\"line-type solid\" value=\"solid\" option></div>\n <div class=\"line-type round-dot\" value=\"round-dot\" option></div>\n <div class=\"line-type square-dot\" value=\"square-dot\" option></div>\n <div class=\"line-type dash\" value=\"dash\" option></div>\n <div class=\"line-type dash-dot\" value=\"dash-dot\" option></div>\n <div class=\"line-type long-dash\" value=\"long-dash\" option></div>\n <div class=\"line-type long-dash-dot\" value=\"long-dash-dot\" option></div>\n <div class=\"line-type long-dash-dot-dot\" value=\"long-dash-dot-dot\" option></div>\n </ox-popup-list>\n </ox-select>\n\n <label>\n <ox-i18n msgid=\"label.cap-type\">cap type</ox-i18n>\n </label>\n <select value-key=\"lineCap\" .value=${lineCap}>\n <option value=\"butt\"><ox-i18n msgid=\"label.square\">square</ox-i18n></option>\n <option value=\"round\"><ox-i18n msgid=\"label.round\">round</ox-i18n></option>\n </select>\n\n <label>\n <ox-i18n msgid=\"label.join-type\">join type</ox-i18n>\n </label>\n <select value-key=\"lineJoin\" .value=${lineJoin}>\n <option value=\"miter\"><ox-i18n msgid=\"label.miter\">miter</ox-i18n></option>\n <option value=\"round\"><ox-i18n msgid=\"label.round\">round</ox-i18n></option>\n <option value=\"bevel\"><ox-i18n msgid=\"label.bevel\">bevel</ox-i18n></option>\n </select>\n\n ${this.isLine\n ? html`\n <label>\n <ox-i18n msgid=\"label.begin-type\">begin type</ox-i18n>\n </label>\n <ox-select value-key=\"begin\" .value=${begin} class=\"custom-editor\">\n <div class=\"arrow-type ${begin ? `begin-${begin}` : nothing}\" slot=\"label\"></div>\n <ox-popup-list align-left nowrap>\n <style>\n ${LineStyles.cssText}\n </style>\n <div class=\"arrow-type begin-none\" value=\"none\" option></div>\n <div class=\"arrow-type begin-arrow\" value=\"arrow\" option></div>\n <div class=\"arrow-type begin-open-arrow\" value=\"open-arrow\" option></div>\n <div class=\"arrow-type begin-sharp-arrow\" value=\"sharp-arrow\" option></div>\n <div class=\"arrow-type begin-diamond\" value=\"diamond\" option></div>\n <div class=\"arrow-type begin-oval\" value=\"oval\" option></div>\n </ox-popup-list>\n </ox-select>\n\n <label>\n <ox-i18n msgid=\"label.begin-size\">begin size</ox-i18n>\n </label>\n <ox-select value-key=\"beginSize\" .value=${beginSize} class=\"custom-editor\">\n <div class=\"arrow-type ${beginSize ? `begin-${beginSize}` : nothing}\" slot=\"label\"></div>\n <ox-popup-list align-left nowrap>\n <style>\n ${LineStyles.cssText}\n </style>\n <div class=\"arrow-type begin-size1\" value=\"size1\" option></div>\n <div class=\"arrow-type begin-size2\" value=\"size2\" option></div>\n <div class=\"arrow-type begin-size3\" value=\"size3\" option></div>\n <div class=\"arrow-type begin-size4\" value=\"size4\" option></div>\n <div class=\"arrow-type begin-size5\" value=\"size5\" option></div>\n <div class=\"arrow-type begin-size6\" value=\"size6\" option></div>\n <div class=\"arrow-type begin-size7\" value=\"size7\" option></div>\n <div class=\"arrow-type begin-size8\" value=\"size8\" option></div>\n <div class=\"arrow-type begin-size9\" value=\"size9\" option></div>\n </ox-popup-list>\n </ox-select>\n\n <label>\n <ox-i18n msgid=\"label.end-type\">end type</ox-i18n>\n </label>\n <ox-select value-key=\"end\" .value=${end} class=\"custom-editor\">\n <div class=\"arrow-type ${end ? `end-${end}` : nothing}\" slot=\"label\"></div>\n <ox-popup-list align-left nowrap>\n <style>\n ${LineStyles.cssText}\n </style>\n <div class=\"arrow-type end-none\" value=\"none\" option></div>\n <div class=\"arrow-type end-arrow\" value=\"arrow\" option></div>\n <div class=\"arrow-type end-open-arrow\" value=\"open-arrow\" option></div>\n <div class=\"arrow-type end-sharp-arrow\" value=\"sharp-arrow\" option></div>\n <div class=\"arrow-type end-diamond\" value=\"diamond\" option></div>\n <div class=\"arrow-type end-oval\" value=\"oval\" option></div>\n </ox-popup-list>\n </ox-select>\n\n <label>\n <ox-i18n msgid=\"label.end-size\">end size</ox-i18n>\n </label>\n <ox-select value-key=\"endSize\" .value=${endSize} class=\"custom-editor\">\n <div class=\"arrow-type ${endSize ? `end-${endSize}` : nothing}\" slot=\"label\"></div>\n <ox-popup-list align-left nowrap>\n <style>\n ${LineStyles.cssText}\n </style>\n <div class=\"arrow-type end-size1\" value=\"size1\" option></div>\n <div class=\"arrow-type end-size2\" value=\"size2\" option></div>\n <div class=\"arrow-type end-size3\" value=\"size3\" option></div>\n <div class=\"arrow-type end-size4\" value=\"size4\" option></div>\n <div class=\"arrow-type end-size5\" value=\"size5\" option></div>\n <div class=\"arrow-type end-size6\" value=\"size6\" option></div>\n <div class=\"arrow-type end-size7\" value=\"size7\" option></div>\n <div class=\"arrow-type end-size8\" value=\"size8\" option></div>\n <div class=\"arrow-type end-size9\" value=\"size9\" option></div>\n </ox-popup-list>\n </ox-select>\n `\n : html``}\n </div>\n </fieldset>\n `\n }\n}\n"]}
1	+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/property-panel/styles/styles.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n /\n\nimport '@operato/help/ox-title-with-help.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@operato/input/ox-input-range.js'\nimport '@operato/input/ox-input-color.js'\nimport '@operato/input/ox-input-fill-style.js'\nimport '@operato/input/ox-select.js'\nimport '@operato/font/ox-font-selector.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, nothing } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { Component } from '@hatiolab/things-scene'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\nimport { LineStyles } from '@operato/styles/line-styles.js'\n\nimport { AbstractProperty } from '../abstract-property.js'\n\nexport class PropertyStyles extends AbstractProperty {\n static styles = [\n PropertyGridStyles,\n LineStyles,\n css`\n ox-input-range {\n width: 100%;\n }\n\n .btn-group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--spacing-medium, 8px);\n }\n\n .btn-group {\n width: 30px;\n min-width: initial;\n border-radius: 0;\n border-bottom: 2px solid #fff;\n }\n\n .btn-group [active] {\n border-bottom: 2px solid #f2471c;\n }\n `\n ]\n\n @property({ type: Object }) value: any = {}\n @property({ type: Array }) selected: Component[] = []\n @property({ type: Array }) fonts: any[] = []\n @property({ type: Boolean, attribute: 'is-line' }) isLine: boolean = false\n\n connectedCallback() {\n super.connectedCallback()\n\n this.renderRoot.addEventListener('change', this.onValueChange.bind(this))\n }\n\n onButtonGroupClick(e: Event) {\n const target = e.target as HTMLElement\n\n if (target.hasAttribute('value-key')) {\n target.toggleAttribute('active')\n\n target.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true\n })\n )\n }\n }\n\n render() {\n var {\n alpha = 1,\n fontFamily,\n fontSize,\n lineHeight,\n fontColor,\n letterSpacing,\n bold,\n italic,\n fillStyle,\n lineWidth,\n strokeStyle,\n lineDash = 'solid',\n lineCap,\n lineJoin,\n begin = 'none',\n beginSize = 'size1',\n end = 'none',\n endSize = 'size1'\n } = this.value \|\| {}\n\n return html`\n <fieldset>\n <legend>\n <ox-title-with-help topic=\"board-modeller/styles/opacity\" msgid=\"label.opacity\">opacity</ox-title-with-help>\n </legend>\n <ox-input-range min=\"0\" max=\"1\" step=\"0.1\" value-key=\"alpha\" .value=${alpha} editable> </ox-input-range>\n </fieldset>\n\n <fieldset>\n <legend>\n <ox-title-with-help topic=\"board-modeller/styles/text-style\" msgid=\"label.text-style\"\n >text style</ox-title-with-help\n >\n </legend>\n\n <div class=\"property-grid\">\n <label>\n <ox-i18n msgid=\"label.font-family\">Font Family</ox-i18n>\n </label>\n\n <ox-font-selector class=\"custom-editor\" value-key=\"fontFamily\" .value=${fontFamily}></ox-font-selector>\n\n <label class=\"onethird-label icon-only-label\"><md-icon>format_size</md-icon></label>\n <input type=\"number\" value-key=\"fontSize\" .value=${fontSize} class=\"onethird-editor\" />\n\n <label class=\"onethird-label icon-only-label\"><md-icon>format_line_spacing</md-icon></label>\n <input type=\"number\" value-key=\"lineHeight\" .value=${lineHeight} class=\"onethird-editor\" />\n\n <label class=\"onethird-label icon-only-label\"><md-icon>format_letter_spacing</md-icon></label>\n <input type=\"number\" value-key=\"letterSpacing\" .value=${letterSpacing} class=\"onethird-editor\" />\n\n <label class=\"twothird-label icon-only-label\"><md-icon>format_color_text</md-icon></label>\n <ox-input-color value-key=\"fontColor\" .value=${fontColor} class=\"twothird-editor\"> </ox-input-color>\n\n <div class=\"onethird-full btn-group\" @click=${this.onButtonGroupClick}>\n <md-icon value-key=\"bold\" ?active=${bold}>format_bold</md-icon>\n <md-icon value-key=\"italic\" ?active=${italic}>format_italic</md-icon>\n </div>\n </div>\n </fieldset>\n\n <fieldset>\n <legend>\n <ox-title-with-help topic=\"board-modeller/styles/fill-style\" msgid=\"label.fill-style\"\n >fill style</ox-title-with-help\n >\n </legend>\n\n <ox-input-fill-style value-key=\"fillStyle\" .value=${fillStyle}> </ox-input-fill-style>\n </fieldset>\n\n <fieldset>\n <legend>\n <ox-title-with-help msgid=\"label.line-style\" topic=\"board-modeller/styles/line-style\"></ox-title-with-help>\n </legend>\n\n <div class=\"property-grid\">\n <label class=\"half-label icon-only-label\"><md-icon>line_weight</md-icon></label>\n <input type=\"number\" value-key=\"lineWidth\" .value=${lineWidth} class=\"half-editor\" />\n\n <label class=\"half-label icon-only-label\"><md-icon>border_color</md-icon></label>\n <ox-input-color value-key=\"strokeStyle\" .value=${strokeStyle} class=\"half-editor\"> </ox-input-color>\n\n <label>\n <ox-i18n msgid=\"label.line-type\">line type</ox-i18n>\n </label>\n <ox-select value-key=\"lineDash\" .value=${lineDash} class=\"custom-editor\">\n <div class=\"line-type ${lineDash}\" slot=\"label\"></div>\n <ox-popup-list align-left nowrap>\n <style>\n ${LineStyles.cssText}\n </style>\n <div class=\"line-type solid\" value=\"solid\" option></div>\n <div class=\"line-type round-dot\" value=\"round-dot\" option></div>\n <div class=\"line-type square-dot\" value=\"square-dot\" option></div>\n <div class=\"line-type dash\" value=\"dash\" option></div>\n <div class=\"line-type dash-dot\" value=\"dash-dot\" option></div>\n <div class=\"line-type long-dash\" value=\"long-dash\" option></div>\n <div class=\"line-type long-dash-dot\" value=\"long-dash-dot\" option></div>\n <div class=\"line-type long-dash-dot-dot\" value=\"long-dash-dot-dot\" option></div>\n </ox-popup-list>\n </ox-select>\n\n <label>\n <ox-i18n msgid=\"label.cap-type\">cap type</ox-i18n>\n </label>\n <select value-key=\"lineCap\" .value=${lineCap}>\n <option value=\"butt\"><ox-i18n msgid=\"label.square\">square</ox-i18n></option>\n <option value=\"round\"><ox-i18n msgid=\"label.round\">round</ox-i18n></option>\n </select>\n\n <label>\n <ox-i18n msgid=\"label.join-type\">join type</ox-i18n>\n </label>\n <select value-key=\"lineJoin\" .value=${lineJoin}>\n <option value=\"miter\"><ox-i18n msgid=\"label.miter\">miter</ox-i18n></option>\n <option value=\"round\"><ox-i18n msgid=\"label.round\">round</ox-i18n></option>\n <option value=\"bevel\"><ox-i18n msgid=\"label.bevel\">bevel</ox-i18n></option>\n </select>\n\n ${this.isLine\n ? html`\n <label>\n <ox-i18n msgid=\"label.begin-type\">begin type</ox-i18n>\n </label>\n <ox-select value-key=\"begin\" .value=${begin} class=\"custom-editor\">\n <div class=\"arrow-type ${begin ? `begin-${begin}` : nothing}\" slot=\"label\"></div>\n <ox-popup-list align-left nowrap>\n <style>\n ${LineStyles.cssText}\n </style>\n <div class=\"arrow-type begin-none\" value=\"none\" option></div>\n <div class=\"arrow-type begin-arrow\" value=\"arrow\" option></div>\n <div class=\"arrow-type begin-open-arrow\" value=\"open-arrow\" option></div>\n <div class=\"arrow-type begin-sharp-arrow\" value=\"sharp-arrow\" option></div>\n <div class=\"arrow-type begin-diamond\" value=\"diamond\" option></div>\n <div class=\"arrow-type begin-oval\" value=\"oval\" option></div>\n </ox-popup-list>\n </ox-select>\n\n <label>\n <ox-i18n msgid=\"label.begin-size\">begin size</ox-i18n>\n </label>\n <ox-select value-key=\"beginSize\" .value=${beginSize} class=\"custom-editor\">\n <div class=\"arrow-type ${beginSize ? `begin-${beginSize}` : nothing}\" slot=\"label\"></div>\n <ox-popup-list align-left nowrap>\n <style>\n ${LineStyles.cssText}\n </style>\n <div class=\"arrow-type begin-size1\" value=\"size1\" option></div>\n <div class=\"arrow-type begin-size2\" value=\"size2\" option></div>\n <div class=\"arrow-type begin-size3\" value=\"size3\" option></div>\n <div class=\"arrow-type begin-size4\" value=\"size4\" option></div>\n <div class=\"arrow-type begin-size5\" value=\"size5\" option></div>\n <div class=\"arrow-type begin-size6\" value=\"size6\" option></div>\n <div class=\"arrow-type begin-size7\" value=\"size7\" option></div>\n <div class=\"arrow-type begin-size8\" value=\"size8\" option></div>\n <div class=\"arrow-type begin-size9\" value=\"size9\" option></div>\n </ox-popup-list>\n </ox-select>\n\n <label>\n <ox-i18n msgid=\"label.end-type\">end type</ox-i18n>\n </label>\n <ox-select value-key=\"end\" .value=${end} class=\"custom-editor\">\n <div class=\"arrow-type ${end ? `end-${end}` : nothing}\" slot=\"label\"></div>\n <ox-popup-list align-left nowrap>\n <style>\n ${LineStyles.cssText}\n </style>\n <div class=\"arrow-type end-none\" value=\"none\" option></div>\n <div class=\"arrow-type end-arrow\" value=\"arrow\" option></div>\n <div class=\"arrow-type end-open-arrow\" value=\"open-arrow\" option></div>\n <div class=\"arrow-type end-sharp-arrow\" value=\"sharp-arrow\" option></div>\n <div class=\"arrow-type end-diamond\" value=\"diamond\" option></div>\n <div class=\"arrow-type end-oval\" value=\"oval\" option></div>\n </ox-popup-list>\n </ox-select>\n\n <label>\n <ox-i18n msgid=\"label.end-size\">end size</ox-i18n>\n </label>\n <ox-select value-key=\"endSize\" .value=${endSize} class=\"custom-editor\">\n <div class=\"arrow-type ${endSize ? `end-${endSize}` : nothing}\" slot=\"label\"></div>\n <ox-popup-list align-left nowrap>\n <style>\n ${LineStyles.cssText}\n </style>\n <div class=\"arrow-type end-size1\" value=\"size1\" option></div>\n <div class=\"arrow-type end-size2\" value=\"size2\" option></div>\n <div class=\"arrow-type end-size3\" value=\"size3\" option></div>\n <div class=\"arrow-type end-size4\" value=\"size4\" option></div>\n <div class=\"arrow-type end-size5\" value=\"size5\" option></div>\n <div class=\"arrow-type end-size6\" value=\"size6\" option></div>\n <div class=\"arrow-type end-size7\" value=\"size7\" option></div>\n <div class=\"arrow-type end-size8\" value=\"size8\" option></div>\n <div class=\"arrow-type end-size9\" value=\"size9\" option></div>\n </ox-popup-list>\n </ox-select>\n `\n : html``}\n </div>\n </fieldset>\n `\n }\n}\n"]}