npm - @umbraco-ui/uui - Versions diffs - 2.0.0-alpha.1 → 2.0.0-rc.1 - Mend

@umbraco-ui/uui 2.0.0-alpha.1 → 2.0.0-rc.1

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 (86) hide show

package/dist/components/card-content-node/card-content-node.element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card-content-node.element.js","sources":["../../../src/components/card-content-node/card-content-node.element.ts"],"sourcesContent":["import { UUICardElement } from '../card/card.js';\nimport { css, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport '../icon/icon.js';\n\n/*\n @element uui-card-content-node\n * @description - Card component for displaying a content-node.\n * @slot - slot for the default content area\n * @slot icon - slot for the icon with support for `<uui-icon>` elements\n * @slot tag - slot for the tag with support for `<uui-tag>` elements\n * @slot actions - slot for the actions with support for the `<uui-action-bar>` element\n /\nexport class UUICardContentNodeElement extends UUICardElement {\n /\n Node name\n * @type {string}\n * @attr name\n * @default ''\n /\n @property({ type: String })\n name = '';\n\n /\n Node details\n * @type {string}\n * @attr\n * @default ''\n /\n @property({ type: String })\n detail = '';\n\n @state()\n private _iconSlotHasContent = false;\n\n protected fallbackIcon = `<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.75\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n id=\"icon\">\n <path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\" />\n <path d=\"M14 2v4a2 2 0 0 0 2 2h4\" />\n </svg>`;\n\n private _onSlotIconChange(event: Event) {\n this._iconSlotHasContent =\n (event.target as HTMLSlotElement).assignedNodes({ flatten: true })\n .length > 0;\n }\n\n private _renderFallbackIcon() {\n return html`<uui-icon .svg=\"${this.fallbackIcon}\"></uui-icon>`;\n }\n\n protected renderDetail() {\n return html`<small id=\"detail\"\n >${this.detail}<slot name=\"detail\"></slot></small\n ><slot id=\"default\"></slot>`;\n }\n\n #renderContent() {\n return html`\n <span id=\"content\" class=\"uui-text\">\n <span id=\"item\">\n <span id=\"icon\">\n <slot name=\"icon\" @slotchange=${this._onSlotIconChange}></slot>\n ${this._iconSlotHasContent === false\n ? this._renderFallbackIcon()\n : ''}\n </span>\n <div title=\"${this.name}\" id=\"name\">\n ${this.name}<slot name=\"name\"></slot>\n </div>\n </span>\n ${this.renderDetail()}\n </span>\n `;\n }\n\n #renderButton() {\n const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;\n return html`\n <button\n id=\"open-part\"\n tabindex=${ifDefined(tabIndex)}\n @click=${this.handleOpenClick}\n @keydown=${this.handleOpenKeydown}>\n ${this.#renderContent()}\n </button>\n `;\n }\n\n #renderLink() {\n const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;\n const rel = this.target === '_blank' ? 'noopener noreferrer' : undefined;\n return html`\n <a\n id=\"open-part\"\n tabindex=${ifDefined(tabIndex)}\n href=${ifDefined(!this.disabled ? this.href : undefined)}\n target=${ifDefined(this.target \|\| undefined)}\n rel=${ifDefined(this.rel \|\| rel)}>\n ${this.#renderContent()}\n </a>\n `;\n }\n\n public render() {\n return html`\n ${this.href ? this.#renderLink() : this.#renderButton()}\n <!-- Select border must be right after #open-part -->\n <div id=\"select-border\"></div>\n ${this.selectable ? this.renderCheckbox() : nothing}\n <slot name=\"tag\"></slot>\n <slot name=\"actions\"></slot>\n `;\n }\n\n static override readonly styles = [\n ...UUICardElement.styles,\n css`\n :host {\n min-width: 250px;\n flex-direction: column;\n justify-content: space-between;\n }\n\n slot[name='tag'] {\n position: absolute;\n bottom: var(--uui-size-4);\n right: var(--uui-size-4);\n display: flex;\n justify-content: right;\n }\n\n slot[name='actions'] {\n position: absolute;\n top: var(--uui-size-4);\n right: var(--uui-size-4);\n display: flex;\n justify-content: right;\n\n opacity: 0;\n transition: opacity 120ms;\n }\n :host(:focus) slot[name='actions'],\n :host(:focus-within) slot[name='actions'],\n :host(:hover) slot[name='actions'] {\n opacity: 1;\n }\n\n slot:not([name]) {\n display: block;\n margin: var(--uui-size-1);\n margin-top: var(--uui-size-3);\n }\n\n slot:not([name])::slotted() {\n font-size: var(--uui-type-small-size);\n line-height: calc(2 * var(--uui-size-3));\n }\n\n #open-part {\n display: flex;\n position: relative;\n align-items: center;\n cursor: pointer;\n flex-grow: 1;\n padding: var(--uui-size-space-4) var(--uui-size-space-5);\n }\n\n #open-part #name {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n overflow-wrap: anywhere;\n }\n\n #content {\n align-self: stretch;\n display: flex;\n flex-direction: column;\n }\n\n #item {\n position: relative;\n display: flex;\n align-self: stretch;\n line-height: normal;\n align-items: center;\n margin-top: var(--uui-size-1);\n }\n\n #icon {\n font-size: 1.2em;\n margin-right: var(--uui-size-1);\n }\n\n :host([selectable]) #open-part {\n padding: 0;\n margin: var(--uui-size-space-4) var(--uui-size-space-5);\n }\n\n :host([disabled]) #name {\n pointer-events: none;\n }\n\n :host(:not([disabled])) #open-part:hover #icon {\n color: var(--uui-color-interactive-emphasis);\n }\n :host(:not([disabled])) #open-part:hover #name {\n text-decoration: underline;\n color: var(--uui-color-interactive-emphasis);\n }\n :host(:not([disabled])) #open-part:hover #detail {\n color: var(--uui-color-interactive-emphasis);\n }\n :host(:not([disabled])) #open-part:hover #default {\n color: var(--uui-color-interactive-emphasis);\n }\n\n #select-checkbox {\n top: var(--uui-size-5);\n left: var(--uui-size-6);\n }\n `,\n ];\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"card-content-node.element.js","sources":["../../../src/components/card-content-node/card-content-node.element.ts"],"sourcesContent":["import { UUICardElement } from '../card/card.js';\nimport { css, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport '../icon/icon.js';\n\n/*\n @element uui-card-content-node\n * @description - Card component for displaying a content-node.\n * @slot - slot for the default content area\n * @slot icon - slot for the icon with support for `<uui-icon>` elements\n * @slot tag - slot for the tag with support for `<uui-tag>` elements\n * @slot actions - slot for the actions with support for the `<uui-action-bar>` element\n /\nexport class UUICardContentNodeElement extends UUICardElement {\n /\n Node name\n * @type {string}\n * @attr name\n * @default ''\n /\n @property({ type: String })\n name = '';\n\n /\n Node details\n * @type {string}\n * @attr\n * @default ''\n /\n @property({ type: String })\n detail = '';\n\n @state()\n private _iconSlotHasContent = false;\n\n protected fallbackIcon = `<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.75\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n id=\"icon\">\n <path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\" />\n <path d=\"M14 2v4a2 2 0 0 0 2 2h4\" />\n </svg>`;\n\n private _onSlotIconChange(event: Event) {\n this._iconSlotHasContent =\n (event.target as HTMLSlotElement).assignedNodes({ flatten: true })\n .length > 0;\n }\n\n private _renderFallbackIcon() {\n return html`<uui-icon .svg=\"${this.fallbackIcon}\"></uui-icon>`;\n }\n\n protected renderDetail() {\n return html`<small id=\"detail\"\n >${this.detail}<slot name=\"detail\"></slot></small\n ><slot id=\"default\"></slot>`;\n }\n\n #renderContent() {\n return html`\n <span id=\"content\" class=\"uui-text\">\n <span id=\"item\">\n <span id=\"icon\">\n <slot name=\"icon\" @slotchange=${this._onSlotIconChange}></slot>\n ${this._iconSlotHasContent === false\n ? this._renderFallbackIcon()\n : ''}\n </span>\n <div title=\"${this.name}\" id=\"name\">\n ${this.name}<slot name=\"name\"></slot>\n </div>\n </span>\n ${this.renderDetail()}\n </span>\n `;\n }\n\n #renderButton() {\n const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;\n return html`\n <button\n id=\"open-part\"\n tabindex=${ifDefined(tabIndex)}\n @click=${this.handleOpenClick}\n @keydown=${this.handleOpenKeydown}>\n ${this.#renderContent()}\n </button>\n `;\n }\n\n #renderLink() {\n const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;\n const rel = this.target === '_blank' ? 'noopener noreferrer' : undefined;\n return html`\n <a\n id=\"open-part\"\n tabindex=${ifDefined(tabIndex)}\n href=${ifDefined(!this.disabled ? this.href : undefined)}\n target=${ifDefined(this.target \|\| undefined)}\n rel=${ifDefined(this.rel \|\| rel)}>\n ${this.#renderContent()}\n </a>\n `;\n }\n\n public render() {\n return html`\n ${this.href ? this.#renderLink() : this.#renderButton()}\n <!-- Select border must be right after #open-part -->\n <div id=\"select-border\"></div>\n ${this.selectable ? this.renderCheckbox() : nothing}\n <slot name=\"tag\"></slot>\n <slot name=\"actions\"></slot>\n `;\n }\n\n static override readonly styles = [\n ...UUICardElement.styles,\n css`\n :host {\n min-width: 250px;\n flex-direction: column;\n justify-content: space-between;\n }\n\n slot[name='tag'] {\n position: absolute;\n bottom: var(--uui-size-4);\n right: var(--uui-size-4);\n display: flex;\n justify-content: right;\n }\n\n slot[name='actions'] {\n position: absolute;\n top: var(--uui-size-space-3);\n right: var(--uui-size-space-3);\n display: flex;\n justify-content: right;\n\n opacity: 0;\n transition: opacity 120ms;\n }\n :host(:focus) slot[name='actions'],\n :host(:focus-within) slot[name='actions'],\n :host(:hover) slot[name='actions'] {\n opacity: 1;\n }\n\n slot:not([name]) {\n display: block;\n margin: var(--uui-size-1);\n margin-top: var(--uui-size-3);\n }\n\n slot:not([name])::slotted() {\n font-size: var(--uui-type-small-size);\n line-height: calc(2 * var(--uui-size-3));\n }\n\n #open-part {\n display: flex;\n position: relative;\n align-items: center;\n cursor: pointer;\n flex-grow: 1;\n padding: var(--uui-size-space-4) var(--uui-size-space-5);\n }\n\n #open-part #name {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n overflow-wrap: anywhere;\n }\n\n #content {\n align-self: stretch;\n display: flex;\n flex-direction: column;\n }\n\n #item {\n position: relative;\n display: flex;\n align-self: stretch;\n line-height: normal;\n align-items: center;\n margin-top: var(--uui-size-1);\n }\n\n #icon {\n font-size: 1.2em;\n margin-right: var(--uui-size-1);\n }\n\n :host([selectable]) #open-part {\n padding: 0;\n margin: var(--uui-size-space-4) var(--uui-size-space-5);\n }\n\n :host([disabled]) #name {\n pointer-events: none;\n }\n\n :host(:not([disabled])) #open-part:hover #icon {\n color: var(--uui-color-interactive-emphasis);\n }\n :host(:not([disabled])) #open-part:hover #name {\n text-decoration: underline;\n color: var(--uui-color-interactive-emphasis);\n }\n :host(:not([disabled])) #open-part:hover #detail {\n color: var(--uui-color-interactive-emphasis);\n }\n :host(:not([disabled])) #open-part:hover #default {\n color: var(--uui-color-interactive-emphasis);\n }\n\n #select-checkbox {\n top: var(--uui-size-5);\n left: var(--uui-size-6);\n }\n `,\n ];\n}\n"],"names":[],"mappings":"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"}

package/dist/components/card-media/card-media.element.js CHANGED Viewed

@@ -99,6 +99,12 @@ _UUICardMediaElement.styles = [
         padding: var(--uui-size-space-6);
       }
+      slot:not([name]) {
+        display: block;
+        overflow: clip;
+        border-radius: calc(var(--uui-border-radius-2) - 1px);
+      }
       slot[name='tag'] {
         position: absolute;
         bottom: var(--uui-size-2);
@@ -110,8 +116,8 @@ _UUICardMediaElement.styles = [
       slot[name='actions'] {
         position: absolute;
-        top: var(--uui-size-4);
-        right: var(--uui-size-4);
+        top: var(--uui-size-space-3);
+        right: var(--uui-size-space-3);
         display: flex;
         justify-content: right;
         z-index: 2;
@@ -188,7 +194,8 @@ _UUICardMediaElement.styles = [
         inset: 0;
         z-index: -1;
         border-top: 1px solid var(--uui-color-divider);
-        border-radius: 0 0 var(--uui-border-radius-2) var(--uui-border-radius-2);
+        border-radius: 0 0 calc(var(--uui-border-radius-2) - 1px)
+          calc(var(--uui-border-radius-2) - 1px);
         background-color: var(--uui-color-surface);
         pointer-events: none;
         opacity: 0.96;

package/dist/components/card-media/card-media.element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card-media.element.js","sources":["../../../src/components/card-media/card-media.element.ts"],"sourcesContent":["import { UUICardElement } from '../card/card.js';\nimport { css, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport '../symbol-folder/symbol-folder.js';\nimport '../symbol-file/symbol-file.js';\n\n/*\n @element uui-card-media\n * @description - Card component for displaying a media item.\n * @slot tag - slot for the tag with support for `<uui-tag>` elements\n * @slot actions - slot for the actions with support for the `<uui-action-bar>` element\n * @slot - slot for the default content area\n /\nexport class UUICardMediaElement extends UUICardElement {\n /\n Media name\n * @type {string}\n * @attr name\n * @default ''\n /\n @property({ type: String })\n name = '';\n\n /\n Media detail\n * @type {string}\n * @attr detail\n * @default ''\n /\n @property({ type: String })\n detail?: string;\n\n /\n Media file extension, without \".\"\n * @type {string}\n * @attr file-ext\n * @default ''\n /\n @property({ type: String, attribute: 'file-ext' })\n fileExt = '';\n\n @state()\n protected hasPreview = false;\n\n private queryPreviews(e: Event): void {\n this.hasPreview =\n (e.composedPath()[0] as HTMLSlotElement).assignedElements({\n flatten: true,\n }).length > 0;\n }\n\n protected renderMedia() {\n if (this.hasPreview === true) return '';\n\n if (this.fileExt === '') {\n return html`<uui-symbol-folder id=\"entity-symbol\"></uui-symbol-folder>`;\n }\n\n return html`<uui-symbol-file\n id=\"entity-symbol\"\n type=\"${this.fileExt}\"></uui-symbol-file>`;\n }\n\n #renderButton() {\n const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;\n return html`\n <button\n id=\"open-part\"\n tabindex=${ifDefined(tabIndex)}\n @click=${this.handleOpenClick}\n @keydown=${this.handleOpenKeydown}>\n ${this.#renderContent()}\n </button>\n `;\n }\n\n #renderLink() {\n const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;\n const rel = this.target === '_blank' ? 'noopener noreferrer' : undefined;\n return html`\n <a\n id=\"open-part\"\n tabindex=${ifDefined(tabIndex)}\n href=${ifDefined(!this.disabled ? this.href : undefined)}\n target=${ifDefined(this.target \|\| undefined)}\n rel=${ifDefined(this.rel \|\| rel)}>\n ${this.#renderContent()}\n </a>\n `;\n }\n\n #renderContent() {\n return html`\n <div id=\"content\" class=\"uui-text\">\n <span id=\"name\" title=\"${this.name}\">${this.name}</span>\n <small id=\"detail\">${this.detail}<slot name=\"detail\"></slot></small>\n </div>\n `;\n }\n\n public render() {\n return html` ${this.renderMedia()}\n <slot @slotchange=${this.queryPreviews}></slot>\n ${this.href ? this.#renderLink() : this.#renderButton()}\n <!-- Select border must be right after .open-part -->\n <div id=\"select-border\"></div>\n ${this.selectable ? this.renderCheckbox() : nothing}\n <slot name=\"tag\"></slot>\n <slot name=\"actions\"></slot>`;\n }\n\n static override readonly styles = [\n ...UUICardElement.styles,\n css`\n #entity-symbol {\n align-self: center;\n width: 60%;\n margin-bottom: var(--uui-size-layout-1);\n padding: var(--uui-size-space-6);\n }\n\n slot[name='tag'] {\n position: absolute;\n bottom: var(--uui-size-2);\n right: var(--uui-size-4);\n display: flex;\n justify-content: right;\n z-index: 2;\n }\n\n slot[name='actions'] {\n position: absolute;\n top: var(--uui-size-4);\n right: var(--uui-size-4);\n display: flex;\n justify-content: right;\n z-index: 2;\n opacity: 0;\n transition: opacity 120ms;\n }\n :host(:focus) slot[name='actions'],\n :host(:focus-within) slot[name='actions'],\n :host(:hover) slot[name='actions'] {\n opacity: 1;\n }\n\n slot:not([name])::slotted() {\n align-self: center;\n object-fit: cover;\n width: 100%;\n height: 100%;\n pointer-events: none;\n }\n\n #open-part {\n position: absolute;\n z-index: 1;\n inset: 0;\n margin-bottom: 0;\n color: var(--uui-color-interactive);\n border: none;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n }\n\n :host([disabled]) #open-part {\n pointer-events: none;\n color: var(--uui-color-contrast-disabled);\n }\n\n #open-part:hover {\n color: var(--uui-color-interactive-emphasis);\n }\n #open-part:hover #name {\n text-decoration: underline;\n }\n\n #open-part #name {\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n overflow-wrap: anywhere;\n }\n\n :host([image]:not([image=''])) #open-part {\n transition: opacity 0.5s 0.5s;\n opacity: 0;\n }\n\n #content {\n position: relative;\n display: flex;\n flex-direction: column;\n font-family: inherit;\n box-sizing: border-box;\n text-align: left;\n word-break: break-word;\n padding-top: var(--uui-size-space-3);\n }\n\n #content::before {\n content: '';\n position: absolute;\n inset: 0;\n z-index: -1;\n border-top: 1px solid var(--uui-color-divider);\n border-radius: 0 0 var(--uui-border-radius-2) var(--uui-border-radius-2);\n background-color: var(--uui-color-surface);\n pointer-events: none;\n opacity: 0.96;\n }\n\n #detail {\n opacity: 0.6;\n }\n\n :host(\n [image]:not([image='']):hover,\n [image]:not([image='']):focus,\n [image]:not([image='']):focus-within,\n [selected][image]:not([image='']),\n [error][image]:not([image=''])\n )\n #open-part {\n opacity: 1;\n transition-duration: 120ms;\n transition-delay: 0s;\n }\n\n :host([selectable]) #open-part {\n inset: var(--uui-size-space-3) var(--uui-size-space-4);\n }\n :host(:not([selectable])) #content {\n padding: var(--uui-size-space-3) var(--uui-size-space-4);\n }\n :host([selectable]) #content::before {\n inset: calc(var(--uui-size-space-3) * -1)\n calc(var(--uui-size-space-4) * -1);\n top: 0;\n }\n\n /\n #info-icon {\n margin-right: var(--uui-size-2);\n display: flex;\n height: var(--uui-size-8);\n }\n /\n `,\n ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAeO,MAAM,uBAAN,MAAM,6BAA4B,eAAe;AAAA,EAAjD,cAAA;AAAA,UAAA,GAAA,SAAA;AAAA;AAQL,SAAA,OAAO;AAkBP,SAAA,UAAU;AAGV,SAAU,aAAa;AAAA,EAAA;AAAA,EAEf,cAAc,GAAgB;AACpC,SAAK,aACF,EAAE,aAAA,EAAe,CAAC,EAAsB,iBAAiB;AAAA,MACxD,SAAS;AAAA,IAAA,CACV,EAAE,SAAS;AAAA,EAChB;AAAA,EAEU,cAAc;AACtB,QAAI,KAAK,eAAe,KAAM,QAAO;AAErC,QAAI,KAAK,YAAY,IAAI;AACvB,aAAO;AAAA,IACT;AAEA,WAAO;AAAA;AAAA,cAEG,KAAK,OAAO;AAAA,EACxB;AAAA,EAuCO,SAAS;AACd,WAAO,QAAQ,KAAK,YAAA,CAAa;AAAA,0BACX,KAAK,aAAa;AAAA,QACpC,KAAK,OAAO,sBAAK,+CAAL,aAAqB,sBAAK,iDAAL,UAAoB;AAAA;AAAA;AAAA,QAGrD,KAAK,aAAa,KAAK,eAAA,IAAmB,OAAO;AAAA;AAAA;AAAA,EAGvD;~~AAiJF~~;~~AAjPO~~;AAkDL,kBAAA,WAAgB;AACd,QAAM,WAAW,CAAC,KAAK,WAAY,KAAK,aAAa,KAAK,IAAK;AAC/D,SAAO;AAAA;AAAA;AAAA,mBAGQ,UAAU,QAAQ,CAAC;AAAA,iBACrB,KAAK,eAAe;AAAA,mBAClB,KAAK,iBAAiB;AAAA,UAC/B,sBAAK,kDAAL,UAAqB;AAAA;AAAA;AAG7B;AAEA,gBAAA,WAAc;AACZ,QAAM,WAAW,CAAC,KAAK,WAAY,KAAK,aAAa,KAAK,IAAK;AAC/D,QAAM,MAAM,KAAK,WAAW,WAAW,wBAAwB;AAC/D,SAAO;AAAA;AAAA;AAAA,mBAGQ,UAAU,QAAQ,CAAC;AAAA,eACvB,UAAU,CAAC,KAAK,WAAW,KAAK,OAAO,MAAS,CAAC;AAAA,iBAC/C,UAAU,KAAK,UAAU,MAAS,CAAC;AAAA,cACtC,UAAU,KAAK,OAAO,GAAG,CAAC;AAAA,UAC9B,sBAAK,kDAAL,UAAqB;AAAA;AAAA;AAG7B;AAEA,mBAAA,WAAiB;AACf,SAAO;AAAA;AAAA,iCAEsB,KAAK,IAAI,KAAK,KAAK,IAAI;AAAA,6BAC3B,KAAK,MAAM;AAAA;AAAA;AAGtC;AAaA,qBAAyB,SAAS;AAAA,EAChC,GAAG,eAAe;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AApGG,IAAM,sBAAN;AAQL,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPf,oBAQX,WAAA,MAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhBf,oBAiBX,WAAA,QAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,YAAY;AAAA,GAzBtC,oBA0BX,WAAA,SAAA;AAGU,gBAAA;AAAA,EADT,MAAA;AAAM,GA5BI,oBA6BD,WAAA,YAAA;"}
1	+ {"version":3,"file":"card-media.element.js","sources":["../../../src/components/card-media/card-media.element.ts"],"sourcesContent":["import { UUICardElement } from '../card/card.js';\nimport { css, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport '../symbol-folder/symbol-folder.js';\nimport '../symbol-file/symbol-file.js';\n\n/*\n @element uui-card-media\n * @description - Card component for displaying a media item.\n * @slot tag - slot for the tag with support for `<uui-tag>` elements\n * @slot actions - slot for the actions with support for the `<uui-action-bar>` element\n * @slot - slot for the default content area\n /\nexport class UUICardMediaElement extends UUICardElement {\n /\n Media name\n * @type {string}\n * @attr name\n * @default ''\n /\n @property({ type: String })\n name = '';\n\n /\n Media detail\n * @type {string}\n * @attr detail\n * @default ''\n /\n @property({ type: String })\n detail?: string;\n\n /\n Media file extension, without \".\"\n * @type {string}\n * @attr file-ext\n * @default ''\n /\n @property({ type: String, attribute: 'file-ext' })\n fileExt = '';\n\n @state()\n protected hasPreview = false;\n\n private queryPreviews(e: Event): void {\n this.hasPreview =\n (e.composedPath()[0] as HTMLSlotElement).assignedElements({\n flatten: true,\n }).length > 0;\n }\n\n protected renderMedia() {\n if (this.hasPreview === true) return '';\n\n if (this.fileExt === '') {\n return html`<uui-symbol-folder id=\"entity-symbol\"></uui-symbol-folder>`;\n }\n\n return html`<uui-symbol-file\n id=\"entity-symbol\"\n type=\"${this.fileExt}\"></uui-symbol-file>`;\n }\n\n #renderButton() {\n const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;\n return html`\n <button\n id=\"open-part\"\n tabindex=${ifDefined(tabIndex)}\n @click=${this.handleOpenClick}\n @keydown=${this.handleOpenKeydown}>\n ${this.#renderContent()}\n </button>\n `;\n }\n\n #renderLink() {\n const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;\n const rel = this.target === '_blank' ? 'noopener noreferrer' : undefined;\n return html`\n <a\n id=\"open-part\"\n tabindex=${ifDefined(tabIndex)}\n href=${ifDefined(!this.disabled ? this.href : undefined)}\n target=${ifDefined(this.target \|\| undefined)}\n rel=${ifDefined(this.rel \|\| rel)}>\n ${this.#renderContent()}\n </a>\n `;\n }\n\n #renderContent() {\n return html`\n <div id=\"content\" class=\"uui-text\">\n <span id=\"name\" title=\"${this.name}\">${this.name}</span>\n <small id=\"detail\">${this.detail}<slot name=\"detail\"></slot></small>\n </div>\n `;\n }\n\n public render() {\n return html` ${this.renderMedia()}\n <slot @slotchange=${this.queryPreviews}></slot>\n ${this.href ? this.#renderLink() : this.#renderButton()}\n <!-- Select border must be right after .open-part -->\n <div id=\"select-border\"></div>\n ${this.selectable ? this.renderCheckbox() : nothing}\n <slot name=\"tag\"></slot>\n <slot name=\"actions\"></slot>`;\n }\n\n static override readonly styles = [\n ...UUICardElement.styles,\n css`\n #entity-symbol {\n align-self: center;\n width: 60%;\n margin-bottom: var(--uui-size-layout-1);\n padding: var(--uui-size-space-6);\n }\n\n slot:not([name]) {\n display: block;\n overflow: clip;\n border-radius: calc(var(--uui-border-radius-2) - 1px);\n }\n\n slot[name='tag'] {\n position: absolute;\n bottom: var(--uui-size-2);\n right: var(--uui-size-4);\n display: flex;\n justify-content: right;\n z-index: 2;\n }\n\n slot[name='actions'] {\n position: absolute;\n top: var(--uui-size-space-3);\n right: var(--uui-size-space-3);\n display: flex;\n justify-content: right;\n z-index: 2;\n opacity: 0;\n transition: opacity 120ms;\n }\n :host(:focus) slot[name='actions'],\n :host(:focus-within) slot[name='actions'],\n :host(:hover) slot[name='actions'] {\n opacity: 1;\n }\n\n slot:not([name])::slotted() {\n align-self: center;\n object-fit: cover;\n width: 100%;\n height: 100%;\n pointer-events: none;\n }\n\n #open-part {\n position: absolute;\n z-index: 1;\n inset: 0;\n margin-bottom: 0;\n color: var(--uui-color-interactive);\n border: none;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n }\n\n :host([disabled]) #open-part {\n pointer-events: none;\n color: var(--uui-color-contrast-disabled);\n }\n\n #open-part:hover {\n color: var(--uui-color-interactive-emphasis);\n }\n #open-part:hover #name {\n text-decoration: underline;\n }\n\n #open-part #name {\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n overflow-wrap: anywhere;\n }\n\n :host([image]:not([image=''])) #open-part {\n transition: opacity 0.5s 0.5s;\n opacity: 0;\n }\n\n #content {\n position: relative;\n display: flex;\n flex-direction: column;\n font-family: inherit;\n box-sizing: border-box;\n text-align: left;\n word-break: break-word;\n padding-top: var(--uui-size-space-3);\n }\n\n #content::before {\n content: '';\n position: absolute;\n inset: 0;\n z-index: -1;\n border-top: 1px solid var(--uui-color-divider);\n border-radius: 0 0 calc(var(--uui-border-radius-2) - 1px)\n calc(var(--uui-border-radius-2) - 1px);\n background-color: var(--uui-color-surface);\n pointer-events: none;\n opacity: 0.96;\n }\n\n #detail {\n opacity: 0.6;\n }\n\n :host(\n [image]:not([image='']):hover,\n [image]:not([image='']):focus,\n [image]:not([image='']):focus-within,\n [selected][image]:not([image='']),\n [error][image]:not([image=''])\n )\n #open-part {\n opacity: 1;\n transition-duration: 120ms;\n transition-delay: 0s;\n }\n\n :host([selectable]) #open-part {\n inset: var(--uui-size-space-3) var(--uui-size-space-4);\n }\n :host(:not([selectable])) #content {\n padding: var(--uui-size-space-3) var(--uui-size-space-4);\n }\n :host([selectable]) #content::before {\n inset: calc(var(--uui-size-space-3) * -1)\n calc(var(--uui-size-space-4) * -1);\n top: 0;\n }\n\n /\n #info-icon {\n margin-right: var(--uui-size-2);\n display: flex;\n height: var(--uui-size-8);\n }\n /\n `,\n ];\n}\n"],"names":[],"mappings":"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"}

package/dist/components/card-user/card-user.element.js CHANGED Viewed

@@ -111,8 +111,8 @@ _UUICardUserElement.styles = [
       slot[name='actions'] {
         position: absolute;
-        top: var(--uui-size-space-4);
-        right: var(--uui-size-space-4);
+        top: var(--uui-size-space-3);
+        right: var(--uui-size-space-3);
         display: flex;
         justify-content: right;

package/dist/components/card-user/card-user.element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card-user.element.js","sources":["../../../src/components/card-user/card-user.element.ts"],"sourcesContent":["import { slotHasContent } from '../../internal/utils/index.js';\nimport { UUICardElement } from '../card/card.js';\nimport { css, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport '../avatar/avatar.js';\n\n/*\n @element uui-card-user\n * @description - Card component for displaying a user node.\n * @slot - slot for the default content area\n * @slot tag - slot for the tag with support for `<uui-tag>` elements\n * @slot avatar - slot for the avatar with support for the `<uui-avatar>` element\n * @slot actions - slot for the actions with support for the `<uui-action-bar>` element\n /\nexport class UUICardUserElement extends UUICardElement {\n /\n User name\n * @type {string}\n * @attr name\n * @default ''\n /\n @property({ type: String })\n name = '';\n\n @state()\n private _avatarSlotHasContent = false;\n private readonly _avatarSlotChanged = (e: Event) => {\n this._avatarSlotHasContent = slotHasContent(e.target);\n };\n\n #renderButton() {\n const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;\n return html`\n <div\n id=\"open-part\"\n tabindex=${ifDefined(tabIndex)}\n @click=${this.handleOpenClick}\n @keydown=${this.handleOpenKeydown}>\n ${this.#renderContent()}\n </div>\n `;\n }\n\n #renderLink() {\n const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;\n const rel = this.target === '_blank' ? 'noopener noreferrer' : undefined;\n return html`\n <a\n id=\"open-part\"\n tabindex=${ifDefined(tabIndex)}\n href=${ifDefined(!this.disabled ? this.href : undefined)}\n target=${ifDefined(this.target \|\| undefined)}\n rel=${ifDefined(this.rel \|\| rel)}>\n ${this.#renderContent()}\n </a>\n `;\n }\n\n #renderContent() {\n return html`\n <div id=\"content\">\n ${this._avatarSlotHasContent\n ? nothing\n : html`<uui-avatar\n class=\"avatar\"\n name=${this.name}\n size=\"m\"></uui-avatar>`}\n <slot\n name=\"avatar\"\n class=\"avatar\"\n @slotchange=${this._avatarSlotChanged}></slot>\n <span title=\"${this.name}\">${this.name}</span>\n <slot></slot>\n </div>\n `;\n }\n\n public render() {\n return html`\n ${this.href ? this.#renderLink() : this.#renderButton()}\n <!-- Select border must be right after #open-part -->\n <div id=\"select-border\"></div>\n ${this.selectable ? this.renderCheckbox() : nothing}\n <slot name=\"tag\"></slot>\n <slot name=\"actions\"></slot>\n `;\n }\n\n static override readonly styles = [\n ...UUICardElement.styles,\n css`\n :host {\n min-width: 250px;\n }\n\n slot:not([name])::slotted() {\n font-size: var(--uui-type-small-size);\n line-height: var(--uui-size-6);\n }\n\n ::slotted(*) {\n text-align: center;\n }\n\n slot[name='tag'] {\n position: absolute;\n bottom: var(--uui-size-space-4);\n right: var(--uui-size-space-4);\n display: flex;\n justify-content: right;\n }\n\n slot[name='actions'] {\n position: absolute;\n top: var(--uui-size-space-4);\n right: var(--uui-size-space-4);\n display: flex;\n justify-content: right;\n\n opacity: 0;\n transition: opacity 120ms;\n }\n :host(:focus) slot[name='actions'],\n :host(:focus-within) slot[name='actions'],\n :host(:hover) slot[name='actions'] {\n opacity: 1;\n }\n\n #open-part {\n cursor: pointer;\n flex-grow: 1;\n padding: var(--uui-size-space-5) var(--uui-size-space-4);\n }\n\n :host([disabled]) #open-part {\n pointer-events: none;\n }\n\n #open-part:hover #content {\n color: var(--uui-color-interactive-emphasis);\n }\n #open-part:hover #content > span {\n text-decoration: underline;\n }\n\n :host([selectable]) #open-part {\n padding: 0;\n margin: var(--uui-size-space-5) var(--uui-size-space-4);\n }\n\n #content {\n display: flex;\n flex-direction: column;\n position: relative;\n align-items: center;\n margin: 0 0 3px 0;\n height: 100%;\n }\n\n #content > span {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n vertical-align: center;\n margin-top: 3px;\n font-weight: 700;\n overflow-wrap: anywhere;\n }\n\n .avatar {\n font-size: 1.5em;\n margin-top: var(--uui-size-space-1);\n margin-bottom: var(--uui-size-space-2);\n }\n `,\n ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAM,sBAAN,MAAM,4BAA2B,eAAe;AAAA,EAAhD,cAAA;AAAA,UAAA,GAAA,SAAA;AAAA;AAQL,SAAA,OAAO;AAGP,SAAQ,wBAAwB;AAChC,SAAiB,qBAAqB,CAAC,MAAa;AAClD,WAAK,wBAAwB,eAAe,EAAE,MAAM;AAAA,IACtD;AAAA,EAAA;AAAA,EAiDO,SAAS;AACd,WAAO;AAAA,QACH,KAAK,OAAO,sBAAK,8CAAL,aAAqB,sBAAK,gDAAL,UAAoB;AAAA;AAAA;AAAA,QAGrD,KAAK,aAAa,KAAK,eAAA,IAAmB,OAAO;AAAA;AAAA;AAAA;AAAA,EAIvD;AA4FF;AApKO;AAgBL,kBAAA,WAAgB;AACd,QAAM,WAAW,CAAC,KAAK,WAAY,KAAK,aAAa,KAAK,IAAK;AAC/D,SAAO;AAAA;AAAA;AAAA,mBAGQ,UAAU,QAAQ,CAAC;AAAA,iBACrB,KAAK,eAAe;AAAA,mBAClB,KAAK,iBAAiB;AAAA,UAC/B,sBAAK,iDAAL,UAAqB;AAAA;AAAA;AAG7B;AAEA,gBAAA,WAAc;AACZ,QAAM,WAAW,CAAC,KAAK,WAAY,KAAK,aAAa,KAAK,IAAK;AAC/D,QAAM,MAAM,KAAK,WAAW,WAAW,wBAAwB;AAC/D,SAAO;AAAA;AAAA;AAAA,mBAGQ,UAAU,QAAQ,CAAC;AAAA,eACvB,UAAU,CAAC,KAAK,WAAW,KAAK,OAAO,MAAS,CAAC;AAAA,iBAC/C,UAAU,KAAK,UAAU,MAAS,CAAC;AAAA,cACtC,UAAU,KAAK,OAAO,GAAG,CAAC;AAAA,UAC9B,sBAAK,iDAAL,UAAqB;AAAA;AAAA;AAG7B;AAEA,mBAAA,WAAiB;AACf,SAAO;AAAA;AAAA,UAED,KAAK,wBACH,UACA;AAAA;AAAA,qBAES,KAAK,IAAI;AAAA,qCACO;AAAA;AAAA;AAAA;AAAA,wBAIb,KAAK,kBAAkB;AAAA,uBACxB,KAAK,IAAI,KAAK,KAAK,IAAI;AAAA;AAAA;AAAA;AAI5C;AAaA,oBAAyB,SAAS;AAAA,EAChC,GAAG,eAAe;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA5EG,IAAM,qBAAN;AAQL,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPf,mBAQX,WAAA,MAAA;AAGQ,gBAAA;AAAA,EADP,MAAA;AAAM,GAVI,mBAWH,WAAA,uBAAA;"}
1	+ {"version":3,"file":"card-user.element.js","sources":["../../../src/components/card-user/card-user.element.ts"],"sourcesContent":["import { slotHasContent } from '../../internal/utils/index.js';\nimport { UUICardElement } from '../card/card.js';\nimport { css, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport '../avatar/avatar.js';\n\n/*\n @element uui-card-user\n * @description - Card component for displaying a user node.\n * @slot - slot for the default content area\n * @slot tag - slot for the tag with support for `<uui-tag>` elements\n * @slot avatar - slot for the avatar with support for the `<uui-avatar>` element\n * @slot actions - slot for the actions with support for the `<uui-action-bar>` element\n /\nexport class UUICardUserElement extends UUICardElement {\n /\n User name\n * @type {string}\n * @attr name\n * @default ''\n /\n @property({ type: String })\n name = '';\n\n @state()\n private _avatarSlotHasContent = false;\n private readonly _avatarSlotChanged = (e: Event) => {\n this._avatarSlotHasContent = slotHasContent(e.target);\n };\n\n #renderButton() {\n const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;\n return html`\n <div\n id=\"open-part\"\n tabindex=${ifDefined(tabIndex)}\n @click=${this.handleOpenClick}\n @keydown=${this.handleOpenKeydown}>\n ${this.#renderContent()}\n </div>\n `;\n }\n\n #renderLink() {\n const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;\n const rel = this.target === '_blank' ? 'noopener noreferrer' : undefined;\n return html`\n <a\n id=\"open-part\"\n tabindex=${ifDefined(tabIndex)}\n href=${ifDefined(!this.disabled ? this.href : undefined)}\n target=${ifDefined(this.target \|\| undefined)}\n rel=${ifDefined(this.rel \|\| rel)}>\n ${this.#renderContent()}\n </a>\n `;\n }\n\n #renderContent() {\n return html`\n <div id=\"content\">\n ${this._avatarSlotHasContent\n ? nothing\n : html`<uui-avatar\n class=\"avatar\"\n name=${this.name}\n size=\"m\"></uui-avatar>`}\n <slot\n name=\"avatar\"\n class=\"avatar\"\n @slotchange=${this._avatarSlotChanged}></slot>\n <span title=\"${this.name}\">${this.name}</span>\n <slot></slot>\n </div>\n `;\n }\n\n public render() {\n return html`\n ${this.href ? this.#renderLink() : this.#renderButton()}\n <!-- Select border must be right after #open-part -->\n <div id=\"select-border\"></div>\n ${this.selectable ? this.renderCheckbox() : nothing}\n <slot name=\"tag\"></slot>\n <slot name=\"actions\"></slot>\n `;\n }\n\n static override readonly styles = [\n ...UUICardElement.styles,\n css`\n :host {\n min-width: 250px;\n }\n\n slot:not([name])::slotted() {\n font-size: var(--uui-type-small-size);\n line-height: var(--uui-size-6);\n }\n\n ::slotted(*) {\n text-align: center;\n }\n\n slot[name='tag'] {\n position: absolute;\n bottom: var(--uui-size-space-4);\n right: var(--uui-size-space-4);\n display: flex;\n justify-content: right;\n }\n\n slot[name='actions'] {\n position: absolute;\n top: var(--uui-size-space-3);\n right: var(--uui-size-space-3);\n display: flex;\n justify-content: right;\n\n opacity: 0;\n transition: opacity 120ms;\n }\n :host(:focus) slot[name='actions'],\n :host(:focus-within) slot[name='actions'],\n :host(:hover) slot[name='actions'] {\n opacity: 1;\n }\n\n #open-part {\n cursor: pointer;\n flex-grow: 1;\n padding: var(--uui-size-space-5) var(--uui-size-space-4);\n }\n\n :host([disabled]) #open-part {\n pointer-events: none;\n }\n\n #open-part:hover #content {\n color: var(--uui-color-interactive-emphasis);\n }\n #open-part:hover #content > span {\n text-decoration: underline;\n }\n\n :host([selectable]) #open-part {\n padding: 0;\n margin: var(--uui-size-space-5) var(--uui-size-space-4);\n }\n\n #content {\n display: flex;\n flex-direction: column;\n position: relative;\n align-items: center;\n margin: 0 0 3px 0;\n height: 100%;\n }\n\n #content > span {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n vertical-align: center;\n margin-top: 3px;\n font-weight: 700;\n overflow-wrap: anywhere;\n }\n\n .avatar {\n font-size: 1.5em;\n margin-top: var(--uui-size-space-1);\n margin-bottom: var(--uui-size-space-2);\n }\n `,\n ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAM,sBAAN,MAAM,4BAA2B,eAAe;AAAA,EAAhD,cAAA;AAAA,UAAA,GAAA,SAAA;AAAA;AAQL,SAAA,OAAO;AAGP,SAAQ,wBAAwB;AAChC,SAAiB,qBAAqB,CAAC,MAAa;AAClD,WAAK,wBAAwB,eAAe,EAAE,MAAM;AAAA,IACtD;AAAA,EAAA;AAAA,EAiDO,SAAS;AACd,WAAO;AAAA,QACH,KAAK,OAAO,sBAAK,8CAAL,aAAqB,sBAAK,gDAAL,UAAoB;AAAA;AAAA;AAAA,QAGrD,KAAK,aAAa,KAAK,eAAA,IAAmB,OAAO;AAAA;AAAA;AAAA;AAAA,EAIvD;AA4FF;AApKO;AAgBL,kBAAA,WAAgB;AACd,QAAM,WAAW,CAAC,KAAK,WAAY,KAAK,aAAa,KAAK,IAAK;AAC/D,SAAO;AAAA;AAAA;AAAA,mBAGQ,UAAU,QAAQ,CAAC;AAAA,iBACrB,KAAK,eAAe;AAAA,mBAClB,KAAK,iBAAiB;AAAA,UAC/B,sBAAK,iDAAL,UAAqB;AAAA;AAAA;AAG7B;AAEA,gBAAA,WAAc;AACZ,QAAM,WAAW,CAAC,KAAK,WAAY,KAAK,aAAa,KAAK,IAAK;AAC/D,QAAM,MAAM,KAAK,WAAW,WAAW,wBAAwB;AAC/D,SAAO;AAAA;AAAA;AAAA,mBAGQ,UAAU,QAAQ,CAAC;AAAA,eACvB,UAAU,CAAC,KAAK,WAAW,KAAK,OAAO,MAAS,CAAC;AAAA,iBAC/C,UAAU,KAAK,UAAU,MAAS,CAAC;AAAA,cACtC,UAAU,KAAK,OAAO,GAAG,CAAC;AAAA,UAC9B,sBAAK,iDAAL,UAAqB;AAAA;AAAA;AAG7B;AAEA,mBAAA,WAAiB;AACf,SAAO;AAAA;AAAA,UAED,KAAK,wBACH,UACA;AAAA;AAAA,qBAES,KAAK,IAAI;AAAA,qCACO;AAAA;AAAA;AAAA;AAAA,wBAIb,KAAK,kBAAkB;AAAA,uBACxB,KAAK,IAAI,KAAK,KAAK,IAAI;AAAA;AAAA;AAAA;AAI5C;AAaA,oBAAyB,SAAS;AAAA,EAChC,GAAG,eAAe;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA5EG,IAAM,qBAAN;AAQL,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPf,mBAQX,WAAA,MAAA;AAGQ,gBAAA;AAAA,EADP,MAAA;AAAM,GAVI,mBAWH,WAAA,uBAAA;"}

package/dist/components/checkbox/checkbox.element.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { UUIBooleanInputElement } from "../boolean-input/boolean-input.element.js";
 import "../boolean-input/UUIBooleanInputEvent.js";
-import { html, css, svg } from "lit";
+import { svg, html, css } from "lit";
 import { UUIHorizontalShakeKeyframes, UUIHorizontalShakeAnimationValue } from "../../internal/animations/uui-shake.js";
 const check = svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 10 17 4 12" /></svg>`;
 const subtract = svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 12.25h14" /></svg>`;
@@ -99,12 +99,9 @@ _UUICheckboxElement.styles = [
       #ticker::before {
         content: '';
         position: absolute;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        right: 0;
+        inset: 0;
         border-radius: calc(
-          var(--uui-checkbox-border-radius, var(--uui-border-radius-1))
+          var(--uui-checkbox-border-radius, var(--uui-border-radius-1)) - 1.5px
         );
         background-color: var(--uui-color-selected);
         transition:

package/dist/components/checkbox/checkbox.element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.element.js","sources":["../../../src/components/checkbox/checkbox.element.ts"],"sourcesContent":["import {\n UUIHorizontalShakeAnimationValue,\n UUIHorizontalShakeKeyframes,\n} from '../../internal/animations/index.js';\nimport { UUIBooleanInputElement } from '../boolean-input/boolean-input.js';\nimport { css, html, svg } from 'lit';\n\n// Custom SVG for the checkbox, as this is smaller in size than the icon registry version: [NL]\nconst check = svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 10 17 4 12\" /></svg>`;\nconst subtract = svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 12.25h14\" /></svg>`;\n\n/*\n Umbraco checkbox, toggles between checked and uncheck\n * @element uui-checkbox\n * @fires UUIBooleanInputEvent#change - fires when the element is begin checked by a user action\n * @cssprop --uui-checkbox-size - To set the size of the checkbox.\n * @extends UUIBooleanInputElement\n /\nexport class UUICheckboxElement extends UUIBooleanInputElement {\n /\n This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals. Read more about form controls here https://web.dev/more-capable-form-controls/\n * @type {boolean}\n /\n static readonly formAssociated = true;\n\n renderCheckbox() {\n return html`\n <div id=\"ticker\">\n <div id=\"icon-check\">${this.indeterminate ? subtract : check}</div>\n </div>\n `;\n }\n\n static override readonly styles = [\n ...UUIBooleanInputElement.styles,\n UUIHorizontalShakeKeyframes,\n css`\n :host {\n --uui-checkbox-size: 18px;\n }\n\n #ticker {\n position: relative;\n grid-area: 'input';\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n\n box-sizing: border-box;\n width: var(--uui-checkbox-size);\n height: var(--uui-checkbox-size);\n border-radius: var(\n --uui-checkbox-border-radius,\n var(--uui-border-radius-1)\n );\n\n color: var(--uui-toggle-color, var(--uui-color-selected-contrast));\n background-color: var(\n --uui-toggle-background-color,\n var(--uui-color-surface)\n );\n border: 1px solid\n var(--uui-checkbox-border-color, var(--uui-color-border-standalone));\n font-size: calc(var(--uui-checkbox-size) 0.7);\n }\n label:hover input:not([disabled]) + #ticker {\n border-color: var(\n --uui-checkbox-border-color-hover,\n var(--uui-color-border-emphasis)\n );\n background-color: var(\n --uui-checkbox-background-color-hover,\n var(--uui-color-surface-emphasis)\n );\n }\n label:focus #ticker {\n border-color: var(\n --uui-checkbox-border-color-focus,\n var(--uui-color-border-emphasis)\n );\n background-color: var(\n --uui-checkbox-background-color-focus,\n var(--uui-color-surface-emphasis)\n );\n }\n input:checked:not([disabled]) + #ticker,\n input:indeterminate:not([disabled]) + #ticker {\n border-color: var(--uui-color-selected);\n }\n\n label:hover input:checked:not([disabled]) + #ticker,\n label:hover input:indeterminate:not([disabled]) + #ticker {\n border-color: var(--uui-color-selected-emphasis);\n }\n\n label:focus input:checked + #ticker,\n label:focus input:indeterminate + #ticker {\n border-color: var(--uui-color-selected-emphasis);\n }\n\n #icon-check {\n position: absolute;\n vertical-align: middle;\n width: 1em;\n height: 1em;\n line-height: 1.3em;\n transition:\n transform 80ms ease-in-out,\n fill 120ms,\n opacity 120ms;\n color: var(--uui-color-selected-contrast);\n opacity: 0;\n }\n\n #ticker::before {\n content: '';\n position: absolute;\n ~~top~~: 0;\n ~~left: 0;\n bottom: 0;\n right: 0;\n~~ border-radius: calc(\n var(--uui-checkbox-border-radius, var(--uui-border-radius-1))\n );\n background-color: var(--uui-color-selected);\n transition:\n transform 80ms ease-in-out,\n opacity 80ms,\n background-color 80ms;\n transform: scale(0);\n opacity: 0;\n }\n label:hover input:checked:not([disabled]) + #ticker::before,\n label:hover input:indeterminate:not([disabled]) + #ticker::before {\n background-color: var(--uui-color-selected-emphasis);\n }\n\n input:checked + #ticker::before,\n input:indeterminate + #ticker::before {\n transform: scale(1);\n opacity: 1;\n }\n input:checked + #ticker #icon-check,\n input:indeterminate + #ticker #icon-check {\n opacity: 1;\n }\n label:focus input:checked + #ticker,\n label:focus input:indeterminate + #ticker {\n background-color: var(--uui-color-selected-emphasis);\n }\n\n input:focus-visible + #ticker {\n outline: 2px solid var(--uui-color-focus);\n }\n\n :host(:not([disabled], [readonly]))\n label:active\n input:checked\n + #ticker\n #icon-check {\n /** Stretch when mouse down /\n transform: scale(0.9);\n }\n\n :host(:not([disabled], [readonly]))\n label:active\n input:indeterminate\n + #ticker\n #icon-check {\n /* Stretch when mouse down /\n transform: scale(0.9);\n }\n\n :host(:not([pristine]):invalid) #ticker,\n :host(:not([pristine]):invalid) label:hover #ticker,\n :host(:not([pristine]):invalid) label:hover input:checked:not([disabled]) + #ticker,\n :host(:not([pristine]):invalid) label:hover input:indeterminate:not([disabled]) + #ticker,\n :host(:not([pristine]):invalid) label:focus input:checked + #ticker,\n :host(:not([pristine]):invalid) label:focus input:indeterminate + #ticker,\n / polyfill support */\n :host(:not([pristine])[internals-invalid]) #ticker,\n :host(:not([pristine])[internals-invalid]) label:hover #ticker,\n :host(:not([pristine])[internals-invalid]) label:hover input:checked:not([disabled]) + #ticker,\n :host(:not([pristine])[internals-invalid]) label:hover input:indeterminate:not([disabled]) + #ticker,\n :host(:not([pristine])[internals-invalid]) label:focus input:checked + #ticker,\n :host(:not([pristine])[internals-invalid]) label:focus input:indeterminate + #ticker {\n border: 1px solid var(--uui-color-invalid-standalone);\n }\n\n :host([disabled]) #ticker {\n background-color: var(--uui-color-disabled);\n }\n :host([disabled]) input:checked + #ticker {\n background-color: var(--uui-color-disabled);\n }\n :host([disabled]) input:indeterminate + #ticker {\n background-color: var(--uui-color-disabled);\n }\n :host([disabled]) #ticker::before {\n background-color: var(--uui-color-disabled);\n }\n :host([disabled]) #ticker #icon-check {\n color: var(--uui-color-disabled-contrast);\n }\n :host([disabled]) label:active #ticker {\n animation: ${UUIHorizontalShakeAnimationValue};\n }\n :host([disabled]) input:checked + #ticker #icon-check,\n :host([disabled]) input:indeterminate + #ticker #icon-check {\n color: var(--uui-color-disabled-contrast);\n }\n `,\n ];\n}\n"],"names":[],"mappings":";;;;AAQA,MAAM,QAAQ;AACd,MAAM,WAAW;AASV,MAAM,sBAAN,MAAM,4BAA2B,uBAAuB;AAAA,EAO7D,iBAAiB;AACf,WAAO;AAAA;AAAA,+BAEoB,KAAK,gBAAgB,WAAW,KAAK;AAAA;AAAA;AAAA,EAGlE;~~AAuLF~~;~~AA/LE~~,oBAAgB,iBAAiB;AAUjC,oBAAyB,SAAS;AAAA,EAChC,GAAG,uBAAuB;AAAA,EAC1B;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA~~;AAAA;AAAA;AAAA~~,~~qBA0KiB~~,gCAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;~~AA5L9C~~,IAAM,qBAAN;"}
1	+ {"version":3,"file":"checkbox.element.js","sources":["../../../src/components/checkbox/checkbox.element.ts"],"sourcesContent":["import {\n UUIHorizontalShakeAnimationValue,\n UUIHorizontalShakeKeyframes,\n} from '../../internal/animations/index.js';\nimport { UUIBooleanInputElement } from '../boolean-input/boolean-input.js';\nimport { css, html, svg } from 'lit';\n\n// Custom SVG for the checkbox, as this is smaller in size than the icon registry version: [NL]\nconst check = svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 10 17 4 12\" /></svg>`;\nconst subtract = svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 12.25h14\" /></svg>`;\n\n/*\n Umbraco checkbox, toggles between checked and uncheck\n * @element uui-checkbox\n * @fires UUIBooleanInputEvent#change - fires when the element is begin checked by a user action\n * @cssprop --uui-checkbox-size - To set the size of the checkbox.\n * @extends UUIBooleanInputElement\n /\nexport class UUICheckboxElement extends UUIBooleanInputElement {\n /\n This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals. Read more about form controls here https://web.dev/more-capable-form-controls/\n * @type {boolean}\n /\n static readonly formAssociated = true;\n\n renderCheckbox() {\n return html`\n <div id=\"ticker\">\n <div id=\"icon-check\">${this.indeterminate ? subtract : check}</div>\n </div>\n `;\n }\n\n static override readonly styles = [\n ...UUIBooleanInputElement.styles,\n UUIHorizontalShakeKeyframes,\n css`\n :host {\n --uui-checkbox-size: 18px;\n }\n\n #ticker {\n position: relative;\n grid-area: 'input';\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n\n box-sizing: border-box;\n width: var(--uui-checkbox-size);\n height: var(--uui-checkbox-size);\n border-radius: var(\n --uui-checkbox-border-radius,\n var(--uui-border-radius-1)\n );\n\n color: var(--uui-toggle-color, var(--uui-color-selected-contrast));\n background-color: var(\n --uui-toggle-background-color,\n var(--uui-color-surface)\n );\n border: 1px solid\n var(--uui-checkbox-border-color, var(--uui-color-border-standalone));\n font-size: calc(var(--uui-checkbox-size) 0.7);\n }\n label:hover input:not([disabled]) + #ticker {\n border-color: var(\n --uui-checkbox-border-color-hover,\n var(--uui-color-border-emphasis)\n );\n background-color: var(\n --uui-checkbox-background-color-hover,\n var(--uui-color-surface-emphasis)\n );\n }\n label:focus #ticker {\n border-color: var(\n --uui-checkbox-border-color-focus,\n var(--uui-color-border-emphasis)\n );\n background-color: var(\n --uui-checkbox-background-color-focus,\n var(--uui-color-surface-emphasis)\n );\n }\n input:checked:not([disabled]) + #ticker,\n input:indeterminate:not([disabled]) + #ticker {\n border-color: var(--uui-color-selected);\n }\n\n label:hover input:checked:not([disabled]) + #ticker,\n label:hover input:indeterminate:not([disabled]) + #ticker {\n border-color: var(--uui-color-selected-emphasis);\n }\n\n label:focus input:checked + #ticker,\n label:focus input:indeterminate + #ticker {\n border-color: var(--uui-color-selected-emphasis);\n }\n\n #icon-check {\n position: absolute;\n vertical-align: middle;\n width: 1em;\n height: 1em;\n line-height: 1.3em;\n transition:\n transform 80ms ease-in-out,\n fill 120ms,\n opacity 120ms;\n color: var(--uui-color-selected-contrast);\n opacity: 0;\n }\n\n #ticker::before {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: calc(\n var(--uui-checkbox-border-radius, var(--uui-border-radius-1)) - 1.5px\n );\n background-color: var(--uui-color-selected);\n transition:\n transform 80ms ease-in-out,\n opacity 80ms,\n background-color 80ms;\n transform: scale(0);\n opacity: 0;\n }\n label:hover input:checked:not([disabled]) + #ticker::before,\n label:hover input:indeterminate:not([disabled]) + #ticker::before {\n background-color: var(--uui-color-selected-emphasis);\n }\n\n input:checked + #ticker::before,\n input:indeterminate + #ticker::before {\n transform: scale(1);\n opacity: 1;\n }\n input:checked + #ticker #icon-check,\n input:indeterminate + #ticker #icon-check {\n opacity: 1;\n }\n label:focus input:checked + #ticker,\n label:focus input:indeterminate + #ticker {\n background-color: var(--uui-color-selected-emphasis);\n }\n\n input:focus-visible + #ticker {\n outline: 2px solid var(--uui-color-focus);\n }\n\n :host(:not([disabled], [readonly]))\n label:active\n input:checked\n + #ticker\n #icon-check {\n /** Stretch when mouse down /\n transform: scale(0.9);\n }\n\n :host(:not([disabled], [readonly]))\n label:active\n input:indeterminate\n + #ticker\n #icon-check {\n /* Stretch when mouse down /\n transform: scale(0.9);\n }\n\n :host(:not([pristine]):invalid) #ticker,\n :host(:not([pristine]):invalid) label:hover #ticker,\n :host(:not([pristine]):invalid) label:hover input:checked:not([disabled]) + #ticker,\n :host(:not([pristine]):invalid) label:hover input:indeterminate:not([disabled]) + #ticker,\n :host(:not([pristine]):invalid) label:focus input:checked + #ticker,\n :host(:not([pristine]):invalid) label:focus input:indeterminate + #ticker,\n / polyfill support */\n :host(:not([pristine])[internals-invalid]) #ticker,\n :host(:not([pristine])[internals-invalid]) label:hover #ticker,\n :host(:not([pristine])[internals-invalid]) label:hover input:checked:not([disabled]) + #ticker,\n :host(:not([pristine])[internals-invalid]) label:hover input:indeterminate:not([disabled]) + #ticker,\n :host(:not([pristine])[internals-invalid]) label:focus input:checked + #ticker,\n :host(:not([pristine])[internals-invalid]) label:focus input:indeterminate + #ticker {\n border: 1px solid var(--uui-color-invalid-standalone);\n }\n\n :host([disabled]) #ticker {\n background-color: var(--uui-color-disabled);\n }\n :host([disabled]) input:checked + #ticker {\n background-color: var(--uui-color-disabled);\n }\n :host([disabled]) input:indeterminate + #ticker {\n background-color: var(--uui-color-disabled);\n }\n :host([disabled]) #ticker::before {\n background-color: var(--uui-color-disabled);\n }\n :host([disabled]) #ticker #icon-check {\n color: var(--uui-color-disabled-contrast);\n }\n :host([disabled]) label:active #ticker {\n animation: ${UUIHorizontalShakeAnimationValue};\n }\n :host([disabled]) input:checked + #ticker #icon-check,\n :host([disabled]) input:indeterminate + #ticker #icon-check {\n color: var(--uui-color-disabled-contrast);\n }\n `,\n ];\n}\n"],"names":[],"mappings":";;;;AAQA,MAAM,QAAQ;AACd,MAAM,WAAW;AASV,MAAM,sBAAN,MAAM,4BAA2B,uBAAuB;AAAA,EAO7D,iBAAiB;AACf,WAAO;AAAA;AAAA,+BAEoB,KAAK,gBAAgB,WAAW,KAAK;AAAA;AAAA;AAAA,EAGlE;AAoLF;AA5LE,oBAAgB,iBAAiB;AAUjC,oBAAyB,SAAS;AAAA,EAChC,GAAG,uBAAuB;AAAA,EAC1B;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAuKiB,gCAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAzL9C,IAAM,qBAAN;"}

package/dist/components/color-slider/color-slider.element.js CHANGED Viewed

@@ -10,7 +10,7 @@ import { property } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { UUIColorSliderEvent } from "./UUIColorSliderEvent.js";
-import { parseColor, hslaToRgb } from "../../internal/utils/color.js";
+import { parseColor, hslaToRgb, hslaToHex } from "../../internal/utils/color.js";
 import { reverseNumberInRange, clamp } from "../../internal/utils/math.js";
 import { LabelMixin } from "../../internal/mixins/LabelMixin.js";
 import { drag } from "../../internal/utils/drag.js";
@@ -152,7 +152,12 @@ const _UUIColorSliderElement = class _UUIColorSliderElement extends LabelMixin("
         part="slider"
         id="color-slider"
         role="slider"
-        aria-label="${this.label}"
+        aria-label=${ifDefined(
+      this.getAttribute("aria-label") || this.label || void 0
+    )}
+        aria-labelledby=${ifDefined(
+      this.getAttribute("aria-labelledby") || void 0
+    )}
         aria-orientation="${this.vertical ? "vertical" : "horizontal"}"
         aria-valuemin="${Math.round(this.min)}"
         aria-valuemax="${Math.round(this.max)}"
@@ -169,7 +174,10 @@ const _UUIColorSliderElement = class _UUIColorSliderElement extends LabelMixin("
         <!-- <slot name="detail"> </slot> -->
         <span
           id="color-slider__handle"
-          style="--current-value: ${this.cssPropCurrentValue}%;"
+          style=${styleMap({
+      "--current-value": `${this.cssPropCurrentValue}%`,
+      backgroundColor: this.type === "hue" ? hslaToHex(Math.round(this.value), 100, 50) : void 0
+    })}
           tabindex=${ifDefined(this.disabled ? void 0 : "0")}>
         </span>
       </div>
@@ -283,7 +291,9 @@ _UUIColorSliderElement.styles = [
         height: var(--uui-slider-handle-size);
         background-color: white;
         border-radius: 50%;
+        border: solid 2px white;
         box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
+        box-sizing: border-box;
         margin-left: calc(var(--uui-slider-handle-size) / -2);
         left: var(--current-value, 0%);
       }

package/dist/components/color-slider/color-slider.element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"color-slider.element.js","sources":["../../../src/components/color-slider/color-slider.element.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport {\n drag,\n clamp,\n reverseNumberInRange,\n parseColor,\n hslaToRgb,\n} from '../../internal/utils/index.js';\n\nimport { UUIColorSliderEvent } from './UUIColorSliderEvent.js';\nimport { LabelMixin } from '../../internal/mixins/index.js';\n\nexport type UUIColorSliderOrientation = 'horizontal' \| 'vertical';\nexport type UUIColorSliderType = 'hue' \| 'opacity' \| 'saturation' \| 'lightness';\n\n/*\n @element uui-color-slider\n * @description A slider that is a part of uui-color-picker\n * @fires {UUIColorSliderEvent} change - Fires when the value of the slider changes.\n * @cssprop --uui-slider-height - The height of the slider.\n * @cssprop --uui-slider-handle-size - The size of the slider handle.\n * @cssprop --uui-slider-background-image - The background image of the slider.\n * @cssprop --uui-slider-background-size - The background size of the slider.\n * @cssprop --uui-slider-background-position - The background position of the slider.\n /\nexport class UUIColorSliderElement extends LabelMixin('label', LitElement) {\n /\n The type of the slider.\n * @type {UUIColorSliderType}\n * @attr\n * @default 'hue'\n /\n @property({ reflect: true }) type: UUIColorSliderType = 'hue';\n\n /\n The color value.\n * @type {string}\n * @attr\n * @default ''\n /\n @property() color: string = '';\n\n /\n This is a minimum value of the slider.\n * @type {number}\n * @attr\n * @default 0\n /\n @property({ type: Number }) min = 0;\n\n /\n This is a maximum value of the slider.\n * @type {number}\n * @attr\n * @default 100\n /\n @property({ type: Number }) max = 100;\n\n /\n The minimum increment value allowed by the slider.\n * @type {number}\n * @attr\n /\n @property({ type: Number }) precision = 1;\n\n /\n * Draws the slider in a vertical orientation.\n * @type {boolean}\n * @attr\n * @default false\n /\n @property({ type: Boolean, reflect: true }) vertical = false;\n\n /\n * The current value of the slider.\n * @type {number}\n * @attr\n * @default 0\n /\n @property({ type: Number }) value = 0;\n\n /\n Sets the color slider to readonly mode.\n * @type {boolean}\n * @attr\n * @default false\n /\n @property({ type: Boolean, reflect: true })\n readonly = false;\n\n /\n Sets the color slider to disabled.\n * @type {boolean}\n * @attr\n * @default false\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n * Hides the value label under the slider.\n * @type {boolean}\n * @attr 'hide-value-label'\n * @default false\n /\n @property({ type: Boolean, attribute: 'hide-value-label', reflect: true })\n hideValueLabel = false;\n\n private container!: HTMLElement;\n private handle!: HTMLElement;\n\n willUpdate(changedProperties: Map<string, any>) {\n if (changedProperties.has('type')) {\n const typeMaxValues: Record<string, number> = {\n hue: 360,\n saturation: 100,\n lightness: 100,\n opacity: 100,\n };\n this.max = typeMaxValues[this.type] ?? this.max;\n }\n\n if (\n (changedProperties.has('type') \|\| changedProperties.has('color')) &&\n this.color\n ) {\n this.#updateGradients();\n }\n }\n\n #updateGradients() {\n const parsed = parseColor(this.color);\n if (!parsed) return;\n const { h, s, l } = parsed;\n const { r, g, b } = hslaToRgb(h, s, l);\n const direction = this.vertical ? 'top' : 'right';\n\n const gradients: Record<string, string \| null> = {\n saturation: `linear-gradient(to ${direction}, hsl(${h} 0% ${l}%), hsl(${h} 100% ${l}%))`,\n lightness: `linear-gradient(to ${direction}, hsl(${h} ${s}% 0%), hsl(${h} ${s}% 100%))`,\n };\n\n const hueColor =\n this.type === 'opacity'\n ? `linear-gradient(to ${direction}, transparent 0%, rgb(${r} ${g} ${b}) 100%)`\n : null;\n\n this.style.setProperty(\n '--uui-slider-background-image',\n gradients[this.type] ?? null,\n );\n this.style.setProperty('--uui-slider-hue-color', hueColor);\n }\n\n firstUpdated() {\n this.container =\n this.shadowRoot!.querySelector<HTMLElement>('#color-slider')!;\n this.handle = this.container.querySelector<HTMLElement>(\n '#color-slider__handle',\n )!;\n }\n\n handleDrag(event: PointerEvent) {\n if (this.disabled \|\| this.readonly \|\| !this.container \|\| !this.handle)\n return;\n\n const { width, height } = this.container.getBoundingClientRect();\n\n this.handle.focus();\n event.preventDefault();\n drag(this.container, {\n onMove: (x, y) => {\n if (this.vertical) {\n this.value = reverseNumberInRange(\n clamp((y / height) this.max, this.min, this.max),\n this.min,\n this.max,\n );\n } else {\n this.value = clamp((x / width) * this.max, this.min, this.max);\n }\n\n this.syncValues();\n },\n initialEvent: event,\n });\n }\n\n handleClick(event: MouseEvent) {\n if (this.disabled \|\| this.readonly) return;\n\n this.value = this.getValueFromMousePosition(event);\n this.syncValues();\n }\n\n handleKeyDown(event: KeyboardEvent) {\n const increment = event.shiftKey ? 10 : 1;\n\n if (event.key === 'ArrowLeft' \|\| event.key === 'ArrowDown') {\n event.preventDefault();\n this.value = clamp(this.value - increment, this.min, this.max);\n this.syncValues();\n } else if (event.key === 'ArrowRight' \|\| event.key === 'ArrowUp') {\n event.preventDefault();\n this.value = clamp(this.value + increment, this.min, this.max);\n this.syncValues();\n } else if (event.key === 'Home') {\n event.preventDefault();\n this.value = this.min;\n this.syncValues();\n } else if (event.key === 'End') {\n event.preventDefault();\n this.value = this.max;\n this.syncValues();\n }\n }\n\n getValueFromMousePosition(event: MouseEvent) {\n if (this.vertical) {\n return this.getValueFromYCoordinate(event.clientY);\n }\n return this.getValueFromXCoordinate(event.clientX);\n }\n\n getValueFromTouchPosition(event: TouchEvent) {\n if (this.vertical) {\n return this.getValueFromYCoordinate(event.touches[0].clientY);\n }\n return this.getValueFromXCoordinate(event.touches[0].clientX);\n }\n\n getValueFromXCoordinate(coordinate: number) {\n const { left, width } = this.container.getBoundingClientRect();\n return clamp(\n this.roundToPrecision(((coordinate - left) / width) * this.max),\n this.min,\n this.max,\n );\n }\n\n getValueFromYCoordinate(coordinate: number) {\n const { top, height } = this.container.getBoundingClientRect();\n return clamp(\n this.roundToPrecision(((coordinate - top) / height) * this.max),\n this.min,\n this.max,\n );\n }\n\n roundToPrecision(numberToRound: number) {\n const multiplier = 1 / this.precision;\n return Math.ceil(numberToRound * multiplier) / multiplier;\n }\n\n syncValues() {\n this.dispatchEvent(new UUIColorSliderEvent(UUIColorSliderEvent.CHANGE));\n }\n\n get cssPropCurrentValue() {\n if (this.value === 0) {\n return this.vertical ? 100 : 0;\n }\n const ratio = this.vertical\n ? this.max / reverseNumberInRange(this.value, this.min, this.max)\n : this.max / this.value;\n return 100 / ratio;\n }\n\n render() {\n return html`<div\n part=\"slider\"\n id=\"color-slider\"\n role=\"slider\"\n aria-label=\"${this.label}\"\n aria-orientation=\"${this.vertical ? 'vertical' : 'horizontal'}\"\n aria-valuemin=\"${Math.round(this.min)}\"\n aria-valuemax=\"${Math.round(this.max)}\"\n aria-valuenow=\"${Math.round(this.value)}\"\n @click=${this.handleClick}\n @mousedown=${this.handleDrag}\n @touchstart=${this.handleDrag}\n @keydown=${this.handleKeyDown}>\n ${this.type === 'opacity'\n ? html`<div\n id=\"current-hue\"\n style=${styleMap({\n backgroundImage: `var(--uui-slider-hue-color)`,\n })}></div>`\n : ''}\n <!-- <slot name=\"detail\"> </slot> -->\n <span\n id=\"color-slider__handle\"\n style=\"--current-value: ${this.cssPropCurrentValue}%;\"\n tabindex=${ifDefined(this.disabled ? undefined : '0')}>\n </span>\n </div>\n ${this.hideValueLabel ? null : Math.round(this.value)}`;\n }\n\n static override readonly styles = [\n css`\n :host {\n --uui-slider-height: 15px;\n --uui-slider-handle-size: 17px;\n --uui-slider-background-image: #fff;\n --uui-slider-background-size: 100%;\n --uui-slider-background-position: top left;\n display: block;\n }\n\n :host([type='hue']) {\n --uui-slider-background-image: linear-gradient(\n to right,\n rgb(255, 0, 0) 0%,\n rgb(255, 255, 0) 17%,\n rgb(0, 255, 0) 33%,\n rgb(0, 255, 255) 50%,\n rgb(0, 0, 255) 67%,\n rgb(255, 0, 255) 83%,\n rgb(255, 0, 0) 100%\n );\n }\n\n :host([vertical][type='hue']) {\n --uui-slider-background-image: linear-gradient(\n to top,\n rgb(255, 0, 0) 0%,\n rgb(255, 255, 0) 17%,\n rgb(0, 255, 0) 33%,\n rgb(0, 255, 255) 50%,\n rgb(0, 0, 255) 67%,\n rgb(255, 0, 255) 83%,\n rgb(255, 0, 0) 100%\n );\n }\n\n :host([type='opacity']) {\n --uui-slider-background-image:\n linear-gradient(45deg, var(--uui-palette-grey) 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, var(--uui-palette-grey) 75%),\n linear-gradient(45deg, transparent 75%, var(--uui-palette-grey) 75%),\n linear-gradient(45deg, var(--uui-palette-grey) 25%, transparent 25%);\n\n --uui-slider-background-size: 10px 10px;\n --uui-slider-background-position: 0 0, 0 0, -5px -5px, 5px 5px;\n }\n\n #color-slider {\n position: relative;\n background-image: var(--uui-slider-background-image);\n background-size: var(--uui-slider-background-size);\n background-position: var(--uui-slider-background-position);\n border-radius: var(--uui-border-radius);\n box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);\n width: 100%;\n height: var(--uui-slider-height);\n }\n\n :host([vertical]) #color-slider {\n width: var(--uui-slider-height);\n height: 300px;\n }\n\n :host([disabled]) {\n cursor: not-allowed;\n }\n\n :host([disabled]) #color-slider {\n user-select: none;\n pointer-events: none;\n opacity: 0.55;\n }\n\n :host([readonly]) {\n cursor: default;\n }\n\n :host([readonly]) #color-slider {\n pointer-events: none;\n }\n\n #color-slider__handle {\n position: absolute;\n top: calc(50% - var(--uui-slider-handle-size) / 2);\n width: var(--uui-slider-handle-size);\n height: var(--uui-slider-handle-size);\n background-color: white;\n border-radius: 50%;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);\n margin-left: calc(var(--uui-slider-handle-size) / -2);\n left: var(--current-value, 0%);\n }\n\n :host([vertical]) #color-slider__handle {\n left: unset;\n top: var(--current-value, 100%);\n margin-left: -1px;\n margin-top: calc(var(--uui-slider-handle-size) / -2);\n }\n\n ::slotted(*:first-child) {\n border-radius: 3px;\n position: absolute;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n }\n\n #current-hue {\n border-radius: var(--uui-border-radius);\n position: absolute;\n inset: 0 0 0 0;\n }\n `,\n ];\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"color-slider.element.js","sources":["../../../src/components/color-slider/color-slider.element.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport {\n drag,\n clamp,\n reverseNumberInRange,\n parseColor,\n hslaToRgb,\n hslaToHex,\n} from '../../internal/utils/index.js';\n\nimport { UUIColorSliderEvent } from './UUIColorSliderEvent.js';\nimport { LabelMixin } from '../../internal/mixins/index.js';\n\nexport type UUIColorSliderOrientation = 'horizontal' \| 'vertical';\nexport type UUIColorSliderType = 'hue' \| 'opacity' \| 'saturation' \| 'lightness';\n\n/*\n @element uui-color-slider\n * @description A slider that is a part of uui-color-picker\n * @fires {UUIColorSliderEvent} change - Fires when the value of the slider changes.\n * @cssprop --uui-slider-height - The height of the slider.\n * @cssprop --uui-slider-handle-size - The size of the slider handle.\n * @cssprop --uui-slider-background-image - The background image of the slider.\n * @cssprop --uui-slider-background-size - The background size of the slider.\n * @cssprop --uui-slider-background-position - The background position of the slider.\n /\nexport class UUIColorSliderElement extends LabelMixin('label', LitElement) {\n /\n The type of the slider.\n * @type {UUIColorSliderType}\n * @attr\n * @default 'hue'\n /\n @property({ reflect: true }) type: UUIColorSliderType = 'hue';\n\n /\n The color value.\n * @type {string}\n * @attr\n * @default ''\n /\n @property() color: string = '';\n\n /\n This is a minimum value of the slider.\n * @type {number}\n * @attr\n * @default 0\n /\n @property({ type: Number }) min = 0;\n\n /\n This is a maximum value of the slider.\n * @type {number}\n * @attr\n * @default 100\n /\n @property({ type: Number }) max = 100;\n\n /\n The minimum increment value allowed by the slider.\n * @type {number}\n * @attr\n /\n @property({ type: Number }) precision = 1;\n\n /\n * Draws the slider in a vertical orientation.\n * @type {boolean}\n * @attr\n * @default false\n /\n @property({ type: Boolean, reflect: true }) vertical = false;\n\n /\n * The current value of the slider.\n * @type {number}\n * @attr\n * @default 0\n /\n @property({ type: Number }) value = 0;\n\n /\n Sets the color slider to readonly mode.\n * @type {boolean}\n * @attr\n * @default false\n /\n @property({ type: Boolean, reflect: true })\n readonly = false;\n\n /\n Sets the color slider to disabled.\n * @type {boolean}\n * @attr\n * @default false\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n * Hides the value label under the slider.\n * @type {boolean}\n * @attr 'hide-value-label'\n * @default false\n /\n @property({ type: Boolean, attribute: 'hide-value-label', reflect: true })\n hideValueLabel = false;\n\n private container!: HTMLElement;\n private handle!: HTMLElement;\n\n willUpdate(changedProperties: Map<string, any>) {\n if (changedProperties.has('type')) {\n const typeMaxValues: Record<string, number> = {\n hue: 360,\n saturation: 100,\n lightness: 100,\n opacity: 100,\n };\n this.max = typeMaxValues[this.type] ?? this.max;\n }\n\n if (\n (changedProperties.has('type') \|\| changedProperties.has('color')) &&\n this.color\n ) {\n this.#updateGradients();\n }\n }\n\n #updateGradients() {\n const parsed = parseColor(this.color);\n if (!parsed) return;\n const { h, s, l } = parsed;\n const { r, g, b } = hslaToRgb(h, s, l);\n const direction = this.vertical ? 'top' : 'right';\n\n const gradients: Record<string, string \| null> = {\n saturation: `linear-gradient(to ${direction}, hsl(${h} 0% ${l}%), hsl(${h} 100% ${l}%))`,\n lightness: `linear-gradient(to ${direction}, hsl(${h} ${s}% 0%), hsl(${h} ${s}% 100%))`,\n };\n\n const hueColor =\n this.type === 'opacity'\n ? `linear-gradient(to ${direction}, transparent 0%, rgb(${r} ${g} ${b}) 100%)`\n : null;\n\n this.style.setProperty(\n '--uui-slider-background-image',\n gradients[this.type] ?? null,\n );\n this.style.setProperty('--uui-slider-hue-color', hueColor);\n }\n\n firstUpdated() {\n this.container =\n this.shadowRoot!.querySelector<HTMLElement>('#color-slider')!;\n this.handle = this.container.querySelector<HTMLElement>(\n '#color-slider__handle',\n )!;\n }\n\n handleDrag(event: PointerEvent) {\n if (this.disabled \|\| this.readonly \|\| !this.container \|\| !this.handle)\n return;\n\n const { width, height } = this.container.getBoundingClientRect();\n\n this.handle.focus();\n event.preventDefault();\n drag(this.container, {\n onMove: (x, y) => {\n if (this.vertical) {\n this.value = reverseNumberInRange(\n clamp((y / height) this.max, this.min, this.max),\n this.min,\n this.max,\n );\n } else {\n this.value = clamp((x / width) * this.max, this.min, this.max);\n }\n\n this.syncValues();\n },\n initialEvent: event,\n });\n }\n\n handleClick(event: MouseEvent) {\n if (this.disabled \|\| this.readonly) return;\n\n this.value = this.getValueFromMousePosition(event);\n this.syncValues();\n }\n\n handleKeyDown(event: KeyboardEvent) {\n const increment = event.shiftKey ? 10 : 1;\n\n if (event.key === 'ArrowLeft' \|\| event.key === 'ArrowDown') {\n event.preventDefault();\n this.value = clamp(this.value - increment, this.min, this.max);\n this.syncValues();\n } else if (event.key === 'ArrowRight' \|\| event.key === 'ArrowUp') {\n event.preventDefault();\n this.value = clamp(this.value + increment, this.min, this.max);\n this.syncValues();\n } else if (event.key === 'Home') {\n event.preventDefault();\n this.value = this.min;\n this.syncValues();\n } else if (event.key === 'End') {\n event.preventDefault();\n this.value = this.max;\n this.syncValues();\n }\n }\n\n getValueFromMousePosition(event: MouseEvent) {\n if (this.vertical) {\n return this.getValueFromYCoordinate(event.clientY);\n }\n return this.getValueFromXCoordinate(event.clientX);\n }\n\n getValueFromTouchPosition(event: TouchEvent) {\n if (this.vertical) {\n return this.getValueFromYCoordinate(event.touches[0].clientY);\n }\n return this.getValueFromXCoordinate(event.touches[0].clientX);\n }\n\n getValueFromXCoordinate(coordinate: number) {\n const { left, width } = this.container.getBoundingClientRect();\n return clamp(\n this.roundToPrecision(((coordinate - left) / width) * this.max),\n this.min,\n this.max,\n );\n }\n\n getValueFromYCoordinate(coordinate: number) {\n const { top, height } = this.container.getBoundingClientRect();\n return clamp(\n this.roundToPrecision(((coordinate - top) / height) * this.max),\n this.min,\n this.max,\n );\n }\n\n roundToPrecision(numberToRound: number) {\n const multiplier = 1 / this.precision;\n return Math.ceil(numberToRound * multiplier) / multiplier;\n }\n\n syncValues() {\n this.dispatchEvent(new UUIColorSliderEvent(UUIColorSliderEvent.CHANGE));\n }\n\n get cssPropCurrentValue() {\n if (this.value === 0) {\n return this.vertical ? 100 : 0;\n }\n const ratio = this.vertical\n ? this.max / reverseNumberInRange(this.value, this.min, this.max)\n : this.max / this.value;\n return 100 / ratio;\n }\n\n render() {\n return html`<div\n part=\"slider\"\n id=\"color-slider\"\n role=\"slider\"\n aria-label=${ifDefined(\n this.getAttribute('aria-label') \|\| this.label \|\| undefined,\n )}\n aria-labelledby=${ifDefined(\n this.getAttribute('aria-labelledby') \|\| undefined,\n )}\n aria-orientation=\"${this.vertical ? 'vertical' : 'horizontal'}\"\n aria-valuemin=\"${Math.round(this.min)}\"\n aria-valuemax=\"${Math.round(this.max)}\"\n aria-valuenow=\"${Math.round(this.value)}\"\n @click=${this.handleClick}\n @mousedown=${this.handleDrag}\n @touchstart=${this.handleDrag}\n @keydown=${this.handleKeyDown}>\n ${this.type === 'opacity'\n ? html`<div\n id=\"current-hue\"\n style=${styleMap({\n backgroundImage: `var(--uui-slider-hue-color)`,\n })}></div>`\n : ''}\n <!-- <slot name=\"detail\"> </slot> -->\n <span\n id=\"color-slider__handle\"\n style=${styleMap({\n '--current-value': `${this.cssPropCurrentValue}%`,\n backgroundColor:\n this.type === 'hue'\n ? hslaToHex(Math.round(this.value), 100, 50)\n : undefined,\n })}\n tabindex=${ifDefined(this.disabled ? undefined : '0')}>\n </span>\n </div>\n ${this.hideValueLabel ? null : Math.round(this.value)}`;\n }\n\n static override readonly styles = [\n css`\n :host {\n --uui-slider-height: 15px;\n --uui-slider-handle-size: 17px;\n --uui-slider-background-image: #fff;\n --uui-slider-background-size: 100%;\n --uui-slider-background-position: top left;\n display: block;\n }\n\n :host([type='hue']) {\n --uui-slider-background-image: linear-gradient(\n to right,\n rgb(255, 0, 0) 0%,\n rgb(255, 255, 0) 17%,\n rgb(0, 255, 0) 33%,\n rgb(0, 255, 255) 50%,\n rgb(0, 0, 255) 67%,\n rgb(255, 0, 255) 83%,\n rgb(255, 0, 0) 100%\n );\n }\n\n :host([vertical][type='hue']) {\n --uui-slider-background-image: linear-gradient(\n to top,\n rgb(255, 0, 0) 0%,\n rgb(255, 255, 0) 17%,\n rgb(0, 255, 0) 33%,\n rgb(0, 255, 255) 50%,\n rgb(0, 0, 255) 67%,\n rgb(255, 0, 255) 83%,\n rgb(255, 0, 0) 100%\n );\n }\n\n :host([type='opacity']) {\n --uui-slider-background-image:\n linear-gradient(45deg, var(--uui-palette-grey) 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, var(--uui-palette-grey) 75%),\n linear-gradient(45deg, transparent 75%, var(--uui-palette-grey) 75%),\n linear-gradient(45deg, var(--uui-palette-grey) 25%, transparent 25%);\n\n --uui-slider-background-size: 10px 10px;\n --uui-slider-background-position: 0 0, 0 0, -5px -5px, 5px 5px;\n }\n\n #color-slider {\n position: relative;\n background-image: var(--uui-slider-background-image);\n background-size: var(--uui-slider-background-size);\n background-position: var(--uui-slider-background-position);\n border-radius: var(--uui-border-radius);\n box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);\n width: 100%;\n height: var(--uui-slider-height);\n }\n\n :host([vertical]) #color-slider {\n width: var(--uui-slider-height);\n height: 300px;\n }\n\n :host([disabled]) {\n cursor: not-allowed;\n }\n\n :host([disabled]) #color-slider {\n user-select: none;\n pointer-events: none;\n opacity: 0.55;\n }\n\n :host([readonly]) {\n cursor: default;\n }\n\n :host([readonly]) #color-slider {\n pointer-events: none;\n }\n\n #color-slider__handle {\n position: absolute;\n top: calc(50% - var(--uui-slider-handle-size) / 2);\n width: var(--uui-slider-handle-size);\n height: var(--uui-slider-handle-size);\n background-color: white;\n border-radius: 50%;\n border: solid 2px white;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);\n box-sizing: border-box;\n margin-left: calc(var(--uui-slider-handle-size) / -2);\n left: var(--current-value, 0%);\n }\n\n :host([vertical]) #color-slider__handle {\n left: unset;\n top: var(--current-value, 100%);\n margin-left: -1px;\n margin-top: calc(var(--uui-slider-handle-size) / -2);\n }\n\n ::slotted(*:first-child) {\n border-radius: 3px;\n position: absolute;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n }\n\n #current-hue {\n border-radius: var(--uui-border-radius);\n position: absolute;\n inset: 0 0 0 0;\n }\n `,\n ];\n}\n"],"names":[],"mappings":"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"}

package/dist/components/color-swatch/color-swatch.element.js CHANGED Viewed

@@ -12,10 +12,42 @@ import { html, nothing, css, LitElement } from "lit";
 import { ref } from "lit/directives/ref.js";
 import { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
+import "../icon-registry-essential/svgs/iconAdd.js";
+import "../icon-registry-essential/svgs/iconAlert.js";
+import "../icon-registry-essential/svgs/iconAttachment.js";
+import "../icon-registry-essential/svgs/iconCalendar.js";
+import { iconCheck } from "../icon-registry-essential/svgs/iconCheck.js";
+import "../icon-registry-essential/svgs/iconClipboard.js";
+import "../icon-registry-essential/svgs/iconCode.js";
+import "../icon-registry-essential/svgs/iconColorPicker.js";
+import "../icon-registry-essential/svgs/iconCopy.js";
+import "../icon-registry-essential/svgs/iconDelete.js";
+import "../icon-registry-essential/svgs/iconDocument.js";
+import "../icon-registry-essential/svgs/iconDownload.js";
+import "../icon-registry-essential/svgs/iconDrag.js";
+import "../icon-registry-essential/svgs/iconEdit.js";
+import "../icon-registry-essential/svgs/iconFavorite.js";
+import "../icon-registry-essential/svgs/iconFolder.js";
+import "../icon-registry-essential/svgs/iconForbidden.js";
+import "../icon-registry-essential/svgs/iconInfo.js";
+import "../icon-registry-essential/svgs/iconLink.js";
+import "../icon-registry-essential/svgs/iconLock.js";
+import "../icon-registry-essential/svgs/iconPause.js";
+import "../icon-registry-essential/svgs/iconPicture.js";
+import "../icon-registry-essential/svgs/iconPlay.js";
+import "../icon-registry-essential/svgs/iconRemove.js";
+import "../icon-registry-essential/svgs/iconSearch.js";
+import "../icon-registry-essential/svgs/iconSee.js";
+import "../icon-registry-essential/svgs/iconSettings.js";
+import "../icon-registry-essential/svgs/iconSubtract.js";
+import "../icon-registry-essential/svgs/iconSync.js";
+import "../icon-registry-essential/svgs/iconUnlock.js";
+import "../icon-registry-essential/svgs/iconUnsee.js";
+import "../icon-registry-essential/svgs/iconWand.js";
+import "../icon-registry-essential/svgs/iconWrong.js";
 import { ActiveMixin } from "../../internal/mixins/ActiveMixin.js";
 import { LabelMixin } from "../../internal/mixins/LabelMixin.js";
 import { SelectableMixin } from "../../internal/mixins/SelectableMixin.js";
-import { iconCheck } from "../icon-registry-essential/svgs/iconCheck.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {

package/dist/components/color-swatch/color-swatch.element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"color-swatch.element.js","sources":["../../../src/components/color-swatch/color-swatch.element.ts"],"sourcesContent":["import { property, state } from 'lit/decorators.js';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { ref } from 'lit/directives/ref.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { iconCheck } from '../icon-registry-essential/svgs/index.js';\nimport {\n ActiveMixin,\n LabelMixin,\n SelectableMixin,\n} from '../../internal/mixins/index.js';\n\n/*\n Color swatch, can have label and be selectable, disabled or readonly.\n \n @element uui-color-swatch\n * @cssprop --uui-swatch-size - The size of the swatch.\n * @cssprop --uui-swatch-border-width - The width of the border.\n * @cssprop --uui-swatch-color - The width of the border.\n * @slot label - Default slot for the label.\n /\nexport class UUIColorSwatchElement extends LabelMixin(\n 'label',\n SelectableMixin(ActiveMixin(LitElement)),\n) {\n @state()\n private _contrast: 'dark' \| 'light' \| undefined = undefined;\n\n /\n Value of the swatch. This will become the color value if color is left undefined, see the property `color` for more details.\n /\n @property()\n get value(): string {\n return this._value ?? '';\n }\n set value(newValue: string) {\n const oldValue = this._value;\n this._value = newValue;\n this.requestUpdate('value', oldValue);\n }\n private _value?: string;\n\n /\n Color of the swatch. Should be a valid hex, hexa, rgb, rgba, hsl or hsla string. Should fulfill this [css spec](https://www.w3.org/TR/css-color-4/#color-type). If not provided element will look at its text content.\n /\n @property()\n get color(): string \| undefined {\n return this._color;\n }\n set color(newValue: string) {\n const oldValue = this._color;\n this._color = newValue;\n this.requestUpdate('color', oldValue);\n }\n private _color?: string;\n\n /\n Sets the swatch to disabled.\n * @type {boolean}\n * @attr\n * @default false\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n Sets the swatch to readonly mode.\n * @type {boolean}\n * @attr\n * @default false\n /\n @property({ type: Boolean, reflect: true })\n readonly: boolean = false;\n\n /\n When true shows element label below the color checkbox\n \n @attr\n * @memberof UUIColorSwatchElement\n /\n @property({ type: Boolean, attribute: 'show-label', reflect: true })\n showLabel = false;\n\n constructor() {\n super();\n this.addEventListener('click', this._setAriaAttributes);\n }\n\n private _setAriaAttributes() {\n if (this.selectable)\n this.setAttribute('aria-checked', this.selected.toString());\n }\n\n firstUpdated() {\n this._setAriaAttributes();\n }\n\n willUpdate(changedProperties: Map<string, any>) {\n if (\n changedProperties.has('disabled') \|\|\n changedProperties.has('readonly')\n ) {\n if (this.selectable) {\n this.selectable = !this.disabled && !this.readonly;\n this.deselectable = !this.disabled && !this.readonly;\n }\n }\n if (\n changedProperties.has('selectable') \|\|\n changedProperties.has('selected')\n ) {\n this._setAriaAttributes();\n }\n if (changedProperties.has('value') \|\| changedProperties.has('color')) {\n this.#computeContrast();\n }\n }\n\n #computeContrast() {\n const color = this.color ?? this.value;\n if (color.startsWith('#')) {\n this._contrast = this.#contrast(color) === 'light' ? 'light' : 'dark';\n } else if (color.startsWith('rgb')) {\n const [r, g, b, a] = color.match(/[.\\d]+/g)?.map(Number) ?? [0, 0, 0];\n if (a <= 0.5) {\n this._contrast = 'light';\n } else {\n this._contrast =\n this.#contrast(this.#rgbToHex(r, g, b)) === 'light'\n ? 'light'\n : 'dark';\n }\n } else {\n this._contrast = undefined;\n }\n }\n\n focus(options?: FocusOptions \| undefined): void {\n (this.selectableTarget as HTMLElement \| undefined)?.focus(options);\n }\n\n #selectButtonChanged(button?: Element \| undefined) {\n this.selectableTarget = button \|\| this;\n }\n\n #contrast(hex: string): string {\n const rgb = this.#hexToRgb(hex);\n const o = Math.round((rgb[0] 299 + rgb[1] * 587 + rgb[2] * 114) / 1000);\n\n return o <= 180 ? 'dark' : 'light';\n }\n\n #hexToRgb(hex: string): number[] {\n hex = hex.startsWith('#') ? hex.slice(1) : hex;\n if (hex.length === 3) {\n hex = Array.from(hex).reduce((str, x) => str + x + x, ''); // 123 -> 112233\n }\n\n const bigint = Number.parseInt(hex, 16);\n const r = (bigint >> 16) & 255;\n const g = (bigint >> 8) & 255;\n const b = bigint & 255;\n\n return [r, g, b];\n }\n\n readonly #rgbToHex = (\n r: number,\n g: number,\n b: number,\n hash: '#' \| '' = '',\n ): string => hash + ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0');\n\n render() {\n const classes = {\n [`color-swatch--${this._contrast}`]: this._contrast !== undefined,\n };\n const colorStr = `var(--uui-swatch-color, ${this.color ?? this.value})`;\n return html`\n <button\n id=\"swatch\"\n ${ref(this.#selectButtonChanged)}\n aria-label=${this.label}\n ?disabled=\"${this.disabled}\"\n title=\"${this.label}\">\n <div\n class=\"color-swatch color-swatch--transparent-bg ${classMap(\n classes,\n )}\">\n <div\n class=\"color-swatch__color\"\n style=${styleMap({ background: colorStr })}></div>\n <div\n class=\"color-swatch__check\"\n style=${styleMap({ color: colorStr })}>\n ${iconCheck}\n </div>\n </div>\n ${this._renderWithLabel()}\n </button>\n `;\n }\n\n private _renderWithLabel() {\n if (!this.showLabel) return nothing;\n return html`<div class=\"color-swatch__label\">\n <strong>${this.renderLabel()}</strong>\n ${this.value}\n </div>`;\n }\n\n static override readonly styles = [\n css`\n :host {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n transition: box-shadow 100ms ease-out;\n flex-direction: column;\n }\n\n :host(),\n {\n /* TODO: implement globally shared outline style /\n outline-color: var(--uui-color-focus);\n outline-offset: 4px;\n }\n\n :host(:focus-within:not([disabled])) {\n outline: none;\n }\n\n :host(:focus:not([disabled])) #swatch {\n outline-color: var(--uui-color-focus);\n outline-width: var(--uui-swatch-border-width, 1px);\n outline-style: solid;\n outline-offset: var(--uui-swatch-border-width, 1px);\n }\n\n :host([selectable]) #swatch {\n cursor: pointer;\n }\n\n :host([disabled]) {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n :host([readonly]) {\n cursor: default;\n }\n\n #swatch {\n cursor: inherit;\n outline: none;\n background: none;\n border: none;\n padding: 0;\n margin: 0;\n text-align: left;\n border: 1px solid #ccc;\n border-radius: var(--uui-size-4);\n }\n\n :host(:not([selectable])) #swatch:focus {\n outline: none;\n }\n\n :host([selectable]) #swatch::after {\n content: '';\n position: absolute;\n pointer-events: none;\n inset: calc(var(--uui-swatch-border-width, 1px) -1);\n width: calc(100% + calc(var(--uui-swatch-border-width, 1px) * 2));\n height: calc(100% + calc(var(--uui-swatch-border-width, 1px) * 2));\n box-sizing: border-box;\n border: var(--uui-swatch-border-width, 2px) solid\n var(--uui-color-selected);\n border-radius: calc(\n var(--uui-border-radius) + var(--uui-swatch-border-width, 1px)\n );\n transition: opacity 100ms ease-out;\n opacity: 0;\n }\n :host([selectable]:not([disabled]):hover) #swatch::after {\n opacity: 0.33;\n }\n :host([selectable][selected]:not([disabled]):hover) #swatch::after {\n opacity: 0.66;\n }\n :host([selectable][selected]:not([disabled])) #swatch::after {\n opacity: 1;\n }\n\n .color-swatch {\n position: relative;\n width: var(--uui-swatch-size, 25px);\n height: var(--uui-swatch-size, 25px);\n border-radius: inherit;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin: 2px;\n }\n\n :host([show-label]) .color-swatch {\n width: 120px;\n height: 50px;\n }\n\n .color-swatch.color-swatch--transparent-bg {\n background-image:\n linear-gradient(45deg, var(--uui-palette-grey) 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, var(--uui-palette-grey) 75%),\n linear-gradient(45deg, transparent 75%, var(--uui-palette-grey) 75%),\n linear-gradient(45deg, var(--uui-palette-grey) 25%, transparent 25%);\n background-size: 10px 10px;\n background-position:\n 0 0,\n 0 0,\n -5px -5px,\n 5px 5px;\n }\n .color-swatch__color {\n width: 100%;\n height: 100%;\n border: 1px solid rgba(0, 0, 0, 0.125);\n border-radius: inherit;\n box-sizing: border-box;\n }\n\n :host([show-label]) .color-swatch__color {\n border-radius: 3px 3px 0 0;\n }\n\n .color-swatch__check {\n position: absolute;\n vertical-align: middle;\n width: calc(var(--uui-swatch-size, 25px) / 2);\n height: calc(var(--uui-swatch-size, 25px) / 2);\n line-height: 0;\n filter: invert(1) grayscale(1) contrast(9);\n pointer-events: none;\n opacity: 0;\n border-radius: inherit;\n }\n\n .color-swatch.color-swatch--light .color-swatch__check {\n color: #000 !important;\n filter: none;\n }\n\n .color-swatch.color-swatch--dark .color-swatch__check {\n color: #fff !important;\n filter: none;\n }\n\n :host([selected]) .color-swatch__check {\n opacity: 1;\n }\n\n slot[name='label']::slotted(*),\n .label {\n font-size: var(--uui-size-4);\n }\n\n .color-swatch__label {\n max-width: 120px;\n box-sizing: border-box;\n padding: var(--uui-size-space-1) var(--uui-size-space-2);\n line-height: 1.5;\n display: flex;\n flex-direction: column;\n background: white;\n border: 1px solid var(--uui-color-border);\n border-radius: 0 0 3px 3px;\n font-size: var(--uui-size-4, 12px);\n }\n\n .color-swatch__label strong {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n box-sizing: border-box;\n }\n `,\n ];\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"color-swatch.element.js","sources":["../../../src/components/color-swatch/color-swatch.element.ts"],"sourcesContent":["import { property, state } from 'lit/decorators.js';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { ref } from 'lit/directives/ref.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { iconCheck } from '../icon-registry-essential/svgs/index.js';\nimport {\n ActiveMixin,\n LabelMixin,\n SelectableMixin,\n} from '../../internal/mixins/index.js';\n\n/*\n Color swatch, can have label and be selectable, disabled or readonly.\n \n @element uui-color-swatch\n * @cssprop --uui-swatch-size - The size of the swatch.\n * @cssprop --uui-swatch-border-width - The width of the border.\n * @cssprop --uui-swatch-color - The width of the border.\n * @slot label - Default slot for the label.\n /\nexport class UUIColorSwatchElement extends LabelMixin(\n 'label',\n SelectableMixin(ActiveMixin(LitElement)),\n) {\n @state()\n private _contrast: 'dark' \| 'light' \| undefined = undefined;\n\n /\n Value of the swatch. This will become the color value if color is left undefined, see the property `color` for more details.\n /\n @property()\n get value(): string {\n return this._value ?? '';\n }\n set value(newValue: string) {\n const oldValue = this._value;\n this._value = newValue;\n this.requestUpdate('value', oldValue);\n }\n private _value?: string;\n\n /\n Color of the swatch. Should be a valid hex, hexa, rgb, rgba, hsl or hsla string. Should fulfill this [css spec](https://www.w3.org/TR/css-color-4/#color-type). If not provided element will look at its text content.\n /\n @property()\n get color(): string \| undefined {\n return this._color;\n }\n set color(newValue: string) {\n const oldValue = this._color;\n this._color = newValue;\n this.requestUpdate('color', oldValue);\n }\n private _color?: string;\n\n /\n Sets the swatch to disabled.\n * @type {boolean}\n * @attr\n * @default false\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n Sets the swatch to readonly mode.\n * @type {boolean}\n * @attr\n * @default false\n /\n @property({ type: Boolean, reflect: true })\n readonly: boolean = false;\n\n /\n When true shows element label below the color checkbox\n \n @attr\n * @memberof UUIColorSwatchElement\n /\n @property({ type: Boolean, attribute: 'show-label', reflect: true })\n showLabel = false;\n\n constructor() {\n super();\n this.addEventListener('click', this._setAriaAttributes);\n }\n\n private _setAriaAttributes() {\n if (this.selectable)\n this.setAttribute('aria-checked', this.selected.toString());\n }\n\n firstUpdated() {\n this._setAriaAttributes();\n }\n\n willUpdate(changedProperties: Map<string, any>) {\n if (\n changedProperties.has('disabled') \|\|\n changedProperties.has('readonly')\n ) {\n if (this.selectable) {\n this.selectable = !this.disabled && !this.readonly;\n this.deselectable = !this.disabled && !this.readonly;\n }\n }\n if (\n changedProperties.has('selectable') \|\|\n changedProperties.has('selected')\n ) {\n this._setAriaAttributes();\n }\n if (changedProperties.has('value') \|\| changedProperties.has('color')) {\n this.#computeContrast();\n }\n }\n\n #computeContrast() {\n const color = this.color ?? this.value;\n if (color.startsWith('#')) {\n this._contrast = this.#contrast(color) === 'light' ? 'light' : 'dark';\n } else if (color.startsWith('rgb')) {\n const [r, g, b, a] = color.match(/[.\\d]+/g)?.map(Number) ?? [0, 0, 0];\n if (a <= 0.5) {\n this._contrast = 'light';\n } else {\n this._contrast =\n this.#contrast(this.#rgbToHex(r, g, b)) === 'light'\n ? 'light'\n : 'dark';\n }\n } else {\n this._contrast = undefined;\n }\n }\n\n focus(options?: FocusOptions \| undefined): void {\n (this.selectableTarget as HTMLElement \| undefined)?.focus(options);\n }\n\n #selectButtonChanged(button?: Element \| undefined) {\n this.selectableTarget = button \|\| this;\n }\n\n #contrast(hex: string): string {\n const rgb = this.#hexToRgb(hex);\n const o = Math.round((rgb[0] 299 + rgb[1] * 587 + rgb[2] * 114) / 1000);\n\n return o <= 180 ? 'dark' : 'light';\n }\n\n #hexToRgb(hex: string): number[] {\n hex = hex.startsWith('#') ? hex.slice(1) : hex;\n if (hex.length === 3) {\n hex = Array.from(hex).reduce((str, x) => str + x + x, ''); // 123 -> 112233\n }\n\n const bigint = Number.parseInt(hex, 16);\n const r = (bigint >> 16) & 255;\n const g = (bigint >> 8) & 255;\n const b = bigint & 255;\n\n return [r, g, b];\n }\n\n readonly #rgbToHex = (\n r: number,\n g: number,\n b: number,\n hash: '#' \| '' = '',\n ): string => hash + ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0');\n\n render() {\n const classes = {\n [`color-swatch--${this._contrast}`]: this._contrast !== undefined,\n };\n const colorStr = `var(--uui-swatch-color, ${this.color ?? this.value})`;\n return html`\n <button\n id=\"swatch\"\n ${ref(this.#selectButtonChanged)}\n aria-label=${this.label}\n ?disabled=\"${this.disabled}\"\n title=\"${this.label}\">\n <div\n class=\"color-swatch color-swatch--transparent-bg ${classMap(\n classes,\n )}\">\n <div\n class=\"color-swatch__color\"\n style=${styleMap({ background: colorStr })}></div>\n <div\n class=\"color-swatch__check\"\n style=${styleMap({ color: colorStr })}>\n ${iconCheck}\n </div>\n </div>\n ${this._renderWithLabel()}\n </button>\n `;\n }\n\n private _renderWithLabel() {\n if (!this.showLabel) return nothing;\n return html`<div class=\"color-swatch__label\">\n <strong>${this.renderLabel()}</strong>\n ${this.value}\n </div>`;\n }\n\n static override readonly styles = [\n css`\n :host {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n transition: box-shadow 100ms ease-out;\n flex-direction: column;\n }\n\n :host(),\n {\n /* TODO: implement globally shared outline style /\n outline-color: var(--uui-color-focus);\n outline-offset: 4px;\n }\n\n :host(:focus-within:not([disabled])) {\n outline: none;\n }\n\n :host(:focus:not([disabled])) #swatch {\n outline-color: var(--uui-color-focus);\n outline-width: var(--uui-swatch-border-width, 1px);\n outline-style: solid;\n outline-offset: var(--uui-swatch-border-width, 1px);\n }\n\n :host([selectable]) #swatch {\n cursor: pointer;\n }\n\n :host([disabled]) {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n :host([readonly]) {\n cursor: default;\n }\n\n #swatch {\n cursor: inherit;\n outline: none;\n background: none;\n border: none;\n padding: 0;\n margin: 0;\n text-align: left;\n border: 1px solid #ccc;\n border-radius: var(--uui-size-4);\n }\n\n :host(:not([selectable])) #swatch:focus {\n outline: none;\n }\n\n :host([selectable]) #swatch::after {\n content: '';\n position: absolute;\n pointer-events: none;\n inset: calc(var(--uui-swatch-border-width, 1px) -1);\n width: calc(100% + calc(var(--uui-swatch-border-width, 1px) * 2));\n height: calc(100% + calc(var(--uui-swatch-border-width, 1px) * 2));\n box-sizing: border-box;\n border: var(--uui-swatch-border-width, 2px) solid\n var(--uui-color-selected);\n border-radius: calc(\n var(--uui-border-radius) + var(--uui-swatch-border-width, 1px)\n );\n transition: opacity 100ms ease-out;\n opacity: 0;\n }\n :host([selectable]:not([disabled]):hover) #swatch::after {\n opacity: 0.33;\n }\n :host([selectable][selected]:not([disabled]):hover) #swatch::after {\n opacity: 0.66;\n }\n :host([selectable][selected]:not([disabled])) #swatch::after {\n opacity: 1;\n }\n\n .color-swatch {\n position: relative;\n width: var(--uui-swatch-size, 25px);\n height: var(--uui-swatch-size, 25px);\n border-radius: inherit;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin: 2px;\n }\n\n :host([show-label]) .color-swatch {\n width: 120px;\n height: 50px;\n }\n\n .color-swatch.color-swatch--transparent-bg {\n background-image:\n linear-gradient(45deg, var(--uui-palette-grey) 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, var(--uui-palette-grey) 75%),\n linear-gradient(45deg, transparent 75%, var(--uui-palette-grey) 75%),\n linear-gradient(45deg, var(--uui-palette-grey) 25%, transparent 25%);\n background-size: 10px 10px;\n background-position:\n 0 0,\n 0 0,\n -5px -5px,\n 5px 5px;\n }\n .color-swatch__color {\n width: 100%;\n height: 100%;\n border: 1px solid rgba(0, 0, 0, 0.125);\n border-radius: inherit;\n box-sizing: border-box;\n }\n\n :host([show-label]) .color-swatch__color {\n border-radius: 3px 3px 0 0;\n }\n\n .color-swatch__check {\n position: absolute;\n vertical-align: middle;\n width: calc(var(--uui-swatch-size, 25px) / 2);\n height: calc(var(--uui-swatch-size, 25px) / 2);\n line-height: 0;\n filter: invert(1) grayscale(1) contrast(9);\n pointer-events: none;\n opacity: 0;\n border-radius: inherit;\n }\n\n .color-swatch.color-swatch--light .color-swatch__check {\n color: #000 !important;\n filter: none;\n }\n\n .color-swatch.color-swatch--dark .color-swatch__check {\n color: #fff !important;\n filter: none;\n }\n\n :host([selected]) .color-swatch__check {\n opacity: 1;\n }\n\n slot[name='label']::slotted(*),\n .label {\n font-size: var(--uui-size-4);\n }\n\n .color-swatch__label {\n max-width: 120px;\n box-sizing: border-box;\n padding: var(--uui-size-space-1) var(--uui-size-space-2);\n line-height: 1.5;\n display: flex;\n flex-direction: column;\n background: white;\n border: 1px solid var(--uui-color-border);\n border-radius: 0 0 3px 3px;\n font-size: var(--uui-size-4, 12px);\n }\n\n .color-swatch__label strong {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n box-sizing: border-box;\n }\n `,\n ];\n}\n"],"names":[],"mappings":"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"}

package/dist/components/combobox/combobox.element.d.ts CHANGED Viewed

@@ -5,6 +5,7 @@ import '../button/button.js';
 import '../icon/icon.js';
 import '../scroll-container/scroll-container.js';
 import '../popover-container/popover-container.js';
+import '../tag/tag.js';
 declare const UUIComboboxElement_base: (new (...args: any[]) => import("../../index.js").UUIFormControlWithBasicsMixinElement<FormDataEntryValue | FormData>) & typeof LitElement;
 /**
  * @element uui-combobox
@@ -50,6 +51,13 @@ export declare class UUIComboboxElement extends UUIComboboxElement_base {
      * @default false
      */
     disabled: boolean;
+    /**
+     * Enables multiple selection mode.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    multiple: boolean;
     /**
      * Removes the expand symbol.
      * @type {boolean}
@@ -78,6 +86,7 @@ export declare class UUIComboboxElement extends UUIComboboxElement_base {
     private _search;
     private _isPhone;
     private _isOpen;
+    private _selectedItems;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected getFormElement(): HTMLElement | undefined;