index-scrollbar - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/cjs/index-scrollbar.cjs.entry.js

@@ -7,3 +7,3 @@ 'use strict';
 
-const indexScrollbarCss = ":host{top:0;bottom:0;font-size:min(20px, max(12px, 1vh));padding:calc(2 * min(20px, max(12px, 1vh))) 0}:host .container{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between}:host .container.cursor-pointer{cursor:pointer}:host .container .letter{padding:0 20px;position:relative;pointer-events:none;transition:transform 0.2s ease-in-out;transform-origin:60%}:host .container .letter label{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}:host .container .letter.letter-disabled{opacity:0.3}:host .container .letter.letter-is-hidden-value{transform-origin:center;transform:scale(2)}";
+const indexScrollbarCss = ":host{opacity:1;transition:opacity 0.2s ease-in-out;font-size:min(20px, max(12px, 1vh));padding:calc(2 * min(20px, max(12px, 1vh))) 0}:host.hidden{opacity:0}:host .container{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between}:host .container.cursor-pointer{cursor:pointer}:host .container .letter{padding:0 20px;position:relative;pointer-events:none;transition:transform 0.2s ease-in-out;transform-origin:60%}:host .container .letter label{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}:host .container .letter.letter-disabled{opacity:0.3}:host .container .letter.letter-is-hidden-value{transform-origin:center;transform:scale(2)}";
 
@@ -45,2 +45,3 @@ let IndexScrollbar = class {
     this.visibleLetters = [];
+    this.rendering = true;
     //Flag for determining letter under pointer
@@ -104,3 +105,6 @@ this._lettersShortened = false;
     this.alphabetContainer.addEventListener('mouseenter', () => this.focusEnd(), { passive: true });
-    this.checkVisibleLetters(true);
+    setTimeout(() => {
+      this.checkVisibleLetters();
+      this.rendering = false;
+    }, 100);
   }
