graphdb-workbench
Version:
The web application for GraphDB APIs
1 lines • 3.29 kB
JavaScript
import{h}from"@stencil/core";import{TranslationService}from"../../services/translation.service";import{SubscriptionList}from"../../../../api/src/models/common";import{OntoTooltipPlacement}from"../onto-tooltip/models/onto-tooltip-placement";export class OntoToggleSwitch{constructor(){this.subscriptions=new SubscriptionList,this.checked=!1,this.toggle=()=>{this.checked=!this.checked,this.toggleChanged.emit({checked:this.checked,context:this.context})}}subscribeToLanguageChange(){this.tooltipTranslationKey&&this.subscriptions.add(TranslationService.onTranslate(this.tooltipTranslationKey,[],e=>{this.tooltipLabel=e}))}disconnectedCallback(){this.subscriptions.unsubscribeAll()}connectedCallback(){this.subscribeToLanguageChange()}render(){return h("section",{key:"d9d7433b0d5d86830bc124483a3982f255ea3851"},this.labelKey&&h("label",{key:"30e1f9c5a47b7a17f614ed2c31c191e4364f0552"},h("strong",{key:"e573b14579f77efd38636093143519451042e386"},h("translate-label",{key:"1653cbf17a0cd2f57e9011ed7bf3acc589ae9bde",labelKey:this.labelKey})," ")),h("button",{key:"3ff359d2c065db8653f12233d69934483c00b0d8",class:"toggle-switch",onClick:this.toggle,"tooltip-append-to":"parent","tooltip-content":this.tooltipLabel,"tooltip-placement":OntoTooltipPlacement.TOP},h("input",{key:"c36ab591c99d5030ab4528774bd8226ecacb855e",type:"checkbox",checked:this.checked}),h("label",{key:"86c93d3ccebd7f1324b6d39192472464580f1120"})))}static get is(){return"onto-toggle-switch"}static get originalStyleUrls(){return{$:["onto-toggle-switch.scss"]}}static get styleUrls(){return{$:["onto-toggle-switch.css"]}}static get properties(){return{checked:{type:"boolean",attribute:"checked",mutable:!0,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Determines whether the toggle switch is checked or not."},getter:!1,setter:!1,reflect:!1,defaultValue:"false"},labelKey:{type:"string",attribute:"label-key",mutable:!1,complexType:{original:"string",resolved:"string",references:{}},required:!1,optional:!0,docs:{tags:[],text:"The key used for translating the label text, if supplied."},getter:!1,setter:!1,reflect:!1},tooltipTranslationKey:{type:"string",attribute:"tooltip-translation-key",mutable:!1,complexType:{original:"string",resolved:"string",references:{}},required:!1,optional:!0,docs:{tags:[],text:"The translation label key for the tooltip message, if supplied."},getter:!1,setter:!1,reflect:!1},context:{type:"string",attribute:"context",mutable:!1,complexType:{original:"string",resolved:"string",references:{}},required:!1,optional:!0,docs:{tags:[],text:"The context for the tooltip, if supplied. This is useful if you have multiple toggle switches, to know which one\nis being toggled."},getter:!1,setter:!1,reflect:!1}}}static get states(){return{tooltipLabel:{}}}static get events(){return[{method:"toggleChanged",name:"toggleChanged",bubbles:!0,cancelable:!0,composed:!0,docs:{tags:[],text:"Event emitted when the toggle switch is clicked, carrying the new checked status."},complexType:{original:"ToggleEventPayload",resolved:"ToggleEventPayload",references:{ToggleEventPayload:{location:"import",path:"../../models/toggle-switch/toggle-event-payload",id:"src/models/toggle-switch/toggle-event-payload.ts::ToggleEventPayload"}}}}]}}