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:"61f57d75ab3c41db9ce033d883c3efd9e50ae789"},this.labelKey&&h("label",{key:"5e62380c1ea0a4b20d9294d76d3ab8d05a95cd60"},h("strong",{key:"93072a39d05f6af3e445f001f93ce5071dd20d44"},h("translate-label",{key:"4a40640f84224fbeb55e80a2a1779fe0d212fb10",labelKey:this.labelKey})," ")),h("button",{key:"d9cea7b80df3b02a719899c7a067bbdbe86e08f4",class:"toggle-switch",onClick:this.toggle,"tooltip-append-to":"parent","tooltip-content":this.tooltipLabel,"tooltip-placement":OntoTooltipPlacement.TOP},h("input",{key:"3f665f7b2b420292a2df994137277e71c908b0ed",type:"checkbox",checked:this.checked}),h("label",{key:"c15661c93f86abb868e536a3dae9a0fc89719d91"})))}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"}}}}]}}