@aquera/nile-elements 2.0.16 → 2.0.18

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "2.0.16",
+  "version": "2.0.18",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -16,6 +16,7 @@
     "./nile-otp-input": "./dist/src/nile-otp-input/index.js",
     "./nile-sidebar": "./dist/src/nile-sidebar/index.js",
     "./nile-menu": "./dist/src/nile-menu/index.js",
+    "./nile-minimap": "./dist/src/nile-minimap/index.js",
     "./nile-badge": "./dist/src/nile-badge/index.js",
     "./nile-status-light": "./dist/src/nile-status-light/index.js",
     "./nile-drawer": "./dist/src/nile-drawer/index.js",

package/src/index.ts

@@ -4,6 +4,7 @@ export { NileIcon } from './nile-icon';
 export { NileInput } from './nile-input';
 export { NileOtpInput } from './nile-otp-input';
 export { NileMenu } from './nile-menu';
+export { NileMinimap } from './nile-minimap';
 export { NileBadge } from './nile-badge';
 export { NileStatusLight } from './nile-status-light';
 export { NileDrawer } from './nile-drawer';

package/src/nile-minimap/index.ts

@@ -0,0 +1 @@
+export { NileMinimap } from './nile-minimap';

package/src/nile-minimap/nile-minimap.css.ts

@@ -0,0 +1,164 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit';
+
+/**
+ * nile-minimap CSS
+ */
+export const styles = css`
+  :host {
+    display: inline-block;
+    box-sizing: border-box;
+    width: var(--nile-minimap-width, 112px);
+    height: var(--nile-minimap-height, 40px);
+    vertical-align: middle;
+  }
+
+  /* Vertical mode swaps the two size tokens. */
+  :host([data-vertical]) {
+    width: var(--nile-minimap-height, 40px);
+    height: var(--nile-minimap-width, 112px);
+  }
+
+  /* hideWhenFits: internal state, never touches the consumer's own [hidden]. */
+  :host([data-fit]) {
+    display: none;
+  }
+
+  /* No container resolved from \`for\`: render nothing. */
+  :host([data-unresolved]) {
+    display: none;
+  }
+
+  .base {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    padding: var(--ng-spacing-1-5);
+    background: var(--ng-colors-bg-primary);
+    border: var(--ng-border-width-1) solid var(--ng-colors-border-secondary);
+    border-radius: var(--ng-radius-lg);
+    box-shadow: var(--ng-shadow-md);
+    touch-action: none;
+    user-select: none;
+    -webkit-user-select: none;
+    transition: opacity 0.15s ease;
+  }
+
+  /* autoHide: idle between scrolls. Keeps its space; ignores the pointer. */
+  :host([data-idle]) .base {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .track {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    border-radius: var(--ng-radius-xs);
+  }
+
+  .segment {
+    position: absolute;
+    background: var(--ng-colors-bg-quaternary);
+    border-radius: var(--ng-radius-xs);
+  }
+
+  :host(:not([data-vertical])) .segment {
+    left: var(--s);
+    width: var(--l);
+    top: 0;
+    bottom: 0;
+  }
+
+  :host([data-vertical]) .segment {
+    top: var(--s);
+    height: var(--l);
+    left: 0;
+    right: 0;
+  }
+
+  /* Track mode: hide segments, draw the rail. */
+  .base--track .segments {
+    display: none;
+  }
+
+  .base--track .track {
+    background: var(--ng-colors-bg-quaternary);
+  }
+
+  /* RTL: mirror the horizontal track so segments and the viewport flip. */
+  .base--rtl .track {
+    transform: scaleX(-1);
+  }
+
+  .viewport {
+    position: absolute;
+    box-sizing: border-box;
+    border: 2px solid var(--ng-colors-border-brand);
+    border-radius: var(--ng-radius-sm);
+    cursor: grab;
+    transition: background-color 0.12s;
+    background: transparent;
+  }
+
+  :host(:not([data-vertical])) .viewport {
+    left: calc(var(--vs, 0px) - 3px);
+    width: calc(var(--vl, 0px) + 6px);
+    top: -3px;
+    bottom: -3px;
+  }
+
+  :host([data-vertical]) .viewport {
+    top: calc(var(--vs, 0px) - 3px);
+    height: calc(var(--vl, 0px) + 6px);
+    left: -3px;
+    right: -3px;
+  }
+
+  .viewport:hover {
+    background: color-mix(
+      in srgb,
+      var(--ng-colors-bg-brand-solid) 8%,
+      transparent
+    );
+  }
+
+  .base--drag .viewport {
+    background: color-mix(
+      in srgb,
+      var(--ng-colors-bg-brand-solid) 14%,
+      transparent
+    );
+    cursor: grabbing;
+  }
+
+  .viewport:focus {
+    outline: none;
+  }
+
+  .viewport:focus-visible {
+    box-shadow: var(--ng-focus-ring);
+  }
+
+  .base--disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .base,
+    .viewport {
+      transition: none;
+    }
+  }
+`;
+
+export default [styles];