1"use strict";(self.webpackChunk_patternfly_react_docs=self.webpackChunk_patternfly_react_docs||[]).push([[8402],{72933:function(e,n,t){t.r(n);var a=t(2784),l=t(52898),s=t(14925),u=t(38649),i=t(4484),o=t(78121),r=t(81413),c=t(84681),p=t(95597);function m(){return m=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e},m.apply(this,arguments)}var d={id:"Slider",section:"components",subsection:"",deprecated:!1,beta:!1,demo:!1,newImplementationLink:!1,source:"react",tabName:null,slug:"/components/slider/react",sourceLink:"https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Slider/examples/Slider.md",relPath:"packages/react-core/src/components/Slider/examples/Slider.md",propComponents:[{name:"Slider",description:"The main slider component.",props:[{name:"areCustomStepsContinuous",type:"boolean",description:"Flag indicating if the slider is discrete for custom steps. This will cause the slider\nto snap to the closest value.",defaultValue:"false"},{name:"aria-describedby",type:"string",description:"One or more id's to use for the slider thumb's accessible description."},{name:"aria-labelledby",type:"string",description:"One or more id's to use for the slider thumb's accessible label."},{name:"className",type:"string",description:"Additional classes added to the slider."},{name:"customSteps",type:"SliderStepObject[]",description:"Array of custom slider step objects (value and label of each step) for the slider."},{name:"hasTooltipOverThumb",type:"boolean",description:"",defaultValue:"false"},{name:"inputAriaLabel",type:"string",description:"Accessible label for the input field.",defaultValue:"'Slider value input'"},{name:"inputLabel",type:"string | number",description:"Text label that is place after the input field."},{name:"inputPosition",type:"'aboveThumb' | 'right'",description:"Position of the input.",defaultValue:"'right'"},{name:"inputValue",type:"number",description:"Value displayed in the input field.",defaultValue:"0"},{name:"isDisabled",type:"boolean",description:"Adds disabled styling, and disables the slider and the input component if present.",defaultValue:"false"},{name:"isInputVisible",type:"boolean",description:"Flag to show value input field.",defaultValue:"false"},{name:"leftActions",type:"React.ReactNode",description:"Actions placed to the left of the slider."},{name:"max",type:"number",description:"The maximum permitted value.",defaultValue:"100"},{name:"min",type:"number",description:"The minimum permitted value.",defaultValue:"0"},{name:"onChange",type:"(\n event: SliderOnChangeEvent,\n value: number,\n inputValue?: number,\n setLocalInputValue?: React.Dispatch<React.SetStateAction<number>>\n) => void",description:"Value change callback. This is called when the slider value changes."},{name:"rightActions",type:"React.ReactNode",description:"Actions placed to the right of the slider."},{name:"showBoundaries",type:"boolean",description:"Flag to indicate if boundaries should be shown for slider that does not have custom steps.",defaultValue:"true"},{name:"showTicks",type:"boolean",description:"Flag to indicate if ticks should be shown for slider that does not have custom steps.",defaultValue:"false"},{name:"step",type:"number",description:"The step interval.",defaultValue:"1"},{name:"thumbAriaLabel",type:"string",description:"",defaultValue:"'Value'"},{name:"value",type:"number",description:"Current value of the slider.",defaultValue:"0"}]},{name:"SliderStepObject",description:"Properties for creating custom steps in a slider. These properties should be passed in as\nan object within an array to the slider component's customSteps property.",props:[{name:"isLabelHidden",type:"boolean",description:"Flag to hide the label."},{name:"label",type:"string",description:"The display label for the step value. This is also used for the aria-valuetext attribute.",required:!0},{name:"value",type:"number",description:"Value of the step. This value is a percentage of the slider where the tick is drawn.",required:!0}]}],cssPrefix:["pf-v5-c-slider"],examples:["Discrete","Continuous","Value input","Thumb value input","Actions","Disabled"]};d.liveContext={Slider:s.i,Button:u.zx,Text:i.x,TextVariants:i.q,MinusIcon:o.ZP,PlusIcon:r.ZP,LockIcon:c.ZP,LockOpenIcon:p.ZP},d.examples={Discrete:function(e){return a.createElement(l.en,m({},d,e,{code:"import React from 'react';\nimport { Slider, SliderOnChangeEvent, Text, TextVariants } from '@patternfly/react-core';
1\n\nexport const SliderDiscrete: React.FunctionComponent = () => {\n const initialValues = {\n value1: 50,\n value2: 50,\n value3: 25,\n value4: 50,\n value5: 50,\n value6: 3,\n value7: 25\n };\n\n const [numValue, setNumValue] = React.useState(initialValues);\n\n const handleChange = (value: number, name: string) => {\n setNumValue({ ...numValue, [name]: value });\n };\n\n const steps = [\n { value: 0, label: '0' },\n { value: 12.5, label: '1', isLabelHidden: true },\n { value: 25, label: '2' },\n { value: 37.5, label: '3', isLabelHidden: true },\n { value: 50, label: '4' },\n { value: 62.5, label: '5', isLabelHidden: true },\n { value: 75, label: '6' },\n { value: 87.5, label: '7', isLabelHidden: true },\n { value: 100, label: '8' }\n ];\n\n const stepsDiscreteWithMax = [\n { value: 0, label: 'A' },\n { value: 1, label: 'B' },\n { value: 2, label: 'C' },\n { value: 3, label: 'D' },\n { value: 4, label: 'E' },\n { value: 5, label: 'F' }\n ];\n\n const stepsDiscreteNoLinearWithMaxMin = [\n { value: 12, label: '12' },\n { value: 15, label: '15' },\n { value: 25, label: '25' },\n { value: 54, label: '54' },\n { value: 67, label: '67' },\n { value: 86, label: '86' }\n ];\n\n return (\n <>\n <Text component={TextVariants.h3}>Slider value is: {numValue.value1}</Text>\n <Slider\n value={initialValues.value1}\n onChange={(_event: SliderOnChangeEvent, value: number) => handleChange(value, 'value1')}\n customSteps={steps}\n />\n <br />\n <Text component={TextVariants.h3}>Slider value is: {numValue.value2}</Text>\n <Text component={TextVariants.small}>(min = 0, max = 200, step = 50) </Text>\n <Slider\n value={initialValues.value2}\n onChange={(_event: SliderOnChangeEvent, value: number) => handleChange(value, 'value2')}\n max={200}\n step={50}\n showTicks\n />\n <br />\n <Text component={TextVariants.h3}>Slider value is: {Math.floor(numValue.value3)}</Text>\n <Text component={TextVariants.small}>(min = -25, max = 75, step = 10, boundaries not shown) </Text>\n <Slider\n value={initialValues.value3}\n onChange={(_event: SliderOnChangeEvent, value: number) => handleChange(value, 'value3')}\n min={-25}\n max={75}\n step={10}\n showTicks\n showBoundaries={false}\n />\n <br />\n <Text component={TextVariants.h3}>Slider value is: {Math.floor(numValue.value4)}</Text>\n <Text component={TextVariants.small}>(min = -25, max = 75, step = 10, boundaries shown) </Text>\n <Slider\n value={initialValues.value4}\n onChange={(_event: SliderOnChangeEvent, value: number) => handleChange(value, 'value4')}\n min={-25}\n max={75}\n step={10}\n showTicks\n />\n <br />\n <Text component={TextVariants.h3}>Slider value is: {Math.floor(numValue.value5)}</Text>\n <Text component={TextVariants.small}>(min = -25, max = 75, step = 10, boundaries shown, ticks not shown) </Text>\n <Slider\n value={initialValues.value5}\n onChange={(_event: SliderOnChangeEvent, value: number) => handleChange(value, 'value5')}\n min={-25}\n max={75}\n step={10}\n />\n <br />\n <Text component={TextVariants.h3}>Slider value is: {Math.floor(numValue.value6)}</Text>\n <Text component={TextVariants.small}>(max = 5, custom steps) </Text>\n <Slider\n value={initialValues.value6}\n showTicks\n max={5}\n customSteps={stepsDiscreteWithMax}\n onChange={(_event: SliderOnChangeEvent, value: number) => handleChange(value, 'value6')}\n />\n <br />\n <Text component={TextVariants.h3}>Slider value is: {Math.floor(numValue.value7)}</Text>\n <Text component={TextVariants.small}>(min = 12, max = 86, custom steps with non linear data) </Text>\n <Slider\n value={initialValues.value7}\n showTicks\n customSteps={stepsDiscreteNoLinearWithMaxMin}\n onChange={(_event: SliderOnChangeEvent, value: number) => handleChange(value, 'value7')}\n min={12}\n max={86}\n />\n <br />\n </>\n );\n};
1\n",title:"Discrete",lang:"ts"}))},Continuous:function(e){return a.createElement(l.en,m({},d,e,{code:"import React from 'react';\nimport { Checkbox, Slider, SliderOnChangeEvent, Text, TextVariants } from '@patternfly/react-core';\n\nexport const SliderContinuous: React.FunctionComponent = () => {\n const [hasTooltipOverThumb, setHasTooltipOverThumb] = React.useState(false);\n const [value, setValue] = React.useState(50);\n const [valueCustom, setValueCustom] = React.useState(50);\n\n return (\n <>\n <Checkbox\n id=\"thumb-has-tooltip\"\n label=\"hasTooltipOverThumb\"\n isChecked={hasTooltipOverThumb}\n onChange={(_event: React.FormEvent<HTMLInputElement>, checked: boolean) => setHasTooltipOverThumb(checked)}\n style={{ marginBottom: 20 }}\n />\n <Text component={TextVariants.h3}>Slider Value is: {value}</Text>\n <Slider\n hasTooltipOverThumb={hasTooltipOverThumb}\n value={value}\n onChange={(_event: SliderOnChangeEvent, value: number) => setValue(value)}\n />\n <br />\n <Text component={TextVariants.h3}>Slider value is: {valueCustom}</Text>\n <Slider\n onChange={(_event: SliderOnChangeEvent, value: number) => setValueCustom(value)}\n value={valueCustom}\n areCustomStepsContinuous\n hasTooltipOverThumb={hasTooltipOverThumb}\n customSteps={[\n { value: 0, label: '0%' },\n { value: 100, label: '100%' }\n ]}\n />\n </>\n );\n};\n",title:"Continuous",lang:"ts"}))},"Value input":function(e){return a.createElement(l.en,m({},d,e,{code:"import React from 'react';\nimport { Slider, SliderOnChangeEvent } from '@patternfly/react-core';\n\nexport const SliderValueInput: React.FunctionComponent = () => {\n const [valueDiscrete, setValueDiscrete] = React.useState(62.5);\n const [inputValueDiscrete, setInputValueDiscrete] = React.useState(5);\n const [valuePercent, setValuePercent] = React.useState(50);\n const [inputValuePercent, setInputValuePercent] = React.useState(50);\n const [valueContinuous, setValueContinuous] = React.useState(50);\n const [inputValueContinuous, setInputValueContinuous] = React.useState(50);\n\n const stepsDiscrete = [\n { value: 0, label: '0' },\n { value: 12.5, label: '1', isLabelHidden: true },\n { value: 25, label: '2' },\n { value: 37.5, label: '3', isLabelHidden: true },\n { value: 50, label: '4' },\n { value: 62.5, label: '5', isLabelHidden: true },\n { value: 75, label: '6' },\n { value: 87.5, label: '7', isLabelHidden: true },\n { value: 100, label: '8' }\n ];\n const stepsPercent = [\n { value: 0, label: '0%' },\n { value: 25, label: '25%', isLabelHidden: true },\n { value: 50, label: '50%' },\n { value: 75, label: '75%', isLabelHidden: true },\n { value: 100, label: '100%' }\n ];\n\n const onChangeDiscrete = (\n _event: SliderOnChangeEvent,\n value: number,\n inputValue: number,\n setLocalInputValue: React.Dispatch<React.SetStateAction<number>>\n ) => {\n let newValue;\n let newInputValue;\n\n if (inputValue === undefined) {\n const step = stepsDiscrete.find((step) => step.value === value);\n newInputValue = step ? step.label : 0;\n newInputValue = Number(newInputValue);\n newValue = value;\n } else {\n const maxValue = Number(stepsDiscrete[stepsDiscrete.length - 1].label);\n if (inputValue > maxValue) {\n newValue = Number(stepsDiscrete[stepsDiscrete.length - 1].value);\n newInputValue = maxValue;\n setLocalInputValue(maxValue);\n } else {\n const minValue = Number(stepsDiscrete[0].label);\n if (inputValue < minValue) {\n newValue = Number(stepsDiscrete[0].value);\n newInputValue = minValue;\n setLocalInputValue(minValue);\n } else {\n const stepIndex = stepsDiscrete.findIndex((step) => Number(step.label) >= inputValue);\n if (Number(stepsDiscrete[stepIndex].label) === inputValue) {\n newValue = stepsDiscrete[stepIndex].value;\n newInputValue = inputValue;\n } else {\n const midpoint = (Number(stepsDiscrete[stepIndex].label) + Number(stepsDiscrete[stepIndex - 1].label)) / 2;\n if (midpoint > inputValue) {\n newValue = stepsDiscrete[stepIndex - 1].value;\n newInputValue = Number(stepsDiscrete[stepIndex - 1].label);\n } else {\n newValue = stepsDiscrete[stepIndex].value;\n newInputValue = Number(stepsDiscrete[stepIndex].label);\n }\n }\n }\n }\n }\n\n setInputValueDiscrete(newInputValue);\n setValueDiscrete(newValue);\n };\n\n const onChangePercent = (\n _event: SliderOnChangeEvent,\n value: number,\n inputValue: number,\n set
1LocalInputValue: React.Dispatch<React.SetStateAction<number>>\n ) => {\n let newValue;\n let newInputValue;\n\n if (inputValue === undefined) {\n const step = stepsPercent.find((step) => step.value === value);\n newInputValue = step ? step.label.slice(0, -1) : 0;\n newInputValue = Number(newInputValue);\n newValue = value;\n } else {\n const maxValue = Number(stepsPercent[stepsPercent.length - 1].label.slice(0, -1));\n if (inputValue > maxValue) {\n newValue = Number(stepsPercent[stepsPercent.length - 1].value);\n newInputValue = maxValue;\n setLocalInputValue(maxValue);\n } else {\n const minValue = Number(stepsPercent[0].label.slice(0, -1));\n if (inputValue < minValue) {\n newValue = minValue;\n setLocalInputValue(minValue);\n } else {\n const stepIndex = stepsPercent.findIndex((step) => Number(step.label.slice(0, -1)) >= inputValue);\n if (Number(stepsPercent[stepIndex].label.slice(0, -1)) === inputValue) {\n newValue = stepsPercent[stepIndex].value;\n newInputValue = inputValue;\n } else {\n const midpoint =\n (Number(stepsPercent[stepIndex].label.slice(0, -1)) +\n Number(stepsPercent[stepIndex - 1].label.slice(0, -1))) /\n 2;\n if (midpoint > inputValue) {\n newValue = stepsPercent[stepIndex - 1].value;\n newInputValue = Number(stepsPercent[stepIndex - 1].label.slice(0, -1));\n } else {\n newValue = stepsPercent[stepIndex].value;\n newInputValue = Number(stepsPercent[stepIndex].label.slice(0, -1));\n }\n }\n }\n }\n }\n\n setInputValuePercent(newInputValue);\n setValuePercent(newValue);\n };\n\n const onChangeContinuous = (\n _event: SliderOnChangeEvent,\n value: number,\n inputValue: number,\n setLocalInputValue: React.Dispatch<React.SetStateAction<number>>\n ) => {\n let newValue;\n if (inputValue === undefined) {\n newValue = Math.floor(value);\n } else {\n if (inputValue > 100) {\n newValue = 100;\n setLocalInputValue(100);\n } else if (inputValue < 0) {\n newValue = 0;\n setLocalInputValue(0);\n } else {\n newValue = Math.floor(inputValue);\n }\n }\n setInputValueContinuous(newValue);\n setValueContinuous(newValue);\n };\n\n return (\n <>\n <Slider\n value={valueDiscrete}\n isInputVisible\n inputValue={inputValueDiscrete}\n customSteps={stepsDiscrete}\n onChange={onChangeDiscrete}\n />\n <br />\n <Slider\n value={valuePercent}\n isInputVisible\n inputValue={inputValuePercent}\n inputLabel=\"%\"\n onChange={onChangePercent}\n customSteps={stepsPercent}\n />\n <br />\n <Slider\n value={valueContinuous}\n isInputVisible\n inputValue={inputValueContinuous}\n inputLabel=\"%\"\n onChange={onChangeContinuous}\n />\n </>\n );\n};\n",title:"Value input",lang:"ts"}))},"Thumb value input":function(e){return a.createElement(l.en,m({},d,e,{code:"import React from 'react';\nimport { Slider, SliderOnChangeEvent } from '@patternfly/react-core';\n\nexport const SliderThumbValueInput: React.FunctionComponent = () => {\n const [value, setValue] = React.useState(50);\n const [inputValue, setInputValue] = React.useState(50);\n\n const onChange = (\n _event: SliderOnChangeEvent,\n value: number,\n inputValue: number,\n setLocalInputValue: React.Dispatch<React.SetStateAction<number>>\n ) => {\n let newValue;\n if (inputValue === undefined) {\n newValue = Number(value);\n } else {\n if (inputValue > 100) {\n newValue = 100;\n setLocalInputValue(100);\n } else if (inputValue < 0) {\n newValue = 0;\n setLocalInputValue(0);\n } else {\n newValue = Math.floor(inputValue);\n }\n }\n setValue(newValue);\n setInputValue(newValue);\n };\n\n return (\n <Slider\n value={value}\n isInputVisible\n inputValue={inputValue}\n inputLabel=\"%\"\n inputPosition=\"aboveThumb\"\n onChange={onChange}\n />\n );\n};
1\n",title:"Thumb value input",lang:"ts"}))},Actions:function(e){return a.createElement(l.en,m({},d,e,{code:"import React from 'react';\nimport { Slider, SliderOnChangeEvent, Button, Text, TextVariants } from '@patternfly/react-core';\nimport MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';\nimport PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';\nimport LockIcon from '@patternfly/react-icons/dist/esm/icons/lock-icon';\nimport LockOpenIcon from '@patternfly/react-icons/dist/esm/icons/lock-open-icon';\n\nexport const SliderActions: React.FunctionComponent = () => {\n const [value1, setValue1] = React.useState(50);\n const [value2, setValue2] = React.useState(50);\n const [inputValue, setInputValue] = React.useState(50);\n const [isDisabled, setIsDisabled] = React.useState(false);\n\n const onChange1 = (_event: SliderOnChangeEvent, value: number) => {\n setValue1(Math.floor(Number(value)));\n };\n\n const onChange2 = (\n _event: SliderOnChangeEvent,\n value: number,\n inputValue: number,\n setLocalInputValue: React.Dispatch<React.SetStateAction<number>>\n ) => {\n let newValue;\n if (inputValue === undefined) {\n newValue = Math.floor(Number(value));\n } else {\n if (inputValue > 100) {\n newValue = 100;\n setLocalInputValue(100);\n } else if (inputValue < 0) {\n newValue = 0;\n setLocalInputValue(0);\n } else {\n newValue = Math.floor(inputValue);\n }\n }\n setValue2(newValue);\n setInputValue(newValue);\n };\n\n const onMinusClick = () => {\n const newValue = value1 - 1;\n if (newValue >= 0) {\n setValue1(newValue);\n }\n };\n\n const onPlusClick = () => {\n const newValue = value1 + 1;\n if (newValue <= 100) {\n setValue1(newValue);\n }\n };\n\n const buildAction = (isDisabled: boolean) => (\n <Button variant=\"plain\" aria-label={isDisabled ? 'Lock' : 'Unlock'} onClick={() => setIsDisabled(!isDisabled)}>\n {isDisabled ? <LockIcon /> : <LockOpenIcon />}\n </Button>\n );\n\n return (\n <>\n <Text component={TextVariants.h3}>Slider value is: {value1}</Text>\n <Slider\n value={value1}\n onChange={onChange1}\n leftActions={\n <Button variant=\"plain\" aria-label=\"Minus\" onClick={onMinusClick}>\n <MinusIcon />\n </Button>\n }\n rightActions={\n <Button variant=\"plain\" aria-label=\"Plus\" onClick={onPlusClick}>\n <PlusIcon />\n </Button>\n }\n />\n <br />\n <br />\n <Slider\n value={value2}\n inputValue={inputValue}\n onChange={onChange2}\n inputLabel=\"%\"\n isInputVisible\n isDisabled={isDisabled}\n rightActions={buildAction(isDisabled)}\n />\n </>\n );\n};\n",title:"Actions",lang:"ts"}))},Disabled:function(e){return a.createElement(l.en,m({},d,e,{code:"import React from 'react';\nimport { Slider, SliderOnChangeEvent, Text, TextVariants } from '@patternfly/react-core';\n\nexport const SliderDisabled: React.FunctionComponent = () => {\n const [value, setValue] = React.useState(50);\n const steps = [\n { value: 0, label: '0' },\n { value: 12.5, label: '1', isLabelHidden: true },\n { value: 25, label: '2' },\n { value: 37.5, label: '3', isLabelHidden: true },\n { value: 50, label: '4' },\n { value: 62.5, label: '5', isLabelHidden: true },\n { value: 75, label: '6' },\n { value: 87.5, label: '7', isLabelHidden: true },\n { value: 100, label: '8' }\n ];\n\n const displayValue = () => {\n const step = steps.find((step) => step.value === value);\n return step ? step.label : 0;\n };\n\n return (\n <>\n <Text component={TextVariants.h3}>Slider value is: {displayValue()}</Text>\n <Slider\n isDisabled\n value={value}\n onChange={(_event: SliderOnChangeEvent, value: number) => setValue(value)}\n customSteps={steps}\n />\n </>\n );\n};\n",title:"Disabled",lang:"ts"}))}};var v=function(){return a.createElement(a.Fragment,null,a.createElement(l.sg,{id:"examples",size:"h2",className:"ws-title ws-h2"},"Examples"),a.createElement(d.examples.Discrete),a.createElement(d.examples.Continuous),a.createElement(d.examples["Value input"]),a.createElement(d.examples["Thumb value input"]),a.createElement(d.examples.Actions),a.createElement(d.examples.Disabled),a.createElement(l.sg,{id:"types",size:"h2",className:"ws-title ws-h2"},"Types"),a.createElement(l.sg,{id:"slideronchangeevent",size:"h3",className:"ws-title ws-h3"},"SliderOnChangeEvent"),a.createElement("p",{className:"ws-p"},"The slider's ",a.createElement("code",{className:"ws-code"},"onChange")," prop accepts an ",a.createElement("code",{className:"ws-code"},"event")," parameter of the following types:"),a.createElement("ul",{className:"ws-ul"},a.createElement("li",{className:"ws-li"},a.createElement("code",{className:"ws-code"},"React.MouseEvent")),a.createElement("li",{className:"ws-li"},a.createElement("code",{className:"ws-code"},"React.KeyboardEvent")),a.createElement("li",{className:"ws-li"},a.createElement("code",{className:"ws-code"},"React.FormEvent<HTMLInputElement>")),a.createElement("li",{className:"ws-li"},a.createElement("code",{className:"ws-code"},"React.TouchEvent")),a.createElement("li",{className:"ws-li"},a.createElement("code",{className:"ws-code"},"React.FocusEvent<HTMLInputElement>"))),a.createElement("p",{className:"ws-p"},"The ",a.createElement("code",{className:"ws-code"},"SliderOnChangeEvent")," type is a union of the above event types, and can be imported and used in your code like in the following code snippet:"),a.createElement(l.en,{code:"import { Slider, SliderOnChangeEvent } from '@patternfly/react-core';\n\n<Slider onChange={(event: SliderOnChangeEvent) => {}} />",lang:"noLive"}))};v.displayName="ComponentsSliderReactDocs",v.pageData=d,n.default=v},84681:function(e,n,t){t.d(n,{Qo:function(){return l},mB:function(){return s}});var a=t(84813);const l={name:"LockIcon",height:512,width:448,svgPath:"M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z",yOffset:0,xOffset:0},s=(0,a.I)(l);n.ZP=s},95597:function(e,n,t){t.d(n,{Gl:function(){return s}
1,aA:function(){return l}});var a=t(84813);const l={name:"LockOpenIcon",height:512,width:576,svgPath:"M423.5 0C339.5.3 272 69.5 272 153.5V224H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48h-48v-71.1c0-39.6 31.7-72.5 71.3-72.9 40-.4 72.7 32.1 72.7 72v80c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24v-80C576 68 507.5-.3 423.5 0z",yOffset:0,xOffset:0},s=(0,a.I)(l);n.ZP=s}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.