@limetech/lime-elements 39.30.0 → 39.31.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.
@@ -1,12 +1,17 @@
1
1
  import React from 'react';
2
2
  import { RowProps } from './types';
3
- export declare class RowLayout extends React.Component<RowProps> {
4
- props: RowProps;
3
+ interface RowLayoutProps extends RowProps {
4
+ schemaPath?: string[];
5
+ }
6
+ export declare class RowLayout extends React.Component<RowLayoutProps> {
7
+ props: RowLayoutProps;
5
8
  private elementRef;
6
- constructor(props: RowProps);
9
+ constructor(props: RowLayoutProps);
7
10
  render(): React.DetailedReactHTMLElement<{
8
11
  className: string;
12
+ 'data-schema-path': string;
9
13
  ref: React.RefObject<HTMLElement>;
10
14
  }, HTMLElement>;
11
15
  }
16
+ export {};
12
17
  //# sourceMappingURL=row-layout.d.ts.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@limetech/lime-elements",
3
- "version": "39.30.0",
3
+ "version": "39.31.1",
4
4
  "description": "Lime Elements",
5
5
  "author": "Lime Technologies",
6
6
  "license": "Apache-2.0",
@@ -27,15 +27,20 @@
27
27
  "docs:build": "cross-env-shell NODE_ENV=prod SASS_PATH=node_modules \"stencil build --docs --config stencil.config.docs.ts\"",
28
28
  "docs:context7": "node generate-context7-docs.cjs",
29
29
  "docs:publish": "node publish-docs.cjs",
30
+ "docs:rebuild": "shx rm -rf www .stencil && npm run docs:build",
30
31
  "lint": "eslint --max-warnings=0 && prettier -c --ignore-path .gitignore **/*.scss",
31
32
  "lint:fix": "eslint --max-warnings=0 --fix && prettier --write --ignore-path .gitignore **/*.scss",
32
33
  "start": "npm run watch",
33
34
  "test": "npx playwright install chromium && stencil-test",
34
35
  "test:spec": "stencil-test --project spec",
35
36
  "test:e2e": "npx playwright install chromium && stencil-test --project e2e",
36
- "test:examples": "npx playwright install chromium && playwright test --config playwright.example-tests.config.ts",
37
- "test:examples:runtime": "npx playwright install chromium && playwright test --config playwright.example-tests.config.ts runtime",
38
- "test:examples:accessibility": "npx playwright install chromium && playwright test --config playwright.example-tests.config.ts accessibility",
37
+ "test:examples": "npm run docs:rebuild && npm run test:examples:ci --",
38
+ "test:examples:ci": "npx playwright install chromium && playwright test --config playwright.example-tests.config.ts",
39
+ "test:examples:runtime": "npm run docs:rebuild && npm run test:examples:runtime:ci --",
40
+ "test:examples:runtime:ci": "npx playwright install chromium && playwright test --config playwright.example-tests.config.ts runtime",
41
+ "test:examples:accessibility": "npm run docs:rebuild && npm run test:examples:accessibility:ci --",
42
+ "test:examples:accessibility:ci": "npx playwright install chromium && playwright test --config playwright.example-tests.config.ts accessibility",
43
+ "test:examples:accessibility:update": "npm run docs:rebuild && npx playwright install chromium && cross-env UPDATE_AXE_BASELINE=1 playwright test --config playwright.example-tests.config.ts accessibility",
39
44
  "test:watch": "npx playwright install chromium && stencil-test --watch",
40
45
  "test:watch:spec": "stencil-test --watch --project spec",
41
46
  "test:watch:e2e": "npx playwright install chromium && stencil-test --watch --project e2e",
@@ -1 +0,0 @@
1
- import{r as t,c as i,h as e,H as o,a as r}from"./p-DBTJNfo7.js";import{t as a}from"./p-EPnIW0K5.js";import{i as s}from"./p-CrvUOVvg.js";import{c as n}from"./p-JbKhhoXs.js";import{m as l,r as c}from"./p-BgTwPGeH.js";import{b as h,d,g as b}from"./p-CgNJbSP4.js";const m=class{constructor(o){t(this,o),this.itemSelected=i(this,"itemSelected"),this.actions=[],this.language="en",this.collapsible=!1,this.overflowCutoff=this.actions.length,this.hasRendered=!1,this.isFirstIntersectionCheck=!0,this.actionBarItems=[],this.renderActionBarItem=(t,i)=>e("limel-action-bar-item",{item:t,onSelect:this.handleSelect,isVisible:this.isVisible(i),role:"gridcell"}),this.renderOverflowMenu=t=>{if(this.actions.length-this.overflowCutoff)return e("limel-action-bar-overflow-menu",{openDirection:this.openDirection,items:t,onSelect:this.handleSelect,role:"gridcell"})},this.handleSelect=t=>{t.stopPropagation(),s(t.detail)&&this.itemSelected.emit(t.detail)},this.handleIntersection=t=>{const i=t.filter((t=>t.isIntersecting)),e=t.filter((t=>!t.isIntersecting));this.overflowCutoff=this.isFirstIntersectionCheck?i.length:this.overflowCutoff+i.length-e.length,this.isFirstIntersectionCheck=!1}}componentWillLoad(){this.collapsible&&console.warn("The `collapsible` prop on `limel-action-bar` is deprecated and no longer has any effect. It will be removed in a future major version. If you need expand/shrink behavior, implement it in the consuming UI instead of relying on the action bar itself.")}connectedCallback(){this.hasRendered&&this.createIntersectionObserver()}componentDidRender(){var t;this.haveItemsChanged()&&(null===(t=this.intersectionObserver)||void 0===t||t.disconnect(),this.createIntersectionObserver())}disconnectedCallback(){var t;null===(t=this.intersectionObserver)||void 0===t||t.disconnect(),this.intersectionObserver=void 0,this.actionBarItems=[]}render(){var t;this.hasRendered=!0;let i=[];return this.actions.length>0&&(i=this.actions.slice(this.overflowCutoff)),e(o,{key:"770a02d08ba8a05d243c8fc56f3eb370eb01001d","aria-label":null!==(t=this.accessibleLabel)&&void 0!==t?t:a.get("action-bar",this.language),class:{"is-full-width":"fullWidth"===this.layout,"is-floating":"floating"===this.layout},role:"grid"},e("div",{key:"364647ea01493a1a3cbd9aa8eaa8c4b86db3dd20",class:"items",role:"rowgroup"},this.actions.map(this.renderActionBarItem)),this.renderOverflowMenu(i))}isVisible(t){return t<this.overflowCutoff}createIntersectionObserver(){const t={root:this.host.shadowRoot.querySelector(".items"),rootMargin:"0px",threshold:1};this.overflowCutoff=this.actions.length,this.isFirstIntersectionCheck=!0,this.actionBarItems=[],this.intersectionObserver=new IntersectionObserver(this.handleIntersection,t);for(const t of this.host.shadowRoot.querySelectorAll("limel-action-bar-item"))this.observe(t)}observe(t){this.intersectionObserver.observe(t),this.actionBarItems.push(t)}haveItemsChanged(){const t=this.actionBarItems.some((t=>!this.host.shadowRoot.contains(t))),i=[...this.host.shadowRoot.querySelectorAll("limel-action-bar-item")].some((t=>!this.actionBarItems.includes(t)));return t||i}get host(){return r(this)}};m.style=":host(limel-action-bar){--action-bar-item-height:2rem;--limel-action-bar-item-text-color:var( --action-bar-item-text-color, rgb(var(--contrast-1100)) );box-sizing:border-box;display:inline-flex;align-items:center;padding:0.125rem 0.25rem;max-width:100%;border-radius:var(--action-bar-border-radius);background-color:var(--action-bar-background-color, rgb(var(--contrast-100)))}:host(limel-action-bar),.items{gap:0.25rem}@media (pointer: coarse){:host(limel-action-bar),.items{gap:0.5rem}}.items{display:inline-flex;max-width:100%;min-width:0}:host(limel-action-bar.is-full-width){width:100%}:host(limel-action-bar.is-floating){--action-bar-border-radius:100vw;border:1px solid rgb(var(--contrast-400));padding-right:0.125rem;padding-left:0.125rem;max-width:calc(100% - 2rem);box-shadow:var(--shadow-depth-16), var(--shadow-depth-8)}";const u=class{constructor(e){t(this,e),this.select=i(this,"select"),this.isVisible=!0,this.selected=!1,this.handleClick=t=>{t.stopPropagation(),this.select.emit(this.item)},this.tooltipId=n()}componentWillLoad(){l(this.host)}componentDidLoad(){this.triggerIconColorWarning()}disconnectedCallback(){c(this.host)}render(){return!this.isItem(this.item)&&this.item.separator?e("hr",null):e("button",{id:this.tooltipId,type:"button",onClick:this.handleClick,disabled:this.isDisabled(),class:{"is-selected":this.isItem(this.item)&&this.item.selected}},this.renderIcon(),this.renderLabel(),this.renderTooltip())}isItem(t){return!("separator"in t)}isDisabled(){return!(!this.isItem(this.item)||!this.item.disabled)||!this.isVisible||void 0}renderIcon(){if((!this.isItem(this.item)||this.item.icon)&&"icon"in this.item){const t=b(this.item.icon),i=h(this.item.icon,this.item.iconColor),o=d(this.item.icon);return e("limel-icon",{name:t,"aria-label":o,"aria-hidden":o?null:"true",style:{"--action-bar-item-icon-color":`${i}`}})}}renderLabel(){if(this.isItem(this.item)&&!this.item.iconOnly)return e("span",{class:"text"},this.item.text)}renderTooltip(){if(this.isItem(this.item))return e("limel-tooltip",{elementId:this.tooltipId,label:this.getTooltipLabel(this.item),helperLabel:this.item.commandText})}getTooltipLabel(t){const i=d(t.icon),e=t.text;return i&&e?`${i} ${e}`:e}triggerIconColorWarning(){this.isItem(this.item)&&this.item.iconColor&&console.warn("The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.")}get host(){return r(this)}};u.style='@charset "UTF-8";limel-action-bar-item{transition:opacity 0.2s ease-in-out;position:relative;display:flex;align-items:center}limel-action-bar-item:not([is-visible]){opacity:0;pointer-events:none}button{appearance:none;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit}button:not([disabled]){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover,button:not([disabled]):focus,button:not([disabled]):focus-visible{will-change:color, background-color, box-shadow, transform}button:not([disabled]):hover,button:not([disabled]):focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover{box-shadow:var(--button-shadow-hovered)}button:not([disabled]):active{--limel-clickable-transform-timing-function:cubic-bezier( 0.83, -0.15, 0.49, 1.16 );transform:translate3d(0, 0.05rem, 0);background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-inset-pressed)}button:not([disabled]):hover,button:not([disabled]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button:not([disabled]):focus{outline:none}button:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:0.25rem;width:100%;min-width:var(--action-bar-item-height);max-width:var(--action-bar-item-max-width, 10rem);height:var(--action-bar-item-height);color:var(--limel-action-bar-item-text-color);border-radius:var(--action-bar-item-height);font-size:var(--limel-theme-default-font-size);padding:0 0.25rem}button:has(.text){padding:0 0.5rem}button[disabled]{opacity:0.4}button.is-selected:not(:hover){box-shadow:var(--button-shadow-inset)}button.is-selected{color:var(--lime-primary-color, var(--limel-theme-primary-color)) !important}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}limel-icon{flex-shrink:0;width:calc(var(--action-bar-item-height) - 0.75rem);height:calc(var(--action-bar-item-height) - 0.75rem);color:var(--action-bar-item-icon-color, var(--limel-action-bar-item-text-color))}hr{all:unset;width:1px;height:1.5rem;border-radius:var(--action-bar-item-height);background-color:var(--limel-action-bar-item-text-color);opacity:0.2}@media (pointer: fine){hr{margin-right:0.5rem;margin-left:0.5rem}}limel-menu{--notification-badge-background-color:rgb(var(--contrast-600));--notification-badge-text-color:rgb(var(--contrast-1200))}limel-menu[open] button{box-shadow:var(--button-shadow-inset)}button[slot=trigger]{animation:fade-in ease-out 0.25s;font-size:0.75rem;font-weight:bold;transform:translate3d(0, 0, 0)}@keyframes fade-in{0%{scale:0.8;opacity:0}100%{scale:1;opacity:1}}';const p=class{constructor(e){t(this,e),this.select=i(this,"select"),this.openDirection="bottom-end",this.handleSelect=t=>{t.stopPropagation(),this.select.emit(t.detail)}}render(){return e(o,{key:"41087ef503f3cf6d0e113ce8c89b37d184d6db33"},e("limel-menu",{key:"d659a0a75e128ccc7c7c69a35b0141aa5f48a433",openDirection:this.openDirection,items:this.items,onSelect:this.handleSelect},e("button",{key:"e3ae308652d389b12e06656524ca0acf0f06c75b",type:"button",slot:"trigger"},`+${this.numberOfMenuItems}`)))}get numberOfMenuItems(){return this.items.filter((t=>this.isMenuItem(t))).length}isMenuItem(t){return!("separator"in t)}};export{m as limel_action_bar,u as limel_action_bar_item,p as limel_action_bar_overflow_menu}