@omegagrid/tabs 0.6.74 → 0.6.76

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 +1 @@
1
- {"version":3,"file":"tabs.style.d.ts","sourceRoot":"","sources":["../../src/components/tabs.style.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,yBA+IjB,CAAC"}
1
+ {"version":3,"file":"tabs.style.d.ts","sourceRoot":"","sources":["../../src/components/tabs.style.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,KAAK,yBA+IjB,CAAC"}
@@ -1,5 +1,6 @@
1
+ import { device } from "@omegagrid/core";
1
2
  import constants from "../constants";
2
- import { css } from "lit";
3
+ import { css, unsafeCSS } from "lit";
3
4
  export const style = css `
4
5
  * {
5
6
  box-sizing: border-box;
@@ -77,7 +78,7 @@ export const style = css `
77
78
  font-size: 14px;
78
79
  position: absolute;
79
80
  right: 2px;
80
- display: none;
81
+ display: ${unsafeCSS(device.detect() == "mobile" ? "block" : "none")};
81
82
  width: 16px;
82
83
  height: 16px;
83
84
  line-height: 16px;
@@ -1 +1 @@
1
- {"version":3,"file":"tabs.style.js","sourceRoot":"","sources":["../../src/components/tabs.style.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;gBAOR,SAAS,CAAC,gBAAgB;iBACzB,SAAS,CAAC,gBAAgB;;;;;;;;;;YAU/B,SAAS,CAAC,gBAAgB,GAAG,CAAC;;;;;;;;gBAQ1B,SAAS,CAAC,gBAAgB;;;;;;;;mBAQvB,SAAS,CAAC,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YA+BjC,SAAS,CAAC,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8ErC,CAAC","sourcesContent":["import constants from \"../constants\";\nimport { css } from \"lit\";\n\nexport const style = css`\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\n\t:host {\n\t\tcolor: var(--og-text-color);\n\t\tmin-height: ${constants.TAB_PANEL_HEIGHT}px;\n\t\tline-height: ${constants.TAB_PANEL_HEIGHT}px;\n\t\tbackground: var(--og-tab-panel-background-color);\n\t\tborder-bottom: 1px solid var(--og-tab-border-color);\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tposition: relative;\n\t\tfont-size: var(--og-font-size);\n\t}\n\n\t.tabs {\n\t\theight: ${constants.TAB_PANEL_HEIGHT - 1}px;\n\t\tflex: 0;\n\t\twhite-space: nowrap;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t}\n\n\t:host([position=\"top\"]) .tab {\n\t\tborder-top: ${constants.TAB_PANEL_BORDER}px solid var(--og-tab-panel-background-color);\n\t}\n\n\t:host([position=\"top\"]) .tab:hover, :host([position=\"top\"]) .tab.active {\n\t\tborder-top-color: var(--og-accent-color);\n\t}\n\n\t:host([position=\"bottom\"]) .tab {\n\t\tborder-bottom: ${constants.TAB_PANEL_BORDER}px solid var(--og-tab-panel-background-color);\n\t}\n\n\t:host([position=\"bottom\"]) .tab:hover, :host([position=\"bottom\"]) .tab.active {\n\t\tborder-bottom-color: var(--og-accent-color);\n\t}\n\n\t:host(.inactive) .tab.active {\n\t\tborder-top-color: var(--og-tab-border-color);\n\t\tborder-bottom-color: var(--og-tab-border-color);\n\t}\n\n\t.tab {\n\t\tborder-right: 1px solid var(--og-tab-border-color);\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\theight: 100%;\n\t\tbackground: var(--og-tab-background-color);\n\t\tcursor: pointer;\n\t\tmargin-right: 1px;\n\t\tpadding-left: 7px;\n\t\tpadding-right: 7px;\n\t\tposition: relative;\n\t}\n\n\t.tab.closable {\n\t\tpadding-right: 20px;\n\t}\n\n\t.tab.active {\n\t\tbackground-color: var(--og-tab-background-color-active);\n\t\theight: ${constants.TAB_PANEL_HEIGHT}px;\n\t\tfont-weight: bold;\n\t}\n\n\t.tab:hover .tab-x {\n\t\tdisplay: block;\n\t}\n\n\t.tab-x {\n\t\tfont-size: 14px;\n\t\tposition: absolute;\n\t\tright: 2px;\n\t\tdisplay: none;\n\t\twidth: 16px;\n\t\theight: 16px;\n\t\tline-height: 16px;\n\t\tmargin: 6px 0 0 5px;\n\t\ttext-align: center;\n\t\tborder-radius: 50%;\n\t}\n\n\t.tab-save-mark {\n\t\theight: 16px;\n\t\tline-height: 16px;\n\t\tmargin: 6px 0 0 5px;\n\t}\n\n\t.tab.closable:hover .tab-save-mark {\n\t\tdisplay: none;\n\t}\n\n\t.tab.closable .tab-save-mark {\n\t\tposition: absolute;\n\t\tright: 5px;\n\t}\n\n\t.tab.unsaved {\n\t\tcolor: #959d00;\n\t}\n\n\t.tab-x og-fa-icon {\n\t\tdisplay: block;\n\t}\n\n\t.tab-x:hover {\n\t\tbackground-color: var(--og-accent-color-alpha-30);\n\t}\n\n\t.empty {\n\t\tflex: 1;\n\t\theight: 100%;\n\t}\n\t\n\t.buttons {\n\t\tflex: 0;\n\t\theight: 100%;\n\t\tpadding: 0 10px 0 10px;\n\t}\n\n\t.buttons og-fa-icon {\n\t\tcursor: pointer;\n\t}\n\n\t.buttons og-fa-icon:hover {\n\t\tcolor: var(--og-text-color-2)\n\t}\n\n\t#overlay {\n\t\tbackground-color: var(--og-accent-color);\n\t\topacity: 0.5;\n\t\tpointer-events: none;\n\t}\n\n\t#btnAdd {\n\t\tmargin-left: 5px;\n\t\tline-height: 0;\n\t}\n\n`;"]}
1
+ {"version":3,"file":"tabs.style.js","sourceRoot":"","sources":["../../src/components/tabs.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AAErC,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;gBAOR,SAAS,CAAC,gBAAgB;iBACzB,SAAS,CAAC,gBAAgB;;;;;;;;;;YAU/B,SAAS,CAAC,gBAAgB,GAAG,CAAC;;;;;;;;gBAQ1B,SAAS,CAAC,gBAAgB;;;;;;;;mBAQvB,SAAS,CAAC,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YA+BjC,SAAS,CAAC,gBAAgB;;;;;;;;;;;;aAYzB,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,IAAI,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkErE,CAAC","sourcesContent":["import { device } from \"@omegagrid/core\";\nimport constants from \"../constants\";\nimport { css, unsafeCSS } from \"lit\";\n\nexport const style = css`\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\n\t:host {\n\t\tcolor: var(--og-text-color);\n\t\tmin-height: ${constants.TAB_PANEL_HEIGHT}px;\n\t\tline-height: ${constants.TAB_PANEL_HEIGHT}px;\n\t\tbackground: var(--og-tab-panel-background-color);\n\t\tborder-bottom: 1px solid var(--og-tab-border-color);\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tposition: relative;\n\t\tfont-size: var(--og-font-size);\n\t}\n\n\t.tabs {\n\t\theight: ${constants.TAB_PANEL_HEIGHT - 1}px;\n\t\tflex: 0;\n\t\twhite-space: nowrap;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t}\n\n\t:host([position=\"top\"]) .tab {\n\t\tborder-top: ${constants.TAB_PANEL_BORDER}px solid var(--og-tab-panel-background-color);\n\t}\n\n\t:host([position=\"top\"]) .tab:hover, :host([position=\"top\"]) .tab.active {\n\t\tborder-top-color: var(--og-accent-color);\n\t}\n\n\t:host([position=\"bottom\"]) .tab {\n\t\tborder-bottom: ${constants.TAB_PANEL_BORDER}px solid var(--og-tab-panel-background-color);\n\t}\n\n\t:host([position=\"bottom\"]) .tab:hover, :host([position=\"bottom\"]) .tab.active {\n\t\tborder-bottom-color: var(--og-accent-color);\n\t}\n\n\t:host(.inactive) .tab.active {\n\t\tborder-top-color: var(--og-tab-border-color);\n\t\tborder-bottom-color: var(--og-tab-border-color);\n\t}\n\n\t.tab {\n\t\tborder-right: 1px solid var(--og-tab-border-color);\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\theight: 100%;\n\t\tbackground: var(--og-tab-background-color);\n\t\tcursor: pointer;\n\t\tmargin-right: 1px;\n\t\tpadding-left: 7px;\n\t\tpadding-right: 7px;\n\t\tposition: relative;\n\t}\n\n\t.tab.closable {\n\t\tpadding-right: 20px;\n\t}\n\n\t.tab.active {\n\t\tbackground-color: var(--og-tab-background-color-active);\n\t\theight: ${constants.TAB_PANEL_HEIGHT}px;\n\t\tfont-weight: bold;\n\t}\n\n\t.tab:hover .tab-x {\n\t\tdisplay: block;\n\t}\n\n\t.tab-x {\n\t\tfont-size: 14px;\n\t\tposition: absolute;\n\t\tright: 2px;\n\t\tdisplay: ${unsafeCSS(device.detect() == \"mobile\" ? \"block\" : \"none\")};\n\t\twidth: 16px;\n\t\theight: 16px;\n\t\tline-height: 16px;\n\t\tmargin: 6px 0 0 5px;\n\t\ttext-align: center;\n\t\tborder-radius: 50%;\n\t}\n\n\t.tab-save-mark {\n\t\theight: 16px;\n\t\tline-height: 16px;\n\t\tmargin: 6px 0 0 5px;\n\t}\n\n\t.tab.closable:hover .tab-save-mark {\n\t\tdisplay: none;\n\t}\n\n\t.tab.closable .tab-save-mark {\n\t\tposition: absolute;\n\t\tright: 5px;\n\t}\n\n\t.tab.unsaved {\n\t\tcolor: #959d00;\n\t}\n\n\t.tab-x og-fa-icon {\n\t\tdisplay: block;\n\t}\n\n\t.tab-x:hover {\n\t\tbackground-color: var(--og-accent-color-alpha-30);\n\t}\n\n\t.empty {\n\t\tflex: 1;\n\t\theight: 100%;\n\t}\n\t\n\t.buttons {\n\t\tflex: 0;\n\t\theight: 100%;\n\t\tpadding: 0 10px 0 10px;\n\t}\n\n\t.buttons og-fa-icon {\n\t\tcursor: pointer;\n\t}\n\n\t.buttons og-fa-icon:hover {\n\t\tcolor: var(--og-text-color-2)\n\t}\n\n\t#overlay {\n\t\tbackground-color: var(--og-accent-color);\n\t\topacity: 0.5;\n\t\tpointer-events: none;\n\t}\n\n\t#btnAdd {\n\t\tmargin-left: 5px;\n\t\tline-height: 0;\n\t}\n\n`;"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@omegagrid/tabs",
3
- "version": "0.6.74",
3
+ "version": "0.6.76",
4
4
  "license": "UNLICENSED",
5
5
  "description": "Universal tabbed layout component",
6
6
  "main": "./dist/index.js",
@@ -27,7 +27,7 @@
27
27
  "_prepublish": "yarn test && yarn lint"
28
28
  },
29
29
  "dependencies": {
30
- "@omegagrid/core": "^0.6.74",
30
+ "@omegagrid/core": "^0.6.76",
31
31
  "lit": "^3.1.1",
32
32
  "lit-html": "^3.1.1",
33
33
  "ts-debounce": "^4.0.0"