@vaadin-component-factory/vcf-slider - npm Package Compare versions

Comparing version 23.3.6 to 23.3.8

out-tsc/src/vcf-slider.d.ts

@@ -362,2 +362,4 @@ import { PropertyValues, LitElement, TemplateResult } from 'lit';
     max: number;
+    /** Label. */
+    label: string;
     private $knobsContainer;
@@ -364,0 +366,0 @@ private $container;

out-tsc/src/vcf-slider.js

 var Slider_1;
 import { __decorate } from "tslib";
 import { html, svg, css, LitElement, render, nothing } from 'lit';
+import { when } from 'lit/directives/when.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { query, property, customElement } from 'lit/decorators.js';
@@ -61,2 +63,4 @@ import { CustomEventMixin, CustomEvents } from './mixins/CustomEventMixin';
         this.max = 100;
+        /** Label. */
+        this.label = 'Slider';
         this.originalKnobOffsetXY = 0;
@@ -172,3 +176,3 @@ this.originalPointerXY = 0;
     static get version() {
-        return '23.3.6';
+        return '23.3.8';
     }
@@ -230,2 +234,7 @@ get xy() {
 
+      #slider {
+        display: flex;
+        flex-flow: column;
+      }
+
       #line-color {
@@ -333,4 +342,2 @@ position: absolute;
       :host([vertical]) {
-        display: inline-flex;
-        flex-flow: row;
         width: max-content;
@@ -341,2 +348,7 @@ margin: 0 var(--lumo-space-s);
 
+      :host([vertical]) #slider {
+        display: inline-flex;
+        flex-flow: row;
+      }
+
       :host([vertical]) #container {
@@ -436,2 +448,20 @@ width: var(--l-height);
       }
+
+      /* LABEL */
+
+      label {
+        align-self: flex-start;
+        color: var(--lumo-secondary-text-color);
+        font-weight: 500;
+        font-size: var(--lumo-font-size-s);
+        margin-left: calc(var(--lumo-border-radius-m) / 4);
+        transition: color 0.2s;
+        line-height: 1;
+        padding-right: 1em;
+        padding-bottom: 0.8em;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        position: relative;
+      }
     `;
@@ -441,6 +471,8 @@ }
         return html `
-      <div id="container" part="container">
-        <div id="knobs" part="knobs"></div>
-      </div>
-      ${this.ticks
+      ${when(this.label, () => html `<label slot="label" aria-label="${ifDefined(this.label)}" for="slider">${this.label}</label>`)}
+      <div id="slider" tabindex="0">
+        <div id="container" part="container">
+          <div id="knobs" part="knobs"></div>
+        </div>
+        ${this.ticks
             ? svg `
@@ -452,2 +484,3 @@ <svg id="ticks-container" part="ticks-container">
             : nothing}
+      </div>
     `;
@@ -996,2 +1029,5 @@ }
 __decorate([
+    property({ type: String })
+], Slider.prototype, "label", void 0);
+__decorate([
     query('#knobs')
@@ -998,0 +1034,0 @@ ], Slider.prototype, "$knobsContainer", void 0);

package.json

 {
   "name": "@vaadin-component-factory/vcf-slider",
-  "version": "23.3.6",
+  "version": "23.3.8",
   "description": "Range slider web component for the Vaadin platform.",
@@ -5,0 +5,0 @@ "main": "out-tsc/vcf-slider.js",

README.md

@@ -9,3 +9,3 @@ # <vcf-slider>
 
-[Live demo ↗](https://vcf-slider.netlify.com) | [API documentation ↗](https://vcf-slider.netlify.com/api/#/elements/Vaadin.VcfSlider)
+[DEMO ↗](https://vcf-slider.netlify.com)
 
@@ -12,0 +12,0 @@ ## Installation

src/vcf-slider.ts

 import { html, svg, css, PropertyValues, LitElement, render, TemplateResult, nothing } from 'lit';
+import { when } from 'lit/directives/when.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { query, property, customElement } from 'lit/decorators.js';
@@ -69,2 +71,5 @@ import { CustomEventMixin, CustomEvents, ValueChangedEvent } from './mixins/CustomEventMixin';
 
+  /** Label. */
+  @property({ type: String }) label = 'Slider';
+
   @query('#knobs') private $knobsContainer!: HTMLElement;
@@ -79,3 +84,3 @@ @query('#container') private $container!: HTMLElement;
   protected static get version() {
-    return '23.3.6';
+    return '23.3.8';
   }
@@ -149,2 +154,7 @@
 
+      #slider {
+        display: flex;
+        flex-flow: column;
+      }
+
       #line-color {
@@ -252,4 +262,2 @@ position: absolute;
       :host([vertical]) {
-        display: inline-flex;
-        flex-flow: row;
         width: max-content;
@@ -260,2 +268,7 @@ margin: 0 var(--lumo-space-s);
 
+      :host([vertical]) #slider {
+        display: inline-flex;
+        flex-flow: row;
+      }
+
       :host([vertical]) #container {
@@ -355,2 +368,20 @@ width: var(--l-height);
       }
+
+      /* LABEL */
+
+      label {
+        align-self: flex-start;
+        color: var(--lumo-secondary-text-color);
+        font-weight: 500;
+        font-size: var(--lumo-font-size-s);
+        margin-left: calc(var(--lumo-border-radius-m) / 4);
+        transition: color 0.2s;
+        line-height: 1;
+        padding-right: 1em;
+        padding-bottom: 0.8em;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        position: relative;
+      }
     `;
@@ -361,7 +392,12 @@ }
     return html`
-      <div id="container" part="container">
-        <div id="knobs" part="knobs"></div>
-      </div>
-      ${this.ticks
-        ? svg`
+      ${when(
+        this.label,
+        () => html`<label slot="label" aria-label="${ifDefined(this.label)}" for="slider">${this.label}</label>`
+      )}
+      <div id="slider" tabindex="0">
+        <div id="container" part="container">
+          <div id="knobs" part="knobs"></div>
+        </div>
+        ${this.ticks
+          ? svg`
           <svg id="ticks-container" part="ticks-container">
@@ -371,3 +407,4 @@ <g id="ticks" part="ticks"></g>
         `
-        : nothing}
+          : nothing}
+      </div>
     `;
@@ -374,0 +411,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

240580

increased by1.66%

Lines of code

2783

increased by2.43%

No dependency changes