@aquera/nile-elements 1.9.6 → 1.9.7

package/src/nile-wysiwyg-editor/nile-wysiwyg-toolbar/index.ts

@@ -0,0 +1 @@
+export { NileWysiwygToolbar } from './nile-wysiwyg-toolbar';

package/src/nile-wysiwyg-editor/nile-wysiwyg-toolbar/nile-wysiwyg-toolbar.css.ts

@@ -0,0 +1,251 @@
+import { css } from 'lit';
+
+/**
+ * Toolbar styled to match nile-rich-text-editor: white toolbar, 32×32
+ * borderless buttons, dropdown-button selects with menu panels,
+ * swatch-palette color pickers, 24px dividers.
+ */
+export const styles = css`
+  :host {
+    display: block;
+    font-family: var(
+      --nile-font-family-sans-serif,
+      var(--ng-font-family-body, system-ui, -apple-system, sans-serif)
+    );
+  }
+
+  .toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+    padding: 8px;
+    border-bottom: 1px solid
+      var(--nile-colors-neutral-400, var(--ng-colors-border-neutral, #d0d5dd));
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary, #ffffff));
+    border-radius: 8px 8px 0 0;
+    box-sizing: border-box;
+  }
+
+  .toolbar__divider {
+    width: 1px;
+    height: 24px;
+    margin: 0 4px;
+    background: var(--nile-colors-neutral-400, var(--ng-colors-border-neutral, #d0d5dd));
+  }
+
+  button.toolbar__button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0 6px;
+    box-sizing: border-box;
+    border: none;
+    background: transparent;
+    border-radius: var(--nile-radius-radius-lg, var(--ng-radius-md, 8px));
+    cursor: pointer;
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900, #101828));
+    font-family: inherit;
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  button.toolbar__button:hover:not(:disabled) {
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary, #f2f4f7));
+  }
+
+  button.toolbar__button[data-active] {
+    background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50, #eff4ff));
+  }
+
+  button.toolbar__button:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  /* --- Dropdown selects (heading / font / size), nile-rte-select style --- */
+  .toolbar__dropdown {
+    position: relative;
+    display: inline-flex;
+  }
+
+  button.toolbar__dd-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    min-width: 32px;
+    height: 32px;
+    padding: 0 6px 0 10px;
+    box-sizing: border-box;
+    border: none;
+    background: transparent;
+    border-radius: var(--nile-radius-radius-lg, var(--ng-radius-md, 8px));
+    cursor: pointer;
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900, #101828));
+    font-family: inherit;
+    font-size: 13px;
+    white-space: nowrap;
+  }
+
+  button.toolbar__dd-trigger:hover:not(:disabled) {
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary, #f2f4f7));
+  }
+
+  button.toolbar__dd-trigger:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .toolbar__dd-menu {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    z-index: 30;
+    min-width: 140px;
+    max-height: 260px;
+    overflow-y: auto;
+    padding: 4px;
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary, #ffffff));
+    border: 1px solid
+      var(--nile-colors-neutral-300, var(--ng-colors-border-secondary, #e4e7ec));
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);
+    box-sizing: border-box;
+  }
+
+  .toolbar__dd-item {
+    display: flex;
+    align-items: center;
+    padding: 6px 10px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 13px;
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900, #101828));
+    white-space: nowrap;
+  }
+
+  .toolbar__dd-item:hover {
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary, #f2f4f7));
+  }
+
+  .toolbar__dd-item[data-active] {
+    background: var(
+      --nile-colors-primary-50,
+      var(--ng-componentcolors-utility-blue-50, #eff4ff)
+    );
+    color: var(--nile-colors-primary-700, #1d4ed8);
+  }
+
+  /* --- Color pickers, nile-rte-color style --- */
+  .toolbar__color {
+    position: relative;
+    display: inline-flex;
+  }
+
+  .toolbar__color .glyph-stack {
+    display: grid;
+    align-items: center;
+    justify-items: center;
+    line-height: 1;
+    pointer-events: none;
+  }
+
+  .toolbar__color .glyph {
+    font-size: 14px;
+    margin-bottom: 2px;
+    font-weight: 400;
+  }
+
+  .toolbar__color .underline {
+    width: 18px;
+    height: 3px;
+    border-radius: 2px;
+  }
+
+  .toolbar__color .swatch-box {
+    width: 18px;
+    height: 16px;
+    border-radius: 4px;
+    border: 1px solid rgba(0, 0, 0, 0.35);
+    pointer-events: none;
+    box-sizing: border-box;
+  }
+
+  .toolbar__swatch-panel {
+    position: absolute;
+    top: calc(100% + 6px);
+    left: 0;
+    z-index: 30;
+    width: 235px;
+    padding: 12px;
+    background: var(--nile-colors-white-base, #ffffff);
+    border: 1px solid
+      var(--nile-colors-neutral-300, var(--ng-colors-border-secondary, #e4e7ec));
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);
+    box-sizing: border-box;
+  }
+
+  .toolbar__swatch-panel .title {
+    font-size: 13px;
+    font-weight: 600;
+    margin-bottom: 8px;
+    color: var(--nile-colors-dark-900, #111);
+  }
+
+  .toolbar__swatch-panel .section {
+    margin-bottom: 12px;
+  }
+
+  .toolbar__swatch-panel .section:last-child {
+    margin-bottom: 0;
+  }
+
+  .toolbar__swatch-panel .swatches {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 24px);
+    gap: 8px;
+  }
+
+  .toolbar__swatch-panel .swatch {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    border: 1px solid rgba(0, 0, 0, 0.25);
+    cursor: pointer;
+    position: relative;
+    padding: 0;
+    background-clip: content-box;
+  }
+
+  .toolbar__swatch-panel .swatch .checkmark {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 13px;
+    color: white;
+    text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
+  }
+
+  .toolbar__swatch-panel .swatch.add {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    font-size: 16px;
+    background: #fff;
+  }
+
+  .toolbar__color input[type='color'] {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+    width: 0;
+    height: 0;
+    border: 0;
+    padding: 0;
+  }
+`;