UNPKG

@rhi-isncsci-ui/dermatome-diagram

Version:

SVG Rick Hansen Institute logo

www.rickhanseninstitute.org

rick-hansen-institute/ui

736 lines (711 loc) • 71.3 kB

JavaScript

/** * @license * Copyright (c) 2018 Rick Hansen Institute. All rights reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ class RhiIsncsciUiDermatomeDiagram extends HTMLElement { static get is() { return 'rhi-isncsci-ui-dermatome-diagram'; } constructor() { super(); this.attachShadow({ mode: 'open' }); this.requestRender(); } getTemplate() { // tslint:disable:max-line-length return ` <style> :host { display: block; } :host([c2-right="0"]) .c2 .right, :host([c3-right="0"]) .c3 .right, :host([c4-right="0"]) .c4 .right, :host([c5-right="0"]) .c5 .right, :host([c6-right="0"]) .c6 .right, :host([c7-right="0"]) .c7 .right, :host([c8-right="0"]) .c8 .right, :host([t1-right="0"]) .t1 .right, :host([t2-right="0"]) .t2 .right, :host([t3-right="0"]) .t3 .right, :host([t4-right="0"]) .t4 .right, :host([t5-right="0"]) .t5 .right, :host([t6-right="0"]) .t6 .right, :host([t7-right="0"]) .t7 .right, :host([t8-right="0"]) .t8 .right, :host([t9-right="0"]) .t9 .right, :host([t10-right="0"]) .t10 .right, :host([t11-right="0"]) .t11 .right, :host([t12-right="0"]) .t12 .right, :host([l1-right="0"]) .l1 .right, :host([l2-right="0"]) .l2 .right, :host([l3-right="0"]) .l3 .right, :host([l4-right="0"]) .l4 .right, :host([l5-right="0"]) .l5 .right, :host([s1-right="0"]) .s1 .right, :host([c2-left="0"]) .c2 .left, :host([c3-left="0"]) .c3 .left, :host([c4-left="0"]) .c4 .left, :host([c5-left="0"]) .c5 .left, :host([c6-left="0"]) .c6 .left, :host([c7-left="0"]) .c7 .left, :host([c8-left="0"]) .c8 .left, :host([t1-left="0"]) .t1 .left, :host([t2-left="0"]) .t2 .left, :host([t3-left="0"]) .t3 .left, :host([t4-left="0"]) .t4 .left, :host([t5-left="0"]) .t5 .left, :host([t6-left="0"]) .t6 .left, :host([t7-left="0"]) .t7 .left, :host([t8-left="0"]) .t8 .left, :host([t9-left="0"]) .t9 .left, :host([t10-left="0"]) .t10 .left, :host([t11-left="0"]) .t11 .left, :host([t12-left="0"]) .t12 .left, :host([l1-left="0"]) .l1 .left, :host([l2-left="0"]) .l2 .left, :host([l3-left="0"]) .l3 .left, :host([l4-left="0"]) .l4 .left, :host([l5-left="0"]) .l5 .left, :host([s1-left="0"]) .s1 .left { fill: var(--isncsci-diagram-severity-4-color, #000); } :host([c2-right="0!"]) .c2 .right, :host([c3-right="0!"]) .c3 .right, :host([c4-right="0!"]) .c4 .right, :host([c5-right="0!"]) .c5 .right, :host([c6-right="0!"]) .c6 .right, :host([c7-right="0!"]) .c7 .right, :host([c8-right="0!"]) .c8 .right, :host([t1-right="0!"]) .t1 .right, :host([t2-right="0!"]) .t2 .right, :host([t3-right="0!"]) .t3 .right, :host([t4-right="0!"]) .t4 .right, :host([t5-right="0!"]) .t5 .right, :host([t6-right="0!"]) .t6 .right, :host([t7-right="0!"]) .t7 .right, :host([t8-right="0!"]) .t8 .right, :host([t9-right="0!"]) .t9 .right, :host([t10-right="0!"]) .t10 .right, :host([t11-right="0!"]) .t11 .right, :host([t12-right="0!"]) .t12 .right, :host([l1-right="0!"]) .l1 .right, :host([l2-right="0!"]) .l2 .right, :host([l3-right="0!"]) .l3 .right, :host([l4-right="0!"]) .l4 .right, :host([l5-right="0!"]) .l5 .right, :host([s1-right="0!"]) .s1 .right, :host([c2-left="0!"]) .c2 .left, :host([c3-left="0!"]) .c3 .left, :host([c4-left="0!"]) .c4 .left, :host([c5-left="0!"]) .c5 .left, :host([c6-left="0!"]) .c6 .left, :host([c7-left="0!"]) .c7 .left, :host([c8-left="0!"]) .c8 .left, :host([t1-left="0!"]) .t1 .left, :host([t2-left="0!"]) .t2 .left, :host([t3-left="0!"]) .t3 .left, :host([t4-left="0!"]) .t4 .left, :host([t5-left="0!"]) .t5 .left, :host([t6-left="0!"]) .t6 .left, :host([t7-left="0!"]) .t7 .left, :host([t8-left="0!"]) .t8 .left, :host([t9-left="0!"]) .t9 .left, :host([t10-left="0!"]) .t10 .left, :host([t11-left="0!"]) .t11 .left, :host([t12-left="0!"]) .t12 .left, :host([l1-left="0!"]) .l1 .left, :host([l2-left="0!"]) .l2 .left, :host([l3-left="0!"]) .l3 .left, :host([l4-left="0!"]) .l4 .left, :host([l5-left="0!"]) .l5 .left, :host([s1-left="0!"]) .s1 .left { fill: var(--isncsci-diagram-severity-3-color, #333); } :host([c2-right="1"]) .c2 .right, :host([c3-right="1"]) .c3 .right, :host([c4-right="1"]) .c4 .right, :host([c5-right="1"]) .c5 .right, :host([c6-right="1"]) .c6 .right, :host([c7-right="1"]) .c7 .right, :host([c8-right="1"]) .c8 .right, :host([t1-right="1"]) .t1 .right, :host([t2-right="1"]) .t2 .right, :host([t3-right="1"]) .t3 .right, :host([t4-right="1"]) .t4 .right, :host([t5-right="1"]) .t5 .right, :host([t6-right="1"]) .t6 .right, :host([t7-right="1"]) .t7 .right, :host([t8-right="1"]) .t8 .right, :host([t9-right="1"]) .t9 .right, :host([t10-right="1"]) .t10 .right, :host([t11-right="1"]) .t11 .right, :host([t12-right="1"]) .t12 .right, :host([l1-right="1"]) .l1 .right, :host([l2-right="1"]) .l2 .right, :host([l3-right="1"]) .l3 .right, :host([l4-right="1"]) .l4 .right, :host([l5-right="1"]) .l5 .right, :host([s1-right="1"]) .s1 .right, :host([c2-left="1"]) .c2 .left, :host([c3-left="1"]) .c3 .left, :host([c4-left="1"]) .c4 .left, :host([c5-left="1"]) .c5 .left, :host([c6-left="1"]) .c6 .left, :host([c7-left="1"]) .c7 .left, :host([c8-left="1"]) .c8 .left, :host([t1-left="1"]) .t1 .left, :host([t2-left="1"]) .t2 .left, :host([t3-left="1"]) .t3 .left, :host([t4-left="1"]) .t4 .left, :host([t5-left="1"]) .t5 .left, :host([t6-left="1"]) .t6 .left, :host([t7-left="1"]) .t7 .left, :host([t8-left="1"]) .t8 .left, :host([t9-left="1"]) .t9 .left, :host([t10-left="1"]) .t10 .left, :host([t11-left="1"]) .t11 .left, :host([t12-left="1"]) .t12 .left, :host([l1-left="1"]) .l1 .left, :host([l2-left="1"]) .l2 .left, :host([l3-left="1"]) .l3 .left, :host([l4-left="1"]) .l4 .left, :host([l5-left="1"]) .l5 .left, :host([s1-left="1"]) .s1 .left { fill: var(--isncsci-diagram-severity-2-color, #666); } :host([c2-right="1!"]) .c2 .right, :host([c3-right="1!"]) .c3 .right, :host([c4-right="1!"]) .c4 .right, :host([c5-right="1!"]) .c5 .right, :host([c6-right="1!"]) .c6 .right, :host([c7-right="1!"]) .c7 .right, :host([c8-right="1!"]) .c8 .right, :host([t1-right="1!"]) .t1 .right, :host([t2-right="1!"]) .t2 .right, :host([t3-right="1!"]) .t3 .right, :host([t4-right="1!"]) .t4 .right, :host([t5-right="1!"]) .t5 .right, :host([t6-right="1!"]) .t6 .right, :host([t7-right="1!"]) .t7 .right, :host([t8-right="1!"]) .t8 .right, :host([t9-right="1!"]) .t9 .right, :host([t10-right="1!"]) .t10 .right, :host([t11-right="1!"]) .t11 .right, :host([t12-right="1!"]) .t12 .right, :host([l1-right="1!"]) .l1 .right, :host([l2-right="1!"]) .l2 .right, :host([l3-right="1!"]) .l3 .right, :host([l4-right="1!"]) .l4 .right, :host([l5-right="1!"]) .l5 .right, :host([s1-right="1!"]) .s1 .right, :host([c2-left="1!"]) .c2 .left, :host([c3-left="1!"]) .c3 .left, :host([c4-left="1!"]) .c4 .left, :host([c5-left="1!"]) .c5 .left, :host([c6-left="1!"]) .c6 .left, :host([c7-left="1!"]) .c7 .left, :host([c8-left="1!"]) .c8 .left, :host([t1-left="1!"]) .t1 .left, :host([t2-left="1!"]) .t2 .left, :host([t3-left="1!"]) .t3 .left, :host([t4-left="1!"]) .t4 .left, :host([t5-left="1!"]) .t5 .left, :host([t6-left="1!"]) .t6 .left, :host([t7-left="1!"]) .t7 .left, :host([t8-left="1!"]) .t8 .left, :host([t9-left="1!"]) .t9 .left, :host([t10-left="1!"]) .t10 .left, :host([t11-left="1!"]) .t11 .left, :host([t12-left="1!"]) .t12 .left, :host([l1-left="1!"]) .l1 .left, :host([l2-left="1!"]) .l2 .left, :host([l3-left="1!"]) .l3 .left, :host([l4-left="1!"]) .l4 .left, :host([l5-left="1!"]) .l5 .left, :host([s1-left="1!"]) .s1 .left { fill: var(--isncsci-diagram-severity-1-color, #999); } :host([c2-right="2"]) .c2 .right, :host([c3-right="2"]) .c3 .right, :host([c4-right="2"]) .c4 .right, :host([c5-right="2"]) .c5 .right, :host([c6-right="2"]) .c6 .right, :host([c7-right="2"]) .c7 .right, :host([c8-right="2"]) .c8 .right, :host([t1-right="2"]) .t1 .right, :host([t2-right="2"]) .t2 .right, :host([t3-right="2"]) .t3 .right, :host([t4-right="2"]) .t4 .right, :host([t5-right="2"]) .t5 .right, :host([t6-right="2"]) .t6 .right, :host([t7-right="2"]) .t7 .right, :host([t8-right="2"]) .t8 .right, :host([t9-right="2"]) .t9 .right, :host([t10-right="2"]) .t10 .right, :host([t11-right="2"]) .t11 .right, :host([t12-right="2"]) .t12 .right, :host([l1-right="2"]) .l1 .right, :host([l2-right="2"]) .l2 .right, :host([l3-right="2"]) .l3 .right, :host([l4-right="2"]) .l4 .right, :host([l5-right="2"]) .l5 .right, :host([s1-right="2"]) .s1 .right, :host([c2-left="2"]) .c2 .left, :host([c3-left="2"]) .c3 .left, :host([c4-left="2"]) .c4 .left, :host([c5-left="2"]) .c5 .left, :host([c6-left="2"]) .c6 .left, :host([c7-left="2"]) .c7 .left, :host([c8-left="2"]) .c8 .left, :host([t1-left="2"]) .t1 .left, :host([t2-left="2"]) .t2 .left, :host([t3-left="2"]) .t3 .left, :host([t4-left="2"]) .t4 .left, :host([t5-left="2"]) .t5 .left, :host([t6-left="2"]) .t6 .left, :host([t7-left="2"]) .t7 .left, :host([t8-left="2"]) .t8 .left, :host([t9-left="2"]) .t9 .left, :host([t10-left="2"]) .t10 .left, :host([t11-left="2"]) .t11 .left, :host([t12-left="2"]) .t12 .left, :host([l1-left="2"]) .l1 .left, :host([l2-left="2"]) .l2 .left, :host([l3-left="2"]) .l3 .left, :host([l4-left="2"]) .l4 .left, :host([l5-left="2"]) .l5 .left, :host([s1-left="2"]) .s1 .left { fill: var(--isncsci-diagram-severity-0-color, #FFF); } :host([hide-annotations]) .annotations { opacity: 0; visibility: hidden; } .annotations { transition: opacity 600ms, visibility 600ms; } .annotations .t { font-family: var(--isncsci-diagram-annotation-font-family, ArialMT, Arial); font-size: var(--isncsci-diagram-annotation-font-size, 8.28px); } .annotations .t, .annotations circle, .annotations path { fill: var(--isncsci-diagram-annotation-color, #666); } /* 0 0! 1 1! 2*/ path { fill: var(--isncsci-diagram-default-color, #CCC); /*stroke: #000;*/ /*stroke-width: .5px;*/ transition: fill 300ms; } </style>  <svg class="dermatome-diagram" data-name="dermatome-diagram" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 696"> <title>rhi-isncsci-ui-dermatome-diagram</title>  <g class="head"> <path d="M201.06,83.47c-3.2,5.18-11.41,9-21.06,9s-17.86-3.82-21.06-9c-1.15-1.85-3.23-5.08-4.62-15.25-6.7,0-8-4.31-10.39-9.44-3.7-7.88-2.36-16.43,2.77-16C143.46,10.7,163,4,180,4s36.54,6.7,33.3,38.81c5.13-.46,6.47,8.09,2.77,16-2.4,5.13-3.69,9.44-10.39,9.44C204.29,78.39,202.21,81.62,201.06,83.47Z"/> </g> <g class="c2"> <path class="right" d="M180,92.47c-9.65,0-17.86-3.82-21.06-9,.21,3.16.8,7.19-.09,11.2,3.12,5.27,11.4,9,21.15,9Z" /> <path class="left" d="M180,103.71c9.75,0,18-3.77,21.15-9-.89-4-.3-8-.09-11.2-3.2,5.18-11.41,9-21.06,9Z" /> </g> <g class="c3"> <path class="right" d="M180,103.71c-9.75,0-18-3.77-21.15-9-1.06,4.79-4.21,9.56-12.61,12.83-7.28,2.82-12.61,5.14-16.65,7,11,8,29.47,13.3,50.41,13.3Z" /> <path class="left" d="M180,127.81c20.94,0,39.41-5.27,50.41-13.3-4-1.87-9.37-4.19-16.65-7-8.4-3.27-11.55-8-12.61-12.83-3.12,5.27-11.4,9-21.15,9Z" /> </g> <g class="c4"> <path class="right" d="M180,127.81c-20.94,0-39.41-5.27-50.41-13.3-10.22,4.73-12.11,6.61-16,6.73a20.89,20.89,0,0,0-13,5c7.85,6.79,21.31,16.84,28.75,21.11,9,5.16,16.77,6.17,27.2,6.17H180Z" /> <path class="left" d="M180,153.52h23.53c10.43,0,18.22-1,27.2-6.17,7.44-4.27,20.9-14.33,28.74-21.12a20.9,20.9,0,0,0-13-5c-3.94-.12-5.83-2-16.05-6.73-11,8-29.47,13.3-50.41,13.3Z" /> </g> <g class="c5"> <path class="right" d="M100.52,126.24h0A34.17,34.17,0,0,0,92,137.59c-5.64,11.43-4,19.28-7.72,26.74-3.64,7.22-8,11.72-11.32,27.26-2.17,10.1-3.06,25-7.73,32.11-2.74,4.15-10.75,15.88-15.12,26.13,19-10.89,31.36-29,38.08-39.54,6.19-9.76,14.76-40.48,34-67.44A271.75,271.75,0,0,1,100.52,126.24Z" /> <path class="left" d="M259.48,126.24h0A34.17,34.17,0,0,1,268,137.59c5.64,11.43,4,19.28,7.72,26.74,3.64,7.22,8,11.72,11.32,27.26,2.17,10.1,3.06,25,7.73,32.11,2.74,4.15,10.75,15.88,15.12,26.13-19-10.89-31.36-29-38.08-39.54-6.19-9.76-14.76-40.48-34-67.44A271.75,271.75,0,0,0,259.48,126.24Z" /> </g> <g class="c6"> <path class="right" d="M88.23,210.29c-6.72,10.57-19.07,28.65-38.08,39.54-.16.38-.33.76-.48,1.13-6.06,15-9,34.25-13.17,49.9-4.85.23-8.54,2.54-11.55,6.93s-9.58,12.93-16.86,18.94c-2.53,2.09-5.37,4.91-3.47,6.47,3.13,2.56,5.72,3.46,12.71-1.62A54.33,54.33,0,0,1,12,342.67c-2.31,3.7-8,12.53-4.16,15,4.64,3,7.39-3,12.93-10.4,21.34-32.17,52.89-68,71-144A58.77,58.77,0,0,1,88.23,210.29Z" /> <path class="right" d="M67.31,463.52c5.82-5.87,12.6-11.94,19.16-18.17l-1.14-1.2-7.86-20.41-1.21-.86L59.4,449.1,35.18,500.54c-3.57,8.52-7.35,13.92-2.43,16.41,4.09,2.08,8.83-7.31,10.86-11.17a53.12,53.12,0,0,1,6.88-10.19c-.86,8.6,1.23,10.37,5,11.78,2.32.86,3.31-3,3.83-6.26,1.51-9.32,5.56-19.32,7.83-24.13S69.56,467.82,67.31,463.52Z"/> <path class="left" d="M271.77,210.29c6.72,10.57,19.07,28.65,38.08,39.54.16.38.33.76.48,1.13,6.06,15,9,34.25,13.17,49.9,4.85.23,8.54,2.54,11.55,6.93s9.58,12.93,16.86,18.94c2.53,2.09,5.37,4.91,3.47,6.47-3.13,2.56-5.72,3.46-12.71-1.62A54.33,54.33,0,0,0,348,342.67c2.31,3.7,8,12.53,4.16,15-4.64,3-7.39-3-12.93-10.4-21.34-32.17-52.89-68-71-144A58.77,58.77,0,0,0,271.77,210.29Z" /> <path class="left" d="M292.66,463.52c-5.81-5.87-12.59-11.94-19.15-18.17l1.14-1.2,7.85-20.41,1.22-.86,16.85,26.22,24.22,51.44c3.58,8.52,7.36,13.92,2.44,16.41-4.1,2.08-8.84-7.31-10.86-11.17a53.59,53.59,0,0,0-6.88-10.19c.85,8.6-1.23,10.37-5,11.78-2.31.86-3.31-3-3.83-6.26-1.51-9.32-5.55-19.32-7.83-24.13S290.41,467.82,292.66,463.52Z"/> </g> <g class="c7"> <path class="right" d="M53.69,298.22c-11.6,19.32-23.28,34.58-32.9,49.07-2.07,6-8.67,17.58-4.85,19.41,5,2.36,10.4-6.47,13.86-12.25,7-15.51,18.65-37.14,24-54.23C53.72,299.56,53.69,298.9,53.69,298.22Z" /> <path class="right" d="M35.18,500.54,58.06,452c-9.13,9.49-30.28,39.84-33.61,44.43-3.23,5.9-8.12,15.05-3.56,18.14C24.4,516.91,31.05,505.37,35.18,500.54Z"/> <path class="left" d="M306.31,298.22c11.6,19.32,23.28,34.58,32.9,49.07,2.07,6,8.67,17.58,4.85,19.41-5,2.36-10.4-6.47-13.86-12.25-7-15.51-18.65-37.14-24-54.23C306.28,299.56,306.31,298.9,306.31,298.22Z" /> <path class="left" d="M324.82,500.54,301.94,452c9.13,9.49,30.28,39.84,33.61,44.43,3.23,5.9,8.12,15.05,3.56,18.14C335.6,516.91,329,505.37,324.82,500.54Z"/> </g> <g class="c8"> <path class="right" d="M53.76,300.22c-5.31,17.09-16.92,38.72-24,54.23-.23,7.4-.75,9.24,2.31,10.17,2.07.62,3.47-.23,4.62-2.31,1.39.92,5.94.05,7.86-2.78,3.09-4.54,11.09-30.83,12.8-46.29A31.25,31.25,0,0,1,53.76,300.22Z" /> <path class="right" d="M47.12,451c-12.46,8.9-32.1,30.11-34.53,35.21-1.47,3.08.08,7.45,1.58,8.18-1.21,2.05-1.25,3.68.34,5.16,2.34,2.17,3.68.79,9.94-3.14,3.33-4.59,24.48-34.94,33.61-44.43l1.17-2.49L58.9,449C55,451.29,48.22,454.35,47.12,451Z"/> <path class="left" d="M306.24,300.22c5.31,17.09,16.92,38.72,24,54.23.23,7.4.75,9.24-2.31,10.17-2.07.62-3.47-.23-4.62-2.31-1.39.92-5.94.05-7.86-2.78-3.09-4.54-11.09-30.83-12.8-46.29A31.25,31.25,0,0,0,306.24,300.22Z" /> <path class="left" d="M312.88,451c12.46,8.9,32.1,30.11,34.53,35.21,1.47,3.08-.08,7.45-1.58,8.18,1.21,2.05,1.25,3.68-.34,5.16-2.34,2.17-3.68.79-9.94-3.14-3.33-4.59-24.48-34.94-33.61-44.43l-1.17-2.49.33-.43C305.05,451.29,311.78,454.35,312.88,451Z"/> </g> <g class="t1"> <path class="right" d="M94.89,196c-1.14,2.72-2.18,5.19-3.15,7.38-9.93,41.69-23.92,71.33-38,94.87a31.68,31.68,0,0,0,3.7,15c0-.44.1-.87.14-1.29C67.69,298.78,82.6,275.5,85,270.13c5.37-11.95,5.73-25,8.66-29.11,3.35-4.73,4-7.85,8-20.33.5-1.58,1-3.25,1.63-5C98.45,212.23,95.06,204.75,94.89,196Z" /> <path class="right" d="M59.76,448.53l16.5-25.65-.39-.27-12.72-5.55-.07,0c-5.15,9.84-11.9,23.82-16,33.89C48.3,454.61,56,450.77,59.76,448.53Z"/> <path class="left" d="M265.11,196c1.14,2.72,2.18,5.19,3.15,7.38,9.93,41.69,23.92,71.33,38.05,94.87a31.68,31.68,0,0,1-3.7,15c-.05-.44-.1-.87-.14-1.29C292.31,298.78,277.4,275.5,275,270.13c-5.37-11.95-5.73-25-8.66-29.11-3.35-4.73-4-7.85-8-20.33-.5-1.58-1.05-3.25-1.63-5C261.55,212.23,264.94,204.75,265.11,196Z" /> <path class="left" d="M300.24,448.53l-16.5-25.65.39-.27,12.72-5.55.07,0c5.15,9.84,11.9,23.82,16,33.89C311.7,454.61,304,450.77,300.24,448.53Z"/> </g> <g class="t2"> <path class="right" d="M180,153.52H156.47c-10.43,0-18.22-1-27.2-6.17-2-1.14-4.42-2.7-7.06-4.5-13.28,18.63-21.48,39.06-27.32,53.12.17,8.77,3.56,16.25,8.39,19.73,4-11.95,9.72-26.61,11.54-31-1.6-4.83-2.46-8.36-3.3-11.18,17.57-8.36,41.76-13.53,68.48-13.53Z" /> <path class="left" d="M180,159.94c26.72,0,50.91,5.18,68.48,13.54-.84,2.82-1.7,6.34-3.3,11.17,1.82,4.44,7.51,19.1,11.54,31,4.83-3.48,8.22-11,8.39-19.73-5.84-14.06-14-34.49-27.32-53.12-2.64,1.8-5.07,3.36-7.06,4.5-9,5.16-16.77,6.17-27.2,6.17H180Z" /> </g> <g class="t3"> <path class="right" d="M111.52,173.47c17.57-8.36,41.76-13.53,68.48-13.53v13.44c-28.46,0-53.42,2.12-67,5.29Z" /> <path class="left" d="M248.48,173.47c-17.57-8.36-41.76-13.53-68.48-13.53v13.44c28.46,0,53.42,2.12,67,5.29Z" /> </g> <g class="t4"> <path class="right" d="M180,191.53c-27.51,0-52.06-5.52-67-12.86,13.59-3.17,38.55-5.29,67-5.29Z" /> <path class="left" d="M180,191.53c27.51,0,52.06-5.52,67-12.86-13.59-3.17-38.55-5.29-67-5.29Z" /> </g> <g class="t5"> <path class="right" d="M180,191.53c-27.51,0-52.06-5.52-67-12.86l1.49,4.93c15.91,13.83,39.36,22.57,65.52,22.57Z" /> <path class="left" d="M180,191.53c27.51,0,52.06-5.52,67-12.86l-1.49,4.93c-15.91,13.83-39.36,22.57-65.52,22.57Z" /> </g> <g class="t6"> <path class="right" d="M180,218.36c-26.11,0-49.26-11.13-63.68-28.29l-1.84-6.47c15.91,13.83,39.36,22.57,65.52,22.57Z" /> <path class="left" d="M180,218.36c26.11,0,49.26-11.13,63.68-28.29l1.84-6.47c-15.91,13.83-39.36,22.57-65.52,22.57Z" /> </g> <g class="t7"> <path class="right" d="M180,233.61c-23.77,0-45-9.57-58.78-24.5l-4.9-19c14.42,17.16,37.57,28.29,63.68,28.29Z" /> <path class="left" d="M180,233.61c23.77,0,45-9.57,58.78-24.5l4.9-19c-14.42,17.16-37.57,28.29-63.68,28.29Z" /> </g> <g class="t8"> <path class="right" d="M180,233.61c-23.77,0-45-9.57-58.78-24.5l3.89,16.49c14.46,14.6,33.73,23.51,54.89,23.51Z" /> <path class="left" d="M180,233.61c23.77,0,45-9.57,58.78-24.5l-3.89,16.49c-14.46,14.6-33.73,23.51-54.89,23.51Z" /> </g> <g class="t9"> <path class="right" d="M180,265.49c-19.81,0-38-9.92-52.07-26.39l-2.82-13.5c14.46,14.6,33.73,23.51,54.89,23.51Z" /> <path class="left" d="M180,265.49c19.81,0,38-9.92,52.07-26.39l2.82-13.5c-14.46,14.6-33.73,23.51-54.89,23.51Z" /> </g> <g class="t10"> <path class="right" d="M180,265.49c-19.81,0-38-9.92-52.07-26.39l1.86,12.67c13.48,20.64,31,33.13,50.21,33.13Z" /> <path class="left" d="M180,265.49c19.81,0,38-9.92,52.07-26.39l-1.86,12.67c-13.48,20.64-31,33.13-50.21,33.13Z" /> </g> <g class="t11"> <path class="right" d="M180,301.14c-19.78,0-37.82-13.27-51.46-35.08l1.25-14.29c13.48,20.64,31,33.13,50.21,33.13Z" /> <path class="left" d="M180,301.14c19.78,0,37.82-13.27,51.46-35.08l-1.25-14.29c-13.48,20.64-31,33.13-50.21,33.13Z" /> </g> <g class="t12"> <path class="right" d="M180,301.14c-19.78,0-37.82-13.27-51.46-35.08l-2.92,15.5c8.8,27.53,29.82,46.92,54.38,46.92Z" /> <path class="left" d="M180,301.14c19.78,0,37.82-13.27,51.46-35.08l2.92,15.5c-8.8,27.53-29.82,46.92-54.38,46.92Z" /> </g> <g class="l1"> <path class="right" d="M179.26,363.69c-4.4-6.25-11.48-19.9-13.11-28.86a.7.7,0,0,1,1.37-.24c1.54,8.5,8.14,21.37,12.48,27.74V328.48c-24.56,0-45.58-19.39-54.38-46.92a292.57,292.57,0,0,0-4.54,29.75c32.05,4.08,20.71,79.93,58.92,79.93l-.74-1.8Z" /> <path class="left" d="M180.74,363.69c4.4-6.25,11.48-19.9,13.11-28.86a.7.7,0,0,0-1.37-.24c-1.54,8.5-8.14,21.37-12.48,27.74V328.48c24.56,0,45.58-19.39,54.38-46.92a292.57,292.57,0,0,1,4.54,29.75c-32,4.08-20.71,79.93-58.92,79.93l.74-1.8Z" /> </g> <g class="l2"> <path class="right" d="M121.08,311.31c-.43,4.51-.76,9.32-1,14.5-.5,13.79-.32,26.45.33,38.12,4,12.88,11.52,34.63,20,49.34,12,20.78,22.17,23.84,35.76,15.83a82.74,82.74,0,0,1-.25-12.39c.87-9,2.11-21,4-25.47C141.79,391.24,153.13,315.39,121.08,311.31Z" /> <path class="left" d="M238.92,311.31c.43,4.51.76,9.32,1,14.5.5,13.79.32,26.45-.33,38.12-4,12.88-11.52,34.63-20,49.34-12,20.78-22.17,23.84-35.76,15.83a82.74,82.74,0,0,0,.25-12.39c-.87-9-2.11-21-4-25.47C218.21,391.24,206.87,315.39,238.92,311.31Z" /> </g> <g class="l3"> <path class="right" d="M140.47,413.27c-8.49-14.71-16-36.46-20-49.34,3.34,60.5,19.31,94.33,19.31,119.31,0,2.25-.09,4.61-.24,7.05,7.48,7.62,21,19.59,35.22,23.32,1.15-12.79,3.66-48.63,3.66-56.87,0-6.12-1.46-17.83-2.18-27.64C162.64,437.11,152.47,434.05,140.47,413.27Z" /> <path class="left" d="M219.53,413.27c8.49-14.71,16-36.46,20-49.34-3.34,60.5-19.31,94.33-19.31,119.31,0,2.25.09,4.61.24,7.05-7.48,7.62-21,19.59-35.22,23.32-1.15-12.79-3.66-48.63-3.66-56.87,0-6.12,1.46-17.83,2.18-27.64C197.36,437.11,207.53,434.05,219.53,413.27Z" /> </g> <g class="l4"> <path class="right" d="M176.5,634.85c-1.56-6.58-3.12-22.18-2.94-30.32s4.15-42.62,3.29-53.54-3.29-26.34-2.43-34c.09-.78.2-2,.33-3.42-13.06-3.43-25.55-13.83-33.29-21.4,21,95.32,26.6,149.28,27,156,.42,7-.8,12.5,9.4,12.2h.06c-1-6.24-1.88-7.62-1.43-9.12A41.73,41.73,0,0,0,176.5,634.85Z" /> <path class="left" d="M183.5,634.85c1.56-6.58,3.12-22.18,2.94-30.32s-4.15-42.62-3.29-53.54,3.29-26.34,2.43-34c-.09-.78-.2-2-.33-3.42,13.06-3.43,25.55-13.83,33.29-21.4-21,95.32-26.6,149.28-27,156-.42,7,.8,12.5-9.4,12.2h-.06c1-6.24,1.88-7.62,1.43-9.12A41.73,41.73,0,0,1,183.5,634.85Z" /> </g> <g class="l5"> <path class="right" d="M168.47,648.23c-.41-6.74-6-60.7-27-156-.68-.66-1.33-1.31-1.93-1.92-1.31,21.28-7.58,48.85-6,64.34,2.43,23.74,23.05,48.17,19.06,100.84-.5,14.46-14.41,25.32-23,31.09h0c.5,1.32,1.24,1.83,2.86,1.83,1,1.38,2.6,1.21,4.68,1,1.73,1.9,7.28,4.5,12-1.39,4.5-.35,7.62-2.08,9.18-3.81a77.73,77.73,0,0,1,7.8-7.45,16.66,16.66,0,0,1,2-.9h0a25.76,25.76,0,0,1,9.77-15.45C167.67,660.73,168.89,655.27,168.47,648.23Z" /> <path class="left" d="M191.53,648.23c.41-6.74,6-60.7,27-156,.68-.66,1.33-1.31,1.93-1.92,1.31,21.28,7.58,48.85,6,64.34-2.43,23.74-23.05,48.17-19.06,100.84.5,14.46,14.41,25.32,23,31.09h0c-.5,1.32-1.24,1.83-2.86,1.83-1,1.38-2.6,1.21-4.68,1-1.73,1.9-7.28,4.5-12-1.39-4.5-.35-7.62-2.08-9.18-3.81a77.73,77.73,0,0,0-7.8-7.45,16.66,16.66,0,0,0-2-.9h0a25.76,25.76,0,0,0-9.77-15.45C192.33,660.73,191.11,655.27,191.53,648.23Z" /> </g> <g class="s1"> <path class="right" d="M168.1,675.88h0c3.82-1.62,11.28-5.06,10.31-12.27-.16-1.18-.32-2.23-.48-3.18h-.06A25.76,25.76,0,0,0,168.1,675.88Z" /> <path class="left" d="M191.9,675.88h0c-3.82-1.62-11.28-5.06-10.31-12.27.16-1.18.32-2.23.48-3.18h.06A25.76,25.76,0,0,1,191.9,675.88Z" /> <path class="right" d="M152.59,655.47c-2.77,2.42-5,6.41-8,8.83s-12.47,9.71-14,10.57-4,3.64-3.12,6.41c-.7,1.39-.87,3.12,1.9,4.51a7.67,7.67,0,0,0,.26.77h0C138.18,680.79,152.09,669.93,152.59,655.47Z" /> <path class="left" d="M207.41,655.47c2.77,2.42,5,6.41,8,8.83s12.47,9.71,14,10.57,4,3.64,3.12,6.41c.7,1.39.87,3.12-1.9,4.51a7.67,7.67,0,0,1-.26.77h0C221.82,680.79,207.91,669.93,207.41,655.47Z" /> </g> <g class="annotations"> <text class="t" transform="translate(174.36 100.65)">C2</text> <path d="M164.39,120.81c-4.48,0-12.74-.49-13.16-.52a.67.67,0,0,1-.65-.72.69.69,0,0,1,.73-.65c.11,0,11,.64,14.58.48V114a.69.69,0,0,1,1.38,0v6.67l-.62.07A21.74,21.74,0,0,1,164.39,120.81Z"/> <text class="t" transform="translate(174.99 143.44)">C4</text> <text class="t" transform="translate(86.07 179.77)">C5</text> <text class="t" transform="translate(263.48 179.77)">C5</text> <circle cx="75.32" cy="212.49" r="2.55"/> <circle cx="284.82" cy="212.49" r="2.55"/> <text class="t" transform="translate(52.14 485.07)">C6</text> <circle cx="57.55" cy="491.55" r="2.55"/> <text class="t" transform="translate(297.01 485.07)">C6</text> <circle cx="302.42" cy="491.55" r="2.55"/> <text class="t" transform="translate(29.03 494.87)">C7</text> <circle cx="26.55" cy="503.55" r="2.55"/> <text class="t" transform="translate(320.84 494.87)">C7</text> <circle cx="333.37" cy="503.55" r="2.55"/> <text class="t" transform="translate(23.5 480.07)">C8</text> <circle cx="18.55" cy="482.55" r="2.55"/> <text class="t" transform="translate(326.33 480.07)">C8</text> <circle cx="341.39" cy="482.55" r="2.55"/> <text class="t" transform="translate(63 512.1)">Dorsum</text> <text class="t" transform="translate(268 512.1)">Dorsum</text> <text class="t" transform="translate(121.43 160.75)">T2</text> <text class="t" transform="translate(228.21 160.75)">T2</text> <text class="t" transform="translate(175.72 169.46)">T3</text> <circle cx="111.6" cy="172.01" r="2.55"/> <circle cx="247.71" cy="172.01" r="2.55"/> <text class="t" transform="translate(175.72 184.64)">T4</text> <text class="t" transform="translate(175.72 201.2)">T5</text> <text class="t" transform="translate(175.72 215.7)">T6</text> <circle cx="158.47" cy="210.17" r="2.55"/> <circle cx="200.35" cy="210.17" r="2.55"/> <text class="t" transform="translate(175.72 229.5)">T7</text> <circle cx="158.47" cy="223.97" r="2.55"/> <circle cx="200.35" cy="223.97" r="2.55"/> <text class="t" transform="translate(175.72 244.68)">T8</text> <circle cx="158.47" cy="239.15" r="2.55"/> <circle cx="200.35" cy="239.15" r="2.55"/> <text class="t" transform="translate(175.72 261.24)">T9</text> <circle cx="158.47" cy="255.71" r="2.55"/> <circle cx="200.35" cy="255.71" r="2.55"/> <text class="t" transform="translate(172.52 280.49)">T10</text> <circle cx="158.95" cy="270.83" r="2.55"/> <circle cx="200.35" cy="270.83" r="2.55"/> <text class="t" transform="translate(172.65 295.67)">T11</text> <circle cx="158.78" cy="287.39" r="2.55"/> <circle cx="200.18" cy="287.39" r="2.55"/> <text class="t" transform="translate(172.52 314.99)">T12</text> <circle cx="154.81" cy="312.23" r="2.55"/> <circle cx="204.49" cy="312.23" r="2.55"/> <text class="t" transform="translate(141.92 328.79)">L1</text> <text class="t" transform="translate(208.17 328.79)">L1</text> <circle cx="157.57" cy="346.73" r="2.55"/> <circle cx="201.73" cy="346.73" r="2.55"/> <text class="t" transform="translate(146 398.1)">L2</text> <text class="t" transform="translate(204.1 398.1)">L2</text> <text class="t" transform="translate(146 463.82)">L3</text> <text class="t" transform="translate(203.95 463.82)">L3</text> <circle cx="171.75" cy="479.35" r="2.55"/> <circle cx="187.4" cy="479.35" r="2.55"/> <text class="t" transform="translate(158.64 543.63)">L4</text> <text class="t" transform="translate(142.42 565.49)">L5</text> <text class="t" transform="translate(113.21 671.26)">S1</text> <text class="t" transform="translate(175.49 684.86)">S1</text> <text class="t" transform="translate(193.24 543.63)">L4</text> <text class="t" transform="translate(209.47 565.49)">L5</text> <text class="t" transform="translate(237.76 671.26)">S1</text> <circle cx="173.13" cy="643.69" r="2.55"/> <circle cx="150.05" cy="673.82" r="2.55"/> <circle cx="187.96" cy="643.69" r="2.55"/> <circle cx="211.05" cy="673.82" r="2.55"/> <text class="t" transform="translate(60.31 338.93)">Palm</text> <text class="t" transform="translate(280.83 338.93)">Palm</text> <text class="t" transform="translate(51.11 276.83)">C6</text> <text class="t" transform="translate(298.31 276.83)">C6</text> <text class="t" transform="translate(76.41 262.07)">T1</text> <text class="t" transform="translate(274.39 262.07)">T1</text> <circle cx="96.09" cy="223.93" r="2.55"/> <text class="t" transform="translate(174.36 116.45)">C3</text> <circle cx="201.72" cy="115.95" r="2.55"/> <path d="M194.91,120.81c4.48,0,12.75-.49,13.17-.52a.68.68,0,0,0,.65-.72.67.67,0,0,0-.7-.65c-.12,0-10.4.64-14.54.48V114a.69.69,0,0,0-1.38,0v6.67l.58.07A20.76,20.76,0,0,0,194.91,120.81Z"/> <circle cx="158.47" cy="197.06" r="2.55"/> <circle cx="200.35" cy="197.06" r="2.55"/> <circle cx="158.47" cy="181.88" r="2.55"/> <circle cx="200.35" cy="181.88" r="2.55"/> <circle cx="158.47" cy="166.7" r="2.55"/> <circle cx="157.59" cy="115.95" r="2.55"/> <circle cx="164.89" cy="405.85" r="2.55"/> <circle cx="194.41" cy="405.85" r="2.55"/> <circle cx="118.27" cy="125.61" r="2.55"/> <circle cx="240.93" cy="125.61" r="2.55"/> <circle cx="200.35" cy="166.7" r="2.55"/> <circle cx="263.92" cy="223.97" r="2.55"/> </g> </svg> `; // tslint:enable:max-line-length } requestRender() { const template = document.createElement('template'); template.innerHTML = this.getTemplate(); if (this.shadowRoot) { this.shadowRoot.appendChild(template.content.cloneNode(true)); } } } customElements.define(RhiIsncsciUiDermatomeDiagram.is, RhiIsncsciUiDermatomeDiagram); /** * @license * Copyright (c) 2018 Rick Hansen Institute. All rights reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ class RhiIsncsciUiDermatomeDiagramHeadLeft extends HTMLElement { static get is() { return 'rhi-isncsci-ui-dermatome-diagram-head-left'; } constructor() { super(); this.attachShadow({ mode: 'open' }); this.requestRender(); } getTemplate() { // tslint:disable:max-line-length return ` <style> :host { display: block; } :host([c2-left="0"]) .c2 .left, :host([c3-left="0"]) .c3 .left, :host([c4-left="0"]) .c4 .left { fill: var(--isncsci-diagram-severity-4-color, #000); } :host([c2-left="0!"]) .c2 .left, :host([c3-left="0!"]) .c3 .left, :host([c4-left="0!"]) .c4 .left { fill: var(--isncsci-diagram-severity-3-color, #333); } :host([c2-left="1"]) .c2 .left, :host([c3-left="1"]) .c3 .left, :host([c4-left="1"]) .c4 .left { fill: var(--isncsci-diagram-severity-2-color, #666); } :host([c2-left="1!"]) .c2 .left, :host([c3-left="1!"]) .c3 .left, :host([c4-left="1!"]) .c4 .left { fill: var(--isncsci-diagram-severity-1-color, #999); } :host([c2-left="2"]) .c2 .left, :host([c3-left="2"]) .c3 .left, :host([c4-left="2"]) .c4 .left { fill: var(--isncsci-diagram-severity-0-color, #FFF); } :host([hide-annotations]) .annotations { opacity: 0; visibility: hidden; } .annotations { transition: opacity 600ms, visibility 600ms; } .annotations .t { font-family: var(--isncsci-diagram-annotation-font-family, ArialMT, Arial); font-size: var(--isncsci-diagram-annotation-font-size, 8.28px); } .annotations .t, .annotations circle, .annotations path { fill: var(--isncsci-diagram-annotation-color, #666); } .annotations .l { fill:none; stroke: var(--isncsci-diagram-annotation-color, #666); stroke-linecap:round; stroke-linejoin:round; stroke-miterlimit:10; stroke-width: 1.4px; } /* 0 0! 1 1! 2*/ path, ellipse { fill: var(--isncsci-diagram-default-color, #CCC); /*stroke: #000;*/ /*stroke-width: .5px;*/ transition: fill 300ms; } </style>  <svg class="dermatome-diagram-head-left" data-name="dermatome-diagram-head-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127 182"> <title>rhi-isncsci-ui-dermatome-diagram-head-left</title> <g class="c2"> <path class="left" d="M93.23,94c-1.19,1.39-2.06,4.23-2.55,7.68C83.75,106.38,71.6,115,69.11,117c-10,8-18,9.78-30.94,9.78a1.22,1.22,0,0,1-.09-.4c0-1.29-.1-5.17-.1-7.15l-.89.21,1-.44,12-5s20-59,22-67c1.07-4.29,6.3-19.94,7.67-38.36,20.91,8.88,31.37,29.3,31.37,50.47C111.15,87.32,97.21,89.32,93.23,94Z"/> </g> <g class="c3"> <path class="left" d="M43,139.59c0-5-4.21-10.9-4.87-12.81,12.94,0,20.94-1.78,30.94-9.78,2.49-2,14.64-10.62,21.57-15.36-1.16,8.15-.24,19.77,3.54,24.19l.91,1c-5.49,4.78-16.67,14.4-24.22,19.19-8.64,5.49-28.3,15.33-39.38,20C35.92,156.5,43,146.32,43,139.59Z"/> </g> <g class="c4"> <path class="left" d="M70.91,146c7.55-4.79,18.73-14.41,24.22-19.19,9.59,10.56,27,20.8,27,51.1H28.16c0-3.6,1.42-7.7,3.37-11.94C42.61,161.37,62.27,151.53,70.91,146Z"/> </g> <g class="extras"> <path class="left" d="M13.56,61.76c0-5.31-3.66-12.61-3.66-16.6s2.33-10.62,5.65-17.59c-5-6,0-9.63,3-11.62S41,4,55.38,4a62,62,0,0,1,24.4,4.64C78.41,27.06,73.18,42.71,72.11,47c-2,8-22,67-22,67l-12,5-1,.44A122.2,122.2,0,0,1,24.84,122c-10.86,1.47-12-4.93-12.09-6.81a61.63,61.63,0,0,1,.69-10.53c-3.87-.9-3-3.48-2-5.27-3-3.27-2.22-4.07-1.22-8.39-1.33-1.66-3-.66-5-2.65s-1.33-5.31,0-7.64S13.56,67.07,13.56,61.76Z"/> </g> <g class="annotations"> <text class="t" transform="translate(75.94 52.03)">C2</text> <circle cx="89.89" cy="84.85" r="2.55"/> <text class="t" transform="translate(64.94 131.03)">C3</text> <circle cx="53.89" cy="138.85" r="2.55"/> <text class="t" transform="translate(88.94 173.03)">C4</text> <circle cx="82.89" cy="154.85" r="2.55"/> <path class="l" d="M38.87,118.33c4.55-1.67,13.94-5.54,16.37-6.76S66.32,107,66.32,90c.76,1.22,1.67,2,3.8-.3S76.5,77.25,76.5,71s-2.59-15.34-11.09-9.87"/> </g> </svg> `; // tslint:enable:max-line-length } requestRender() { const template = document.createElement('template'); template.innerHTML = this.getTemplate(); if (this.shadowRoot) { this.shadowRoot.appendChild(template.content.cloneNode(true)); } } } customElements.define(RhiIsncsciUiDermatomeDiagramHeadLeft.is, RhiIsncsciUiDermatomeDiagramHeadLeft); /** * @license * Copyright (c) 2018 Rick Hansen Institute. All rights reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ class RhiIsncsciUiDermatomeDiagramHeadRight extends HTMLElement { static get is() { return 'rhi-isncsci-ui-dermatome-diagram-head-right'; } constructor() { super(); this.attachShadow({ mode: 'open' }); this.requestRender(); } getTemplate() { // tslint:disable:max-line-length return ` <style> :host { display: block; } :host([c2-right="0"]) .c2 .right, :host([c3-right="0"]) .c3 .right, :host([c4-right="0"]) .c4 .right { fill: var(--isncsci-diagram-severity-4-color, #000); } :host([c2-right="0!"]) .c2 .right, :host([c3-right="0!"]) .c3 .right, :host([c4-right=