@spectrum-web-components/split-view 0.37.0 → 0.39.0
Sign up to get free protection for your applications and to get access to all the features.
- package/package.json +4 -4
- package/src/SplitView.dev.js +1 -1
- package/src/SplitView.dev.js.map +2 -2
- package/src/SplitView.js +8 -8
- package/src/SplitView.js.map +2 -2
- package/src/spectrum-split-view.css.dev.js +3 -15
- package/src/spectrum-split-view.css.dev.js.map +2 -2
- package/src/spectrum-split-view.css.js +3 -15
- package/src/spectrum-split-view.css.js.map +2 -2
- package/src/split-view.css.dev.js +3 -15
- package/src/split-view.css.dev.js.map +2 -2
- package/src/split-view.css.js +3 -15
- package/src/split-view.css.js.map +2 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/split-view",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.39.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -61,10 +61,10 @@
|
|
|
61
61
|
"lit-html"
|
|
62
62
|
],
|
|
63
63
|
"dependencies": {
|
|
64
|
-
"@spectrum-web-components/base": "^0.
|
|
64
|
+
"@spectrum-web-components/base": "^0.39.0"
|
|
65
65
|
},
|
|
66
66
|
"devDependencies": {
|
|
67
|
-
"@spectrum-css/splitview": "^3.0.
|
|
67
|
+
"@spectrum-css/splitview": "^3.0.48"
|
|
68
68
|
},
|
|
69
69
|
"types": "./src/index.d.ts",
|
|
70
70
|
"customElements": "custom-elements.json",
|
|
@@ -72,5 +72,5 @@
|
|
|
72
72
|
"./sp-*.js",
|
|
73
73
|
"./**/*.dev.js"
|
|
74
74
|
],
|
|
75
|
-
"gitHead": "
|
|
75
|
+
"gitHead": "2acc8390ef0ac6cc940958d4da705c9859155c0d"
|
|
76
76
|
}
|
package/src/SplitView.dev.js
CHANGED
package/src/SplitView.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["SplitView.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n LitElement,\n nothing,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n classMap,\n ifDefined,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js';\n\nimport { WithSWCResizeObserver } from './types';\n\nimport styles from './split-view.css.js';\n\nconst DEFAULT_MAX_SIZE = 3840;\n\nconst SPLITTERSIZE = 2;\n\nconst ARROW_KEY_CHANGE_VALUE = 10;\n\nconst PAGEUPDOWN_KEY_CHANGE_VALUE = 50;\n\nconst COLLAPSE_THREASHOLD = 50;\n\n/**\n * @element sp-split-view\n *\n * @slot Two sibling elements to be sized by the element attritubes\n * @fires change - Announces the new position of the splitter\n */\nexport class SplitView extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ type: Boolean, reflect: true })\n public vertical = false;\n\n @property({ type: Boolean, reflect: true })\n public resizable = false;\n\n @property({ type: Boolean, reflect: true })\n public collapsible = false;\n\n /** The minimum size of the primary pane */\n @property({ type: Number, attribute: 'primary-min' })\n public primaryMin = 0;\n\n /** The maximum size of the primary pane */\n @property({ type: Number, attribute: 'primary-max' })\n public primaryMax = DEFAULT_MAX_SIZE;\n\n /**\n * The start size of the primary pane, can be a real pixel number|string, percentage or \"auto\"\n * For example: \"100\", \"120px\", \"75%\" or \"auto\" are valid values\n * @type {number |\u00A0number + \"px\" | number + \"%\" | \"auto\"}\n * @attr\n */\n @property({ type: String, attribute: 'primary-size' })\n public primarySize?: string;\n\n /** The minimum size of the secondary pane */\n @property({ type: Number, attribute: 'secondary-min' })\n public secondaryMin = 0;\n\n /** The maximum size of the secondary pane */\n @property({ type: Number, attribute: 'secondary-max' })\n public secondaryMax = DEFAULT_MAX_SIZE;\n\n /** The current splitter position of split-view */\n @property({ type: Number, reflect: true, attribute: 'splitter-pos' })\n public splitterPos?: number;\n\n /** The current size of first pane of split-view */\n @property({ type: String, attribute: false })\n private firstPaneSize = 'auto';\n\n @property()\n public label?: string;\n\n @property({ type: Boolean, attribute: false })\n private enoughChildren = false;\n\n @property({ type: Number })\n private viewSize = 0;\n\n @query('slot')\n private paneSlot!: HTMLSlotElement;\n\n @query('#splitter')\n private splitter!: HTMLDivElement;\n\n private offset = 0;\n\n private minPos = 0;\n\n private maxPos = DEFAULT_MAX_SIZE;\n\n private observer?: WithSWCResizeObserver['ResizeObserver'];\n\n private rect?: DOMRect;\n\n private _splitterSize?: number;\n\n public constructor() {\n super();\n const RO = (window as unknown as WithSWCResizeObserver).ResizeObserver;\n if (RO) {\n this.observer = new RO(() => {\n this.rect = undefined;\n this.updateMinMax();\n });\n }\n }\n\n public override connectedCallback(): void {\n super.connectedCallback();\n this.observer?.observe(this);\n }\n\n public override disconnectedCallback(): void {\n this.observer?.unobserve(this);\n super.disconnectedCallback();\n }\n\n /**\n * @private\n **/\n public get splitterSize(): number {\n if (!this._splitterSize) {\n this._splitterSize =\n (this.splitter &&\n Math.round(\n parseFloat(\n window\n .getComputedStyle(this.splitter)\n .getPropertyValue(\n this.vertical ? 'height' : 'width'\n )\n )\n )) ||\n SPLITTERSIZE;\n }\n return this._splitterSize;\n }\n\n protected override render(): TemplateResult {\n const splitterClasses = {\n 'is-resized-start': this.splitterPos === this.minPos,\n 'is-resized-end': (this.splitterPos &&\n this.splitterPos > this.splitterSize &&\n this.splitterPos === this.maxPos) as boolean,\n 'is-collapsed-start': this.splitterPos === 0,\n 'is-collapsed-end': (this.splitterPos &&\n this.splitterPos >=\n Math.max(\n this.splitterSize,\n this.viewSize - this.splitterSize\n )) as boolean,\n };\n return html`\n <slot\n @slotchange=${this.onContentSlotChange}\n style=\"--spectrum-split-view-first-pane-size: ${this\n .firstPaneSize}\"\n ></slot>\n ${this.enoughChildren\n ? html`\n <div\n id=\"splitter\"\n class=${classMap(splitterClasses)}\n role=\"separator\"\n aria-label=${ifDefined(this.label || undefined)}\n aria-valuenow=${Math.round(\n (parseFloat(this.firstPaneSize) / this.viewSize) *\n 100\n )}\n tabindex=${ifDefined(\n this.resizable ? '0' : undefined\n )}\n @keydown=${this.onKeydown}\n ${streamingListener({\n start: ['pointerdown', this.onPointerdown],\n streamInside: ['pointermove', this.onPointermove],\n end: [\n [\n 'pointerup',\n 'pointercancel',\n 'pointerleave',\n ],\n this.onPointerup,\n ],\n })}\n >\n ${this.resizable\n ? html`\n <div id=\"gripper\"></div>\n `\n : html``}\n </div>\n `\n : nothing}\n `;\n }\n\n private onContentSlotChange(): void {\n this.enoughChildren = this.children.length > 1;\n this.checkResize();\n }\n\n private onPointerdown(event: PointerEvent): void {\n if (!this.resizable || (event.button && event.button !== 0)) {\n event.preventDefault();\n return;\n }\n this.splitter.setPointerCapture(event.pointerId);\n this.offset = this.getOffset();\n }\n\n private onPointermove(event: PointerEvent): void {\n event.preventDefault();\n let pos =\n this.vertical || this.isLTR\n ? this.getPosition(event) - this.offset\n : this.offset - this.getPosition(event);\n if (this.collapsible && pos < this.minPos - COLLAPSE_THREASHOLD) {\n pos = 0;\n }\n if (this.collapsible && pos > this.maxPos + COLLAPSE_THREASHOLD) {\n pos = this.viewSize - this.splitterSize;\n }\n this.updatePosition(pos);\n }\n\n private onPointerup(event: PointerEvent): void {\n this.splitter.releasePointerCapture(event.pointerId);\n }\n\n private getOffset(): number {\n if (!this.rect) {\n this.rect = this.getBoundingClientRect();\n }\n const offsetX = this.isLTR ? this.rect.left : this.rect.right;\n return this.vertical ? this.rect.top : offsetX;\n }\n\n private getPosition(event: PointerEvent): number {\n return this.vertical ? event.clientY : event.clientX;\n }\n\n private movePosition(event: KeyboardEvent, offset: number): void {\n event.preventDefault();\n if (this.splitterPos !== undefined) {\n this.updatePosition(this.splitterPos + offset);\n }\n }\n\n private onKeydown(event: KeyboardEvent): void {\n if (!this.resizable) {\n return;\n }\n let direction = 0;\n const isLTRorVertical = this.isLTR || this.vertical;\n switch (event.key) {\n case 'Home':\n event.preventDefault();\n this.updatePosition(this.collapsible ? 0 : this.minPos);\n return;\n case 'End':\n event.preventDefault();\n this.updatePosition(\n this.collapsible\n ? this.viewSize - this.splitterSize\n : this.maxPos\n );\n return;\n case 'ArrowLeft':\n direction = isLTRorVertical ? -1 : 1;\n break;\n case 'ArrowRight':\n direction = isLTRorVertical ? 1 : -1;\n break;\n case 'ArrowUp':\n direction = this.vertical ? -1 : 1;\n break;\n case 'ArrowDown':\n direction = this.vertical ? 1 : -1;\n break;\n case 'PageUp':\n direction = this.vertical ? -1 : 1;\n break;\n case 'PageDown':\n direction = this.vertical ? 1 : -1;\n break;\n }\n if (direction !== 0) {\n const moveBy = event.key.startsWith('Page')\n ? PAGEUPDOWN_KEY_CHANGE_VALUE\n : ARROW_KEY_CHANGE_VALUE;\n this.movePosition(event, moveBy * direction);\n }\n }\n\n private async checkResize(): Promise<void> {\n if (!this.enoughChildren) {\n return;\n }\n this.updateMinMax();\n if (this.splitterPos === undefined) {\n const startPos = await this.calcStartPos();\n this.updatePosition(startPos);\n }\n }\n\n private updateMinMax(): void {\n this.viewSize = this.vertical ? this.offsetHeight : this.offsetWidth;\n this.minPos = Math.max(\n this.primaryMin,\n this.viewSize - this.secondaryMax\n );\n this.maxPos = Math.min(\n this.primaryMax,\n this.viewSize - Math.max(this.secondaryMin, this.splitterSize)\n );\n }\n\n private updatePosition(x: number): void {\n let pos = this.getLimitedPosition(x);\n if (this.collapsible && x <= 0) {\n pos = 0;\n }\n if (\n this.collapsible &&\n x > this.maxPos &&\n x >= this.viewSize - this.splitterSize\n ) {\n pos = this.viewSize - this.splitterSize;\n }\n if (pos !== this.splitterPos) {\n this.splitterPos = pos;\n this.dispatchChangeEvent();\n }\n }\n\n private getLimitedPosition(input: number): number {\n if (input <= this.minPos) {\n return this.minPos;\n }\n if (input >= this.maxPos) {\n return this.maxPos;\n }\n return Math.max(this.minPos, Math.min(this.maxPos, input));\n }\n\n private async calcStartPos(): Promise<number> {\n if (\n this.primarySize !== undefined &&\n /^\\d+(px)?$/.test(this.primarySize)\n ) {\n return parseInt(this.primarySize, 10);\n }\n if (this.primarySize !== undefined && /^\\d+%$/.test(this.primarySize)) {\n return (parseInt(this.primarySize, 10) * this.viewSize) / 100;\n }\n if (this.primarySize === 'auto') {\n this.firstPaneSize = 'auto';\n const nodes = this.paneSlot.assignedNodes({ flatten: true });\n const firstEl = nodes.find(\n (node) => node instanceof HTMLElement\n ) as LitElement;\n if (typeof firstEl.updateComplete !== 'undefined') {\n await firstEl.updateComplete;\n }\n if (firstEl) {\n const size = window\n .getComputedStyle(firstEl)\n .getPropertyValue(this.vertical ? 'height' : 'width');\n const size_i = parseFloat(size);\n if (!isNaN(size_i)) {\n return this.getLimitedPosition(Math.ceil(size_i));\n }\n }\n }\n return this.viewSize / 2;\n }\n\n private dispatchChangeEvent(): void {\n const changeEvent = new Event('change', {\n bubbles: true,\n composed: true,\n });\n this.dispatchEvent(changeEvent);\n }\n\n protected override willUpdate(changed: PropertyValues): void {\n if (!this.hasUpdated || changed.has('primarySize')) {\n this.splitterPos = undefined;\n this.checkResize();\n }\n if (\n changed.has('splitterPos') &&\n this.splitterPos !== undefined &&\n this.enoughChildren\n ) {\n this.firstPaneSize = `${Math.round(this.splitterPos)}px`;\n }\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EAEA;AAAA,EAEA;AAAA,OAEG;AACP;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,yBAAyB;AAIlC,OAAO,YAAY;AAEnB,MAAM,mBAAmB;AAEzB,MAAM,eAAe;AAErB,MAAM,yBAAyB;AAE/B,MAAM,8BAA8B;AAEpC,MAAM,sBAAsB;AAQrB,aAAM,kBAAkB,gBAAgB;AAAA,EA0EpC,cAAc;AACjB,UAAM;AArEV,SAAO,WAAW;AAGlB,SAAO,YAAY;AAGnB,SAAO,cAAc;AAIrB,SAAO,aAAa;AAIpB,SAAO,aAAa;AAapB,SAAO,eAAe;AAItB,SAAO,eAAe;AAQtB,SAAQ,gBAAgB;AAMxB,SAAQ,iBAAiB;AAGzB,SAAQ,WAAW;AAQnB,SAAQ,SAAS;AAEjB,SAAQ,SAAS;AAEjB,SAAQ,SAAS;AAUb,UAAM,KAAM,OAA4C;AACxD,QAAI,IAAI;AACJ,WAAK,WAAW,IAAI,GAAG,MAAM;AACzB,aAAK,OAAO;AACZ,aAAK,aAAa;AAAA,MACtB,CAAC;AAAA,IACL;AAAA,EACJ;AAAA,EAlFA,WAA2B,SAAyB;AAChD,WAAO,CAAC,MAAM;AAAA,EAClB;AAAA,EAkFgB,oBAA0B;AAxI9C;AAyIQ,UAAM,kBAAkB;AACxB,eAAK,aAAL,mBAAe,QAAQ;AAAA,EAC3B;AAAA,EAEgB,uBAA6B;AA7IjD;AA8IQ,eAAK,aAAL,mBAAe,UAAU;AACzB,UAAM,qBAAqB;AAAA,EAC/B;AAAA;AAAA;AAAA;AAAA,EAKA,IAAW,eAAuB;AAC9B,QAAI,CAAC,KAAK,eAAe;AACrB,WAAK,gBACA,KAAK,YACF,KAAK;AAAA,QACD;AAAA,UACI,OACK,iBAAiB,KAAK,QAAQ,EAC9B;AAAA,YACG,KAAK,WAAW,WAAW;AAAA,UAC/B;AAAA,QACR;AAAA,MACJ,KACJ;AAAA,IACR;AACA,WAAO,KAAK;AAAA,EAChB;AAAA,EAEmB,SAAyB;AACxC,UAAM,kBAAkB;AAAA,MACpB,oBAAoB,KAAK,gBAAgB,KAAK;AAAA,MAC9C,kBAAmB,KAAK,eACpB,KAAK,cAAc,KAAK,gBACxB,KAAK,gBAAgB,KAAK;AAAA,MAC9B,sBAAsB,KAAK,gBAAgB;AAAA,MAC3C,oBAAqB,KAAK,eACtB,KAAK,eACD,KAAK;AAAA,QACD,KAAK;AAAA,QACL,KAAK,WAAW,KAAK;AAAA,MACzB;AAAA,IACZ;AACA,WAAO;AAAA;AAAA,8BAEe,KAAK,mBAAmB;AAAA,gEACU,KAC3C,aAAa;AAAA;AAAA,cAEpB,KAAK,iBACD;AAAA;AAAA;AAAA,kCAGgB,SAAS,eAAe,CAAC;AAAA;AAAA,uCAEpB,UAAU,KAAK,SAAS,MAAS,CAAC;AAAA,0CAC/B,KAAK;AAAA,MAChB,WAAW,KAAK,aAAa,IAAI,KAAK,WACnC;AAAA,IACR,CAAC;AAAA,qCACU;AAAA,MACP,KAAK,YAAY,MAAM;AAAA,IAC3B,CAAC;AAAA,qCACU,KAAK,SAAS;AAAA,4BACvB,kBAAkB;AAAA,MAChB,OAAO,CAAC,eAAe,KAAK,aAAa;AAAA,MACzC,cAAc,CAAC,eAAe,KAAK,aAAa;AAAA,MAChD,KAAK;AAAA,QACD;AAAA,UACI;AAAA,UACA;AAAA,UACA;AAAA,QACJ;AAAA,QACA,KAAK;AAAA,MACT;AAAA,IACJ,CAAC,CAAC;AAAA;AAAA,4BAEA,KAAK,YACD;AAAA;AAAA,oCAGA,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n LitElement,\n nothing,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n classMap,\n ifDefined,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js';\n\nimport { WithSWCResizeObserver } from './types';\n\nimport styles from './split-view.css.js';\n\nconst DEFAULT_MAX_SIZE = 3840;\n\nconst SPLITTERSIZE = 2;\n\nconst ARROW_KEY_CHANGE_VALUE = 10;\n\nconst PAGEUPDOWN_KEY_CHANGE_VALUE = 50;\n\nconst COLLAPSE_THREASHOLD = 50;\n\n/**\n * @element sp-split-view\n *\n * @slot Two sibling elements to be sized by the element attritubes\n * @fires change - Announces the new position of the splitter\n */\nexport class SplitView extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ type: Boolean, reflect: true })\n public vertical = false;\n\n @property({ type: Boolean, reflect: true })\n public resizable = false;\n\n @property({ type: Boolean, reflect: true })\n public collapsible = false;\n\n /** The minimum size of the primary pane */\n @property({ type: Number, attribute: 'primary-min' })\n public primaryMin = 0;\n\n /** The maximum size of the primary pane */\n @property({ type: Number, attribute: 'primary-max' })\n public primaryMax = DEFAULT_MAX_SIZE;\n\n /**\n * The start size of the primary pane, can be a real pixel number|string, percentage or \"auto\"\n * For example: \"100\", \"120px\", \"75%\" or \"auto\" are valid values\n * @type {number |\u00A0number + \"px\" | number + \"%\" | \"auto\"}\n * @attr\n */\n @property({ type: String, attribute: 'primary-size' })\n public primarySize?: string;\n\n /** The minimum size of the secondary pane */\n @property({ type: Number, attribute: 'secondary-min' })\n public secondaryMin = 0;\n\n /** The maximum size of the secondary pane */\n @property({ type: Number, attribute: 'secondary-max' })\n public secondaryMax = DEFAULT_MAX_SIZE;\n\n /** The current splitter position of split-view */\n @property({ type: Number, reflect: true, attribute: 'splitter-pos' })\n public splitterPos?: number;\n\n /** The current size of first pane of split-view */\n @property({ type: String, attribute: false })\n private firstPaneSize = 'auto';\n\n @property()\n public label?: string;\n\n @property({ type: Boolean, attribute: false })\n private enoughChildren = false;\n\n @property({ type: Number })\n private viewSize = 0;\n\n @query('slot')\n private paneSlot!: HTMLSlotElement;\n\n @query('#splitter')\n private splitter!: HTMLDivElement;\n\n private offset = 0;\n\n private minPos = 0;\n\n private maxPos = DEFAULT_MAX_SIZE;\n\n private observer?: WithSWCResizeObserver['ResizeObserver'];\n\n private rect?: DOMRect;\n\n private _splitterSize?: number;\n\n public constructor() {\n super();\n const RO = (window as unknown as WithSWCResizeObserver).ResizeObserver;\n if (RO) {\n this.observer = new RO(() => {\n this.rect = undefined;\n this.updateMinMax();\n });\n }\n }\n\n public override connectedCallback(): void {\n super.connectedCallback();\n this.observer?.observe(this);\n }\n\n public override disconnectedCallback(): void {\n this.observer?.unobserve(this);\n super.disconnectedCallback();\n }\n\n /**\n * @private\n **/\n public get splitterSize(): number {\n if (!this._splitterSize) {\n this._splitterSize =\n (this.splitter &&\n Math.round(\n parseFloat(\n window\n .getComputedStyle(this.splitter)\n .getPropertyValue(\n this.vertical ? 'height' : 'width'\n )\n )\n )) ||\n SPLITTERSIZE;\n }\n return this._splitterSize;\n }\n\n protected override render(): TemplateResult {\n const splitterClasses = {\n 'is-resized-start': this.splitterPos === this.minPos,\n 'is-resized-end': (this.splitterPos &&\n this.splitterPos > this.splitterSize &&\n this.splitterPos === this.maxPos) as boolean,\n 'is-collapsed-start': this.splitterPos === 0,\n 'is-collapsed-end': (this.splitterPos &&\n this.splitterPos >=\n Math.max(\n this.splitterSize,\n this.viewSize - this.splitterSize\n )) as boolean,\n };\n return html`\n <slot\n @slotchange=${this.onContentSlotChange}\n style=\"--spectrum-split-view-first-pane-size: ${this\n .firstPaneSize}\"\n ></slot>\n ${this.enoughChildren\n ? html`\n <div\n id=\"splitter\"\n class=${classMap(splitterClasses)}\n role=\"separator\"\n aria-label=${ifDefined(this.label || undefined)}\n aria-valuenow=${Math.round(\n (parseFloat(this.firstPaneSize) / this.viewSize) *\n 100\n )}\n tabindex=${ifDefined(\n this.resizable ? '0' : undefined\n )}\n @keydown=${this.onKeydown}\n ${streamingListener({\n start: ['pointerdown', this.onPointerdown],\n streamInside: ['pointermove', this.onPointermove],\n end: [\n [\n 'pointerup',\n 'pointercancel',\n 'pointerleave',\n ],\n this.onPointerup,\n ],\n })}\n >\n ${this.resizable\n ? html`\n <div id=\"gripper\"></div>\n `\n : nothing}\n </div>\n `\n : nothing}\n `;\n }\n\n private onContentSlotChange(): void {\n this.enoughChildren = this.children.length > 1;\n this.checkResize();\n }\n\n private onPointerdown(event: PointerEvent): void {\n if (!this.resizable || (event.button && event.button !== 0)) {\n event.preventDefault();\n return;\n }\n this.splitter.setPointerCapture(event.pointerId);\n this.offset = this.getOffset();\n }\n\n private onPointermove(event: PointerEvent): void {\n event.preventDefault();\n let pos =\n this.vertical || this.isLTR\n ? this.getPosition(event) - this.offset\n : this.offset - this.getPosition(event);\n if (this.collapsible && pos < this.minPos - COLLAPSE_THREASHOLD) {\n pos = 0;\n }\n if (this.collapsible && pos > this.maxPos + COLLAPSE_THREASHOLD) {\n pos = this.viewSize - this.splitterSize;\n }\n this.updatePosition(pos);\n }\n\n private onPointerup(event: PointerEvent): void {\n this.splitter.releasePointerCapture(event.pointerId);\n }\n\n private getOffset(): number {\n if (!this.rect) {\n this.rect = this.getBoundingClientRect();\n }\n const offsetX = this.isLTR ? this.rect.left : this.rect.right;\n return this.vertical ? this.rect.top : offsetX;\n }\n\n private getPosition(event: PointerEvent): number {\n return this.vertical ? event.clientY : event.clientX;\n }\n\n private movePosition(event: KeyboardEvent, offset: number): void {\n event.preventDefault();\n if (this.splitterPos !== undefined) {\n this.updatePosition(this.splitterPos + offset);\n }\n }\n\n private onKeydown(event: KeyboardEvent): void {\n if (!this.resizable) {\n return;\n }\n let direction = 0;\n const isLTRorVertical = this.isLTR || this.vertical;\n switch (event.key) {\n case 'Home':\n event.preventDefault();\n this.updatePosition(this.collapsible ? 0 : this.minPos);\n return;\n case 'End':\n event.preventDefault();\n this.updatePosition(\n this.collapsible\n ? this.viewSize - this.splitterSize\n : this.maxPos\n );\n return;\n case 'ArrowLeft':\n direction = isLTRorVertical ? -1 : 1;\n break;\n case 'ArrowRight':\n direction = isLTRorVertical ? 1 : -1;\n break;\n case 'ArrowUp':\n direction = this.vertical ? -1 : 1;\n break;\n case 'ArrowDown':\n direction = this.vertical ? 1 : -1;\n break;\n case 'PageUp':\n direction = this.vertical ? -1 : 1;\n break;\n case 'PageDown':\n direction = this.vertical ? 1 : -1;\n break;\n }\n if (direction !== 0) {\n const moveBy = event.key.startsWith('Page')\n ? PAGEUPDOWN_KEY_CHANGE_VALUE\n : ARROW_KEY_CHANGE_VALUE;\n this.movePosition(event, moveBy * direction);\n }\n }\n\n private async checkResize(): Promise<void> {\n if (!this.enoughChildren) {\n return;\n }\n this.updateMinMax();\n if (this.splitterPos === undefined) {\n const startPos = await this.calcStartPos();\n this.updatePosition(startPos);\n }\n }\n\n private updateMinMax(): void {\n this.viewSize = this.vertical ? this.offsetHeight : this.offsetWidth;\n this.minPos = Math.max(\n this.primaryMin,\n this.viewSize - this.secondaryMax\n );\n this.maxPos = Math.min(\n this.primaryMax,\n this.viewSize - Math.max(this.secondaryMin, this.splitterSize)\n );\n }\n\n private updatePosition(x: number): void {\n let pos = this.getLimitedPosition(x);\n if (this.collapsible && x <= 0) {\n pos = 0;\n }\n if (\n this.collapsible &&\n x > this.maxPos &&\n x >= this.viewSize - this.splitterSize\n ) {\n pos = this.viewSize - this.splitterSize;\n }\n if (pos !== this.splitterPos) {\n this.splitterPos = pos;\n this.dispatchChangeEvent();\n }\n }\n\n private getLimitedPosition(input: number): number {\n if (input <= this.minPos) {\n return this.minPos;\n }\n if (input >= this.maxPos) {\n return this.maxPos;\n }\n return Math.max(this.minPos, Math.min(this.maxPos, input));\n }\n\n private async calcStartPos(): Promise<number> {\n if (\n this.primarySize !== undefined &&\n /^\\d+(px)?$/.test(this.primarySize)\n ) {\n return parseInt(this.primarySize, 10);\n }\n if (this.primarySize !== undefined && /^\\d+%$/.test(this.primarySize)) {\n return (parseInt(this.primarySize, 10) * this.viewSize) / 100;\n }\n if (this.primarySize === 'auto') {\n this.firstPaneSize = 'auto';\n const nodes = this.paneSlot.assignedNodes({ flatten: true });\n const firstEl = nodes.find(\n (node) => node instanceof HTMLElement\n ) as LitElement;\n if (typeof firstEl.updateComplete !== 'undefined') {\n await firstEl.updateComplete;\n }\n if (firstEl) {\n const size = window\n .getComputedStyle(firstEl)\n .getPropertyValue(this.vertical ? 'height' : 'width');\n const size_i = parseFloat(size);\n if (!isNaN(size_i)) {\n return this.getLimitedPosition(Math.ceil(size_i));\n }\n }\n }\n return this.viewSize / 2;\n }\n\n private dispatchChangeEvent(): void {\n const changeEvent = new Event('change', {\n bubbles: true,\n composed: true,\n });\n this.dispatchEvent(changeEvent);\n }\n\n protected override willUpdate(changed: PropertyValues): void {\n if (!this.hasUpdated || changed.has('primarySize')) {\n this.splitterPos = undefined;\n this.checkResize();\n }\n if (\n changed.has('splitterPos') &&\n this.splitterPos !== undefined &&\n this.enoughChildren\n ) {\n this.firstPaneSize = `${Math.round(this.splitterPos)}px`;\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/SplitView.js
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var v=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var i=(n,a,t,e)=>{for(var s=e>1?void 0:e?f(a,t):a,o=n.length-1,h;o>=0;o--)(h=n[o])&&(s=(e?h(a,t,s):h(s))||s);return e&&s&&v(a,t,s),s};import{html as l,nothing as c,SpectrumElement as b}from"@spectrum-web-components/base";import{classMap as P,ifDefined as d}from"@spectrum-web-components/base/src/directives.js";import{property as r,query as u}from"@spectrum-web-components/base/src/decorators.js";import{streamingListener as y}from"@spectrum-web-components/base/src/streaming-listener.js";import z from"./split-view.css.js";const p=3840,S=2,g=10,E=50,m=50;export class SplitView extends b{constructor(){super();this.vertical=!1;this.resizable=!1;this.collapsible=!1;this.primaryMin=0;this.primaryMax=p;this.secondaryMin=0;this.secondaryMax=p;this.firstPaneSize="auto";this.enoughChildren=!1;this.viewSize=0;this.offset=0;this.minPos=0;this.maxPos=p;const t=window.ResizeObserver;t&&(this.observer=new t(()=>{this.rect=void 0,this.updateMinMax()}))}static get styles(){return[z]}connectedCallback(){var t;super.connectedCallback(),(t=this.observer)==null||t.observe(this)}disconnectedCallback(){var t;(t=this.observer)==null||t.unobserve(this),super.disconnectedCallback()}get splitterSize(){return this._splitterSize||(this._splitterSize=this.splitter&&Math.round(parseFloat(window.getComputedStyle(this.splitter).getPropertyValue(this.vertical?"height":"width")))||S),this._splitterSize}render(){const t={"is-resized-start":this.splitterPos===this.minPos,"is-resized-end":this.splitterPos&&this.splitterPos>this.splitterSize&&this.splitterPos===this.maxPos,"is-collapsed-start":this.splitterPos===0,"is-collapsed-end":this.splitterPos&&this.splitterPos>=Math.max(this.splitterSize,this.viewSize-this.splitterSize)};return l`
|
|
2
2
|
<slot
|
|
3
3
|
@slotchange=${this.onContentSlotChange}
|
|
4
4
|
style="--spectrum-split-view-first-pane-size: ${this.firstPaneSize}"
|
|
5
5
|
></slot>
|
|
6
|
-
${this.enoughChildren?
|
|
6
|
+
${this.enoughChildren?l`
|
|
7
7
|
<div
|
|
8
8
|
id="splitter"
|
|
9
9
|
class=${P(t)}
|
|
10
10
|
role="separator"
|
|
11
|
-
aria-label=${
|
|
11
|
+
aria-label=${d(this.label||void 0)}
|
|
12
12
|
aria-valuenow=${Math.round(parseFloat(this.firstPaneSize)/this.viewSize*100)}
|
|
13
|
-
tabindex=${
|
|
13
|
+
tabindex=${d(this.resizable?"0":void 0)}
|
|
14
14
|
@keydown=${this.onKeydown}
|
|
15
15
|
${y({start:["pointerdown",this.onPointerdown],streamInside:["pointermove",this.onPointermove],end:[["pointerup","pointercancel","pointerleave"],this.onPointerup]})}
|
|
16
16
|
>
|
|
17
|
-
${this.resizable?
|
|
17
|
+
${this.resizable?l`
|
|
18
18
|
<div id="gripper"></div>
|
|
19
|
-
`:
|
|
19
|
+
`:c}
|
|
20
20
|
</div>
|
|
21
|
-
`:
|
|
22
|
-
`}onContentSlotChange(){this.enoughChildren=this.children.length>1,this.checkResize()}onPointerdown(t){if(!this.resizable||t.button&&t.button!==0){t.preventDefault();return}this.splitter.setPointerCapture(t.pointerId),this.offset=this.getOffset()}onPointermove(t){t.preventDefault();let e=this.vertical||this.isLTR?this.getPosition(t)-this.offset:this.offset-this.getPosition(t);this.collapsible&&e<this.minPos-
|
|
21
|
+
`:c}
|
|
22
|
+
`}onContentSlotChange(){this.enoughChildren=this.children.length>1,this.checkResize()}onPointerdown(t){if(!this.resizable||t.button&&t.button!==0){t.preventDefault();return}this.splitter.setPointerCapture(t.pointerId),this.offset=this.getOffset()}onPointermove(t){t.preventDefault();let e=this.vertical||this.isLTR?this.getPosition(t)-this.offset:this.offset-this.getPosition(t);this.collapsible&&e<this.minPos-m&&(e=0),this.collapsible&&e>this.maxPos+m&&(e=this.viewSize-this.splitterSize),this.updatePosition(e)}onPointerup(t){this.splitter.releasePointerCapture(t.pointerId)}getOffset(){this.rect||(this.rect=this.getBoundingClientRect());const t=this.isLTR?this.rect.left:this.rect.right;return this.vertical?this.rect.top:t}getPosition(t){return this.vertical?t.clientY:t.clientX}movePosition(t,e){t.preventDefault(),this.splitterPos!==void 0&&this.updatePosition(this.splitterPos+e)}onKeydown(t){if(!this.resizable)return;let e=0;const s=this.isLTR||this.vertical;switch(t.key){case"Home":t.preventDefault(),this.updatePosition(this.collapsible?0:this.minPos);return;case"End":t.preventDefault(),this.updatePosition(this.collapsible?this.viewSize-this.splitterSize:this.maxPos);return;case"ArrowLeft":e=s?-1:1;break;case"ArrowRight":e=s?1:-1;break;case"ArrowUp":e=this.vertical?-1:1;break;case"ArrowDown":e=this.vertical?1:-1;break;case"PageUp":e=this.vertical?-1:1;break;case"PageDown":e=this.vertical?1:-1;break}if(e!==0){const o=t.key.startsWith("Page")?E:g;this.movePosition(t,o*e)}}async checkResize(){if(this.enoughChildren&&(this.updateMinMax(),this.splitterPos===void 0)){const t=await this.calcStartPos();this.updatePosition(t)}}updateMinMax(){this.viewSize=this.vertical?this.offsetHeight:this.offsetWidth,this.minPos=Math.max(this.primaryMin,this.viewSize-this.secondaryMax),this.maxPos=Math.min(this.primaryMax,this.viewSize-Math.max(this.secondaryMin,this.splitterSize))}updatePosition(t){let e=this.getLimitedPosition(t);this.collapsible&&t<=0&&(e=0),this.collapsible&&t>this.maxPos&&t>=this.viewSize-this.splitterSize&&(e=this.viewSize-this.splitterSize),e!==this.splitterPos&&(this.splitterPos=e,this.dispatchChangeEvent())}getLimitedPosition(t){return t<=this.minPos?this.minPos:t>=this.maxPos?this.maxPos:Math.max(this.minPos,Math.min(this.maxPos,t))}async calcStartPos(){if(this.primarySize!==void 0&&/^\d+(px)?$/.test(this.primarySize))return parseInt(this.primarySize,10);if(this.primarySize!==void 0&&/^\d+%$/.test(this.primarySize))return parseInt(this.primarySize,10)*this.viewSize/100;if(this.primarySize==="auto"){this.firstPaneSize="auto";const e=this.paneSlot.assignedNodes({flatten:!0}).find(s=>s instanceof HTMLElement);if(typeof e.updateComplete!="undefined"&&await e.updateComplete,e){const s=window.getComputedStyle(e).getPropertyValue(this.vertical?"height":"width"),o=parseFloat(s);if(!isNaN(o))return this.getLimitedPosition(Math.ceil(o))}}return this.viewSize/2}dispatchChangeEvent(){const t=new Event("change",{bubbles:!0,composed:!0});this.dispatchEvent(t)}willUpdate(t){(!this.hasUpdated||t.has("primarySize"))&&(this.splitterPos=void 0,this.checkResize()),t.has("splitterPos")&&this.splitterPos!==void 0&&this.enoughChildren&&(this.firstPaneSize=`${Math.round(this.splitterPos)}px`)}}i([r({type:Boolean,reflect:!0})],SplitView.prototype,"vertical",2),i([r({type:Boolean,reflect:!0})],SplitView.prototype,"resizable",2),i([r({type:Boolean,reflect:!0})],SplitView.prototype,"collapsible",2),i([r({type:Number,attribute:"primary-min"})],SplitView.prototype,"primaryMin",2),i([r({type:Number,attribute:"primary-max"})],SplitView.prototype,"primaryMax",2),i([r({type:String,attribute:"primary-size"})],SplitView.prototype,"primarySize",2),i([r({type:Number,attribute:"secondary-min"})],SplitView.prototype,"secondaryMin",2),i([r({type:Number,attribute:"secondary-max"})],SplitView.prototype,"secondaryMax",2),i([r({type:Number,reflect:!0,attribute:"splitter-pos"})],SplitView.prototype,"splitterPos",2),i([r({type:String,attribute:!1})],SplitView.prototype,"firstPaneSize",2),i([r()],SplitView.prototype,"label",2),i([r({type:Boolean,attribute:!1})],SplitView.prototype,"enoughChildren",2),i([r({type:Number})],SplitView.prototype,"viewSize",2),i([u("slot")],SplitView.prototype,"paneSlot",2),i([u("#splitter")],SplitView.prototype,"splitter",2);
|
|
23
23
|
//# sourceMappingURL=SplitView.js.map
|
package/src/SplitView.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["SplitView.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n LitElement,\n nothing,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n classMap,\n ifDefined,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js';\n\nimport { WithSWCResizeObserver } from './types';\n\nimport styles from './split-view.css.js';\n\nconst DEFAULT_MAX_SIZE = 3840;\n\nconst SPLITTERSIZE = 2;\n\nconst ARROW_KEY_CHANGE_VALUE = 10;\n\nconst PAGEUPDOWN_KEY_CHANGE_VALUE = 50;\n\nconst COLLAPSE_THREASHOLD = 50;\n\n/**\n * @element sp-split-view\n *\n * @slot Two sibling elements to be sized by the element attritubes\n * @fires change - Announces the new position of the splitter\n */\nexport class SplitView extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ type: Boolean, reflect: true })\n public vertical = false;\n\n @property({ type: Boolean, reflect: true })\n public resizable = false;\n\n @property({ type: Boolean, reflect: true })\n public collapsible = false;\n\n /** The minimum size of the primary pane */\n @property({ type: Number, attribute: 'primary-min' })\n public primaryMin = 0;\n\n /** The maximum size of the primary pane */\n @property({ type: Number, attribute: 'primary-max' })\n public primaryMax = DEFAULT_MAX_SIZE;\n\n /**\n * The start size of the primary pane, can be a real pixel number|string, percentage or \"auto\"\n * For example: \"100\", \"120px\", \"75%\" or \"auto\" are valid values\n * @type {number |\u00A0number + \"px\" | number + \"%\" | \"auto\"}\n * @attr\n */\n @property({ type: String, attribute: 'primary-size' })\n public primarySize?: string;\n\n /** The minimum size of the secondary pane */\n @property({ type: Number, attribute: 'secondary-min' })\n public secondaryMin = 0;\n\n /** The maximum size of the secondary pane */\n @property({ type: Number, attribute: 'secondary-max' })\n public secondaryMax = DEFAULT_MAX_SIZE;\n\n /** The current splitter position of split-view */\n @property({ type: Number, reflect: true, attribute: 'splitter-pos' })\n public splitterPos?: number;\n\n /** The current size of first pane of split-view */\n @property({ type: String, attribute: false })\n private firstPaneSize = 'auto';\n\n @property()\n public label?: string;\n\n @property({ type: Boolean, attribute: false })\n private enoughChildren = false;\n\n @property({ type: Number })\n private viewSize = 0;\n\n @query('slot')\n private paneSlot!: HTMLSlotElement;\n\n @query('#splitter')\n private splitter!: HTMLDivElement;\n\n private offset = 0;\n\n private minPos = 0;\n\n private maxPos = DEFAULT_MAX_SIZE;\n\n private observer?: WithSWCResizeObserver['ResizeObserver'];\n\n private rect?: DOMRect;\n\n private _splitterSize?: number;\n\n public constructor() {\n super();\n const RO = (window as unknown as WithSWCResizeObserver).ResizeObserver;\n if (RO) {\n this.observer = new RO(() => {\n this.rect = undefined;\n this.updateMinMax();\n });\n }\n }\n\n public override connectedCallback(): void {\n super.connectedCallback();\n this.observer?.observe(this);\n }\n\n public override disconnectedCallback(): void {\n this.observer?.unobserve(this);\n super.disconnectedCallback();\n }\n\n /**\n * @private\n **/\n public get splitterSize(): number {\n if (!this._splitterSize) {\n this._splitterSize =\n (this.splitter &&\n Math.round(\n parseFloat(\n window\n .getComputedStyle(this.splitter)\n .getPropertyValue(\n this.vertical ? 'height' : 'width'\n )\n )\n )) ||\n SPLITTERSIZE;\n }\n return this._splitterSize;\n }\n\n protected override render(): TemplateResult {\n const splitterClasses = {\n 'is-resized-start': this.splitterPos === this.minPos,\n 'is-resized-end': (this.splitterPos &&\n this.splitterPos > this.splitterSize &&\n this.splitterPos === this.maxPos) as boolean,\n 'is-collapsed-start': this.splitterPos === 0,\n 'is-collapsed-end': (this.splitterPos &&\n this.splitterPos >=\n Math.max(\n this.splitterSize,\n this.viewSize - this.splitterSize\n )) as boolean,\n };\n return html`\n <slot\n @slotchange=${this.onContentSlotChange}\n style=\"--spectrum-split-view-first-pane-size: ${this\n .firstPaneSize}\"\n ></slot>\n ${this.enoughChildren\n ? html`\n <div\n id=\"splitter\"\n class=${classMap(splitterClasses)}\n role=\"separator\"\n aria-label=${ifDefined(this.label || undefined)}\n aria-valuenow=${Math.round(\n (parseFloat(this.firstPaneSize) / this.viewSize) *\n 100\n )}\n tabindex=${ifDefined(\n this.resizable ? '0' : undefined\n )}\n @keydown=${this.onKeydown}\n ${streamingListener({\n start: ['pointerdown', this.onPointerdown],\n streamInside: ['pointermove', this.onPointermove],\n end: [\n [\n 'pointerup',\n 'pointercancel',\n 'pointerleave',\n ],\n this.onPointerup,\n ],\n })}\n >\n ${this.resizable\n ? html`\n <div id=\"gripper\"></div>\n `\n : html``}\n </div>\n `\n : nothing}\n `;\n }\n\n private onContentSlotChange(): void {\n this.enoughChildren = this.children.length > 1;\n this.checkResize();\n }\n\n private onPointerdown(event: PointerEvent): void {\n if (!this.resizable || (event.button && event.button !== 0)) {\n event.preventDefault();\n return;\n }\n this.splitter.setPointerCapture(event.pointerId);\n this.offset = this.getOffset();\n }\n\n private onPointermove(event: PointerEvent): void {\n event.preventDefault();\n let pos =\n this.vertical || this.isLTR\n ? this.getPosition(event) - this.offset\n : this.offset - this.getPosition(event);\n if (this.collapsible && pos < this.minPos - COLLAPSE_THREASHOLD) {\n pos = 0;\n }\n if (this.collapsible && pos > this.maxPos + COLLAPSE_THREASHOLD) {\n pos = this.viewSize - this.splitterSize;\n }\n this.updatePosition(pos);\n }\n\n private onPointerup(event: PointerEvent): void {\n this.splitter.releasePointerCapture(event.pointerId);\n }\n\n private getOffset(): number {\n if (!this.rect) {\n this.rect = this.getBoundingClientRect();\n }\n const offsetX = this.isLTR ? this.rect.left : this.rect.right;\n return this.vertical ? this.rect.top : offsetX;\n }\n\n private getPosition(event: PointerEvent): number {\n return this.vertical ? event.clientY : event.clientX;\n }\n\n private movePosition(event: KeyboardEvent, offset: number): void {\n event.preventDefault();\n if (this.splitterPos !== undefined) {\n this.updatePosition(this.splitterPos + offset);\n }\n }\n\n private onKeydown(event: KeyboardEvent): void {\n if (!this.resizable) {\n return;\n }\n let direction = 0;\n const isLTRorVertical = this.isLTR || this.vertical;\n switch (event.key) {\n case 'Home':\n event.preventDefault();\n this.updatePosition(this.collapsible ? 0 : this.minPos);\n return;\n case 'End':\n event.preventDefault();\n this.updatePosition(\n this.collapsible\n ? this.viewSize - this.splitterSize\n : this.maxPos\n );\n return;\n case 'ArrowLeft':\n direction = isLTRorVertical ? -1 : 1;\n break;\n case 'ArrowRight':\n direction = isLTRorVertical ? 1 : -1;\n break;\n case 'ArrowUp':\n direction = this.vertical ? -1 : 1;\n break;\n case 'ArrowDown':\n direction = this.vertical ? 1 : -1;\n break;\n case 'PageUp':\n direction = this.vertical ? -1 : 1;\n break;\n case 'PageDown':\n direction = this.vertical ? 1 : -1;\n break;\n }\n if (direction !== 0) {\n const moveBy = event.key.startsWith('Page')\n ? PAGEUPDOWN_KEY_CHANGE_VALUE\n : ARROW_KEY_CHANGE_VALUE;\n this.movePosition(event, moveBy * direction);\n }\n }\n\n private async checkResize(): Promise<void> {\n if (!this.enoughChildren) {\n return;\n }\n this.updateMinMax();\n if (this.splitterPos === undefined) {\n const startPos = await this.calcStartPos();\n this.updatePosition(startPos);\n }\n }\n\n private updateMinMax(): void {\n this.viewSize = this.vertical ? this.offsetHeight : this.offsetWidth;\n this.minPos = Math.max(\n this.primaryMin,\n this.viewSize - this.secondaryMax\n );\n this.maxPos = Math.min(\n this.primaryMax,\n this.viewSize - Math.max(this.secondaryMin, this.splitterSize)\n );\n }\n\n private updatePosition(x: number): void {\n let pos = this.getLimitedPosition(x);\n if (this.collapsible && x <= 0) {\n pos = 0;\n }\n if (\n this.collapsible &&\n x > this.maxPos &&\n x >= this.viewSize - this.splitterSize\n ) {\n pos = this.viewSize - this.splitterSize;\n }\n if (pos !== this.splitterPos) {\n this.splitterPos = pos;\n this.dispatchChangeEvent();\n }\n }\n\n private getLimitedPosition(input: number): number {\n if (input <= this.minPos) {\n return this.minPos;\n }\n if (input >= this.maxPos) {\n return this.maxPos;\n }\n return Math.max(this.minPos, Math.min(this.maxPos, input));\n }\n\n private async calcStartPos(): Promise<number> {\n if (\n this.primarySize !== undefined &&\n /^\\d+(px)?$/.test(this.primarySize)\n ) {\n return parseInt(this.primarySize, 10);\n }\n if (this.primarySize !== undefined && /^\\d+%$/.test(this.primarySize)) {\n return (parseInt(this.primarySize, 10) * this.viewSize) / 100;\n }\n if (this.primarySize === 'auto') {\n this.firstPaneSize = 'auto';\n const nodes = this.paneSlot.assignedNodes({ flatten: true });\n const firstEl = nodes.find(\n (node) => node instanceof HTMLElement\n ) as LitElement;\n if (typeof firstEl.updateComplete !== 'undefined') {\n await firstEl.updateComplete;\n }\n if (firstEl) {\n const size = window\n .getComputedStyle(firstEl)\n .getPropertyValue(this.vertical ? 'height' : 'width');\n const size_i = parseFloat(size);\n if (!isNaN(size_i)) {\n return this.getLimitedPosition(Math.ceil(size_i));\n }\n }\n }\n return this.viewSize / 2;\n }\n\n private dispatchChangeEvent(): void {\n const changeEvent = new Event('change', {\n bubbles: true,\n composed: true,\n });\n this.dispatchEvent(changeEvent);\n }\n\n protected override willUpdate(changed: PropertyValues): void {\n if (!this.hasUpdated || changed.has('primarySize')) {\n this.splitterPos = undefined;\n this.checkResize();\n }\n if (\n changed.has('splitterPos') &&\n this.splitterPos !== undefined &&\n this.enoughChildren\n ) {\n this.firstPaneSize = `${Math.round(this.splitterPos)}px`;\n }\n }\n}\n"],
|
|
5
|
-
"mappings": "qNAYA,OAEI,QAAAA,EAEA,WAAAC,EAEA,mBAAAC,MAEG,gCACP,OACI,YAAAC,EACA,aAAAC,MACG,kDACP,OACI,YAAAC,EACA,SAAAC,MACG,kDACP,OAAS,qBAAAC,MAAyB,0DAIlC,OAAOC,MAAY,sBAEnB,MAAMC,EAAmB,KAEnBC,EAAe,EAEfC,EAAyB,GAEzBC,EAA8B,GAE9BC,EAAsB,GAQrB,aAAM,kBAAkBX,CAAgB,CA0EpC,aAAc,CACjB,MAAM,EArEV,KAAO,SAAW,GAGlB,KAAO,UAAY,GAGnB,KAAO,YAAc,GAIrB,KAAO,WAAa,EAIpB,KAAO,WAAaO,EAapB,KAAO,aAAe,EAItB,KAAO,aAAeA,EAQtB,KAAQ,cAAgB,OAMxB,KAAQ,eAAiB,GAGzB,KAAQ,SAAW,EAQnB,KAAQ,OAAS,EAEjB,KAAQ,OAAS,EAEjB,KAAQ,OAASA,EAUb,MAAMK,EAAM,OAA4C,eACpDA,IACA,KAAK,SAAW,IAAIA,EAAG,IAAM,CACzB,KAAK,KAAO,OACZ,KAAK,aAAa,CACtB,CAAC,EAET,CAlFA,WAA2B,QAAyB,CAChD,MAAO,CAACN,CAAM,CAClB,CAkFgB,mBAA0B,CAxI9C,IAAAO,EAyIQ,MAAM,kBAAkB,GACxBA,EAAA,KAAK,WAAL,MAAAA,EAAe,QAAQ,KAC3B,CAEgB,sBAA6B,CA7IjD,IAAAA,GA8IQA,EAAA,KAAK,WAAL,MAAAA,EAAe,UAAU,MACzB,MAAM,qBAAqB,CAC/B,CAKA,IAAW,cAAuB,CAC9B,OAAK,KAAK,gBACN,KAAK,cACA,KAAK,UACF,KAAK,MACD,WACI,OACK,iBAAiB,KAAK,QAAQ,EAC9B,iBACG,KAAK,SAAW,SAAW,OAC/B,CACR,CACJ,GACJL,GAED,KAAK,aAChB,CAEmB,QAAyB,CACxC,MAAMM,EAAkB,CACpB,mBAAoB,KAAK,cAAgB,KAAK,OAC9C,iBAAmB,KAAK,aACpB,KAAK,YAAc,KAAK,cACxB,KAAK,cAAgB,KAAK,OAC9B,qBAAsB,KAAK,cAAgB,EAC3C,mBAAqB,KAAK,aACtB,KAAK,aACD,KAAK,IACD,KAAK,aACL,KAAK,SAAW,KAAK,YACzB,CACZ,EACA,OAAOhB;AAAA;AAAA,8BAEe,KAAK,mBAAmB;AAAA,gEACU,KAC3C,aAAa;AAAA;AAAA,cAEpB,KAAK,eACDA;AAAA;AAAA;AAAA,kCAGgBG,EAASa,CAAe,CAAC;AAAA;AAAA,uCAEpBZ,EAAU,KAAK,OAAS,MAAS,CAAC;AAAA,0CAC/B,KAAK,MAChB,WAAW,KAAK,aAAa,EAAI,KAAK,SACnC,GACR,CAAC;AAAA,qCACUA,EACP,KAAK,UAAY,IAAM,MAC3B,CAAC;AAAA,qCACU,KAAK,SAAS;AAAA,4BACvBG,EAAkB,CAChB,MAAO,CAAC,cAAe,KAAK,aAAa,EACzC,aAAc,CAAC,cAAe,KAAK,aAAa,EAChD,IAAK,CACD,CACI,YACA,gBACA,cACJ,EACA,KAAK,WACT,CACJ,CAAC,CAAC;AAAA;AAAA,4BAEA,KAAK,UACDP;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n LitElement,\n nothing,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n classMap,\n ifDefined,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js';\n\nimport { WithSWCResizeObserver } from './types';\n\nimport styles from './split-view.css.js';\n\nconst DEFAULT_MAX_SIZE = 3840;\n\nconst SPLITTERSIZE = 2;\n\nconst ARROW_KEY_CHANGE_VALUE = 10;\n\nconst PAGEUPDOWN_KEY_CHANGE_VALUE = 50;\n\nconst COLLAPSE_THREASHOLD = 50;\n\n/**\n * @element sp-split-view\n *\n * @slot Two sibling elements to be sized by the element attritubes\n * @fires change - Announces the new position of the splitter\n */\nexport class SplitView extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ type: Boolean, reflect: true })\n public vertical = false;\n\n @property({ type: Boolean, reflect: true })\n public resizable = false;\n\n @property({ type: Boolean, reflect: true })\n public collapsible = false;\n\n /** The minimum size of the primary pane */\n @property({ type: Number, attribute: 'primary-min' })\n public primaryMin = 0;\n\n /** The maximum size of the primary pane */\n @property({ type: Number, attribute: 'primary-max' })\n public primaryMax = DEFAULT_MAX_SIZE;\n\n /**\n * The start size of the primary pane, can be a real pixel number|string, percentage or \"auto\"\n * For example: \"100\", \"120px\", \"75%\" or \"auto\" are valid values\n * @type {number |\u00A0number + \"px\" | number + \"%\" | \"auto\"}\n * @attr\n */\n @property({ type: String, attribute: 'primary-size' })\n public primarySize?: string;\n\n /** The minimum size of the secondary pane */\n @property({ type: Number, attribute: 'secondary-min' })\n public secondaryMin = 0;\n\n /** The maximum size of the secondary pane */\n @property({ type: Number, attribute: 'secondary-max' })\n public secondaryMax = DEFAULT_MAX_SIZE;\n\n /** The current splitter position of split-view */\n @property({ type: Number, reflect: true, attribute: 'splitter-pos' })\n public splitterPos?: number;\n\n /** The current size of first pane of split-view */\n @property({ type: String, attribute: false })\n private firstPaneSize = 'auto';\n\n @property()\n public label?: string;\n\n @property({ type: Boolean, attribute: false })\n private enoughChildren = false;\n\n @property({ type: Number })\n private viewSize = 0;\n\n @query('slot')\n private paneSlot!: HTMLSlotElement;\n\n @query('#splitter')\n private splitter!: HTMLDivElement;\n\n private offset = 0;\n\n private minPos = 0;\n\n private maxPos = DEFAULT_MAX_SIZE;\n\n private observer?: WithSWCResizeObserver['ResizeObserver'];\n\n private rect?: DOMRect;\n\n private _splitterSize?: number;\n\n public constructor() {\n super();\n const RO = (window as unknown as WithSWCResizeObserver).ResizeObserver;\n if (RO) {\n this.observer = new RO(() => {\n this.rect = undefined;\n this.updateMinMax();\n });\n }\n }\n\n public override connectedCallback(): void {\n super.connectedCallback();\n this.observer?.observe(this);\n }\n\n public override disconnectedCallback(): void {\n this.observer?.unobserve(this);\n super.disconnectedCallback();\n }\n\n /**\n * @private\n **/\n public get splitterSize(): number {\n if (!this._splitterSize) {\n this._splitterSize =\n (this.splitter &&\n Math.round(\n parseFloat(\n window\n .getComputedStyle(this.splitter)\n .getPropertyValue(\n this.vertical ? 'height' : 'width'\n )\n )\n )) ||\n SPLITTERSIZE;\n }\n return this._splitterSize;\n }\n\n protected override render(): TemplateResult {\n const splitterClasses = {\n 'is-resized-start': this.splitterPos === this.minPos,\n 'is-resized-end': (this.splitterPos &&\n this.splitterPos > this.splitterSize &&\n this.splitterPos === this.maxPos) as boolean,\n 'is-collapsed-start': this.splitterPos === 0,\n 'is-collapsed-end': (this.splitterPos &&\n this.splitterPos >=\n Math.max(\n this.splitterSize,\n this.viewSize - this.splitterSize\n )) as boolean,\n };\n return html`\n <slot\n @slotchange=${this.onContentSlotChange}\n style=\"--spectrum-split-view-first-pane-size: ${this\n .firstPaneSize}\"\n ></slot>\n ${this.enoughChildren\n ? html`\n <div\n id=\"splitter\"\n class=${classMap(splitterClasses)}\n role=\"separator\"\n aria-label=${ifDefined(this.label || undefined)}\n aria-valuenow=${Math.round(\n (parseFloat(this.firstPaneSize) / this.viewSize) *\n 100\n )}\n tabindex=${ifDefined(\n this.resizable ? '0' : undefined\n )}\n @keydown=${this.onKeydown}\n ${streamingListener({\n start: ['pointerdown', this.onPointerdown],\n streamInside: ['pointermove', this.onPointermove],\n end: [\n [\n 'pointerup',\n 'pointercancel',\n 'pointerleave',\n ],\n this.onPointerup,\n ],\n })}\n >\n ${this.resizable\n ? html`\n <div id=\"gripper\"></div>\n `\n : nothing}\n </div>\n `\n : nothing}\n `;\n }\n\n private onContentSlotChange(): void {\n this.enoughChildren = this.children.length > 1;\n this.checkResize();\n }\n\n private onPointerdown(event: PointerEvent): void {\n if (!this.resizable || (event.button && event.button !== 0)) {\n event.preventDefault();\n return;\n }\n this.splitter.setPointerCapture(event.pointerId);\n this.offset = this.getOffset();\n }\n\n private onPointermove(event: PointerEvent): void {\n event.preventDefault();\n let pos =\n this.vertical || this.isLTR\n ? this.getPosition(event) - this.offset\n : this.offset - this.getPosition(event);\n if (this.collapsible && pos < this.minPos - COLLAPSE_THREASHOLD) {\n pos = 0;\n }\n if (this.collapsible && pos > this.maxPos + COLLAPSE_THREASHOLD) {\n pos = this.viewSize - this.splitterSize;\n }\n this.updatePosition(pos);\n }\n\n private onPointerup(event: PointerEvent): void {\n this.splitter.releasePointerCapture(event.pointerId);\n }\n\n private getOffset(): number {\n if (!this.rect) {\n this.rect = this.getBoundingClientRect();\n }\n const offsetX = this.isLTR ? this.rect.left : this.rect.right;\n return this.vertical ? this.rect.top : offsetX;\n }\n\n private getPosition(event: PointerEvent): number {\n return this.vertical ? event.clientY : event.clientX;\n }\n\n private movePosition(event: KeyboardEvent, offset: number): void {\n event.preventDefault();\n if (this.splitterPos !== undefined) {\n this.updatePosition(this.splitterPos + offset);\n }\n }\n\n private onKeydown(event: KeyboardEvent): void {\n if (!this.resizable) {\n return;\n }\n let direction = 0;\n const isLTRorVertical = this.isLTR || this.vertical;\n switch (event.key) {\n case 'Home':\n event.preventDefault();\n this.updatePosition(this.collapsible ? 0 : this.minPos);\n return;\n case 'End':\n event.preventDefault();\n this.updatePosition(\n this.collapsible\n ? this.viewSize - this.splitterSize\n : this.maxPos\n );\n return;\n case 'ArrowLeft':\n direction = isLTRorVertical ? -1 : 1;\n break;\n case 'ArrowRight':\n direction = isLTRorVertical ? 1 : -1;\n break;\n case 'ArrowUp':\n direction = this.vertical ? -1 : 1;\n break;\n case 'ArrowDown':\n direction = this.vertical ? 1 : -1;\n break;\n case 'PageUp':\n direction = this.vertical ? -1 : 1;\n break;\n case 'PageDown':\n direction = this.vertical ? 1 : -1;\n break;\n }\n if (direction !== 0) {\n const moveBy = event.key.startsWith('Page')\n ? PAGEUPDOWN_KEY_CHANGE_VALUE\n : ARROW_KEY_CHANGE_VALUE;\n this.movePosition(event, moveBy * direction);\n }\n }\n\n private async checkResize(): Promise<void> {\n if (!this.enoughChildren) {\n return;\n }\n this.updateMinMax();\n if (this.splitterPos === undefined) {\n const startPos = await this.calcStartPos();\n this.updatePosition(startPos);\n }\n }\n\n private updateMinMax(): void {\n this.viewSize = this.vertical ? this.offsetHeight : this.offsetWidth;\n this.minPos = Math.max(\n this.primaryMin,\n this.viewSize - this.secondaryMax\n );\n this.maxPos = Math.min(\n this.primaryMax,\n this.viewSize - Math.max(this.secondaryMin, this.splitterSize)\n );\n }\n\n private updatePosition(x: number): void {\n let pos = this.getLimitedPosition(x);\n if (this.collapsible && x <= 0) {\n pos = 0;\n }\n if (\n this.collapsible &&\n x > this.maxPos &&\n x >= this.viewSize - this.splitterSize\n ) {\n pos = this.viewSize - this.splitterSize;\n }\n if (pos !== this.splitterPos) {\n this.splitterPos = pos;\n this.dispatchChangeEvent();\n }\n }\n\n private getLimitedPosition(input: number): number {\n if (input <= this.minPos) {\n return this.minPos;\n }\n if (input >= this.maxPos) {\n return this.maxPos;\n }\n return Math.max(this.minPos, Math.min(this.maxPos, input));\n }\n\n private async calcStartPos(): Promise<number> {\n if (\n this.primarySize !== undefined &&\n /^\\d+(px)?$/.test(this.primarySize)\n ) {\n return parseInt(this.primarySize, 10);\n }\n if (this.primarySize !== undefined && /^\\d+%$/.test(this.primarySize)) {\n return (parseInt(this.primarySize, 10) * this.viewSize) / 100;\n }\n if (this.primarySize === 'auto') {\n this.firstPaneSize = 'auto';\n const nodes = this.paneSlot.assignedNodes({ flatten: true });\n const firstEl = nodes.find(\n (node) => node instanceof HTMLElement\n ) as LitElement;\n if (typeof firstEl.updateComplete !== 'undefined') {\n await firstEl.updateComplete;\n }\n if (firstEl) {\n const size = window\n .getComputedStyle(firstEl)\n .getPropertyValue(this.vertical ? 'height' : 'width');\n const size_i = parseFloat(size);\n if (!isNaN(size_i)) {\n return this.getLimitedPosition(Math.ceil(size_i));\n }\n }\n }\n return this.viewSize / 2;\n }\n\n private dispatchChangeEvent(): void {\n const changeEvent = new Event('change', {\n bubbles: true,\n composed: true,\n });\n this.dispatchEvent(changeEvent);\n }\n\n protected override willUpdate(changed: PropertyValues): void {\n if (!this.hasUpdated || changed.has('primarySize')) {\n this.splitterPos = undefined;\n this.checkResize();\n }\n if (\n changed.has('splitterPos') &&\n this.splitterPos !== undefined &&\n this.enoughChildren\n ) {\n this.firstPaneSize = `${Math.round(this.splitterPos)}px`;\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["html", "nothing", "SpectrumElement", "classMap", "ifDefined", "property", "query", "streamingListener", "styles", "DEFAULT_MAX_SIZE", "SPLITTERSIZE", "ARROW_KEY_CHANGE_VALUE", "PAGEUPDOWN_KEY_CHANGE_VALUE", "COLLAPSE_THREASHOLD", "RO", "_a", "splitterClasses", "event", "pos", "offsetX", "offset", "direction", "isLTRorVertical", "moveBy", "startPos", "x", "input", "firstEl", "node", "size", "size_i", "changeEvent", "changed", "__decorateClass"]
|
|
7
7
|
}
|
|
@@ -66,23 +66,11 @@ var(--spectrum-global-dimension-static-size-25)
|
|
|
66
66
|
--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)
|
|
67
67
|
)}:host([resizable]) #splitter.is-active #gripper:before,:host([resizable]) #splitter:active #gripper:before{background-color:var(
|
|
68
68
|
--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)
|
|
69
|
-
)}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter
|
|
69
|
+
)}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter:focus-ring{background-color:var(
|
|
70
70
|
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
71
|
-
)}:host([resizable]) #splitter
|
|
71
|
+
)}:host([resizable]) #splitter:focus-ring #gripper{border-color:var(
|
|
72
72
|
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
73
|
-
)}:host([resizable]) #splitter:focus-
|
|
74
|
-
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
75
|
-
)}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(
|
|
76
|
-
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
77
|
-
);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(
|
|
78
|
-
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
79
|
-
);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-visible #gripper{border-color:var(
|
|
80
|
-
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
81
|
-
);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(
|
|
82
|
-
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
83
|
-
)}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(
|
|
84
|
-
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
85
|
-
)}:host([resizable]) #splitter:focus-visible #gripper:before{background-color:var(
|
|
73
|
+
);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-ring #gripper:before{background-color:var(
|
|
86
74
|
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
87
75
|
)}
|
|
88
76
|
`;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-split-view.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-splitview-vertical-width:100%;--spectrum-splitview-vertical-gripper-width:50%;--spectrum-splitview-vertical-gripper-outer-width:100%;--spectrum-splitview-vertical-gripper-reset:0}:host{display:flex;overflow:hidden}::slotted(*){height:100%}:host([dir=ltr]) #gripper{left:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}:host([dir=rtl]) #gripper{right:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}#gripper{border-radius:var(\n--spectrum-dragbar-gripper-border-radius,var(--spectrum-alias-border-radius-small)\n);border-style:solid;border-width:var(--spectrum-dragbar-gripper-border-width-vertical,4px) var(--spectrum-dragbar-gripper-border-width-horizontal,3px);content:\"\";display:block;height:var(\n--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)\n);position:absolute;top:50%;transform:translateY(-50%);width:var(\n--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)\n)}#splitter{height:100%;position:relative;-webkit-user-select:none;user-select:none;width:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);z-index:1}:host([dir=ltr]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr]) #splitter.is-collapsed-start #gripper:before{left:calc(50% - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2)}:host([dir=rtl]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl]) #splitter.is-collapsed-start #gripper:before{right:calc(50% - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2)}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:\"\";height:100%;position:absolute;top:0;width:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n)}:host([dir=ltr]) #splitter.is-collapsed-start #gripper{left:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper,:host([dir=rtl]) #splitter.is-collapsed-start #gripper{right:0}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{left:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper{left:auto}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{right:auto}:host([vertical]){flex-direction:column}:host([vertical]) ::slotted(*){height:auto;width:var(--spectrum-splitview-vertical-width)}:host([dir=ltr][vertical]) #gripper{left:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=rtl][vertical]) #gripper{right:var(--spectrum-splitview-vertical-gripper-width)}:host([vertical]) #gripper{border-width:var(--spectrum-dragbar-gripper-border-width-horizontal,3px) var(--spectrum-dragbar-gripper-border-width-vertical,4px);height:var(\n--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)\n);top:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1);transform:translate(calc(var(--spectrum-splitview-vertical-gripper-width)*-1));width:var(\n--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)\n)}:host([vertical]) #splitter{height:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);width:var(--spectrum-splitview-vertical-width)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper{left:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper{right:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper:before{left:var(--spectrum-splitview-vertical-gripper-reset)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper:before{right:var(--spectrum-splitview-vertical-gripper-reset)}:host([vertical]) #splitter.is-collapsed-end #gripper:before,:host([vertical]) #splitter.is-collapsed-start #gripper:before{height:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);top:calc(var(--spectrum-splitview-vertical-gripper-width) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2);width:var(--spectrum-splitview-vertical-gripper-outer-width)}:host([vertical]) #splitter.is-collapsed-start #gripper{top:var(--spectrum-splitview-vertical-gripper-reset)}:host([vertical]) #splitter.is-collapsed-end #gripper{bottom:var(--spectrum-splitview-vertical-gripper-reset);top:auto}::slotted(*){background-color:var(\n--spectrum-panel-s-background-color,var(--spectrum-alias-toolbar-background-color)\n)}#splitter{background-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}#gripper{border-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}#gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}:host([resizable]) #splitter.is-hovered,:host([resizable]) #splitter:hover{background-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-hovered #gripper,:host([resizable]) #splitter:hover #gripper{border-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-hovered #gripper:before,:host([resizable]) #splitter:hover #gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-active,:host([resizable]) #splitter:active{background-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter.is-active #gripper,:host([resizable]) #splitter:active #gripper{border-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter.is-active #gripper:before,:host([resizable]) #splitter:active #gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter
|
|
5
|
-
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-splitview-vertical-width:100%;--spectrum-splitview-vertical-gripper-width:50%;--spectrum-splitview-vertical-gripper-outer-width:100%;--spectrum-splitview-vertical-gripper-reset:0}:host{display:flex;overflow:hidden}::slotted(*){height:100%}:host([dir=ltr]) #gripper{left:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}:host([dir=rtl]) #gripper{right:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}#gripper{border-radius:var(\n--spectrum-dragbar-gripper-border-radius,var(--spectrum-alias-border-radius-small)\n);border-style:solid;border-width:var(--spectrum-dragbar-gripper-border-width-vertical,4px) var(--spectrum-dragbar-gripper-border-width-horizontal,3px);content:\"\";display:block;height:var(\n--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)\n);position:absolute;top:50%;transform:translateY(-50%);width:var(\n--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)\n)}#splitter{height:100%;position:relative;-webkit-user-select:none;user-select:none;width:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);z-index:1}:host([dir=ltr]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr]) #splitter.is-collapsed-start #gripper:before{left:calc(50% - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2)}:host([dir=rtl]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl]) #splitter.is-collapsed-start #gripper:before{right:calc(50% - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2)}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:\"\";height:100%;position:absolute;top:0;width:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n)}:host([dir=ltr]) #splitter.is-collapsed-start #gripper{left:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper,:host([dir=rtl]) #splitter.is-collapsed-start #gripper{right:0}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{left:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper{left:auto}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{right:auto}:host([vertical]){flex-direction:column}:host([vertical]) ::slotted(*){height:auto;width:var(--spectrum-splitview-vertical-width)}:host([dir=ltr][vertical]) #gripper{left:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=rtl][vertical]) #gripper{right:var(--spectrum-splitview-vertical-gripper-width)}:host([vertical]) #gripper{border-width:var(--spectrum-dragbar-gripper-border-width-horizontal,3px) var(--spectrum-dragbar-gripper-border-width-vertical,4px);height:var(\n--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)\n);top:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1);transform:translate(calc(var(--spectrum-splitview-vertical-gripper-width)*-1));width:var(\n--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)\n)}:host([vertical]) #splitter{height:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);width:var(--spectrum-splitview-vertical-width)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper{left:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper{right:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper:before{left:var(--spectrum-splitview-vertical-gripper-reset)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper:before{right:var(--spectrum-splitview-vertical-gripper-reset)}:host([vertical]) #splitter.is-collapsed-end #gripper:before,:host([vertical]) #splitter.is-collapsed-start #gripper:before{height:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);top:calc(var(--spectrum-splitview-vertical-gripper-width) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2);width:var(--spectrum-splitview-vertical-gripper-outer-width)}:host([vertical]) #splitter.is-collapsed-start #gripper{top:var(--spectrum-splitview-vertical-gripper-reset)}:host([vertical]) #splitter.is-collapsed-end #gripper{bottom:var(--spectrum-splitview-vertical-gripper-reset);top:auto}::slotted(*){background-color:var(\n--spectrum-panel-s-background-color,var(--spectrum-alias-toolbar-background-color)\n)}#splitter{background-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}#gripper{border-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}#gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}:host([resizable]) #splitter.is-hovered,:host([resizable]) #splitter:hover{background-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-hovered #gripper,:host([resizable]) #splitter:hover #gripper{border-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-hovered #gripper:before,:host([resizable]) #splitter:hover #gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-active,:host([resizable]) #splitter:active{background-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter.is-active #gripper,:host([resizable]) #splitter:active #gripper{border-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter.is-active #gripper:before,:host([resizable]) #splitter:active #gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter:focus-ring{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host([resizable]) #splitter:focus-ring #gripper{border-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-ring #gripper:before{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0Ef,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -64,23 +64,11 @@ var(--spectrum-global-dimension-static-size-25)
|
|
|
64
64
|
--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)
|
|
65
65
|
)}:host([resizable]) #splitter.is-active #gripper:before,:host([resizable]) #splitter:active #gripper:before{background-color:var(
|
|
66
66
|
--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)
|
|
67
|
-
)}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter
|
|
67
|
+
)}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter:focus-ring{background-color:var(
|
|
68
68
|
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
69
|
-
)}:host([resizable]) #splitter
|
|
69
|
+
)}:host([resizable]) #splitter:focus-ring #gripper{border-color:var(
|
|
70
70
|
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
71
|
-
)}:host([resizable]) #splitter:focus-
|
|
72
|
-
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
73
|
-
)}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(
|
|
74
|
-
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
75
|
-
);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(
|
|
76
|
-
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
77
|
-
);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-visible #gripper{border-color:var(
|
|
78
|
-
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
79
|
-
);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(
|
|
80
|
-
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
81
|
-
)}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(
|
|
82
|
-
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
83
|
-
)}:host([resizable]) #splitter:focus-visible #gripper:before{background-color:var(
|
|
71
|
+
);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-ring #gripper:before{background-color:var(
|
|
84
72
|
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
85
73
|
)}
|
|
86
74
|
`;export default e;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-split-view.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-splitview-vertical-width:100%;--spectrum-splitview-vertical-gripper-width:50%;--spectrum-splitview-vertical-gripper-outer-width:100%;--spectrum-splitview-vertical-gripper-reset:0}:host{display:flex;overflow:hidden}::slotted(*){height:100%}:host([dir=ltr]) #gripper{left:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}:host([dir=rtl]) #gripper{right:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}#gripper{border-radius:var(\n--spectrum-dragbar-gripper-border-radius,var(--spectrum-alias-border-radius-small)\n);border-style:solid;border-width:var(--spectrum-dragbar-gripper-border-width-vertical,4px) var(--spectrum-dragbar-gripper-border-width-horizontal,3px);content:\"\";display:block;height:var(\n--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)\n);position:absolute;top:50%;transform:translateY(-50%);width:var(\n--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)\n)}#splitter{height:100%;position:relative;-webkit-user-select:none;user-select:none;width:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);z-index:1}:host([dir=ltr]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr]) #splitter.is-collapsed-start #gripper:before{left:calc(50% - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2)}:host([dir=rtl]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl]) #splitter.is-collapsed-start #gripper:before{right:calc(50% - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2)}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:\"\";height:100%;position:absolute;top:0;width:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n)}:host([dir=ltr]) #splitter.is-collapsed-start #gripper{left:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper,:host([dir=rtl]) #splitter.is-collapsed-start #gripper{right:0}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{left:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper{left:auto}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{right:auto}:host([vertical]){flex-direction:column}:host([vertical]) ::slotted(*){height:auto;width:var(--spectrum-splitview-vertical-width)}:host([dir=ltr][vertical]) #gripper{left:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=rtl][vertical]) #gripper{right:var(--spectrum-splitview-vertical-gripper-width)}:host([vertical]) #gripper{border-width:var(--spectrum-dragbar-gripper-border-width-horizontal,3px) var(--spectrum-dragbar-gripper-border-width-vertical,4px);height:var(\n--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)\n);top:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1);transform:translate(calc(var(--spectrum-splitview-vertical-gripper-width)*-1));width:var(\n--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)\n)}:host([vertical]) #splitter{height:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);width:var(--spectrum-splitview-vertical-width)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper{left:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper{right:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper:before{left:var(--spectrum-splitview-vertical-gripper-reset)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper:before{right:var(--spectrum-splitview-vertical-gripper-reset)}:host([vertical]) #splitter.is-collapsed-end #gripper:before,:host([vertical]) #splitter.is-collapsed-start #gripper:before{height:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);top:calc(var(--spectrum-splitview-vertical-gripper-width) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2);width:var(--spectrum-splitview-vertical-gripper-outer-width)}:host([vertical]) #splitter.is-collapsed-start #gripper{top:var(--spectrum-splitview-vertical-gripper-reset)}:host([vertical]) #splitter.is-collapsed-end #gripper{bottom:var(--spectrum-splitview-vertical-gripper-reset);top:auto}::slotted(*){background-color:var(\n--spectrum-panel-s-background-color,var(--spectrum-alias-toolbar-background-color)\n)}#splitter{background-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}#gripper{border-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}#gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}:host([resizable]) #splitter.is-hovered,:host([resizable]) #splitter:hover{background-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-hovered #gripper,:host([resizable]) #splitter:hover #gripper{border-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-hovered #gripper:before,:host([resizable]) #splitter:hover #gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-active,:host([resizable]) #splitter:active{background-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter.is-active #gripper,:host([resizable]) #splitter:active #gripper{border-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter.is-active #gripper:before,:host([resizable]) #splitter:active #gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter
|
|
5
|
-
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-splitview-vertical-width:100%;--spectrum-splitview-vertical-gripper-width:50%;--spectrum-splitview-vertical-gripper-outer-width:100%;--spectrum-splitview-vertical-gripper-reset:0}:host{display:flex;overflow:hidden}::slotted(*){height:100%}:host([dir=ltr]) #gripper{left:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}:host([dir=rtl]) #gripper{right:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}#gripper{border-radius:var(\n--spectrum-dragbar-gripper-border-radius,var(--spectrum-alias-border-radius-small)\n);border-style:solid;border-width:var(--spectrum-dragbar-gripper-border-width-vertical,4px) var(--spectrum-dragbar-gripper-border-width-horizontal,3px);content:\"\";display:block;height:var(\n--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)\n);position:absolute;top:50%;transform:translateY(-50%);width:var(\n--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)\n)}#splitter{height:100%;position:relative;-webkit-user-select:none;user-select:none;width:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);z-index:1}:host([dir=ltr]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr]) #splitter.is-collapsed-start #gripper:before{left:calc(50% - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2)}:host([dir=rtl]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl]) #splitter.is-collapsed-start #gripper:before{right:calc(50% - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2)}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:\"\";height:100%;position:absolute;top:0;width:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n)}:host([dir=ltr]) #splitter.is-collapsed-start #gripper{left:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper,:host([dir=rtl]) #splitter.is-collapsed-start #gripper{right:0}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{left:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper{left:auto}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{right:auto}:host([vertical]){flex-direction:column}:host([vertical]) ::slotted(*){height:auto;width:var(--spectrum-splitview-vertical-width)}:host([dir=ltr][vertical]) #gripper{left:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=rtl][vertical]) #gripper{right:var(--spectrum-splitview-vertical-gripper-width)}:host([vertical]) #gripper{border-width:var(--spectrum-dragbar-gripper-border-width-horizontal,3px) var(--spectrum-dragbar-gripper-border-width-vertical,4px);height:var(\n--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)\n);top:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1);transform:translate(calc(var(--spectrum-splitview-vertical-gripper-width)*-1));width:var(\n--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)\n)}:host([vertical]) #splitter{height:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);width:var(--spectrum-splitview-vertical-width)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper{left:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper{right:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper:before{left:var(--spectrum-splitview-vertical-gripper-reset)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper:before{right:var(--spectrum-splitview-vertical-gripper-reset)}:host([vertical]) #splitter.is-collapsed-end #gripper:before,:host([vertical]) #splitter.is-collapsed-start #gripper:before{height:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);top:calc(var(--spectrum-splitview-vertical-gripper-width) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2);width:var(--spectrum-splitview-vertical-gripper-outer-width)}:host([vertical]) #splitter.is-collapsed-start #gripper{top:var(--spectrum-splitview-vertical-gripper-reset)}:host([vertical]) #splitter.is-collapsed-end #gripper{bottom:var(--spectrum-splitview-vertical-gripper-reset);top:auto}::slotted(*){background-color:var(\n--spectrum-panel-s-background-color,var(--spectrum-alias-toolbar-background-color)\n)}#splitter{background-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}#gripper{border-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}#gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}:host([resizable]) #splitter.is-hovered,:host([resizable]) #splitter:hover{background-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-hovered #gripper,:host([resizable]) #splitter:hover #gripper{border-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-hovered #gripper:before,:host([resizable]) #splitter:hover #gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-active,:host([resizable]) #splitter:active{background-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter.is-active #gripper,:host([resizable]) #splitter:active #gripper{border-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter.is-active #gripper:before,:host([resizable]) #splitter:active #gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter:focus-ring{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host([resizable]) #splitter:focus-ring #gripper{border-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-ring #gripper:before{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0Ef,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
|
@@ -66,23 +66,11 @@ var(--spectrum-global-dimension-static-size-25)
|
|
|
66
66
|
--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)
|
|
67
67
|
)}:host([resizable]) #splitter.is-active #gripper:before,:host([resizable]) #splitter:active #gripper:before{background-color:var(
|
|
68
68
|
--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)
|
|
69
|
-
)}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter
|
|
69
|
+
)}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter:focus-ring{background-color:var(
|
|
70
70
|
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
71
|
-
)}:host([resizable]) #splitter
|
|
71
|
+
)}:host([resizable]) #splitter:focus-ring #gripper{border-color:var(
|
|
72
72
|
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
73
|
-
)}:host([resizable]) #splitter:focus-
|
|
74
|
-
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
75
|
-
)}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(
|
|
76
|
-
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
77
|
-
);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(
|
|
78
|
-
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
79
|
-
);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-visible #gripper{border-color:var(
|
|
80
|
-
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
81
|
-
);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(
|
|
82
|
-
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
83
|
-
)}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(
|
|
84
|
-
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
85
|
-
)}:host([resizable]) #splitter:focus-visible #gripper:before{background-color:var(
|
|
73
|
+
);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-ring #gripper:before{background-color:var(
|
|
86
74
|
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
87
75
|
)}:host{--spectrum-split-view-first-pane-size:50%}::slotted(*){overflow:auto}::slotted(:first-child){order:1}:host(:not([vertical])) ::slotted(:first-child:not(:last-child)){width:var(--spectrum-split-view-first-pane-size)}:host([vertical]) ::slotted(:first-child:not(:last-child)){height:var(--spectrum-split-view-first-pane-size)}::slotted(:nth-child(2)){flex:1;order:3}::slotted(:nth-child(n+3)){display:none}#gripper{touch-action:none}#splitter{height:auto;order:2}:host([resizable]) #splitter{background-clip:content-box;cursor:ew-resize;margin:0 calc(var(--spectrum-global-dimension-static-size-125)*-1);padding:0 var(--spectrum-global-dimension-static-size-125)}:host([vertical][resizable]) #splitter{background-clip:content-box;cursor:ns-resize;margin:calc(var(--spectrum-global-dimension-static-size-125)*-1) 0;padding:var(--spectrum-global-dimension-static-size-125) 0}:host([resizable][dir=ltr]) #splitter.is-resized-start,:host([resizable][dir=rtl]) #splitter.is-resized-end{cursor:e-resize}:host([resizable][dir=ltr]) #splitter.is-resized-end,:host([resizable][dir=rtl]) #splitter.is-resized-start{cursor:w-resize}:host([vertical][resizable]) #splitter.is-resized-start{cursor:s-resize}:host([vertical][resizable]) #splitter.is-resized-end{cursor:n-resize}:host([resizable][collapsible]) #splitter.is-resized-end,:host([resizable][collapsible]) #splitter.is-resized-start{cursor:ew-resize}:host([resizable][dir=ltr][collapsible]) #splitter.is-collapsed-start,:host([resizable][dir=rtl][collapsible]) #splitter.is-collapsed-end{cursor:e-resize}:host([resizable][dir=ltr][collapsible]) #splitter.is-collapsed-end,:host([resizable][dir=rtl][collapsible]) #splitter.is-collapsed-start{cursor:w-resize}:host([vertical][resizable][collapsible]) #splitter.is-collapsed-start{cursor:s-resize}:host([vertical][resizable][collapsible]) #splitter.is-collapsed-end{cursor:n-resize}:host([vertical][resizable][collapsible]) #splitter.is-resized-end,:host([vertical][resizable][collapsible]) #splitter.is-resized-start{cursor:ns-resize}:host([dir=ltr][resizable]) #gripper{left:calc(var(--spectrum-global-dimension-static-size-125) + (var(
|
|
88
76
|
--spectrum-dragbar-gripper-width,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["split-view.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-splitview-vertical-width:100%;--spectrum-splitview-vertical-gripper-width:50%;--spectrum-splitview-vertical-gripper-outer-width:100%;--spectrum-splitview-vertical-gripper-reset:0}:host{display:flex;overflow:hidden}::slotted(*){height:100%}:host([dir=ltr]) #gripper{left:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}:host([dir=rtl]) #gripper{right:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}#gripper{border-radius:var(\n--spectrum-dragbar-gripper-border-radius,var(--spectrum-alias-border-radius-small)\n);border-style:solid;border-width:var(--spectrum-dragbar-gripper-border-width-vertical,4px) var(--spectrum-dragbar-gripper-border-width-horizontal,3px);content:\"\";display:block;height:var(\n--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)\n);position:absolute;top:50%;transform:translateY(-50%);width:var(\n--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)\n)}#splitter{height:100%;position:relative;-webkit-user-select:none;user-select:none;width:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);z-index:1}:host([dir=ltr]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr]) #splitter.is-collapsed-start #gripper:before{left:calc(50% - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2)}:host([dir=rtl]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl]) #splitter.is-collapsed-start #gripper:before{right:calc(50% - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2)}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:\"\";height:100%;position:absolute;top:0;width:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n)}:host([dir=ltr]) #splitter.is-collapsed-start #gripper{left:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper,:host([dir=rtl]) #splitter.is-collapsed-start #gripper{right:0}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{left:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper{left:auto}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{right:auto}:host([vertical]){flex-direction:column}:host([vertical]) ::slotted(*){height:auto;width:var(--spectrum-splitview-vertical-width)}:host([dir=ltr][vertical]) #gripper{left:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=rtl][vertical]) #gripper{right:var(--spectrum-splitview-vertical-gripper-width)}:host([vertical]) #gripper{border-width:var(--spectrum-dragbar-gripper-border-width-horizontal,3px) var(--spectrum-dragbar-gripper-border-width-vertical,4px);height:var(\n--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)\n);top:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1);transform:translate(calc(var(--spectrum-splitview-vertical-gripper-width)*-1));width:var(\n--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)\n)}:host([vertical]) #splitter{height:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);width:var(--spectrum-splitview-vertical-width)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper{left:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper{right:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper:before{left:var(--spectrum-splitview-vertical-gripper-reset)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper:before{right:var(--spectrum-splitview-vertical-gripper-reset)}:host([vertical]) #splitter.is-collapsed-end #gripper:before,:host([vertical]) #splitter.is-collapsed-start #gripper:before{height:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);top:calc(var(--spectrum-splitview-vertical-gripper-width) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2);width:var(--spectrum-splitview-vertical-gripper-outer-width)}:host([vertical]) #splitter.is-collapsed-start #gripper{top:var(--spectrum-splitview-vertical-gripper-reset)}:host([vertical]) #splitter.is-collapsed-end #gripper{bottom:var(--spectrum-splitview-vertical-gripper-reset);top:auto}::slotted(*){background-color:var(\n--spectrum-panel-s-background-color,var(--spectrum-alias-toolbar-background-color)\n)}#splitter{background-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}#gripper{border-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}#gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}:host([resizable]) #splitter.is-hovered,:host([resizable]) #splitter:hover{background-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-hovered #gripper,:host([resizable]) #splitter:hover #gripper{border-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-hovered #gripper:before,:host([resizable]) #splitter:hover #gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-active,:host([resizable]) #splitter:active{background-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter.is-active #gripper,:host([resizable]) #splitter:active #gripper{border-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter.is-active #gripper:before,:host([resizable]) #splitter:active #gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter.focus-visible{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host([resizable]) #splitter.focus-visible{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host([resizable]) #splitter:focus-visible{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-visible #gripper{border-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host([resizable]) #splitter:focus-visible #gripper:before{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host{--spectrum-split-view-first-pane-size:50%}::slotted(*){overflow:auto}::slotted(:first-child){order:1}:host(:not([vertical])) ::slotted(:first-child:not(:last-child)){width:var(--spectrum-split-view-first-pane-size)}:host([vertical]) ::slotted(:first-child:not(:last-child)){height:var(--spectrum-split-view-first-pane-size)}::slotted(:nth-child(2)){flex:1;order:3}::slotted(:nth-child(n+3)){display:none}#gripper{touch-action:none}#splitter{height:auto;order:2}:host([resizable]) #splitter{background-clip:content-box;cursor:ew-resize;margin:0 calc(var(--spectrum-global-dimension-static-size-125)*-1);padding:0 var(--spectrum-global-dimension-static-size-125)}:host([vertical][resizable]) #splitter{background-clip:content-box;cursor:ns-resize;margin:calc(var(--spectrum-global-dimension-static-size-125)*-1) 0;padding:var(--spectrum-global-dimension-static-size-125) 0}:host([resizable][dir=ltr]) #splitter.is-resized-start,:host([resizable][dir=rtl]) #splitter.is-resized-end{cursor:e-resize}:host([resizable][dir=ltr]) #splitter.is-resized-end,:host([resizable][dir=rtl]) #splitter.is-resized-start{cursor:w-resize}:host([vertical][resizable]) #splitter.is-resized-start{cursor:s-resize}:host([vertical][resizable]) #splitter.is-resized-end{cursor:n-resize}:host([resizable][collapsible]) #splitter.is-resized-end,:host([resizable][collapsible]) #splitter.is-resized-start{cursor:ew-resize}:host([resizable][dir=ltr][collapsible]) #splitter.is-collapsed-start,:host([resizable][dir=rtl][collapsible]) #splitter.is-collapsed-end{cursor:e-resize}:host([resizable][dir=ltr][collapsible]) #splitter.is-collapsed-end,:host([resizable][dir=rtl][collapsible]) #splitter.is-collapsed-start{cursor:w-resize}:host([vertical][resizable][collapsible]) #splitter.is-collapsed-start{cursor:s-resize}:host([vertical][resizable][collapsible]) #splitter.is-collapsed-end{cursor:n-resize}:host([vertical][resizable][collapsible]) #splitter.is-resized-end,:host([vertical][resizable][collapsible]) #splitter.is-resized-start{cursor:ns-resize}:host([dir=ltr][resizable]) #gripper{left:calc(var(--spectrum-global-dimension-static-size-125) + (var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}:host([dir=rtl][resizable]) #gripper{right:calc(var(--spectrum-global-dimension-static-size-125) + (var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}:host([vertical][resizable]) #gripper{left:50%;margin-top:var(--spectrum-global-dimension-static-size-125);right:50%}:host([dir=ltr][resizable]) #splitter.is-collapsed-start #gripper{left:var(--spectrum-global-dimension-static-size-125)}:host([dir=rtl][resizable]) #splitter.is-collapsed-start #gripper{right:var(--spectrum-global-dimension-static-size-125)}:host([vertical][resizable]) #splitter.is-collapsed-start #gripper{left:50%;right:50%}:host([dir=ltr][resizable]) #splitter.is-collapsed-end #gripper{left:var(--spectrum-global-dimension-static-size-25)}:host([dir=rtl][resizable]) #splitter.is-collapsed-end #gripper{right:var(--spectrum-global-dimension-static-size-25)}:host([vertical][resizable]) #splitter.is-collapsed-end #gripper{left:50%;margin-top:0;right:50%;top:var(--spectrum-global-dimension-static-size-25)}\n`;\nexport default styles;"],
|
|
5
|
-
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-splitview-vertical-width:100%;--spectrum-splitview-vertical-gripper-width:50%;--spectrum-splitview-vertical-gripper-outer-width:100%;--spectrum-splitview-vertical-gripper-reset:0}:host{display:flex;overflow:hidden}::slotted(*){height:100%}:host([dir=ltr]) #gripper{left:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}:host([dir=rtl]) #gripper{right:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}#gripper{border-radius:var(\n--spectrum-dragbar-gripper-border-radius,var(--spectrum-alias-border-radius-small)\n);border-style:solid;border-width:var(--spectrum-dragbar-gripper-border-width-vertical,4px) var(--spectrum-dragbar-gripper-border-width-horizontal,3px);content:\"\";display:block;height:var(\n--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)\n);position:absolute;top:50%;transform:translateY(-50%);width:var(\n--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)\n)}#splitter{height:100%;position:relative;-webkit-user-select:none;user-select:none;width:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);z-index:1}:host([dir=ltr]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr]) #splitter.is-collapsed-start #gripper:before{left:calc(50% - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2)}:host([dir=rtl]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl]) #splitter.is-collapsed-start #gripper:before{right:calc(50% - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2)}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:\"\";height:100%;position:absolute;top:0;width:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n)}:host([dir=ltr]) #splitter.is-collapsed-start #gripper{left:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper,:host([dir=rtl]) #splitter.is-collapsed-start #gripper{right:0}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{left:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper{left:auto}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{right:auto}:host([vertical]){flex-direction:column}:host([vertical]) ::slotted(*){height:auto;width:var(--spectrum-splitview-vertical-width)}:host([dir=ltr][vertical]) #gripper{left:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=rtl][vertical]) #gripper{right:var(--spectrum-splitview-vertical-gripper-width)}:host([vertical]) #gripper{border-width:var(--spectrum-dragbar-gripper-border-width-horizontal,3px) var(--spectrum-dragbar-gripper-border-width-vertical,4px);height:var(\n--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)\n);top:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1);transform:translate(calc(var(--spectrum-splitview-vertical-gripper-width)*-1));width:var(\n--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)\n)}:host([vertical]) #splitter{height:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);width:var(--spectrum-splitview-vertical-width)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper{left:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper{right:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper:before{left:var(--spectrum-splitview-vertical-gripper-reset)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper:before{right:var(--spectrum-splitview-vertical-gripper-reset)}:host([vertical]) #splitter.is-collapsed-end #gripper:before,:host([vertical]) #splitter.is-collapsed-start #gripper:before{height:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);top:calc(var(--spectrum-splitview-vertical-gripper-width) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2);width:var(--spectrum-splitview-vertical-gripper-outer-width)}:host([vertical]) #splitter.is-collapsed-start #gripper{top:var(--spectrum-splitview-vertical-gripper-reset)}:host([vertical]) #splitter.is-collapsed-end #gripper{bottom:var(--spectrum-splitview-vertical-gripper-reset);top:auto}::slotted(*){background-color:var(\n--spectrum-panel-s-background-color,var(--spectrum-alias-toolbar-background-color)\n)}#splitter{background-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}#gripper{border-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}#gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}:host([resizable]) #splitter.is-hovered,:host([resizable]) #splitter:hover{background-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-hovered #gripper,:host([resizable]) #splitter:hover #gripper{border-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-hovered #gripper:before,:host([resizable]) #splitter:hover #gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-active,:host([resizable]) #splitter:active{background-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter.is-active #gripper,:host([resizable]) #splitter:active #gripper{border-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter.is-active #gripper:before,:host([resizable]) #splitter:active #gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter:focus-ring{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host([resizable]) #splitter:focus-ring #gripper{border-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-ring #gripper:before{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host{--spectrum-split-view-first-pane-size:50%}::slotted(*){overflow:auto}::slotted(:first-child){order:1}:host(:not([vertical])) ::slotted(:first-child:not(:last-child)){width:var(--spectrum-split-view-first-pane-size)}:host([vertical]) ::slotted(:first-child:not(:last-child)){height:var(--spectrum-split-view-first-pane-size)}::slotted(:nth-child(2)){flex:1;order:3}::slotted(:nth-child(n+3)){display:none}#gripper{touch-action:none}#splitter{height:auto;order:2}:host([resizable]) #splitter{background-clip:content-box;cursor:ew-resize;margin:0 calc(var(--spectrum-global-dimension-static-size-125)*-1);padding:0 var(--spectrum-global-dimension-static-size-125)}:host([vertical][resizable]) #splitter{background-clip:content-box;cursor:ns-resize;margin:calc(var(--spectrum-global-dimension-static-size-125)*-1) 0;padding:var(--spectrum-global-dimension-static-size-125) 0}:host([resizable][dir=ltr]) #splitter.is-resized-start,:host([resizable][dir=rtl]) #splitter.is-resized-end{cursor:e-resize}:host([resizable][dir=ltr]) #splitter.is-resized-end,:host([resizable][dir=rtl]) #splitter.is-resized-start{cursor:w-resize}:host([vertical][resizable]) #splitter.is-resized-start{cursor:s-resize}:host([vertical][resizable]) #splitter.is-resized-end{cursor:n-resize}:host([resizable][collapsible]) #splitter.is-resized-end,:host([resizable][collapsible]) #splitter.is-resized-start{cursor:ew-resize}:host([resizable][dir=ltr][collapsible]) #splitter.is-collapsed-start,:host([resizable][dir=rtl][collapsible]) #splitter.is-collapsed-end{cursor:e-resize}:host([resizable][dir=ltr][collapsible]) #splitter.is-collapsed-end,:host([resizable][dir=rtl][collapsible]) #splitter.is-collapsed-start{cursor:w-resize}:host([vertical][resizable][collapsible]) #splitter.is-collapsed-start{cursor:s-resize}:host([vertical][resizable][collapsible]) #splitter.is-collapsed-end{cursor:n-resize}:host([vertical][resizable][collapsible]) #splitter.is-resized-end,:host([vertical][resizable][collapsible]) #splitter.is-resized-start{cursor:ns-resize}:host([dir=ltr][resizable]) #gripper{left:calc(var(--spectrum-global-dimension-static-size-125) + (var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}:host([dir=rtl][resizable]) #gripper{right:calc(var(--spectrum-global-dimension-static-size-125) + (var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}:host([vertical][resizable]) #gripper{left:50%;margin-top:var(--spectrum-global-dimension-static-size-125);right:50%}:host([dir=ltr][resizable]) #splitter.is-collapsed-start #gripper{left:var(--spectrum-global-dimension-static-size-125)}:host([dir=rtl][resizable]) #splitter.is-collapsed-start #gripper{right:var(--spectrum-global-dimension-static-size-125)}:host([vertical][resizable]) #splitter.is-collapsed-start #gripper{left:50%;right:50%}:host([dir=ltr][resizable]) #splitter.is-collapsed-end #gripper{left:var(--spectrum-global-dimension-static-size-25)}:host([dir=rtl][resizable]) #splitter.is-collapsed-end #gripper{right:var(--spectrum-global-dimension-static-size-25)}:host([vertical][resizable]) #splitter.is-collapsed-end #gripper{left:50%;margin-top:0;right:50%;top:var(--spectrum-global-dimension-static-size-25)}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsFf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/split-view.css.js
CHANGED
|
@@ -64,23 +64,11 @@ var(--spectrum-global-dimension-static-size-25)
|
|
|
64
64
|
--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)
|
|
65
65
|
)}:host([resizable]) #splitter.is-active #gripper:before,:host([resizable]) #splitter:active #gripper:before{background-color:var(
|
|
66
66
|
--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)
|
|
67
|
-
)}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter
|
|
67
|
+
)}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter:focus-ring{background-color:var(
|
|
68
68
|
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
69
|
-
)}:host([resizable]) #splitter
|
|
69
|
+
)}:host([resizable]) #splitter:focus-ring #gripper{border-color:var(
|
|
70
70
|
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
71
|
-
)}:host([resizable]) #splitter:focus-
|
|
72
|
-
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
73
|
-
)}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(
|
|
74
|
-
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
75
|
-
);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(
|
|
76
|
-
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
77
|
-
);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-visible #gripper{border-color:var(
|
|
78
|
-
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
79
|
-
);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(
|
|
80
|
-
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
81
|
-
)}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(
|
|
82
|
-
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
83
|
-
)}:host([resizable]) #splitter:focus-visible #gripper:before{background-color:var(
|
|
71
|
+
);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-ring #gripper:before{background-color:var(
|
|
84
72
|
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
|
85
73
|
)}:host{--spectrum-split-view-first-pane-size:50%}::slotted(*){overflow:auto}::slotted(:first-child){order:1}:host(:not([vertical])) ::slotted(:first-child:not(:last-child)){width:var(--spectrum-split-view-first-pane-size)}:host([vertical]) ::slotted(:first-child:not(:last-child)){height:var(--spectrum-split-view-first-pane-size)}::slotted(:nth-child(2)){flex:1;order:3}::slotted(:nth-child(n+3)){display:none}#gripper{touch-action:none}#splitter{height:auto;order:2}:host([resizable]) #splitter{background-clip:content-box;cursor:ew-resize;margin:0 calc(var(--spectrum-global-dimension-static-size-125)*-1);padding:0 var(--spectrum-global-dimension-static-size-125)}:host([vertical][resizable]) #splitter{background-clip:content-box;cursor:ns-resize;margin:calc(var(--spectrum-global-dimension-static-size-125)*-1) 0;padding:var(--spectrum-global-dimension-static-size-125) 0}:host([resizable][dir=ltr]) #splitter.is-resized-start,:host([resizable][dir=rtl]) #splitter.is-resized-end{cursor:e-resize}:host([resizable][dir=ltr]) #splitter.is-resized-end,:host([resizable][dir=rtl]) #splitter.is-resized-start{cursor:w-resize}:host([vertical][resizable]) #splitter.is-resized-start{cursor:s-resize}:host([vertical][resizable]) #splitter.is-resized-end{cursor:n-resize}:host([resizable][collapsible]) #splitter.is-resized-end,:host([resizable][collapsible]) #splitter.is-resized-start{cursor:ew-resize}:host([resizable][dir=ltr][collapsible]) #splitter.is-collapsed-start,:host([resizable][dir=rtl][collapsible]) #splitter.is-collapsed-end{cursor:e-resize}:host([resizable][dir=ltr][collapsible]) #splitter.is-collapsed-end,:host([resizable][dir=rtl][collapsible]) #splitter.is-collapsed-start{cursor:w-resize}:host([vertical][resizable][collapsible]) #splitter.is-collapsed-start{cursor:s-resize}:host([vertical][resizable][collapsible]) #splitter.is-collapsed-end{cursor:n-resize}:host([vertical][resizable][collapsible]) #splitter.is-resized-end,:host([vertical][resizable][collapsible]) #splitter.is-resized-start{cursor:ns-resize}:host([dir=ltr][resizable]) #gripper{left:calc(var(--spectrum-global-dimension-static-size-125) + (var(
|
|
86
74
|
--spectrum-dragbar-gripper-width,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["split-view.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-splitview-vertical-width:100%;--spectrum-splitview-vertical-gripper-width:50%;--spectrum-splitview-vertical-gripper-outer-width:100%;--spectrum-splitview-vertical-gripper-reset:0}:host{display:flex;overflow:hidden}::slotted(*){height:100%}:host([dir=ltr]) #gripper{left:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}:host([dir=rtl]) #gripper{right:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}#gripper{border-radius:var(\n--spectrum-dragbar-gripper-border-radius,var(--spectrum-alias-border-radius-small)\n);border-style:solid;border-width:var(--spectrum-dragbar-gripper-border-width-vertical,4px) var(--spectrum-dragbar-gripper-border-width-horizontal,3px);content:\"\";display:block;height:var(\n--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)\n);position:absolute;top:50%;transform:translateY(-50%);width:var(\n--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)\n)}#splitter{height:100%;position:relative;-webkit-user-select:none;user-select:none;width:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);z-index:1}:host([dir=ltr]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr]) #splitter.is-collapsed-start #gripper:before{left:calc(50% - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2)}:host([dir=rtl]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl]) #splitter.is-collapsed-start #gripper:before{right:calc(50% - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2)}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:\"\";height:100%;position:absolute;top:0;width:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n)}:host([dir=ltr]) #splitter.is-collapsed-start #gripper{left:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper,:host([dir=rtl]) #splitter.is-collapsed-start #gripper{right:0}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{left:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper{left:auto}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{right:auto}:host([vertical]){flex-direction:column}:host([vertical]) ::slotted(*){height:auto;width:var(--spectrum-splitview-vertical-width)}:host([dir=ltr][vertical]) #gripper{left:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=rtl][vertical]) #gripper{right:var(--spectrum-splitview-vertical-gripper-width)}:host([vertical]) #gripper{border-width:var(--spectrum-dragbar-gripper-border-width-horizontal,3px) var(--spectrum-dragbar-gripper-border-width-vertical,4px);height:var(\n--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)\n);top:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1);transform:translate(calc(var(--spectrum-splitview-vertical-gripper-width)*-1));width:var(\n--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)\n)}:host([vertical]) #splitter{height:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);width:var(--spectrum-splitview-vertical-width)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper{left:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper{right:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper:before{left:var(--spectrum-splitview-vertical-gripper-reset)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper:before{right:var(--spectrum-splitview-vertical-gripper-reset)}:host([vertical]) #splitter.is-collapsed-end #gripper:before,:host([vertical]) #splitter.is-collapsed-start #gripper:before{height:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);top:calc(var(--spectrum-splitview-vertical-gripper-width) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2);width:var(--spectrum-splitview-vertical-gripper-outer-width)}:host([vertical]) #splitter.is-collapsed-start #gripper{top:var(--spectrum-splitview-vertical-gripper-reset)}:host([vertical]) #splitter.is-collapsed-end #gripper{bottom:var(--spectrum-splitview-vertical-gripper-reset);top:auto}::slotted(*){background-color:var(\n--spectrum-panel-s-background-color,var(--spectrum-alias-toolbar-background-color)\n)}#splitter{background-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}#gripper{border-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}#gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}:host([resizable]) #splitter.is-hovered,:host([resizable]) #splitter:hover{background-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-hovered #gripper,:host([resizable]) #splitter:hover #gripper{border-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-hovered #gripper:before,:host([resizable]) #splitter:hover #gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-active,:host([resizable]) #splitter:active{background-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter.is-active #gripper,:host([resizable]) #splitter:active #gripper{border-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter.is-active #gripper:before,:host([resizable]) #splitter:active #gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter.focus-visible{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host([resizable]) #splitter.focus-visible{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host([resizable]) #splitter:focus-visible{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-visible #gripper{border-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host([resizable]) #splitter:focus-visible #gripper:before{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host{--spectrum-split-view-first-pane-size:50%}::slotted(*){overflow:auto}::slotted(:first-child){order:1}:host(:not([vertical])) ::slotted(:first-child:not(:last-child)){width:var(--spectrum-split-view-first-pane-size)}:host([vertical]) ::slotted(:first-child:not(:last-child)){height:var(--spectrum-split-view-first-pane-size)}::slotted(:nth-child(2)){flex:1;order:3}::slotted(:nth-child(n+3)){display:none}#gripper{touch-action:none}#splitter{height:auto;order:2}:host([resizable]) #splitter{background-clip:content-box;cursor:ew-resize;margin:0 calc(var(--spectrum-global-dimension-static-size-125)*-1);padding:0 var(--spectrum-global-dimension-static-size-125)}:host([vertical][resizable]) #splitter{background-clip:content-box;cursor:ns-resize;margin:calc(var(--spectrum-global-dimension-static-size-125)*-1) 0;padding:var(--spectrum-global-dimension-static-size-125) 0}:host([resizable][dir=ltr]) #splitter.is-resized-start,:host([resizable][dir=rtl]) #splitter.is-resized-end{cursor:e-resize}:host([resizable][dir=ltr]) #splitter.is-resized-end,:host([resizable][dir=rtl]) #splitter.is-resized-start{cursor:w-resize}:host([vertical][resizable]) #splitter.is-resized-start{cursor:s-resize}:host([vertical][resizable]) #splitter.is-resized-end{cursor:n-resize}:host([resizable][collapsible]) #splitter.is-resized-end,:host([resizable][collapsible]) #splitter.is-resized-start{cursor:ew-resize}:host([resizable][dir=ltr][collapsible]) #splitter.is-collapsed-start,:host([resizable][dir=rtl][collapsible]) #splitter.is-collapsed-end{cursor:e-resize}:host([resizable][dir=ltr][collapsible]) #splitter.is-collapsed-end,:host([resizable][dir=rtl][collapsible]) #splitter.is-collapsed-start{cursor:w-resize}:host([vertical][resizable][collapsible]) #splitter.is-collapsed-start{cursor:s-resize}:host([vertical][resizable][collapsible]) #splitter.is-collapsed-end{cursor:n-resize}:host([vertical][resizable][collapsible]) #splitter.is-resized-end,:host([vertical][resizable][collapsible]) #splitter.is-resized-start{cursor:ns-resize}:host([dir=ltr][resizable]) #gripper{left:calc(var(--spectrum-global-dimension-static-size-125) + (var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}:host([dir=rtl][resizable]) #gripper{right:calc(var(--spectrum-global-dimension-static-size-125) + (var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}:host([vertical][resizable]) #gripper{left:50%;margin-top:var(--spectrum-global-dimension-static-size-125);right:50%}:host([dir=ltr][resizable]) #splitter.is-collapsed-start #gripper{left:var(--spectrum-global-dimension-static-size-125)}:host([dir=rtl][resizable]) #splitter.is-collapsed-start #gripper{right:var(--spectrum-global-dimension-static-size-125)}:host([vertical][resizable]) #splitter.is-collapsed-start #gripper{left:50%;right:50%}:host([dir=ltr][resizable]) #splitter.is-collapsed-end #gripper{left:var(--spectrum-global-dimension-static-size-25)}:host([dir=rtl][resizable]) #splitter.is-collapsed-end #gripper{right:var(--spectrum-global-dimension-static-size-25)}:host([vertical][resizable]) #splitter.is-collapsed-end #gripper{left:50%;margin-top:0;right:50%;top:var(--spectrum-global-dimension-static-size-25)}\n`;\nexport default styles;"],
|
|
5
|
-
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-splitview-vertical-width:100%;--spectrum-splitview-vertical-gripper-width:50%;--spectrum-splitview-vertical-gripper-outer-width:100%;--spectrum-splitview-vertical-gripper-reset:0}:host{display:flex;overflow:hidden}::slotted(*){height:100%}:host([dir=ltr]) #gripper{left:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}:host([dir=rtl]) #gripper{right:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}#gripper{border-radius:var(\n--spectrum-dragbar-gripper-border-radius,var(--spectrum-alias-border-radius-small)\n);border-style:solid;border-width:var(--spectrum-dragbar-gripper-border-width-vertical,4px) var(--spectrum-dragbar-gripper-border-width-horizontal,3px);content:\"\";display:block;height:var(\n--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)\n);position:absolute;top:50%;transform:translateY(-50%);width:var(\n--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)\n)}#splitter{height:100%;position:relative;-webkit-user-select:none;user-select:none;width:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);z-index:1}:host([dir=ltr]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr]) #splitter.is-collapsed-start #gripper:before{left:calc(50% - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2)}:host([dir=rtl]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl]) #splitter.is-collapsed-start #gripper:before{right:calc(50% - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2)}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:\"\";height:100%;position:absolute;top:0;width:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n)}:host([dir=ltr]) #splitter.is-collapsed-start #gripper{left:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper,:host([dir=rtl]) #splitter.is-collapsed-start #gripper{right:0}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{left:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper{left:auto}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{right:auto}:host([vertical]){flex-direction:column}:host([vertical]) ::slotted(*){height:auto;width:var(--spectrum-splitview-vertical-width)}:host([dir=ltr][vertical]) #gripper{left:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=rtl][vertical]) #gripper{right:var(--spectrum-splitview-vertical-gripper-width)}:host([vertical]) #gripper{border-width:var(--spectrum-dragbar-gripper-border-width-horizontal,3px) var(--spectrum-dragbar-gripper-border-width-vertical,4px);height:var(\n--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)\n);top:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1);transform:translate(calc(var(--spectrum-splitview-vertical-gripper-width)*-1));width:var(\n--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)\n)}:host([vertical]) #splitter{height:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);width:var(--spectrum-splitview-vertical-width)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper{left:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper{right:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper:before{left:var(--spectrum-splitview-vertical-gripper-reset)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper:before{right:var(--spectrum-splitview-vertical-gripper-reset)}:host([vertical]) #splitter.is-collapsed-end #gripper:before,:host([vertical]) #splitter.is-collapsed-start #gripper:before{height:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);top:calc(var(--spectrum-splitview-vertical-gripper-width) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2);width:var(--spectrum-splitview-vertical-gripper-outer-width)}:host([vertical]) #splitter.is-collapsed-start #gripper{top:var(--spectrum-splitview-vertical-gripper-reset)}:host([vertical]) #splitter.is-collapsed-end #gripper{bottom:var(--spectrum-splitview-vertical-gripper-reset);top:auto}::slotted(*){background-color:var(\n--spectrum-panel-s-background-color,var(--spectrum-alias-toolbar-background-color)\n)}#splitter{background-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}#gripper{border-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}#gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}:host([resizable]) #splitter.is-hovered,:host([resizable]) #splitter:hover{background-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-hovered #gripper,:host([resizable]) #splitter:hover #gripper{border-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-hovered #gripper:before,:host([resizable]) #splitter:hover #gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-active,:host([resizable]) #splitter:active{background-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter.is-active #gripper,:host([resizable]) #splitter:active #gripper{border-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter.is-active #gripper:before,:host([resizable]) #splitter:active #gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter:focus-ring{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host([resizable]) #splitter:focus-ring #gripper{border-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-ring #gripper:before{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host{--spectrum-split-view-first-pane-size:50%}::slotted(*){overflow:auto}::slotted(:first-child){order:1}:host(:not([vertical])) ::slotted(:first-child:not(:last-child)){width:var(--spectrum-split-view-first-pane-size)}:host([vertical]) ::slotted(:first-child:not(:last-child)){height:var(--spectrum-split-view-first-pane-size)}::slotted(:nth-child(2)){flex:1;order:3}::slotted(:nth-child(n+3)){display:none}#gripper{touch-action:none}#splitter{height:auto;order:2}:host([resizable]) #splitter{background-clip:content-box;cursor:ew-resize;margin:0 calc(var(--spectrum-global-dimension-static-size-125)*-1);padding:0 var(--spectrum-global-dimension-static-size-125)}:host([vertical][resizable]) #splitter{background-clip:content-box;cursor:ns-resize;margin:calc(var(--spectrum-global-dimension-static-size-125)*-1) 0;padding:var(--spectrum-global-dimension-static-size-125) 0}:host([resizable][dir=ltr]) #splitter.is-resized-start,:host([resizable][dir=rtl]) #splitter.is-resized-end{cursor:e-resize}:host([resizable][dir=ltr]) #splitter.is-resized-end,:host([resizable][dir=rtl]) #splitter.is-resized-start{cursor:w-resize}:host([vertical][resizable]) #splitter.is-resized-start{cursor:s-resize}:host([vertical][resizable]) #splitter.is-resized-end{cursor:n-resize}:host([resizable][collapsible]) #splitter.is-resized-end,:host([resizable][collapsible]) #splitter.is-resized-start{cursor:ew-resize}:host([resizable][dir=ltr][collapsible]) #splitter.is-collapsed-start,:host([resizable][dir=rtl][collapsible]) #splitter.is-collapsed-end{cursor:e-resize}:host([resizable][dir=ltr][collapsible]) #splitter.is-collapsed-end,:host([resizable][dir=rtl][collapsible]) #splitter.is-collapsed-start{cursor:w-resize}:host([vertical][resizable][collapsible]) #splitter.is-collapsed-start{cursor:s-resize}:host([vertical][resizable][collapsible]) #splitter.is-collapsed-end{cursor:n-resize}:host([vertical][resizable][collapsible]) #splitter.is-resized-end,:host([vertical][resizable][collapsible]) #splitter.is-resized-start{cursor:ns-resize}:host([dir=ltr][resizable]) #gripper{left:calc(var(--spectrum-global-dimension-static-size-125) + (var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}:host([dir=rtl][resizable]) #gripper{right:calc(var(--spectrum-global-dimension-static-size-125) + (var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}:host([vertical][resizable]) #gripper{left:50%;margin-top:var(--spectrum-global-dimension-static-size-125);right:50%}:host([dir=ltr][resizable]) #splitter.is-collapsed-start #gripper{left:var(--spectrum-global-dimension-static-size-125)}:host([dir=rtl][resizable]) #splitter.is-collapsed-start #gripper{right:var(--spectrum-global-dimension-static-size-125)}:host([vertical][resizable]) #splitter.is-collapsed-start #gripper{left:50%;right:50%}:host([dir=ltr][resizable]) #splitter.is-collapsed-end #gripper{left:var(--spectrum-global-dimension-static-size-25)}:host([dir=rtl][resizable]) #splitter.is-collapsed-end #gripper{right:var(--spectrum-global-dimension-static-size-25)}:host([vertical][resizable]) #splitter.is-collapsed-end #gripper{left:50%;margin-top:0;right:50%;top:var(--spectrum-global-dimension-static-size-25)}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsFf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|