@@ -280,3 +284,5 @@ disconnectedCallback() {
     var _a;
-    return (index.h(index.Host, null, index.h("div", { class: {
+    return (index.h(index.Host, { class: {
+        hidden: this.rendering,
+      } }, index.h("div", { class: {
         container: true,
@@ -283,0 +289,0 @@ } }, (_a = this.visibleLetters) === null || _a === void 0 ? void 0 : _a.map((letter, i) => {

dist/cjs/index-scrollbar.cjs.js

@@ -18,3 +18,3 @@ 'use strict';
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["index-scrollbar.cjs",[[1,"index-scrollbar",{"alphabet":[16],"overflowDivider":[1,"overflow-divider"],"validLetters":[16],"disableInvalidLetters":[4,"disable-invalid-letters"],"prioritizeHidingInvalidLetters":[4,"prioritize-hiding-invalid-letters"],"letterMagnification":[4,"letter-magnification"],"magnifyDividers":[4,"magnify-dividers"],"magnificationMultiplier":[2,"magnification-multiplier"],"magnificationCurve":[16],"exactX":[4,"exact-x"],"navigateOnHover":[4,"navigate-on-hover"],"letterSpacing":[8,"letter-spacing"],"offsetSizeCheckInterval":[2,"offset-size-check-interval"],"_isComponentActive":[32],"visibleLetters":[32],"_lastEmittedLetter":[32],"magIndex":[32],"_isInBounds":[32],"visualLetterIndex":[32],"letterSelected":[32]}]]]], options);
+  return index.bootstrapLazy([["index-scrollbar.cjs",[[1,"index-scrollbar",{"alphabet":[16],"overflowDivider":[1,"overflow-divider"],"validLetters":[16],"disableInvalidLetters":[4,"disable-invalid-letters"],"prioritizeHidingInvalidLetters":[4,"prioritize-hiding-invalid-letters"],"letterMagnification":[4,"letter-magnification"],"magnifyDividers":[4,"magnify-dividers"],"magnificationMultiplier":[2,"magnification-multiplier"],"magnificationCurve":[16],"exactX":[4,"exact-x"],"navigateOnHover":[4,"navigate-on-hover"],"letterSpacing":[8,"letter-spacing"],"offsetSizeCheckInterval":[2,"offset-size-check-interval"],"_isComponentActive":[32],"visibleLetters":[32],"rendering":[32],"_lastEmittedLetter":[32],"magIndex":[32],"_isInBounds":[32],"visualLetterIndex":[32],"letterSelected":[32]}]]]], options);
 });

dist/cjs/loader.cjs.js

@@ -17,3 +17,3 @@ 'use strict';
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["index-scrollbar.cjs",[[1,"index-scrollbar",{"alphabet":[16],"overflowDivider":[1,"overflow-divider"],"validLetters":[16],"disableInvalidLetters":[4,"disable-invalid-letters"],"prioritizeHidingInvalidLetters":[4,"prioritize-hiding-invalid-letters"],"letterMagnification":[4,"letter-magnification"],"magnifyDividers":[4,"magnify-dividers"],"magnificationMultiplier":[2,"magnification-multiplier"],"magnificationCurve":[16],"exactX":[4,"exact-x"],"navigateOnHover":[4,"navigate-on-hover"],"letterSpacing":[8,"letter-spacing"],"offsetSizeCheckInterval":[2,"offset-size-check-interval"],"_isComponentActive":[32],"visibleLetters":[32],"_lastEmittedLetter":[32],"magIndex":[32],"_isInBounds":[32],"visualLetterIndex":[32],"letterSelected":[32]}]]]], options);
+  return index.bootstrapLazy([["index-scrollbar.cjs",[[1,"index-scrollbar",{"alphabet":[16],"overflowDivider":[1,"overflow-divider"],"validLetters":[16],"disableInvalidLetters":[4,"disable-invalid-letters"],"prioritizeHidingInvalidLetters":[4,"prioritize-hiding-invalid-letters"],"letterMagnification":[4,"letter-magnification"],"magnifyDividers":[4,"magnify-dividers"],"magnificationMultiplier":[2,"magnification-multiplier"],"magnificationCurve":[16],"exactX":[4,"exact-x"],"navigateOnHover":[4,"navigate-on-hover"],"letterSpacing":[8,"letter-spacing"],"offsetSizeCheckInterval":[2,"offset-size-check-interval"],"_isComponentActive":[32],"visibleLetters":[32],"rendering":[32],"_lastEmittedLetter":[32],"magIndex":[32],"_isInBounds":[32],"visualLetterIndex":[32],"letterSelected":[32]}]]]], options);
   });
@@ -20,0 +20,0 @@ };

dist/collection/components/index-scrollbar/index-scrollbar.js

@@ -34,2 +34,3 @@ import { Component, Host, h, Prop, Event, Element, State, Watch } from '@stencil/core';
     this.visibleLetters = [];
+    this.rendering = true;
     //Flag for determining letter under pointer
@@ -93,3 +94,6 @@ this._lettersShortened = false;
     this.alphabetContainer.addEventListener('mouseenter', () => this.focusEnd(), { passive: true });
-    this.checkVisibleLetters(true);
+    setTimeout(() => {
+      this.checkVisibleLetters();
+      this.rendering = false;
+    }, 100);
   }
@@ -269,3 +273,5 @@ disconnectedCallback() {
     var _a;
-    return (h(Host, null,
+    return (h(Host, { class: {
+        hidden: this.rendering,
+      } },
       h("div", { class: {
@@ -532,2 +538,3 @@ container: true,
     "visibleLetters": {},
+    "rendering": {},
     "_lastEmittedLetter": {},
@@ -534,0 +541,0 @@ "magIndex": {},

dist/components/index-scrollbar.js

 import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
 
-const indexScrollbarCss = ":host{top:0;bottom:0;font-size:min(20px, max(12px, 1vh));padding:calc(2 * min(20px, max(12px, 1vh))) 0}:host .container{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between}:host .container.cursor-pointer{cursor:pointer}:host .container .letter{padding:0 20px;position:relative;pointer-events:none;transition:transform 0.2s ease-in-out;transform-origin:60%}:host .container .letter label{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}:host .container .letter.letter-disabled{opacity:0.3}:host .container .letter.letter-is-hidden-value{transform-origin:center;transform:scale(2)}";
+const indexScrollbarCss = ":host{opacity:1;transition:opacity 0.2s ease-in-out;font-size:min(20px, max(12px, 1vh));padding:calc(2 * min(20px, max(12px, 1vh))) 0}:host.hidden{opacity:0}:host .container{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between}:host .container.cursor-pointer{cursor:pointer}:host .container .letter{padding:0 20px;position:relative;pointer-events:none;transition:transform 0.2s ease-in-out;transform-origin:60%}:host .container .letter label{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}:host .container .letter.letter-disabled{opacity:0.3}:host .container .letter.letter-is-hidden-value{transform-origin:center;transform:scale(2)}";
 
@@ -42,2 +42,3 @@ let IndexScrollbar$1 = class extends HTMLElement {
     this.visibleLetters = [];
+    this.rendering = true;
     //Flag for determining letter under pointer
@@ -101,3 +102,6 @@ this._lettersShortened = false;
     this.alphabetContainer.addEventListener('mouseenter', () => this.focusEnd(), { passive: true });
-    this.checkVisibleLetters(true);
+    setTimeout(() => {
+      this.checkVisibleLetters();
+      this.rendering = false;
+    }, 100);
   }
@@ -277,3 +281,5 @@ disconnectedCallback() {
     var _a;
-    return (h(Host, null, h("div", { class: {
+    return (h(Host, { class: {
+        hidden: this.rendering,
+      } }, h("div", { class: {
         container: true,
@@ -318,2 +324,3 @@ } }, (_a = this.visibleLetters) === null || _a === void 0 ? void 0 : _a.map((letter, i) => {
     "visibleLetters": [32],
+    "rendering": [32],
     "_lastEmittedLetter": [32],
@@ -320,0 +327,0 @@ "magIndex": [32],

dist/esm/index-scrollbar.entry.js

 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5f889f85.js';
 
-const indexScrollbarCss = ":host{top:0;bottom:0;font-size:min(20px, max(12px, 1vh));padding:calc(2 * min(20px, max(12px, 1vh))) 0}:host .container{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between}:host .container.cursor-pointer{cursor:pointer}:host .container .letter{padding:0 20px;position:relative;pointer-events:none;transition:transform 0.2s ease-in-out;transform-origin:60%}:host .container .letter label{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}:host .container .letter.letter-disabled{opacity:0.3}:host .container .letter.letter-is-hidden-value{transform-origin:center;transform:scale(2)}";
+const indexScrollbarCss = ":host{opacity:1;transition:opacity 0.2s ease-in-out;font-size:min(20px, max(12px, 1vh));padding:calc(2 * min(20px, max(12px, 1vh))) 0}:host.hidden{opacity:0}:host .container{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between}:host .container.cursor-pointer{cursor:pointer}:host .container .letter{padding:0 20px;position:relative;pointer-events:none;transition:transform 0.2s ease-in-out;transform-origin:60%}:host .container .letter label{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}:host .container .letter.letter-disabled{opacity:0.3}:host .container .letter.letter-is-hidden-value{transform-origin:center;transform:scale(2)}";
 
@@ -40,2 +40,3 @@ let IndexScrollbar = class {
     this.visibleLetters = [];
+    this.rendering = true;
     //Flag for determining letter under pointer
@@ -99,3 +100,6 @@ this._lettersShortened = false;
     this.alphabetContainer.addEventListener('mouseenter', () => this.focusEnd(), { passive: true });
-    this.checkVisibleLetters(true);
+    setTimeout(() => {
+      this.checkVisibleLetters();
+      this.rendering = false;
+    }, 100);
   }
@@ -275,3 +279,5 @@ disconnectedCallback() {
     var _a;
-    return (h(Host, null, h("div", { class: {
+    return (h(Host, { class: {
+        hidden: this.rendering,
+      } }, h("div", { class: {
         container: true,
@@ -278,0 +284,0 @@ } }, (_a = this.visibleLetters) === null || _a === void 0 ? void 0 : _a.map((letter, i) => {

dist/esm/index-scrollbar.js

@@ -16,3 +16,3 @@ import { p as promiseResolve, b as bootstrapLazy } from './index-5f889f85.js';
 patchBrowser().then(options => {
-  return bootstrapLazy([["index-scrollbar",[[1,"index-scrollbar",{"alphabet":[16],"overflowDivider":[1,"overflow-divider"],"validLetters":[16],"disableInvalidLetters":[4,"disable-invalid-letters"],"prioritizeHidingInvalidLetters":[4,"prioritize-hiding-invalid-letters"],"letterMagnification":[4,"letter-magnification"],"magnifyDividers":[4,"magnify-dividers"],"magnificationMultiplier":[2,"magnification-multiplier"],"magnificationCurve":[16],"exactX":[4,"exact-x"],"navigateOnHover":[4,"navigate-on-hover"],"letterSpacing":[8,"letter-spacing"],"offsetSizeCheckInterval":[2,"offset-size-check-interval"],"_isComponentActive":[32],"visibleLetters":[32],"_lastEmittedLetter":[32],"magIndex":[32],"_isInBounds":[32],"visualLetterIndex":[32],"letterSelected":[32]}]]]], options);
+  return bootstrapLazy([["index-scrollbar",[[1,"index-scrollbar",{"alphabet":[16],"overflowDivider":[1,"overflow-divider"],"validLetters":[16],"disableInvalidLetters":[4,"disable-invalid-letters"],"prioritizeHidingInvalidLetters":[4,"prioritize-hiding-invalid-letters"],"letterMagnification":[4,"letter-magnification"],"magnifyDividers":[4,"magnify-dividers"],"magnificationMultiplier":[2,"magnification-multiplier"],"magnificationCurve":[16],"exactX":[4,"exact-x"],"navigateOnHover":[4,"navigate-on-hover"],"letterSpacing":[8,"letter-spacing"],"offsetSizeCheckInterval":[2,"offset-size-check-interval"],"_isComponentActive":[32],"visibleLetters":[32],"rendering":[32],"_lastEmittedLetter":[32],"magIndex":[32],"_isInBounds":[32],"visualLetterIndex":[32],"letterSelected":[32]}]]]], options);
 });

dist/esm/loader.js

@@ -13,3 +13,3 @@ import { p as promiseResolve, b as bootstrapLazy } from './index-5f889f85.js';
   return patchEsm().then(() => {
-  return bootstrapLazy([["index-scrollbar",[[1,"index-scrollbar",{"alphabet":[16],"overflowDivider":[1,"overflow-divider"],"validLetters":[16],"disableInvalidLetters":[4,"disable-invalid-letters"],"prioritizeHidingInvalidLetters":[4,"prioritize-hiding-invalid-letters"],"letterMagnification":[4,"letter-magnification"],"magnifyDividers":[4,"magnify-dividers"],"magnificationMultiplier":[2,"magnification-multiplier"],"magnificationCurve":[16],"exactX":[4,"exact-x"],"navigateOnHover":[4,"navigate-on-hover"],"letterSpacing":[8,"letter-spacing"],"offsetSizeCheckInterval":[2,"offset-size-check-interval"],"_isComponentActive":[32],"visibleLetters":[32],"_lastEmittedLetter":[32],"magIndex":[32],"_isInBounds":[32],"visualLetterIndex":[32],"letterSelected":[32]}]]]], options);
+  return bootstrapLazy([["index-scrollbar",[[1,"index-scrollbar",{"alphabet":[16],"overflowDivider":[1,"overflow-divider"],"validLetters":[16],"disableInvalidLetters":[4,"disable-invalid-letters"],"prioritizeHidingInvalidLetters":[4,"prioritize-hiding-invalid-letters"],"letterMagnification":[4,"letter-magnification"],"magnifyDividers":[4,"magnify-dividers"],"magnificationMultiplier":[2,"magnification-multiplier"],"magnificationCurve":[16],"exactX":[4,"exact-x"],"navigateOnHover":[4,"navigate-on-hover"],"letterSpacing":[8,"letter-spacing"],"offsetSizeCheckInterval":[2,"offset-size-check-interval"],"_isComponentActive":[32],"visibleLetters":[32],"rendering":[32],"_lastEmittedLetter":[32],"magIndex":[32],"_isInBounds":[32],"visualLetterIndex":[32],"letterSelected":[32]}]]]], options);
   });
@@ -16,0 +16,0 @@ };

dist/index-scrollbar/index-scrollbar.esm.js

@@ -1,1 +0,1 @@
-import{p as e,b as i}from"./p-d4d31fe4.js";(()=>{const i=import.meta.url,t={};return""!==i&&(t.resourcesUrl=new URL(".",i).href),e(t)})().then((e=>i([["p-3e01e4ac",[[1,"index-scrollbar",{alphabet:[16],overflowDivider:[1,"overflow-divider"],validLetters:[16],disableInvalidLetters:[4,"disable-invalid-letters"],prioritizeHidingInvalidLetters:[4,"prioritize-hiding-invalid-letters"],letterMagnification:[4,"letter-magnification"],magnifyDividers:[4,"magnify-dividers"],magnificationMultiplier:[2,"magnification-multiplier"],magnificationCurve:[16],exactX:[4,"exact-x"],navigateOnHover:[4,"navigate-on-hover"],letterSpacing:[8,"letter-spacing"],offsetSizeCheckInterval:[2,"offset-size-check-interval"],_isComponentActive:[32],visibleLetters:[32],_lastEmittedLetter:[32],magIndex:[32],_isInBounds:[32],visualLetterIndex:[32],letterSelected:[32]}]]]],e)));
+import{p as e,b as i}from"./p-d4d31fe4.js";(()=>{const i=import.meta.url,t={};return""!==i&&(t.resourcesUrl=new URL(".",i).href),e(t)})().then((e=>i([["p-9706b4c3",[[1,"index-scrollbar",{alphabet:[16],overflowDivider:[1,"overflow-divider"],validLetters:[16],disableInvalidLetters:[4,"disable-invalid-letters"],prioritizeHidingInvalidLetters:[4,"prioritize-hiding-invalid-letters"],letterMagnification:[4,"letter-magnification"],magnifyDividers:[4,"magnify-dividers"],magnificationMultiplier:[2,"magnification-multiplier"],magnificationCurve:[16],exactX:[4,"exact-x"],navigateOnHover:[4,"navigate-on-hover"],letterSpacing:[8,"letter-spacing"],offsetSizeCheckInterval:[2,"offset-size-check-interval"],_isComponentActive:[32],visibleLetters:[32],rendering:[32],_lastEmittedLetter:[32],magIndex:[32],_isInBounds:[32],visualLetterIndex:[32],letterSelected:[32]}]]]],e)));

dist/types/components/index-scrollbar/index-scrollbar.d.ts

@@ -34,2 +34,3 @@ import { EventEmitter } from '../../stencil-public-runtime';
   visibleLetters: Array<string>;
+  rendering: boolean;
   constructor();
@@ -36,0 +37,0 @@ connectedCallback(): void;

package.json

 {
   "name": "index-scrollbar",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Stencil Component Starter",
@@ -5,0 +5,0 @@ "main": "dist/index.cjs.js",

readme.md

@@ -55,20 +55,20 @@ # Index Scroll Bar
 
-| Input/Output | Parameter                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | default                      | type                        |
-| ------------ | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | --------------------------- |
-| Input        | alphabet                       | Custom version of the alphabet.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `ABCDEFGHIJKLMNOPQRSTUVWXYZ` | Array or string             |
-| Input        | overflowDivider                | Custom divider to be used when the screen size is smaller than the scroll bar. Can be set to `undefined` or `null`.                                                                                                                                                                                                                                                                                                                                                                                                        | `·`                          | string or undefined or null |
-| Input        | validLetters                   | Array of the possible letters that are available in the scrollable content. For example, if you only have 5 different letter dividers `A`, `D`, `F`, `I`, and `R`, you would want to pass these into `validLetters`. If you did not, when you tap on `Z` in the alphabetical scroll bar, nothing will happen. If you do include `validLetters`, your view would be taken to the next closest letter, which in this case is `R`. This is not a requirement, but it will make your alphabetical scroll bar much more robust. | `ABCDEFGHIJKLMNOPQRSTUVWXYZ` | Array                       |
-| Input        | disableInvalidLetters          | Boolean that determines whether or not to disable the invalid letters. Disabled letters are greyed out and will not magnify. If you do not, the invalid letters will be shown as disabled.                                                                                                                                                                                                                                                                                                                                 | `false`                      | boolean                     |
-| Input        | prioritizeHidingInvalidLetters | If true, the scroll bar will prioritize hiding invalid letters before subsituting `overflowDividers`. This is useful if you have a lot of invalid letters and you want to show the scroll bar without the invalid letters.                                                                                                                                                                                                                                                                                                 | `false`                      | boolean                     |
-| Input        | letterMagnification            | This will create a magnification effect on the alphabetical scroll bar when the user touches it or hovers over it.                                                                                                                                                                                                                                                                                                                                                                                                         | `true`                       | boolean                     |
-| Input        | magnifyDividers                | This input will magnify the dividers when the user touches them or hovers over them.                                                                                                                                                                                                                                                                                                                                                                                                                                       | `false`                      | boolean                     |
-| Input        | magnificationMultiplier        | How much to multiply the size of magnified letters.                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `2`                          | number                      |
-| Input        | magnificationCurve             | This is the curve that the magnification will follow as the letters magnify. This input must range between 1 and 0. Closer to one means larger. Closer to zero means smaller. The first index determines the size of the selected letter, the following indexes determine size for neighboring letters. Play around with it to see what looks best for your application.                                                                                                                                                   | `[1, 0.7, 0.5, 0.3, 0.1]`    | Array                       |
-| Input        | exactX                         | When `false`, this means the user does not have to be accurate along the x direction of the screen (after they have touched the scroll bar), meaning they can slide their finger freely along the x axis while still changing the scroll value. If set to `true`, the user will have to remain inside the scroll bar to continue navigating (I think false gives it a smoother feel).                                                                                                                                      | `false`                      | boolean                     |
-| Input        | navigateOnHover                | This means that the user will have to tap on the scroll bar to navigate to a new letter. If set to `true`, the user will be able to navigate to a new letter by hovering over the scroll bar.                                                                                                                                                                                                                                                                                                                              | `false`                      | boolean                     |
-| Input        | letterSpacing                  | This is the spacing between letters. It defaults to `1%`. Accepts a string with a percentage value (`1%`) or a number as a pixel value. Percentage is the percent of the scroll bar height.                                                                                                                                                                                                                                                                                                                                | `1%`                         | string or number            |
-| Input        | offsetSizeCheckInterval        | This is the interval in milliseconds that the scroll bar will check to see if the size of the scroll bar has changed. Useful, if e.g. a splitter-component resizes the scroll-bar but not the window itself.                                                                                                                                                                                                                                                                                                               | `0` (no interval)            | number                      |
-| Output       | letterChange                   | Every time the user scrolls through the alphabetical scroll bar to a new letter, this emitter will output the letter (as a `string`) that the user scrolled to. This will allow you to scroll to the appropriate letter divider. The example project above shows one method of how this function can be used. You can add things like haptics in the function this calls.                                                                                                                                                  | none                         | none                        |
-| Output       | isActive                       | EventEmitter that will emit when the user releases their finger from the scroll bar. This is used to stop any unwanted scroll glitches while the user is using the alphabetical scroll bar. See example for more information. (MOBILE ONLY)                                                                                                                                                                                                                                                                                | none                         | none                        |
+| Input/Output | Parameter                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | default                                | type                        |
+| ------------ | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | --------------------------- |
+| Input        | alphabet                       | Custom version of the alphabet.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `ABCDEFGHIJKLMNOPQRSTUVWXYZ`.split('') | Array or                    |
+| Input        | overflowDivider                | Custom divider to be used when the screen size is smaller than the scroll bar. Can be set to `undefined` or `null`.                                                                                                                                                                                                                                                                                                                                                                                                        | `·`                                    | string or undefined or null |
+| Input        | validLetters                   | Array of the possible letters that are available in the scrollable content. For example, if you only have 5 different letter dividers `A`, `D`, `F`, `I`, and `R`, you would want to pass these into `validLetters`. If you did not, when you tap on `Z` in the alphabetical scroll bar, nothing will happen. If you do include `validLetters`, your view would be taken to the next closest letter, which in this case is `R`. This is not a requirement, but it will make your alphabetical scroll bar much more robust. | `ABCDEFGHIJKLMNOPQRSTUVWXYZ`           | Array                       |
+| Input        | disableInvalidLetters          | Boolean that determines whether or not to disable the invalid letters. Disabled letters are greyed out and will not magnify. If you do not, the invalid letters will be shown as disabled.                                                                                                                                                                                                                                                                                                                                 | `false`                                | boolean                     |
+| Input        | prioritizeHidingInvalidLetters | If true, the scroll bar will prioritize hiding invalid letters before subsituting `overflowDividers`. This is useful if you have a lot of invalid letters and you want to show the scroll bar without the invalid letters.                                                                                                                                                                                                                                                                                                 | `false`                                | boolean                     |
+| Input        | letterMagnification            | This will create a magnification effect on the alphabetical scroll bar when the user touches it or hovers over it.                                                                                                                                                                                                                                                                                                                                                                                                         | `true`                                 | boolean                     |
+| Input        | magnifyDividers                | This input will magnify the dividers when the user touches them or hovers over them.                                                                                                                                                                                                                                                                                                                                                                                                                                       | `false`                                | boolean                     |
+| Input        | magnificationMultiplier        | How much to multiply the size of magnified letters.                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `2`                                    | number                      |
+| Input        | magnificationCurve             | This is the curve that the magnification will follow as the letters magnify. This input must range between 1 and 0. Closer to one means larger. Closer to zero means smaller. The first index determines the size of the selected letter, the following indexes determine size for neighboring letters. Play around with it to see what looks best for your application.                                                                                                                                                   | `[1, 0.7, 0.5, 0.3, 0.1]`              | Array                       |
+| Input        | exactX                         | When `false`, this means the user does not have to be accurate along the x direction of the screen (after they have touched the scroll bar), meaning they can slide their finger freely along the x axis while still changing the scroll value. If set to `true`, the user will have to remain inside the scroll bar to continue navigating (I think false gives it a smoother feel).                                                                                                                                      | `false`                                | boolean                     |
+| Input        | navigateOnHover                | This means that the user will have to tap on the scroll bar to navigate to a new letter. If set to `true`, the user will be able to navigate to a new letter by hovering over the scroll bar.                                                                                                                                                                                                                                                                                                                              | `false`                                | boolean                     |
+| Input        | letterSpacing                  | This is the spacing between letters. It defaults to `1%`. Accepts a string with a percentage value (`1%`) or a number as a pixel value. Percentage is the percent of the scroll bar height.                                                                                                                                                                                                                                                                                                                                | `1%`                                   | string or number            |
+| Input        | offsetSizeCheckInterval        | This is the interval in milliseconds that the scroll bar will check to see if the size of the scroll bar has changed. Useful, if e.g. a splitter-component resizes the scroll-bar but not the window itself.                                                                                                                                                                                                                                                                                                               | `0` (no interval)                      | number                      |
+| Output       | letterChange                   | Every time the user scrolls through the alphabetical scroll bar to a new letter, this emitter will output the letter (as a `string`) that the user scrolled to. This will allow you to scroll to the appropriate letter divider. The example project above shows one method of how this function can be used. You can add things like haptics in the function this calls.                                                                                                                                                  | none                                   | none                        |
+| Output       | isActive                       | EventEmitter that will emit when the user releases their finger from the scroll bar. This is used to stop any unwanted scroll glitches while the user is using the alphabetical scroll bar. See example for more information. (MOBILE ONLY)                                                                                                                                                                                                                                                                                | none                                   | none                        |
 
 \*Also note that the `alphabetical-scroll` element must have a high z-index to be above dividers and other elements.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

400977

increased by0.31%

Lines of code

6390

increased by0.47%

Number of medium supply chain risk alerts

2

decreased by-33.33%

No dependency changes